Fix types

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

@@ -1,14 +1,15 @@
 import React 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;
   nodeType: string;
   from: number;
   to: number;
   renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;
+  circularCache: CircularCache;
 }
 
 interface State {

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

@@ -1,7 +1,7 @@
 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.
@@ -11,7 +11,7 @@ function createItemString(data: any) {
   }`;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
   data: any;
   nodeType: string;
 }

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

@@ -1,6 +1,6 @@
 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;

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,7 +22,7 @@ function createItemString(data: any, limit: number) {
   return `${hasMore ? '>' : ''}${count} ${count !== 1 ? 'entries' : 'entry'}`;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
   data: any;
   nodeType: string;
 }

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

@@ -4,19 +4,16 @@ 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: any;
   nodeType: string;
+  circularCache: CircularCache;
 }
 
 interface Range {
@@ -89,12 +86,14 @@ function renderChildNodes(
   return childNodes;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNestedNode {
+interface Props extends CommonInternalProps {
   data: any;
   nodeType: string;
   nodeTypeIndicator: string;
   createItemString: (data: any, collectionLimit: number) => string;
   expandable: boolean;
+  circularCache: CircularCache;
+  level: number;
 }
 
 interface State {

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

@@ -5,10 +5,9 @@ import JSONObjectNode from './JSONObjectNode';
 import JSONArrayNode from './JSONArrayNode';
 import JSONIterableNode from './JSONIterableNode';
 import JSONValueNode from './JSONValueNode';
-import { CircularPropsPassedThroughJSONNode } from './types';
+import type { CommonInternalProps, KeyPath } from './types';
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
-  keyPath: (string | number)[];
   value: any;
   isCustomNode: (value: any) => boolean;
 }

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

@@ -1,7 +1,7 @@
 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.
@@ -10,7 +10,7 @@ function createItemString(data: any) {
   return `${len} ${len !== 1 ? 'keys' : 'key'}`;
 }
 
-interface Props extends CircularPropsPassedThroughJSONNode {
+interface Props extends CommonInternalProps {
   data: any;
   nodeType: string;
 }

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

@@ -1,14 +1,27 @@
 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;
+  styling: Styling;
   value: any;
+  valueRenderer: ValueRenderer;
   valueGetter?: (value: any) => any;
 }
 

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

@@ -1,3 +1,5 @@
+import type { SortObjectKeys } from './types';
+
 function getLength(type: string, collection: any) {
   if (type === 'Object') {
     // eslint-disable-next-line @typescript-eslint/ban-types
@@ -16,7 +18,7 @@ function isIterableMap(collection: any) {
 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 } {
@@ -96,7 +98,7 @@ function getRanges(from: number, to: number, limit: number) {
 export default function getCollectionEntries(
   type: string,
   collection: any,
-  sortObjectKeys: ((a: any, b: any) => number) | boolean | undefined,
+  sortObjectKeys: SortObjectKeys,
   limit: number,
   from = 0,
   to = Infinity

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

@@ -8,34 +8,29 @@ import JSONNode from './JSONNode';
 import createStylingFromTheme from './createStylingFromTheme';
 import { invertTheme } from 'react-base16-styling';
 import type { StylingValue, Theme } from 'react-base16-styling';
-import { CircularPropsPassedThroughJSONTree } from './types';
+import type {
+  CommonExternalProps,
+  GetItemString,
+  IsCustomNode,
+  LabelRenderer,
+  ShouldExpandNode,
+} from './types';
 
-interface Props extends CircularPropsPassedThroughJSONTree {
+interface Props extends Partial<CommonExternalProps> {
   data: any;
   theme?: Theme;
-  invertTheme: boolean;
+  invertTheme?: boolean;
 }
 
 const identity = (value: any) => value;
-const expandRootNode = (
+const expandRootNode: ShouldExpandNode = (keyPath, data, level) => level === 0;
-  keyPath: (string | number)[],
+const defaultItemString: GetItemString = (type, data, itemType, itemString) => (
-  data: any,
-  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;
 
 export function JSONTree({
   data: value,
@@ -50,7 +45,7 @@ export function JSONTree({
   postprocessValue = identity,
   isCustomNode = noCustomNode,
   collectionLimit = 50,
-  sortObjectKeys,
+  sortObjectKeys = false,
 }: Props) {
   const styling = useMemo(
     () =>

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 = (string | number)[];
-  shouldExpandNode: (
+
-    keyPath: (string | number)[],
+export type GetItemString = (
-    data: any,
+  nodeType: string,
-    level: number
+  data: any,
-  ) => 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: any,
+  value: any,
+  ...keyPath: KeyPath
+) => React.ReactNode;
+
+export type ShouldExpandNode = (
+  keyPath: KeyPath,
+  data: any,
+  level: number
+) => boolean;
+
+export type PostprocessValue = (value: any) => any;
+
+export type IsCustomNode = (value: any) => boolean;
+
+export type SortObjectKeys = ((a: any, b: any) => number) | boolean;
+
+export type Styling = StylingFunction;
+
+export type CircularCache = any[];
+
+export interface CommonExternalProps {
+  keyPath: KeyPath;
+  labelRenderer: LabelRenderer;
+  valueRenderer: ValueRenderer;
+  shouldExpandNode: ShouldExpandNode;
   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;
 }
-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;