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

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 {
-  data: any;
+interface Props extends CommonInternalProps {
+  data: unknown;
   nodeType: string;
 }
 
 // Configures <JSONNestedNode> to render an Array
-const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
-  <JSONNestedNode
-    {...props}
-    data={data}
-    nodeType="Array"
-    nodeTypeIndicator="[]"
-    createItemString={createItemString}
-    expandable={data.length > 0}
-  />
-);
-
-JSONArrayNode.propTypes = {
-  data: PropTypes.array,
-};
-
-export default JSONArrayNode;
+export default function JSONArrayNode({ data, ...props }: Props) {
+  return (
+    <JSONNestedNode
+      {...props}
+      data={data}
+      nodeType="Array"
+      nodeTypeIndicator="[]"
+      createItemString={createItemString}
+      expandable={(data as unknown[]).length > 0}
+    />
+  );
+}

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { StylingFunction } from 'react-base16-styling';
+import type { 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,
-}) => (
-  <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
-    <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
-      {'\u25B6'}
-      {arrowStyle === 'double' && (
-        <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
-      )}
+}: Props) {
+  return (
+    <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
+      <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
+        {'\u25B6'}
+        {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 {
-  data: any;
+interface Props extends CommonInternalProps {
+  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 PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
 import JSONArrow from './JSONArrow';
 import getCollectionEntries from './getCollectionEntries';
 import JSONNode from './JSONNode';
 import ItemRange from './ItemRange';
-import {
-  CircularPropsPassedThroughJSONNestedNode,
-  CircularPropsPassedThroughRenderChildNodes,
-} from './types';
+import type { CircularCache, CommonInternalProps } from './types';
 
 /**
  * Renders nested values (eg. objects, arrays, lists, etc.)
  */
 
-export interface RenderChildNodesProps
-  extends CircularPropsPassedThroughRenderChildNodes {
-  data: any;
+export interface RenderChildNodesProps extends CommonInternalProps {
+  data: unknown;
   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 {
-  data: any;
+interface Props extends CommonInternalProps {
+  data: unknown;
   nodeType: string;
   nodeTypeIndicator: string;
-  createItemString: (data: any, collectionLimit: number) => string;
+  createItemString: (data: unknown, collectionLimit: number) => string;
   expandable: boolean;
 }
 
-interface State {
-  expanded: boolean;
-}
+export default function JSONNestedNode(props: Props) {
+  const {
+    circularCache = [],
+    collectionLimit,
+    createItemString,
+    data,
+    expandable,
+    getItemString,
+    hideRoot,
+    isCircular,
+    keyPath,
+    labelRenderer,
+    level = 0,
+    nodeType,
+    nodeTypeIndicator,
+    shouldExpandNodeInitially,
+    styling,
+  } = props;
 
-function getStateFromProps(props: Props) {
-  // calculate individual node expansion if necessary
-  const expanded = !props.isCircular
-    ? props.shouldExpandNode(props.keyPath, props.data, props.level)
-    : false;
-  return {
-    expanded,
-  };
-}
+  const [expanded, setExpanded] = useState<boolean>(
+    // calculate individual node expansion if necessary
+    isCircular ? false : shouldExpandNodeInitially(keyPath, data, level)
+  );
 
-export default class JSONNestedNode extends React.Component<Props, State> {
-  static propTypes = {
-    getItemString: PropTypes.func.isRequired,
-    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,
-  };
+  const handleClick = useCallback(() => {
+    if (expandable) setExpanded(!expanded);
+  }, [expandable, expanded]);
 
-  static defaultProps = {
-    data: [],
-    circularCache: [],
-    level: 0,
-    expandable: true,
-  };
+  const renderedChildren =
+    expanded || (hideRoot && level === 0)
+      ? renderChildNodes({ ...props, circularCache, level: level + 1 })
+      : null;
 
-  constructor(props: Props) {
-    super(props);
-    this.state = getStateFromProps(props);
-  }
+  const itemType = (
+    <span {...styling('nestedNodeItemType', expanded)}>
+      {nodeTypeIndicator}
+    </span>
+  );
+  const renderedItemString = getItemString(
+    nodeType,
+    data,
+    itemType,
+    createItemString(data, collectionLimit),
+    keyPath
+  );
+  const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
 
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    const nextState = getStateFromProps(nextProps);
-    if (getStateFromProps(this.props).expanded !== nextState.expanded) {
-      this.setState(nextState);
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
-    return (
-      !!Object.keys(nextProps).find(
-        (key) =>
-          key !== 'circularCache' &&
-          (key === 'keyPath'
-            ? nextProps[key].join('/') !== this.props[key].join('/')
-            : nextProps[key as keyof Props] !== this.props[key as keyof Props])
-      ) || nextState.expanded !== this.state.expanded
-    );
-  }
-
-  render() {
-    const {
-      getItemString,
-      nodeTypeIndicator,
-      nodeType,
-      data,
-      hideRoot,
-      createItemString,
-      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}
+  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={handleClick}
+        />
+      )}
+      <label
+        {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
+        onClick={handleClick}
+      >
+        {labelRenderer(...stylingArgs)}
+      </label>
+      <span
+        {...styling('nestedNodeItemString', ...stylingArgs)}
+        onClick={handleClick}
+      >
+        {renderedItemString}
       </span>
-    );
-    const renderedItemString = getItemString(
-      nodeType,
-      data,
-      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 });
-    }
-  };
+      <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
+        {renderedChildren}
+      </ul>
+    </li>
+  );
 }

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 {
-  keyPath: (string | number)[];
-  value: any;
-  isCustomNode: (value: any) => boolean;
+interface Props extends CommonInternalProps {
+  value: unknown;
 }
 
-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 {
-  data: any;
+interface Props extends CommonInternalProps {
+  data: unknown;
   nodeType: string;
 }
 
 // Configures <JSONNestedNode> to render an Object
-const JSONObjectNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
-  <JSONNestedNode
-    {...props}
-    data={data}
-    nodeType="Object"
-    nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
-    createItemString={createItemString}
-    expandable={Object.getOwnPropertyNames(data).length > 0}
-  />
-);
-
-JSONObjectNode.propTypes = {
-  data: PropTypes.object,
-  nodeType: PropTypes.string.isRequired,
-};
-
-export default JSONObjectNode;
+export default function JSONObjectNode({ data, ...props }: Props) {
+  return (
+    <JSONNestedNode
+      {...props}
+      data={data}
+      nodeType="Object"
+      nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
+      createItemString={createItemString}
+      expandable={Object.getOwnPropertyNames(data).length > 0}
+    />
+  );
+}

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

@@ -1,18 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { JSONValueNodeCircularPropsProvidedByJSONNode } from './types';
+import type {
+  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;
-  valueGetter?: (value: any) => any;
+  styling: Styling;
+  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,
-}) => (
-  <li {...styling('value', nodeType, keyPath)}>
-    <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
-      {labelRenderer(keyPath, nodeType, false, false)}
-    </label>
-    <span {...styling('valueText', nodeType, keyPath)}>
-      {valueRenderer(valueGetter(value), value, ...keyPath)}
-    </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;
+}: Props) {
+  return (
+    <li {...styling('value', nodeType, keyPath)}>
+      <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+        {labelRenderer(keyPath, nodeType, false, false)}
+      </label>
+      <span {...styling('valueText', nodeType, keyPath)}>
+        {valueRenderer(valueGetter(value), value, ...keyPath)}
+      </span>
+    </li>
+  );
+}

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) {
-  return typeof (collection as Map<any, any>).set === 'function';
+function isIterableMap(collection: unknown) {
+  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,
-  sortObjectKeys: ((a: any, b: any) => number) | boolean | undefined,
+  collection: unknown,
+  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 PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
 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,
-  StylingFunction,
-  StylingValue,
-  Theme,
-} from 'react-base16-styling';
-import { CircularPropsPassedThroughJSONTree } from './types';
+  CommonExternalProps,
+  GetItemString,
+  IsCustomNode,
+  LabelRenderer,
+  ShouldExpandNodeInitially,
+} from './types';
 
-interface Props extends CircularPropsPassedThroughJSONTree {
-  data: any;
+interface Props extends Partial<CommonExternalProps> {
+  data: unknown;
   theme?: Theme;
-  invertTheme: boolean;
-}
-
-interface State {
-  styling: StylingFunction;
+  invertTheme?: boolean;
 }
 
 const identity = (value: any) => value;
-const expandRootNode = (
-  keyPath: (string | number)[],
-  data: any,
-  level: number
-) => level === 0;
-const defaultItemString = (
-  type: string,
-  data: any,
-  itemType: React.ReactNode,
-  itemString: string
-) => (
+const expandRootNode: ShouldExpandNodeInitially = (keyPath, data, level) =>
+  level === 0;
+const defaultItemString: GetItemString = (type, data, itemType, itemString) => (
   <span>
     {itemType} {itemString}
   </span>
 );
-const defaultLabelRenderer = ([label]: (string | number)[]) => (
-  <span>{label}:</span>
-);
-const noCustomNode = () => false;
+const defaultLabelRenderer: LabelRenderer = ([label]) => <span>{label}:</span>;
+const noCustomNode: IsCustomNode = () => false;
 
-function checkLegacyTheming(theme: Theme | undefined, props: Props) {
-  const deprecatedStylingMethodsMap = {
-    getArrowStyle: 'arrow',
-    getListStyle: 'nestedNodeChildren',
-    getItemStringStyle: 'nestedNodeItemString',
-    getLabelStyle: 'label',
-    getValueStyle: 'valueText',
-  };
+export function JSONTree({
+  data: value,
+  theme,
+  invertTheme: shouldInvertTheme,
+  keyPath = ['root'],
+  labelRenderer = defaultLabelRenderer,
+  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(
-    deprecatedStylingMethodsMap
-  ).filter((name) => props[name as keyof Props]);
-
-  if (deprecatedStylingMethods.length > 0) {
-    if (typeof theme === 'string') {
-      theme = {
-        extend: theme,
-      };
-    } else {
-      theme = { ...theme };
-    }
-
-    deprecatedStylingMethods.forEach((name) => {
-      // eslint-disable-next-line no-console
-      console.error(
-        `Styling method "${name}" is deprecated, use "theme" property instead`
-      );
-
-      (theme as StylingConfig)[
-        deprecatedStylingMethodsMap[
-          name as keyof typeof deprecatedStylingMethodsMap
-        ]
-      ] = ({ style }, ...args) => ({
-        style: {
-          ...style,
-          ...props[name as keyof Props](...args),
-        },
-      });
-    });
-  }
-
-  return theme;
+  return (
+    <ul {...styling('tree')}>
+      <JSONNode
+        keyPath={hideRoot ? [] : keyPath}
+        value={postprocessValue(value)}
+        isCustomNode={isCustomNode}
+        styling={styling}
+        labelRenderer={labelRenderer}
+        valueRenderer={valueRenderer}
+        shouldExpandNodeInitially={shouldExpandNodeInitially}
+        hideRoot={hideRoot}
+        getItemString={getItemString}
+        postprocessValue={postprocessValue}
+        collectionLimit={collectionLimit}
+        sortObjectKeys={sortObjectKeys}
+      />
+    </ul>
+  );
 }
 
-function getStateFromProps(props: Props) {
-  let theme = checkLegacyTheming(props.theme, props);
-  if (props.invertTheme) {
-    theme = invertTheme(theme);
-  }
-
-  return {
-    styling: createStylingFromTheme(theme),
-  };
-}
-
-export class JSONTree extends React.Component<Props, State> {
-  static propTypes = {
-    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 };
+export type {
+  Key,
+  KeyPath,
+  GetItemString,
+  LabelRenderer,
+  ValueRenderer,
+  ShouldExpandNodeInitially,
+  PostprocessValue,
+  IsCustomNode,
+  SortObjectKeys,
+  Styling,
+} from './types';
+export type { StylingValue };

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

@@ -1,81 +1,63 @@
 import React from 'react';
 import { StylingFunction } from 'react-base16-styling';
 
-interface SharedCircularPropsPassedThroughJSONTree {
-  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;
+export type Key = string | number;
 
-interface JSONNestedNodeCircularPropsPassedThroughJSONTree {
-  shouldExpandNode: (
-    keyPath: (string | number)[],
-    data: any,
-    level: number
-  ) => boolean;
+export type KeyPath = readonly (string | number)[];
+
+export type GetItemString = (
+  nodeType: string,
+  data: unknown,
+  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: (
-    nodeType: string,
-    data: any,
-    itemType: React.ReactNode,
-    itemString: string,
-    keyPath: (string | number)[]
-  ) => React.ReactNode;
-  postprocessValue: (value: any) => any;
-  isCustomNode: (value: any) => boolean;
+  getItemString: GetItemString;
+  postprocessValue: PostprocessValue;
+  isCustomNode: IsCustomNode;
   collectionLimit: number;
-  sortObjectKeys?: ((a: any, b: any) => number) | boolean;
+  sortObjectKeys: SortObjectKeys;
 }
-export type CircularPropsPassedThroughJSONTree =
-  SharedCircularPropsPassedThroughJSONTree &
-    JSONValueNodeCircularPropsPassedThroughJSONTree &
-    JSONNestedNodeCircularPropsPassedThroughJSONTree;
 
-interface JSONNestedNodeCircularPropsPassedThroughJSONNode
-  extends JSONNestedNodeCircularPropsPassedThroughJSONTree {
-  circularCache?: any[];
-  isCircular?: boolean;
+export interface CommonInternalProps extends CommonExternalProps {
+  styling: StylingFunction;
+  circularCache?: CircularCache;
   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: (
-    keyPath: (string | number)[],
-    nodeType: string,
-    expanded: boolean,
-    expandable: boolean
-  ) => React.ReactNode;
+  labelRenderer: LabelRenderer;
   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 = (
-    [key, ...rest]: (string | number)[],
-    nodeType: string,
-    expanded: boolean
-  ) => {
+  labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => {
     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 = (
-  keyName: (string | number)[],
-  data: any,
-  level: number
-) => level <= 1;
+const expandFirstLevel: ShouldExpandNodeInitially = (keyName, data, level) =>
+  level <= 1;
 
 function prepareDelta(value: any) {
   if (value && value._t === 'a') {
@@ -53,12 +51,7 @@ interface Props {
   styling: StylingFunction;
   base16Theme: Base16Theme;
   invertTheme: boolean;
-  labelRenderer: (
-    keyPath: (string | number)[],
-    nodeType: string,
-    expanded: boolean,
-    expandable: boolean
-  ) => React.ReactNode;
+  labelRenderer: LabelRenderer;
   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 = (
-    keyPath: (string | number)[],
-    data: any,
-    level: number
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
+    keyPath,
+    data,
+    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 = (
-    keyPath: (string | number)[],
-    data: any,
-    level: number
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
+    keyPath,
+    data,
+    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 = (
-    keyPath: (string | number)[],
-    value: unknown,
-    layer: number
-  ): boolean => {
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
+    keyPath,
+    value,
+    layer
+  ) => {
     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 = (
-    keyPath: (string | number)[],
-    value: unknown,
-    layer: number
-  ): boolean => {
+  shouldExpandApiStateNode: ShouldExpandNodeInitially = (
+    keyPath,
+    value,
+    layer
+  ) => {
     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 = (
-    keyPath: (string | number)[],
-    value: unknown,
-    layer: number
-  ): boolean => {
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
+    keyPath,
+    value,
+    layer
+  ) => {
     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 = (
-    keyPath: (string | number)[],
-    value: unknown,
-    layer: number
-  ): boolean => {
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
+    keyPath,
+    value,
+    layer
+  ) => {
     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) {
-  return function labelRenderer(
-    [key]: (string | number)[],
-    nodeType: string,
-    expanded: boolean
-  ): ReactNode {
+export function createTreeItemLabelRenderer(
+  styling: StylingFunction
+): LabelRenderer {
+  return function labelRenderer([key], nodeType, expanded) {
     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