Remove UNSAFE methods from react-json-tree (#1288)

* Remove UNSAFE method from JSONTree

* Bump peer dep

* Fix types

* Remove proptypes

* Remove unused

* shouldExpandNode => shouldExpandNodeInitially

* Cleanup

* Update usages

* Tighten types

* Create four-parrots-poke.md

* Format

* Fix inspector-monitor types

* Fix log-monitor types

* Fix rtk-query-monitor types

* Fix type

.changeset/four-parrots-poke.md

@@ -0,0 +1,9 @@
+---
+'react-json-tree': major
+---
+
+Remove UNSAFE method from react-json-tree
+
+- Replace `shouldExpandNode` with `shouldExpandNodeInitially`. This function is now only called when a node in the tree is first rendered, when before it would update the expanded state of the node if the results of calling `shouldExpandNode` changed between renders. There is no way to replicate the old behavior exactly, but the new behavior is the intended behavior for the use cases within Redux DevTools. Please open an issue if you need a way to programatically control the expanded state of nodes.
+- Bump the minimum React version from `16.3.0` to `16.8.0` so that `react-json-tree` can use hooks.
+- Tightened TypeScript prop types to use `unknown` instead of `any` where possible and make the key path array `readonly`.

packages/react-json-tree/README.md

@@ -139,7 +139,7 @@ Their full signatures are:
 
 #### More Options
 
-- `shouldExpandNode: function(keyPath, data, level)` - determines if node should be expanded (root is expanded by default)
+- `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)
 - `hideRoot: boolean` - if `true`, the root node is hidden.
 - `sortObjectKeys: boolean | function(a, b)` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.
 - `postprocessValue: function(value)` - maps `value` to a new `value`

packages/react-json-tree/examples/src/App.tsx

@@ -178,7 +178,7 @@ const App = () => (
             <span role="img" aria-label="mellow">
               😐
             </span>{' '}
-            {raw}{' '}
+            {raw as string}{' '}
             <span role="img" aria-label="mellow">
               😐
             </span>
@@ -194,7 +194,11 @@ const App = () => (
     </div>
     <p>Collapsed root node</p>
     <div>
-      <JSONTree data={data} theme={theme} shouldExpandNode={() => false} />
+      <JSONTree
+        data={data}
+        theme={theme}
+        shouldExpandNodeInitially={() => false}
+      />
     </div>
   </div>
 );

packages/react-json-tree/package.json

@@ -47,8 +47,6 @@
   "dependencies": {
     "@babel/runtime": "^7.20.6",
     "@types/lodash": "^4.14.191",
-    "@types/prop-types": "^15.7.5",
-    "prop-types": "^15.8.1",
     "react-base16-styling": "^0.9.1"
   },
   "devDependencies": {
@@ -85,7 +83,7 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
 }

packages/react-json-tree/src/ItemRange.tsx

@@ -1,59 +1,39 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
 import JSONArrow from './JSONArrow';
-import { CircularPropsPassedThroughItemRange } from './types';
+import type { CircularCache, CommonInternalProps } from './types';
 
-interface Props extends CircularPropsPassedThroughItemRange {
+interface Props extends CommonInternalProps {
-  data: any;
+  data: unknown;
   nodeType: string;
   from: number;
   to: number;
   renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;
+  circularCache: CircularCache;
+  level: number;
 }
 
-interface State {
+export default function ItemRange(props: Props) {
-  expanded: boolean;
+  const { styling, from, to, renderChildNodes, nodeType } = props;
-}
+
-
+  const [expanded, setExpanded] = useState<boolean>(false);
-export default class ItemRange extends React.Component<Props, State> {
+  const handleClick = useCallback(() => {
-  static propTypes = {
+    setExpanded(!expanded);
-    styling: PropTypes.func.isRequired,
+  }, [expanded]);
-    from: PropTypes.number.isRequired,
+
-    to: PropTypes.number.isRequired,
+  return expanded ? (
-    renderChildNodes: PropTypes.func.isRequired,
+    <div {...styling('itemRange', expanded)}>
-    nodeType: PropTypes.string.isRequired,
+      {renderChildNodes(props, from, to)}
-  };
+    </div>
-
+  ) : (
-  constructor(props: Props) {
+    <div {...styling('itemRange', expanded)} onClick={handleClick}>
-    super(props);
+      <JSONArrow
-    this.state = { expanded: false };
+        nodeType={nodeType}
-  }
+        styling={styling}
-
+        expanded={false}
-  render() {
+        onClick={handleClick}
-    const { styling, from, to, renderChildNodes, nodeType } = this.props;
+        arrowStyle="double"
-
+      />
-    return this.state.expanded ? (
+      {`${from} ... ${to}`}
-      <div {...styling('itemRange', this.state.expanded)}>
+    </div>
-        {renderChildNodes(this.props, from, to)}
+  );
-      </div>
-    ) : (
-      <div
-        {...styling('itemRange', this.state.expanded)}
-        onClick={this.handleClick}
-      >
-        <JSONArrow
-          nodeType={nodeType}
-          styling={styling}
-          expanded={false}
-          onClick={this.handleClick}
-          arrowStyle="double"
-        />
-        {`${from} ... ${to}`}
-      </div>
-    );
-  }
-
-  handleClick = () => {
-    this.setState({ expanded: !this.state.expanded });
-  };
 }

packages/react-json-tree/src/JSONArrayNode.tsx

@@ -1,35 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import JSONNestedNode from './JSONNestedNode';
-import { CircularPropsPassedThroughJSONNode } from './types';
+import type { CommonInternalProps } from './types';
 
 // Returns the "n Items" string for this node,
 // generating and caching it if it hasn't been created yet.
-function createItemString(data: any) {
+function createItemString(data: unknown) {
   return `${(data as unknown[]).length} ${
     (data as unknown[]).length !== 1 ? 'items' : 'item'
   }`;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
-  data: any;
+  data: unknown;
   nodeType: string;
 }
 
 // Configures <JSONNestedNode> to render an Array
-const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
+export default function JSONArrayNode({ data, ...props }: Props) {
-  <JSONNestedNode
+  return (
-    {...props}
+    <JSONNestedNode
-    data={data}
+      {...props}
-    nodeType="Array"
+      data={data}
-    nodeTypeIndicator="[]"
+      nodeType="Array"
-    createItemString={createItemString}
+      nodeTypeIndicator="[]"
-    expandable={data.length > 0}
+      createItemString={createItemString}
-  />
+      expandable={(data as unknown[]).length > 0}
-);
+    />
-
+  );
-JSONArrayNode.propTypes = {
+}
-  data: PropTypes.array,
-};
-
-export default JSONArrayNode;

packages/react-json-tree/src/JSONArrow.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import type { StylingFunction } from 'react-base16-styling';
-import { StylingFunction } from 'react-base16-styling';
 
 interface Props {
   styling: StylingFunction;
@@ -10,33 +9,21 @@ interface Props {
   onClick: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const JSONArrow: React.FunctionComponent<Props> = ({
+export default function JSONArrow({
   styling,
-  arrowStyle,
+  arrowStyle = 'single',
   expanded,
   nodeType,
   onClick,
-}) => (
+}: Props) {
-  <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
+  return (
-    <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
+    <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
-      {'\u25B6'}
+      <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
-      {arrowStyle === 'double' && (
+        {'\u25B6'}
-        <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
+        {arrowStyle === 'double' && (
-      )}
+          <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
+        )}
+      </div>
     </div>
-  </div>
+  );
-);
+}
-
-JSONArrow.propTypes = {
-  styling: PropTypes.func.isRequired,
-  arrowStyle: PropTypes.oneOf(['single', 'double']),
-  expanded: PropTypes.bool.isRequired,
-  nodeType: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-JSONArrow.defaultProps = {
-  arrowStyle: 'single',
-};
-
-export default JSONArrow;

packages/react-json-tree/src/JSONIterableNode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import JSONNestedNode from './JSONNestedNode';
-import { CircularPropsPassedThroughJSONNode } from './types';
+import type { CommonInternalProps } from './types';
 
 // Returns the "n Items" string for this node,
 // generating and caching it if it hasn't been created yet.
@@ -22,21 +22,20 @@ function createItemString(data: any, limit: number) {
   return `${hasMore ? '>' : ''}${count} ${count !== 1 ? 'entries' : 'entry'}`;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
-  data: any;
+  data: unknown;
   nodeType: string;
 }
 
 // Configures <JSONNestedNode> to render an iterable
-const JSONIterableNode: React.FunctionComponent<Props> = ({ ...props }) => {
+export default function JSONIterableNode(props: Props) {
   return (
     <JSONNestedNode
       {...props}
       nodeType="Iterable"
       nodeTypeIndicator="()"
       createItemString={createItemString}
+      expandable
     />
   );
-};
+}
-
-export default JSONIterableNode;

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -1,22 +1,19 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
 import JSONArrow from './JSONArrow';
 import getCollectionEntries from './getCollectionEntries';
 import JSONNode from './JSONNode';
 import ItemRange from './ItemRange';
-import {
+import type { CircularCache, CommonInternalProps } from './types';
-  CircularPropsPassedThroughJSONNestedNode,
-  CircularPropsPassedThroughRenderChildNodes,
-} from './types';
 
 /**
  * Renders nested values (eg. objects, arrays, lists, etc.)
  */
 
-export interface RenderChildNodesProps
+export interface RenderChildNodesProps extends CommonInternalProps {
-  extends CircularPropsPassedThroughRenderChildNodes {
+  data: unknown;
-  data: any;
   nodeType: string;
+  circularCache: CircularCache;
+  level: number;
 }
 
 interface Range {
@@ -26,7 +23,7 @@ interface Range {
 
 interface Entry {
   key: string | number;
-  value: any;
+  value: unknown;
 }
 
 function isRange(rangeOrEntry: Range | Entry): rangeOrEntry is Range {
@@ -89,152 +86,92 @@ function renderChildNodes(
   return childNodes;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNestedNode {
+interface Props extends CommonInternalProps {
-  data: any;
+  data: unknown;
   nodeType: string;
   nodeTypeIndicator: string;
-  createItemString: (data: any, collectionLimit: number) => string;
+  createItemString: (data: unknown, collectionLimit: number) => string;
   expandable: boolean;
 }
 
-interface State {
+export default function JSONNestedNode(props: Props) {
-  expanded: boolean;
+  const {
-}
+    circularCache = [],
+    collectionLimit,
+    createItemString,
+    data,
+    expandable,
+    getItemString,
+    hideRoot,
+    isCircular,
+    keyPath,
+    labelRenderer,
+    level = 0,
+    nodeType,
+    nodeTypeIndicator,
+    shouldExpandNodeInitially,
+    styling,
+  } = props;
 
-function getStateFromProps(props: Props) {
+  const [expanded, setExpanded] = useState<boolean>(
-  // calculate individual node expansion if necessary
+    // calculate individual node expansion if necessary
-  const expanded = !props.isCircular
+    isCircular ? false : shouldExpandNodeInitially(keyPath, data, level)
-    ? props.shouldExpandNode(props.keyPath, props.data, props.level)
+  );
-    : false;
-  return {
-    expanded,
-  };
-}
 
-export default class JSONNestedNode extends React.Component<Props, State> {
+  const handleClick = useCallback(() => {
-  static propTypes = {
+    if (expandable) setExpanded(!expanded);
-    getItemString: PropTypes.func.isRequired,
+  }, [expandable, expanded]);
-    nodeTypeIndicator: PropTypes.any,
-    nodeType: PropTypes.string.isRequired,
-    data: PropTypes.any,
-    hideRoot: PropTypes.bool.isRequired,
-    createItemString: PropTypes.func.isRequired,
-    styling: PropTypes.func.isRequired,
-    collectionLimit: PropTypes.number,
-    keyPath: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    ).isRequired,
-    labelRenderer: PropTypes.func.isRequired,
-    shouldExpandNode: PropTypes.func,
-    level: PropTypes.number.isRequired,
-    sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-    isCircular: PropTypes.bool,
-    expandable: PropTypes.bool,
-  };
 
-  static defaultProps = {
+  const renderedChildren =
-    data: [],
+    expanded || (hideRoot && level === 0)
-    circularCache: [],
+      ? renderChildNodes({ ...props, circularCache, level: level + 1 })
-    level: 0,
+      : null;
-    expandable: true,
-  };
 
-  constructor(props: Props) {
+  const itemType = (
-    super(props);
+    <span {...styling('nestedNodeItemType', expanded)}>
-    this.state = getStateFromProps(props);
+      {nodeTypeIndicator}
-  }
+    </span>
+  );
+  const renderedItemString = getItemString(
+    nodeType,
+    data,
+    itemType,
+    createItemString(data, collectionLimit),
+    keyPath
+  );
+  const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
 
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+  return hideRoot ? (
-    const nextState = getStateFromProps(nextProps);
+    <li {...styling('rootNode', ...stylingArgs)}>
-    if (getStateFromProps(this.props).expanded !== nextState.expanded) {
+      <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-      this.setState(nextState);
+        {renderedChildren}
-    }
+      </ul>
-  }
+    </li>
-
+  ) : (
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    <li {...styling('nestedNode', ...stylingArgs)}>
-    return (
+      {expandable && (
-      !!Object.keys(nextProps).find(
+        <JSONArrow
-        (key) =>
+          styling={styling}
-          key !== 'circularCache' &&
+          nodeType={nodeType}
-          (key === 'keyPath'
+          expanded={expanded}
-            ? nextProps[key].join('/') !== this.props[key].join('/')
+          onClick={handleClick}
-            : nextProps[key as keyof Props] !== this.props[key as keyof Props])
+        />
-      ) || nextState.expanded !== this.state.expanded
+      )}
-    );
+      <label
-  }
+        {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-
+        onClick={handleClick}
-  render() {
+      >
-    const {
+        {labelRenderer(...stylingArgs)}
-      getItemString,
+      </label>
-      nodeTypeIndicator,
+      <span
-      nodeType,
+        {...styling('nestedNodeItemString', ...stylingArgs)}
-      data,
+        onClick={handleClick}
-      hideRoot,
+      >
-      createItemString,
+        {renderedItemString}
-      styling,
-      collectionLimit,
-      keyPath,
-      labelRenderer,
-      expandable,
-    } = this.props;
-    const { expanded } = this.state;
-    const renderedChildren =
-      expanded || (hideRoot && this.props.level === 0)
-        ? renderChildNodes({ ...this.props, level: this.props.level + 1 })
-        : null;
-
-    const itemType = (
-      <span {...styling('nestedNodeItemType', expanded)}>
-        {nodeTypeIndicator}
       </span>
-    );
+      <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
-    const renderedItemString = getItemString(
+        {renderedChildren}
-      nodeType,
+      </ul>
-      data,
+    </li>
-      itemType,
+  );
-      createItemString(data, collectionLimit),
-      keyPath
-    );
-    const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
-
-    return hideRoot ? (
-      <li {...styling('rootNode', ...stylingArgs)}>
-        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    ) : (
-      <li {...styling('nestedNode', ...stylingArgs)}>
-        {expandable && (
-          <JSONArrow
-            styling={styling}
-            nodeType={nodeType}
-            expanded={expanded}
-            onClick={this.handleClick}
-          />
-        )}
-        <label
-          {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-          onClick={this.handleClick}
-        >
-          {labelRenderer(...stylingArgs)}
-        </label>
-        <span
-          {...styling('nestedNodeItemString', ...stylingArgs)}
-          onClick={this.handleClick}
-        >
-          {renderedItemString}
-        </span>
-        <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    );
-  }
-
-  handleClick = () => {
-    if (this.props.expandable) {
-      this.setState({ expanded: !this.state.expanded });
-    }
-  };
 }

packages/react-json-tree/src/JSONNode.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import objType from './objType';
 import JSONObjectNode from './JSONObjectNode';
 import JSONArrayNode from './JSONArrayNode';
 import JSONIterableNode from './JSONIterableNode';
 import JSONValueNode from './JSONValueNode';
-import { CircularPropsPassedThroughJSONNode } from './types';
+import type { CommonInternalProps } from './types';
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
-  keyPath: (string | number)[];
+  value: unknown;
-  value: any;
-  isCustomNode: (value: any) => boolean;
 }
 
-const JSONNode: React.FunctionComponent<Props> = ({
+export default function JSONNode({
   getItemString,
   keyPath,
   labelRenderer,
@@ -22,7 +19,7 @@ const JSONNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   isCustomNode,
   ...rest
-}) => {
+}: Props) {
   const nodeType = isCustomNode(value) ? 'Custom' : objType(value);
 
   const simpleNodeProps = {
@@ -102,18 +99,4 @@ const JSONNode: React.FunctionComponent<Props> = ({
         />
       );
   }
-};
+}
-
-JSONNode.propTypes = {
-  getItemString: PropTypes.func.isRequired,
-  keyPath: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-  ).isRequired,
-  labelRenderer: PropTypes.func.isRequired,
-  styling: PropTypes.func.isRequired,
-  value: PropTypes.any,
-  valueRenderer: PropTypes.func.isRequired,
-  isCustomNode: PropTypes.func.isRequired,
-};
-
-export default JSONNode;

packages/react-json-tree/src/JSONObjectNode.tsx

@@ -1,35 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import JSONNestedNode from './JSONNestedNode';
-import { CircularPropsPassedThroughJSONNode } from './types';
+import type { CommonInternalProps } from './types';
 
 // Returns the "n Items" string for this node,
 // generating and caching it if it hasn't been created yet.
-function createItemString(data: any) {
+function createItemString(data: unknown) {
   const len = Object.getOwnPropertyNames(data).length;
   return `${len} ${len !== 1 ? 'keys' : 'key'}`;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
-  data: any;
+  data: unknown;
   nodeType: string;
 }
 
 // Configures <JSONNestedNode> to render an Object
-const JSONObjectNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
+export default function JSONObjectNode({ data, ...props }: Props) {
-  <JSONNestedNode
+  return (
-    {...props}
+    <JSONNestedNode
-    data={data}
+      {...props}
-    nodeType="Object"
+      data={data}
-    nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
+      nodeType="Object"
-    createItemString={createItemString}
+      nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
-    expandable={Object.getOwnPropertyNames(data).length > 0}
+      createItemString={createItemString}
-  />
+      expandable={Object.getOwnPropertyNames(data).length > 0}
-);
+    />
-
+  );
-JSONObjectNode.propTypes = {
+}
-  data: PropTypes.object,
-  nodeType: PropTypes.string.isRequired,
-};
-
-export default JSONObjectNode;

packages/react-json-tree/src/JSONValueNode.tsx

@@ -1,18 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import type {
-import { JSONValueNodeCircularPropsProvidedByJSONNode } from './types';
+  GetItemString,
+  Key,
+  KeyPath,
+  LabelRenderer,
+  Styling,
+  ValueRenderer,
+} from './types';
 
 /**
  * Renders simple values (eg. strings, numbers, booleans, etc)
  */
 
-interface Props extends JSONValueNodeCircularPropsProvidedByJSONNode {
+interface Props {
+  getItemString: GetItemString;
+  key: Key;
+  keyPath: KeyPath;
+  labelRenderer: LabelRenderer;
   nodeType: string;
-  value: any;
+  styling: Styling;
-  valueGetter?: (value: any) => any;
+  value: unknown;
+  valueRenderer: ValueRenderer;
+  valueGetter?: (value: any) => unknown;
 }
 
-const JSONValueNode: React.FunctionComponent<Props> = ({
+export default function JSONValueNode({
   nodeType,
   styling,
   labelRenderer,
@@ -20,27 +32,15 @@ const JSONValueNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   value,
   valueGetter = (value) => value,
-}) => (
+}: Props) {
-  <li {...styling('value', nodeType, keyPath)}>
+  return (
-    <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+    <li {...styling('value', nodeType, keyPath)}>
-      {labelRenderer(keyPath, nodeType, false, false)}
+      <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
-    </label>
+        {labelRenderer(keyPath, nodeType, false, false)}
-    <span {...styling('valueText', nodeType, keyPath)}>
+      </label>
-      {valueRenderer(valueGetter(value), value, ...keyPath)}
+      <span {...styling('valueText', nodeType, keyPath)}>
-    </span>
+        {valueRenderer(valueGetter(value), value, ...keyPath)}
-  </li>
+      </span>
-);
+    </li>
-
+  );
-JSONValueNode.propTypes = {
+}
-  nodeType: PropTypes.string.isRequired,
-  styling: PropTypes.func.isRequired,
-  labelRenderer: PropTypes.func.isRequired,
-  keyPath: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-  ).isRequired,
-  valueRenderer: PropTypes.func.isRequired,
-  value: PropTypes.any,
-  valueGetter: PropTypes.func,
-};
-
-export default JSONValueNode;

packages/react-json-tree/src/createStylingFromTheme.ts

@@ -1,11 +1,12 @@
 import type { CurriedFunction1 } from 'lodash';
-import {
+import { createStyling } from 'react-base16-styling';
+import type {
   Base16Theme,
-  createStyling,
   StylingConfig,
+  StylingFunction,
+  Theme,
 } from 'react-base16-styling';
 import solarized from './themes/solarized';
-import { StylingFunction, Theme } from 'react-base16-styling/src';
 
 const colorMap = (theme: Base16Theme) => ({
   BACKGROUND_COLOR: theme.base00,

packages/react-json-tree/src/getCollectionEntries.ts

@@ -1,4 +1,6 @@
-function getLength(type: string, collection: any) {
+import type { SortObjectKeys } from './types';
+
+function getLength(type: string, collection: unknown) {
   if (type === 'Object') {
     // eslint-disable-next-line @typescript-eslint/ban-types
     return Object.keys(collection as {}).length;
@@ -9,17 +11,17 @@ function getLength(type: string, collection: any) {
   return Infinity;
 }
 
-function isIterableMap(collection: any) {
+function isIterableMap(collection: unknown) {
-  return typeof (collection as Map<any, any>).set === 'function';
+  return typeof (collection as Map<unknown, unknown>).set === 'function';
 }
 
 function getEntries(
   type: string,
   collection: any,
-  sortObjectKeys?: ((a: any, b: any) => number) | boolean | undefined,
+  sortObjectKeys: SortObjectKeys,
   from = 0,
   to = Infinity
-): { entries: { key: string | number; value: any }[]; hasMore?: boolean } {
+): { entries: { key: string | number; value: unknown }[]; hasMore?: boolean } {
   let res;
 
   if (type === 'Object') {
@@ -95,8 +97,8 @@ function getRanges(from: number, to: number, limit: number) {
 
 export default function getCollectionEntries(
   type: string,
-  collection: any,
+  collection: unknown,
-  sortObjectKeys: ((a: any, b: any) => number) | boolean | undefined,
+  sortObjectKeys: SortObjectKeys,
   limit: number,
   from = 0,
   to = Infinity

packages/react-json-tree/src/index.tsx

@@ -3,177 +3,87 @@
 // Dave Vedder <veddermatic@gmail.com> http://www.eskimospy.com/
 // port by Daniele Zannotti http://www.github.com/dzannotti <dzannotti@me.com>
 
-import React from 'react';
+import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import JSONNode from './JSONNode';
 import createStylingFromTheme from './createStylingFromTheme';
 import { invertTheme } from 'react-base16-styling';
+import type { StylingValue, Theme } from 'react-base16-styling';
 import type {
-  StylingConfig,
+  CommonExternalProps,
-  StylingFunction,
+  GetItemString,
-  StylingValue,
+  IsCustomNode,
-  Theme,
+  LabelRenderer,
-} from 'react-base16-styling';
+  ShouldExpandNodeInitially,
-import { CircularPropsPassedThroughJSONTree } from './types';
+} from './types';
 
-interface Props extends CircularPropsPassedThroughJSONTree {
+interface Props extends Partial<CommonExternalProps> {
-  data: any;
+  data: unknown;
   theme?: Theme;
-  invertTheme: boolean;
+  invertTheme?: boolean;
-}
-
-interface State {
-  styling: StylingFunction;
 }
 
 const identity = (value: any) => value;
-const expandRootNode = (
+const expandRootNode: ShouldExpandNodeInitially = (keyPath, data, level) =>
-  keyPath: (string | number)[],
+  level === 0;
-  data: any,
+const defaultItemString: GetItemString = (type, data, itemType, itemString) => (
-  level: number
-) => level === 0;
-const defaultItemString = (
-  type: string,
-  data: any,
-  itemType: React.ReactNode,
-  itemString: string
-) => (
   <span>
     {itemType} {itemString}
   </span>
 );
-const defaultLabelRenderer = ([label]: (string | number)[]) => (
+const defaultLabelRenderer: LabelRenderer = ([label]) => <span>{label}:</span>;
-  <span>{label}:</span>
+const noCustomNode: IsCustomNode = () => false;
-);
-const noCustomNode = () => false;
 
-function checkLegacyTheming(theme: Theme | undefined, props: Props) {
+export function JSONTree({
-  const deprecatedStylingMethodsMap = {
+  data: value,
-    getArrowStyle: 'arrow',
+  theme,
-    getListStyle: 'nestedNodeChildren',
+  invertTheme: shouldInvertTheme,
-    getItemStringStyle: 'nestedNodeItemString',
+  keyPath = ['root'],
-    getLabelStyle: 'label',
+  labelRenderer = defaultLabelRenderer,
-    getValueStyle: 'valueText',
+  valueRenderer = identity,
-  };
+  shouldExpandNodeInitially = expandRootNode,
+  hideRoot = false,
+  getItemString = defaultItemString,
+  postprocessValue = identity,
+  isCustomNode = noCustomNode,
+  collectionLimit = 50,
+  sortObjectKeys = false,
+}: Props) {
+  const styling = useMemo(
+    () =>
+      createStylingFromTheme(shouldInvertTheme ? invertTheme(theme) : theme),
+    [theme, shouldInvertTheme]
+  );
 
-  const deprecatedStylingMethods = Object.keys(
+  return (
-    deprecatedStylingMethodsMap
+    <ul {...styling('tree')}>
-  ).filter((name) => props[name as keyof Props]);
+      <JSONNode
-
+        keyPath={hideRoot ? [] : keyPath}
-  if (deprecatedStylingMethods.length > 0) {
+        value={postprocessValue(value)}
-    if (typeof theme === 'string') {
+        isCustomNode={isCustomNode}
-      theme = {
+        styling={styling}
-        extend: theme,
+        labelRenderer={labelRenderer}
-      };
+        valueRenderer={valueRenderer}
-    } else {
+        shouldExpandNodeInitially={shouldExpandNodeInitially}
-      theme = { ...theme };
+        hideRoot={hideRoot}
-    }
+        getItemString={getItemString}
-
+        postprocessValue={postprocessValue}
-    deprecatedStylingMethods.forEach((name) => {
+        collectionLimit={collectionLimit}
-      // eslint-disable-next-line no-console
+        sortObjectKeys={sortObjectKeys}
-      console.error(
+      />
-        `Styling method "${name}" is deprecated, use "theme" property instead`
+    </ul>
-      );
+  );
-
-      (theme as StylingConfig)[
-        deprecatedStylingMethodsMap[
-          name as keyof typeof deprecatedStylingMethodsMap
-        ]
-      ] = ({ style }, ...args) => ({
-        style: {
-          ...style,
-          ...props[name as keyof Props](...args),
-        },
-      });
-    });
-  }
-
-  return theme;
 }
 
-function getStateFromProps(props: Props) {
+export type {
-  let theme = checkLegacyTheming(props.theme, props);
+  Key,
-  if (props.invertTheme) {
+  KeyPath,
-    theme = invertTheme(theme);
+  GetItemString,
-  }
+  LabelRenderer,
-
+  ValueRenderer,
-  return {
+  ShouldExpandNodeInitially,
-    styling: createStylingFromTheme(theme),
+  PostprocessValue,
-  };
+  IsCustomNode,
-}
+  SortObjectKeys,
-
+  Styling,
-export class JSONTree extends React.Component<Props, State> {
+} from './types';
-  static propTypes = {
+export type { StylingValue };
-    data: PropTypes.any,
-    hideRoot: PropTypes.bool,
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    invertTheme: PropTypes.bool,
-    keyPath: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    ),
-    postprocessValue: PropTypes.func,
-    sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  };
-
-  static defaultProps = {
-    shouldExpandNode: expandRootNode,
-    hideRoot: false,
-    keyPath: ['root'],
-    getItemString: defaultItemString,
-    labelRenderer: defaultLabelRenderer,
-    valueRenderer: identity,
-    postprocessValue: identity,
-    isCustomNode: noCustomNode,
-    collectionLimit: 50,
-    invertTheme: true,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = getStateFromProps(props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (
-      ['theme', 'invertTheme'].find(
-        (k) => nextProps[k as keyof Props] !== this.props[k as keyof Props]
-      )
-    ) {
-      this.setState(getStateFromProps(nextProps));
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props) {
-    return !!Object.keys(nextProps).find((k) =>
-      k === 'keyPath'
-        ? nextProps[k].join('/') !== this.props[k].join('/')
-        : nextProps[k as keyof Props] !== this.props[k as keyof Props]
-    );
-  }
-
-  render() {
-    const {
-      data: value,
-      keyPath,
-      postprocessValue,
-      hideRoot,
-      theme, // eslint-disable-line no-unused-vars
-      invertTheme: _, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props;
-
-    const { styling } = this.state;
-
-    return (
-      <ul {...styling('tree')}>
-        <JSONNode
-          {...{ postprocessValue, hideRoot, styling, ...rest }}
-          keyPath={hideRoot ? [] : keyPath}
-          value={postprocessValue(value)}
-        />
-      </ul>
-    );
-  }
-}
-
-export { StylingValue };

packages/react-json-tree/src/types.ts

@@ -1,81 +1,63 @@
 import React from 'react';
 import { StylingFunction } from 'react-base16-styling';
 
-interface SharedCircularPropsPassedThroughJSONTree {
+export type Key = string | number;
-  keyPath: (string | number)[];
-  labelRenderer: (
-    keyPath: (string | number)[],
-    nodeType: string,
-    expanded: boolean,
-    expandable: boolean
-  ) => React.ReactNode;
-}
-interface SharedCircularPropsProvidedByJSONTree
-  extends SharedCircularPropsPassedThroughJSONTree {
-  styling: StylingFunction;
-}
-interface JSONValueNodeCircularPropsPassedThroughJSONTree {
-  valueRenderer: (
-    valueAsString: any,
-    value: any,
-    ...keyPath: (string | number)[]
-  ) => React.ReactNode;
-}
-export type JSONValueNodeCircularPropsProvidedByJSONNode =
-  SharedCircularPropsProvidedByJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree;
 
-interface JSONNestedNodeCircularPropsPassedThroughJSONTree {
+export type KeyPath = readonly (string | number)[];
-  shouldExpandNode: (
+
-    keyPath: (string | number)[],
+export type GetItemString = (
-    data: any,
+  nodeType: string,
-    level: number
+  data: unknown,
-  ) => boolean;
+  itemType: React.ReactNode,
+  itemString: string,
+  keyPath: KeyPath
+) => React.ReactNode;
+
+export type LabelRenderer = (
+  keyPath: KeyPath,
+  nodeType: string,
+  expanded: boolean,
+  expandable: boolean
+) => React.ReactNode;
+
+export type ValueRenderer = (
+  valueAsString: unknown,
+  value: unknown,
+  ...keyPath: KeyPath
+) => React.ReactNode;
+
+export type ShouldExpandNodeInitially = (
+  keyPath: KeyPath,
+  data: unknown,
+  level: number
+) => boolean;
+
+export type PostprocessValue = (value: unknown) => unknown;
+
+export type IsCustomNode = (value: unknown) => boolean;
+
+export type SortObjectKeys = ((a: unknown, b: unknown) => number) | boolean;
+
+export type Styling = StylingFunction;
+
+export type CircularCache = unknown[];
+
+export interface CommonExternalProps {
+  keyPath: KeyPath;
+  labelRenderer: LabelRenderer;
+  valueRenderer: ValueRenderer;
+  shouldExpandNodeInitially: ShouldExpandNodeInitially;
   hideRoot: boolean;
-  getItemString: (
+  getItemString: GetItemString;
-    nodeType: string,
+  postprocessValue: PostprocessValue;
-    data: any,
+  isCustomNode: IsCustomNode;
-    itemType: React.ReactNode,
-    itemString: string,
-    keyPath: (string | number)[]
-  ) => React.ReactNode;
-  postprocessValue: (value: any) => any;
-  isCustomNode: (value: any) => boolean;
   collectionLimit: number;
-  sortObjectKeys?: ((a: any, b: any) => number) | boolean;
+  sortObjectKeys: SortObjectKeys;
 }
-export type CircularPropsPassedThroughJSONTree =
-  SharedCircularPropsPassedThroughJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree &
-    JSONNestedNodeCircularPropsPassedThroughJSONTree;
 
-interface JSONNestedNodeCircularPropsPassedThroughJSONNode
+export interface CommonInternalProps extends CommonExternalProps {
-  extends JSONNestedNodeCircularPropsPassedThroughJSONTree {
+  styling: StylingFunction;
-  circularCache?: any[];
+  circularCache?: CircularCache;
-  isCircular?: boolean;
   level?: number;
+  isCircular?: boolean;
 }
-export type CircularPropsPassedThroughJSONNode =
-  SharedCircularPropsProvidedByJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree &
-    JSONNestedNodeCircularPropsPassedThroughJSONNode;
-
-export interface JSONNestedNodeCircularPropsPassedThroughJSONNestedNode
-  extends JSONNestedNodeCircularPropsPassedThroughJSONNode {
-  circularCache: any[];
-  level: number;
-}
-export type CircularPropsPassedThroughJSONNestedNode =
-  SharedCircularPropsProvidedByJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree &
-    JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;
-
-export type CircularPropsPassedThroughRenderChildNodes =
-  SharedCircularPropsProvidedByJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree &
-    JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;
-
-export type CircularPropsPassedThroughItemRange =
-  SharedCircularPropsProvidedByJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree &
-    JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;

packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Base16Theme } from 'redux-devtools-themes';
 import { Action } from 'redux';
 import type { StylingFunction } from 'react-base16-styling';
+import type { LabelRenderer } from 'react-json-tree';
 import { PerformAction } from '@redux-devtools/core';
 import { Delta } from 'jsondiffpatch';
 import { DEFAULT_STATE, DevtoolsInspectorState } from './redux';
@@ -11,12 +12,7 @@ import StateTab from './tabs/StateTab';
 import ActionTab from './tabs/ActionTab';
 
 export interface TabComponentProps<S, A extends Action<unknown>> {
-  labelRenderer: (
+  labelRenderer: LabelRenderer;
-    keyPath: (string | number)[],
-    nodeType: string,
-    expanded: boolean,
-    expandable: boolean
-  ) => React.ReactNode;
   styling: StylingFunction;
   computedStates: { state: S; error?: string }[];
   actions: { [actionId: number]: PerformAction<A> };
@@ -152,11 +148,7 @@ class ActionPreview<S, A extends Action<unknown>> extends Component<
     );
   }
 
-  labelRenderer = (
+  labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => {
-    [key, ...rest]: (string | number)[],
-    nodeType: string,
-    expanded: boolean
-  ) => {
     const { styling, onInspectPath, inspectedPath } = this.props;
 
     return (

packages/redux-devtools-inspector-monitor/src/index.ts

@@ -1,4 +1,5 @@
 export type { StylingFunction } from 'react-base16-styling';
+export type { LabelRenderer } from 'react-json-tree';
 export { default as InspectorMonitor } from './DevtoolsInspector';
 export type { Tab, TabComponentProps } from './ActionPreview';
 export type { DevtoolsInspectorState } from './redux';

packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { JSONTree } from 'react-json-tree';
+import type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree';
 import { stringify } from 'javascript-stringify';
 import { Delta } from 'jsondiffpatch';
 import { StylingFunction } from 'react-base16-styling';
@@ -22,11 +23,8 @@ function stringifyAndShrink(val: any, isWideLayout?: boolean) {
   return str.length > 22 ? `${str.substr(0, 15)}…${str.substr(-5)}` : str;
 }
 
-const expandFirstLevel = (
+const expandFirstLevel: ShouldExpandNodeInitially = (keyName, data, level) =>
-  keyName: (string | number)[],
+  level <= 1;
-  data: any,
-  level: number
-) => level <= 1;
 
 function prepareDelta(value: any) {
   if (value && value._t === 'a') {
@@ -53,12 +51,7 @@ interface Props {
   styling: StylingFunction;
   base16Theme: Base16Theme;
   invertTheme: boolean;
-  labelRenderer: (
+  labelRenderer: LabelRenderer;
-    keyPath: (string | number)[],
-    nodeType: string,
-    expanded: boolean,
-    expandable: boolean
-  ) => React.ReactNode;
   isWideLayout: boolean;
   dataTypeKey: string | symbol | undefined;
 }
@@ -104,7 +97,7 @@ export default class JSONDiff extends Component<Props, State> {
         valueRenderer={this.valueRenderer}
         postprocessValue={prepareDelta}
         isCustomNode={Array.isArray}
-        shouldExpandNode={expandFirstLevel}
+        shouldExpandNodeInitially={expandFirstLevel}
         hideRoot
       />
     );

packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, MouseEventHandler, PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { JSONTree, StylingValue } from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
+import type { ShouldExpandNodeInitially, StylingValue } from 'react-json-tree';
 import { Base16Theme } from 'redux-devtools-themes';
 import { Action } from 'redux';
 import LogMonitorEntryAction from './LogMonitorEntryAction';
@@ -115,7 +116,7 @@ export default class LogMonitorEntry<
             data={data}
             invertTheme={false}
             keyPath={['state']}
-            shouldExpandNode={this.shouldExpandNode}
+            shouldExpandNodeInitially={this.shouldExpandNodeInitially}
           />
         );
       } catch (err) {
@@ -149,10 +150,10 @@ export default class LogMonitorEntry<
     }
   };
 
-  shouldExpandNode = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    data: any,
+    data,
-    level: number
+    level
   ) => {
     return this.props.expandStateRoot && level === 0;
   };

packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx

@@ -1,5 +1,6 @@
 import React, { Component, CSSProperties, MouseEventHandler } from 'react';
 import { JSONTree } from 'react-json-tree';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { Base16Theme } from 'redux-devtools-themes';
 import { Action } from 'redux';
 
@@ -42,7 +43,7 @@ export default class LogMonitorAction<
             invertTheme={false}
             keyPath={['action']}
             data={payload}
-            shouldExpandNode={this.shouldExpandNode}
+            shouldExpandNodeInitially={this.shouldExpandNodeInitially}
           />
         ) : (
           ''
@@ -51,10 +52,10 @@ export default class LogMonitorAction<
     );
   }
 
-  shouldExpandNode = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    data: any,
+    data,
-    level: number
+    level
   ) => {
     return this.props.expandActionRoot && level === 0;
   };

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx

@@ -1,6 +1,7 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ReactNode, PureComponent } from 'react';
 import { Action, AnyAction } from 'redux';
+import type { KeyPath, ShouldExpandNodeInitially } from 'react-json-tree';
 import { QueryPreviewTabs } from '../types';
 import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { emptyRecord, identity } from '../utils/object';
@@ -43,7 +44,7 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
     return output;
   });
 
-  isLastActionNode = (keyPath: (string | number)[], layer: number): boolean => {
+  isLastActionNode = (keyPath: KeyPath, layer: number): boolean => {
     if (layer >= 1) {
       const len = this.props.actionsOfQuery.length;
       const actionKey = keyPath[keyPath.length - 1];
@@ -58,11 +59,11 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
     return false;
   };
 
-  shouldExpandNode = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     if (layer === 1) {
       return this.isLastActionNode(keyPath, layer);
     }
@@ -85,7 +86,7 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
         rootProps={rootProps}
         data={this.selectFormattedActions(actionsOfQuery)}
         isWideLayout={isWideLayout}
-        shouldExpandNode={this.shouldExpandNode}
+        shouldExpandNodeInitially={this.shouldExpandNodeInitially}
       />
     );
   }

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, PureComponent } from 'react';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { TreeView, TreeViewProps } from './TreeView';
@@ -17,11 +18,11 @@ const rootProps: TreeViewProps['rootProps'] = {
 };
 
 export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
-  shouldExpandApiStateNode = (
+  shouldExpandApiStateNode: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     const lastKey = keyPath[keyPath.length - 1];
 
     return layer <= 1 && lastKey !== 'config';
@@ -45,7 +46,7 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
             <TreeView
               before={<h3>State</h3>}
               data={apiState}
-              shouldExpandNode={this.shouldExpandApiStateNode}
+              shouldExpandNodeInitially={this.shouldExpandApiStateNode}
               isWideLayout={isWideLayout}
             />
             {apiStats && (

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, PureComponent } from 'react';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { QueryPreviewTabs, RtkResourceInfo } from '../types';
 import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { TreeView, TreeViewProps } from './TreeView';
@@ -15,11 +16,11 @@ const rootProps: TreeViewProps['rootProps'] = {
 };
 
 export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
-  shouldExpandNode = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     return layer <= 1;
   };
 
@@ -31,7 +32,7 @@ export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
         rootProps={rootProps}
         data={data}
         isWideLayout={isWideLayout}
-        shouldExpandNode={this.shouldExpandNode}
+        shouldExpandNodeInitially={this.shouldExpandNodeInitially}
       />
     );
   }

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx

@@ -1,6 +1,7 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import { QueryStatus } from '@reduxjs/toolkit/dist/query';
 import React, { ReactNode, PureComponent } from 'react';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { QueryPreviewTabs, RtkResourceInfo, RTKStatusFlags } from '../types';
 import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { formatMs } from '../utils/formatters';
@@ -35,11 +36,11 @@ export interface QueryPreviewInfoProps {
   isWideLayout: boolean;
 }
 export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
-  shouldExpandNode = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     const lastKey = keyPath[keyPath.length - 1];
 
     return layer <= 1 && lastKey !== 'query' && lastKey !== 'mutation';
@@ -107,7 +108,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
         rootProps={rootProps}
         data={formattedQuery}
         isWideLayout={isWideLayout}
-        shouldExpandNode={this.shouldExpandNode}
+        shouldExpandNodeInitially={this.shouldExpandNodeInitially}
       />
     );
   }

packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx

@@ -14,7 +14,7 @@ export interface TreeViewProps
   extends Partial<
     Pick<
       ComponentProps<typeof JSONTree>,
-      'keyPath' | 'shouldExpandNode' | 'hideRoot'
+      'keyPath' | 'shouldExpandNodeInitially' | 'hideRoot'
     >
   > {
   data: unknown;
@@ -30,7 +30,7 @@ export interface TreeViewProps
 export class TreeView extends React.PureComponent<TreeViewProps> {
   static defaultProps = {
     hideRoot: true,
-    shouldExpandNode: (
+    shouldExpandNodeInitially: (
       keyPath: (string | number)[],
       value: unknown,
       layer: number
@@ -81,7 +81,7 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
       after,
       children,
       keyPath,
-      shouldExpandNode,
+      shouldExpandNodeInitially,
       hideRoot,
       rootProps,
     } = this.props;
@@ -94,7 +94,7 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
               {before}
               <JSONTree
                 keyPath={keyPath}
-                shouldExpandNode={shouldExpandNode}
+                shouldExpandNodeInitially={shouldExpandNodeInitially}
                 data={data}
                 labelRenderer={this.selectLabelRenderer(styling)}
                 theme={this.selectTheme(base16Theme)}

packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { StylingFunction } from 'react-base16-styling';
+import type { LabelRenderer } from 'react-json-tree';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
 import isIterable from '../utils/isIterable';
 
@@ -91,12 +92,10 @@ export function getItemString(
   );
 }
 
-export function createTreeItemLabelRenderer(styling: StylingFunction) {
+export function createTreeItemLabelRenderer(
-  return function labelRenderer(
+  styling: StylingFunction
-    [key]: (string | number)[],
+): LabelRenderer {
-    nodeType: string,
+  return function labelRenderer([key], nodeType, expanded) {
-    expanded: boolean
-  ): ReactNode {
     return (
       <span>
         <span {...styling('treeItemKey')}>{key}</span>

pnpm-lock.yaml

@@ -536,7 +536,6 @@ importers:
       '@types/jest': ^29.2.4
       '@types/lodash': ^4.14.191
       '@types/node': ^18.11.17
-      '@types/prop-types': ^15.7.5
       '@types/react': ^18.0.26
       '@types/react-test-renderer': ^18.0.0
       '@typescript-eslint/eslint-plugin': ^5.47.0
@@ -547,7 +546,6 @@ importers:
       eslint-plugin-react: ^7.31.11
       eslint-plugin-react-hooks: ^4.6.0
       jest: ^29.3.1
-      prop-types: ^15.8.1
       react: ^18.2.0
       react-base16-styling: ^0.9.1
       react-test-renderer: ^18.2.0
@@ -560,8 +558,6 @@ importers:
     dependencies:
       '@babel/runtime': 7.20.6
       '@types/lodash': 4.14.191
-      '@types/prop-types': 15.7.5
-      prop-types: 15.8.1
       react-base16-styling: link:../react-base16-styling
     devDependencies:
       '@babel/cli': 7.19.3_@babel+core@7.20.5