From ff49e9e3801d4d5500bccce7304c1616bd699a54 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Wed, 4 Jan 2023 21:58:39 -0500
Subject: [PATCH] Fix inspector-monitor types

---
 packages/react-json-tree/src/index.tsx            | 12 ++++++++++++
 .../src/ActionPreview.tsx                         | 14 +++-----------
 .../redux-devtools-inspector-monitor/src/index.ts |  1 +
 .../src/tabs/JSONDiff.tsx                         | 15 ++++-----------
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx
index 5aa394a5..b84c747e 100644
--- a/packages/react-json-tree/src/index.tsx
+++ b/packages/react-json-tree/src/index.tsx
@@ -74,4 +74,16 @@ export function JSONTree({
   );
 }
 
+export type {
+  Key,
+  KeyPath,
+  GetItemString,
+  LabelRenderer,
+  ValueRenderer,
+  ShouldExpandNodeInitially,
+  PostprocessValue,
+  IsCustomNode,
+  SortObjectKeys,
+  Styling,
+} from './types';
 export type { StylingValue };
diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
index 0d28d107..aef637df 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
+++ b/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 (
diff --git a/packages/redux-devtools-inspector-monitor/src/index.ts b/packages/redux-devtools-inspector-monitor/src/index.ts
index 2861d4e5..12c0cc0e 100644
--- a/packages/redux-devtools-inspector-monitor/src/index.ts
+++ b/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';
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
index 5e983f85..56535823 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
+++ b/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;
 }