Merge branch 'main' into react-json-tree-unsafe

.changeset/friendly-coats-trade.md

@@ -0,0 +1,8 @@
+---
+'d3-state-visualizer': major
+---
+
+- Remove UMD build.
+- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
+- The shape of the argument passed to the `onClickText` option has been updated.
+- Rename `InputOptions` to `Options`, `Primitive` to `StyleValue`, and `NodeWithId` to `HierarchyPointNode<Node>`.

.changeset/slimy-elephants-flash.md

@@ -0,0 +1,6 @@
+---
+'@redux-devtools/chart-monitor': major
+---
+
+- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
+- The shape of the argument passed to the `onClickText` option has been updated.

.changeset/spicy-olives-compete.md

@@ -0,0 +1,10 @@
+---
+'d3tooltip': major
+---
+
+- Remove UMD build.
+- Upgrade d3 peer dependency from v3 to v7.
+- Remove `attr` configuration method.
+- Rename `style` configuration method to `styles` and move to options.
+- Move `text` configuration method to options.
+- Remove d3 parameter as first parameter for `tooltip`.

.changeset/weak-kings-brake.md

@@ -0,0 +1,5 @@
+---
+'map2tree': major
+---
+
+- Remove UMD build.

extension/CHANGELOG.md

@@ -1,5 +1,17 @@
 # remotedev-redux-devtools-extension
 
+## 3.0.17
+
+### Patch Changes
+
+- 1aa6c4f7: Fix remounting root for devpanel
+
+## 3.0.16
+
+### Patch Changes
+
+- 20ebf725: Remove source map from page wrap bundle
+
 ## 3.0.14
 
 ### Patch Changes

extension/chrome/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.11",
+  "version": "3.0.17",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/edge/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.11",
+  "version": "3.0.17",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/firefox/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.11",
+  "version": "3.0.17",
   "name": "Redux DevTools",
   "manifest_version": 2,
   "description": "Redux Developer Tools for debugging application state changes.",

extension/jest.config.js

@@ -5,5 +5,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
-  resolver: '<rootDir>/jestResolver.js',
+  transformIgnorePatterns: [
+    'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)',
+  ],
 };

extension/jestResolver.js

@@ -1,15 +0,0 @@
-module.exports = (path, options) => {
-  return options.defaultResolver(path, {
-    ...options,
-    packageFilter: (pkg) => {
-      if (pkg.name === 'nanoid') {
-        pkg.exports['.'].browser = pkg.exports['.'].require;
-      }
-      if (pkg.name === 'uuid' && pkg.version.startsWith('8.')) {
-        delete pkg.exports;
-        delete pkg.module;
-      }
-      return pkg;
-    },
-  });
-};

extension/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "3.0.14",
+  "version": "3.0.17",
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",
@@ -41,7 +41,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
     "react-json-tree": "^0.17.0",
     "react-redux": "^8.0.5",
@@ -50,33 +50,33 @@
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.18.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/chrome": "^0.0.203",
+    "@types/chrome": "^0.0.206",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/styled-components": "^5.1.26",
     "babel-loader": "^9.1.0",
-    "chromedriver": "^106.0.1",
+    "chromedriver": "^108.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "cpy-cli": "^4.2.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
-    "electron": "^21.3.1",
+    "electron": "^22.0.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "immutable": "^4.1.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
@@ -85,12 +85,12 @@
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "rimraf": "^3.0.2",
-    "selenium-webdriver": "^4.6.1",
+    "selenium-webdriver": "^4.7.1",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^3.3.1",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0"
+    "webpack-cli": "^5.0.1"
   }
 }

extension/src/devpanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Persistor } from 'redux-persist';
@@ -20,6 +20,7 @@ const messageStyle: CSSProperties = {
 };
 
 let rendered: boolean | undefined;
+let currentRoot: Root | undefined;
 let store: Store<StoreStateWithoutSocket, StoreAction> | undefined;
 let persistor: Persistor | undefined;
 let bgConnection: chrome.runtime.Port;
@@ -27,11 +28,16 @@ let naTimeout: NodeJS.Timeout;
 
 const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
 
-function renderDevTools(root: Root) {
+function renderNodeAtRoot(node: ReactNode) {
-  root.unmount();
+  if (currentRoot) currentRoot.unmount();
+  currentRoot = createRoot(document.getElementById('root')!);
+  currentRoot.render(node);
+}
+
+function renderDevTools() {
   clearTimeout(naTimeout);
   ({ store, persistor } = configureStore(position, bgConnection));
-  root.render(
+  renderNodeAtRoot(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
@@ -41,7 +47,7 @@ function renderDevTools(root: Root) {
   rendered = true;
 }
 
-function renderNA(root: Root) {
+function renderNA() {
   if (rendered === false) return;
   rendered = false;
   naTimeout = setTimeout(() => {
@@ -74,31 +80,28 @@ function renderNA(root: Root) {
           );
         }
 
-        root.unmount();
+        renderNodeAtRoot(message);
-        root.render(message);
         store = undefined;
       });
     } else {
-      root.unmount();
+      renderNodeAtRoot(message);
-      root.render(message);
       store = undefined;
     }
   }, 3500);
 }
 
 function init(id: number) {
-  const root = createRoot(document.getElementById('root')!);
+  renderNA();
-  renderNA(root);
   bgConnection = chrome.runtime.connect({
     name: id ? id.toString() : undefined,
   });
   bgConnection.onMessage.addListener(
     <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
       if (message.type === 'NA') {
-        if (message.id === id) renderNA(root);
+        if (message.id === id) renderNA();
         else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
       } else {
-        if (!rendered) renderDevTools(root);
+        if (!rendered) renderDevTools();
         store!.dispatch(message);
       }
     }

extension/webpack.config.js

@@ -6,7 +6,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 module.exports = function (env) {
   return {
     mode: env.production ? 'production' : 'development',
-    devtool: env.production ? 'source-map' : 'eval-source-map',
+    devtool: env.production ? undefined : 'eval-source-map',
     entry: {
       background: [
         path.resolve(__dirname, 'src/chromeApiMock'),

extension/wrap.webpack.config.js

@@ -3,7 +3,6 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = {
   mode: 'production',
-  devtool: 'source-map',
   entry: {
     pagewrap: path.resolve(__dirname, 'src/pageScriptWrap'),
   },

package.json

@@ -1,20 +1,20 @@
 {
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
-    "@changesets/cli": "^2.25.2",
+    "@changesets/cli": "^2.26.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
-    "prettier": "2.8.0",
+    "prettier": "2.8.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
-    "nx": "^15.2.1",
+    "nx": "^15.3.3",
     "@nrwl/nx-cloud": "^15.0.2"
   },
   "scripts": {
@@ -39,7 +39,7 @@
     "packages/redux-devtools-rtk-query-monitor/demo",
     "packages/redux-devtools-slider-monitor/examples/todomvc"
   ],
-  "packageManager": "pnpm@7.17.1",
+  "packageManager": "pnpm@7.19.0",
   "pnpm": {
     "overrides": {
       "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"

packages/d3-state-visualizer/README.md

@@ -35,7 +35,7 @@ const render = tree(document.getElementById('root'), {
   isSorted: false,
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
-  style: { border: '1px solid black' },
+  chartStyles: { border: '1px solid black' },
   tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
 });
 
@@ -61,7 +61,7 @@ Other options are listed below and have reasonable default values if you want to
 | Option                    | Type    | Default                                                                          | Description                                                                                                                                                                                                                                                                                  |
 | ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`                      | String  | `'d3svg'`                                                                        | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument                                                                                                                                                                   |
-| `style`                   | Object  | `{}`                                                                             | Sets the CSS style of the chart                                                                                                                                                                                                                                                              |
+| `chartStyles`             | Object  | `{}`                                                                             | Sets the CSS style of the chart                                                                                                                                                                                                                                                              |
 | `size`                    | Number  | `500`                                                                            | Sets size of the chart in pixels                                                                                                                                                                                                                                                             |
 | `aspectRatio`             | Float   | `1.0`                                                                            | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |
 | `widthBetweenNodesCoeff`  | Float   | `1.0`                                                                            | Alters the horizontal space between each node                                                                                                                                                                                                                                                |
@@ -74,12 +74,6 @@ Other options are listed below and have reasonable default values if you want to
 
 More to come...
 
-## Bindings
-
-### React
-
-[example](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/react-tree) implementation.
-
 ## Roadmap
 
 - Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.

packages/d3-state-visualizer/examples/tree/package.json

@@ -29,22 +29,22 @@
     "map2tree": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/d3-state-visualizer/examples/tree/src/index.ts

@@ -28,7 +28,7 @@ const render = tree(document.getElementById('root')!, {
   isSorted: false,
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
-  style: { border: '1px solid black' },
+  chartStyles: { border: '1px solid black' },
   tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
 });
 

packages/d3-state-visualizer/package.json

@@ -23,18 +23,16 @@
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
-  "unpkg": "dist/d3-state-visualizer.umd.js",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
+    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
     "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
     "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:umd": "rollup -c",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
@@ -42,9 +40,9 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
-    "@types/d3": "^3.5.47",
+    "@types/d3": "^7.4.0",
-    "d3": "^3.5.17",
+    "d3": "^7.8.0",
     "d3tooltip": "^2.1.0",
     "deepmerge": "^4.2.2",
     "map2tree": "^2.1.0",
@@ -52,25 +50,16 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.1.0",
-    "@types/node": "^18.11.9",
     "@types/ramda": "^0.28.20",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.5.0",
+    "typescript": "~4.9.4"
-    "rollup-plugin-typescript2": "^0.34.1",
-    "tslib": "^2.4.1",
-    "typescript": "~4.9.3"
   }
 }

packages/d3-state-visualizer/rollup.config.mjs

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3-state-visualizer',
-      file: 'lib/umd/d3-state-visualizer.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3-state-visualizer',
-      file: 'lib/umd/d3-state-visualizer.min.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-  },
-];
-
-export default config;

packages/d3-state-visualizer/src/charts/index.ts

@@ -1,2 +1,4 @@
+export type { HierarchyPointNode } from 'd3';
+export type { StyleValue } from 'd3tooltip';
 export { default as tree } from './tree/tree';
-export type { InputOptions, NodeWithId, Primitive } from './tree/tree';
+export type { Node, Options } from './tree/tree';

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -1,6 +1,8 @@
-import d3, { ZoomEvent, Primitive } from 'd3';
+import * as d3 from 'd3';
+import type { D3ZoomEvent, HierarchyPointLink, HierarchyPointNode } from 'd3';
 import { isEmpty } from 'ramda';
 import { map2tree } from 'map2tree';
+import type { Node } from 'map2tree';
 import deepmerge from 'deepmerge';
 import {
   getTooltipString,
@@ -9,17 +11,33 @@ import {
   getNodeGroupByDepthCount,
 } from './utils';
 import { tooltip } from 'd3tooltip';
+import type { StyleValue } from 'd3tooltip';
 
-export interface InputOptions {
+export interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
   state?: {} | null;
   // eslint-disable-next-line @typescript-eslint/ban-types
-  tree?: NodeWithId | {};
+  tree?: Node | {};
 
   rootKeyName: string;
   pushMethod: 'push' | 'unshift';
   id: string;
-  style: { [key: string]: Primitive };
+  chartStyles: { [key: string]: StyleValue };
+  nodeStyleOptions: {
+    colors: {
+      default: string;
+      collapsed: string;
+      parent: string;
+    };
+    radius: number;
+  };
+  textStyleOptions: {
+    colors: {
+      default: string;
+      hover: string;
+    };
+  };
+  linkStyles: { [key: string]: StyleValue };
   size: number;
   aspectRatio: number;
   initialZoom: number;
@@ -34,7 +52,7 @@ export interface InputOptions {
   widthBetweenNodesCoeff: number;
   transitionDuration: number;
   blinkDuration: number;
-  onClickText: (datum: NodeWithId) => void;
+  onClickText: (datum: HierarchyPointNode<Node>) => void;
   tooltipOptions: {
     disabled?: boolean;
     left?: number | undefined;
@@ -43,64 +61,7 @@ export interface InputOptions {
       left: number;
       top: number;
     };
-    style?: { [key: string]: Primitive } | undefined;
+    styles?: { [key: string]: StyleValue } | undefined;
-    indentationSize?: number;
-  };
-}
-
-interface Options {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  state?: {} | null;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  tree?: NodeWithId | {};
-
-  rootKeyName: string;
-  pushMethod: 'push' | 'unshift';
-  id: string;
-  style: {
-    node: {
-      colors: {
-        default: string;
-        collapsed: string;
-        parent: string;
-      };
-      radius: number;
-    };
-    text: {
-      colors: {
-        default: string;
-        hover: string;
-      };
-    };
-    link: {
-      stroke: string;
-      fill: string;
-    };
-  };
-  size: number;
-  aspectRatio: number;
-  initialZoom: number;
-  margin: {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-  };
-  isSorted: boolean;
-  heightBetweenNodesCoeff: number;
-  widthBetweenNodesCoeff: number;
-  transitionDuration: number;
-  blinkDuration: number;
-  onClickText: () => void;
-  tooltipOptions: {
-    disabled: boolean;
-    left: number | undefined;
-    top: number | undefined;
-    offset: {
-      left: number;
-      top: number;
-    };
-    style: { [key: string]: Primitive } | undefined;
     indentationSize?: number;
   };
 }
@@ -111,26 +72,25 @@ const defaultOptions: Options = {
   pushMethod: 'push',
   tree: undefined,
   id: 'd3svg',
-  style: {
+  chartStyles: {},
-    node: {
+  nodeStyleOptions: {
-      colors: {
+    colors: {
-        default: '#ccc',
+      default: '#ccc',
-        collapsed: 'lightsteelblue',
+      collapsed: 'lightsteelblue',
-        parent: 'white',
+      parent: 'white',
-      },
-      radius: 7,
     },
-    text: {
+    radius: 7,
-      colors: {
+  },
-        default: 'black',
+  textStyleOptions: {
-        hover: 'skyblue',
+    colors: {
-      },
+      default: 'black',
-    },
+      hover: 'skyblue',
-    link: {
-      stroke: '#000',
-      fill: 'none',
     },
   },
+  linkStyles: {
+    stroke: '#000',
+    fill: 'none',
+  },
   size: 500,
   aspectRatio: 1.0,
   initialZoom: 1,
@@ -156,37 +116,29 @@ const defaultOptions: Options = {
       left: 0,
       top: 0,
     },
-    style: undefined,
+    styles: undefined,
   },
-};
+} satisfies Options;
 
-export interface NodeWithId {
+export interface InternalNode extends Node {
-  name: string;
+  _children?: this[] | undefined;
-  children?: NodeWithId[] | null;
+  id: string | number;
-  _children?: NodeWithId[] | null;
-  value?: unknown;
-  id: string;
-
-  parent?: NodeWithId;
-  depth?: number;
-  x?: number;
-  y?: number;
 }
 
 interface NodePosition {
-  parentId: string | null | undefined;
+  parentId: string | number | null;
-  id: string;
+  id: string | number;
-  x: number | undefined;
+  x: number;
-  y: number | undefined;
+  y: number;
 }
 
-export default function (
+export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
-  DOMNode: HTMLElement,
-  options: Partial<InputOptions> = {}
-) {
   const {
     id,
-    style,
+    chartStyles,
+    nodeStyleOptions,
+    textStyleOptions,
+    linkStyles,
     size,
     aspectRatio,
     initialZoom,
@@ -202,64 +154,50 @@ export default function (
     tree,
     tooltipOptions,
     onClickText,
-  } = deepmerge(defaultOptions, options) as Options;
+  } = deepmerge(defaultOptions, options);
 
   const width = size - margin.left - margin.right;
   const height = size * aspectRatio - margin.top - margin.bottom;
   const fullWidth = size;
   const fullHeight = size * aspectRatio;
 
-  const attr: { [key: string]: Primitive } = {
-    id,
-    preserveAspectRatio: 'xMinYMin slice',
-  };
-
-  if (!(style as unknown as { [key: string]: Primitive }).width) {
-    attr.width = fullWidth;
-  }
-
-  if (
-    !(style as unknown as { [key: string]: Primitive }).width ||
-    !(style as unknown as { [key: string]: Primitive }).height
-  ) {
-    attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
-  }
-
   const root = d3.select(DOMNode);
-  const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom);
+  const zoom = d3.zoom<SVGSVGElement, unknown>().scaleExtent([0.1, 3]);
-  const vis = root
+
+  const svgElement = root
     .append('svg')
-    .attr(attr)
+    .attr('id', id)
-    .style({ cursor: '-webkit-grab', ...style } as unknown as {
+    .attr('preserveAspectRatio', 'xMinYMin slice')
-      [key: string]: Primitive;
+    .style('cursor', '-webkit-grab');
-    })
+
+  if (!chartStyles.width) {
+    svgElement.attr('width', fullWidth);
+  }
+
+  if (!chartStyles.width || !chartStyles.height) {
+    svgElement.attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`);
+  }
+
+  for (const [key, value] of Object.entries(chartStyles)) {
+    svgElement.style(key, value);
+  }
+
+  const vis = svgElement
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    .call(zoom.scaleTo, initialZoom)
     .call(
-      zoom.on('zoom', () => {
+      zoom.on('zoom', (event) => {
-        const { translate, scale } = d3.event as ZoomEvent;
+        const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
-        vis.attr(
+        vis.attr('transform', transform.toString());
-          'transform',
-          `translate(${translate.toString()})scale(${scale})`
-        );
       })
     )
     .append('g')
-    .attr({
+    .attr(
-      transform: `translate(${margin.left + style.node.radius}, ${
+      'transform',
+      `translate(${margin.left + nodeStyleOptions.radius}, ${
         margin.top
-      }) scale(${initialZoom})`,
+      }) scale(${initialZoom})`
-    });
-
-  let layout = d3.layout.tree().size([width, height]);
-  let data: NodeWithId;
-
-  if (isSorted) {
-    layout.sort((a, b) =>
-      (b as NodeWithId).name.toLowerCase() <
-      (a as NodeWithId).name.toLowerCase()
-        ? 1
-        : -1
     );
-  }
 
   // previousNodePositionsById stores node x and y
   // as well as hierarchy (id / parentId);
@@ -277,8 +215,8 @@ export default function (
   // of parent ids; once a parent that matches the given filter is found,
   // the parent position gets returned
   function findParentNodePosition(
-    nodePositionsById: { [nodeId: string]: NodePosition },
+    nodePositionsById: { [nodeId: string | number]: NodePosition },
-    nodeId: string,
+    nodeId: string | number,
     filter: (nodePosition: NodePosition) => boolean
   ) {
     let currentPosition = nodePositionsById[nodeId];
@@ -294,19 +232,18 @@ export default function (
   }
 
   return function renderChart(nextState = tree || state) {
-    data = !tree
+    let data = !tree
-      ? // eslint-disable-next-line @typescript-eslint/ban-types
+      ? (map2tree(nextState, {
-        (map2tree(nextState as {}, {
           key: rootKeyName,
           pushMethod,
-        }) as NodeWithId)
+        }) as InternalNode)
-      : (nextState as NodeWithId);
+      : (nextState as InternalNode);
 
     if (isEmpty(data) || !data.name) {
       data = {
         name: 'error',
         message: 'Please provide a state map or a tree structure',
-      } as unknown as NodeWithId;
+      } as unknown as InternalNode;
     }
 
     let nodeIndex = 0;
@@ -334,76 +271,94 @@ export default function (
 
     function update() {
       // path generator for links
-      const diagonal = d3.svg
+      const linkHorizontal = d3
-        .diagonal<NodePosition>()
+        .linkHorizontal<
-        .projection((d) => [d.y!, d.x!]);
+          {
+            source: { x: number; y: number };
+            target: { x: number; y: number };
+          },
+          { x: number; y: number }
+        >()
+        .x((d) => d.y)
+        .y((d) => d.x);
       // set tree dimensions and spacing between branches and nodes
       const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
 
-      layout = layout.size([
+      const layout = d3
-        maxNodeCountByLevel * 25 * heightBetweenNodesCoeff,
+        .tree<InternalNode>()
-        width,
+        .size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width]);
-      ]);
 
-      const nodes = layout.nodes(data as d3.layout.tree.Node) as NodeWithId[];
+      const rootNode = d3.hierarchy(data);
-      const links = layout.links(nodes as d3.layout.tree.Node[]);
+      if (isSorted) {
+        rootNode.sort((a, b) =>
+          b.data.name.toLowerCase() < a.data.name.toLowerCase() ? 1 : -1
+        );
+      }
 
-      nodes.forEach(
+      const rootPointNode = layout(rootNode);
+      const links = rootPointNode.links();
+
+      rootPointNode.each(
         (node) =>
-          (node.y = node.depth! * (maxLabelLength * 7 * widthBetweenNodesCoeff))
+          (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
       );
 
+      const nodes = rootPointNode.descendants();
+
       const nodePositions = nodes.map((n) => ({
-        parentId: n.parent && n.parent.id,
+        parentId: n.parent && n.parent.data.id,
-        id: n.id,
+        id: n.data.id,
         x: n.x,
         y: n.y,
       }));
-      const nodePositionsById: { [nodeId: string]: NodePosition } = {};
+      const nodePositionsById: { [nodeId: string | number]: NodePosition } = {};
       nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
 
       // process the node selection
       const node = vis
-        .selectAll('g.node')
+        .selectAll<SVGGElement, HierarchyPointNode<InternalNode>>('g.node')
-        .property('__oldData__', (d: NodeWithId) => d)
+        .property('__oldData__', (d) => d)
-        .data(nodes, (d) => d.id || (d.id = ++nodeIndex as unknown as string));
+        .data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex));
       const nodeEnter = node
         .enter()
         .append('g')
-        .attr({
+        .attr('class', 'node')
-          class: 'node',
+        .attr('transform', (d) => {
-          transform: (d) => {
+          const position = findParentNodePosition(
-            const position = findParentNodePosition(
+            nodePositionsById,
-              nodePositionsById,
+            d.data.id,
-              d.id,
+            (n) => !!previousNodePositionsById[n.id]
-              (n) => !!previousNodePositionsById[n.id]
+          );
-            );
+          const previousPosition =
-            const previousPosition =
+            (position && previousNodePositionsById[position.id]) ||
-              (position && previousNodePositionsById[position.id]) ||
+            previousNodePositionsById.root;
-              previousNodePositionsById.root;
+          return `translate(${previousPosition.y},${previousPosition.x})`;
-            return `translate(${previousPosition.y!},${previousPosition.x!})`;
-          },
         })
-        .style({
+        .style('fill', textStyleOptions.colors.default)
-          fill: style.text.colors.default,
+        .style('cursor', 'pointer')
-          cursor: 'pointer',
+        .on('mouseover', function mouseover() {
+          d3.select(this).style('fill', textStyleOptions.colors.hover);
         })
-        .on('mouseover', function mouseover(this: EventTarget) {
+        .on('mouseout', function mouseout() {
-          d3.select(this).style({
+          d3.select(this).style('fill', textStyleOptions.colors.default);
-            fill: style.text.colors.hover,
-          });
-        })
-        .on('mouseout', function mouseout(this: EventTarget) {
-          d3.select(this).style({
-            fill: style.text.colors.default,
-          });
         });
 
       if (!tooltipOptions.disabled) {
         nodeEnter.call(
-          tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
+          tooltip<
-            .text((d, i) => getTooltipString(d, i, tooltipOptions))
+            SVGGElement,
-            .style(tooltipOptions.style)
+            HierarchyPointNode<InternalNode>,
+            SVGGElement,
+            unknown,
+            HTMLElement,
+            unknown,
+            null,
+            undefined
+          >('tooltip', {
+            ...tooltipOptions,
+            root,
+            text: (d) => getTooltipString(d.data, tooltipOptions),
+          })
         );
       }
 
@@ -412,77 +367,81 @@ export default function (
       const nodeEnterInnerGroup = nodeEnter.append('g');
       nodeEnterInnerGroup
         .append('circle')
-        .attr({
+        .attr('class', 'nodeCircle')
-          class: 'nodeCircle',
+        .attr('r', 0)
-          r: 0,
+        .on('click', (event, clickedNode) => {
-        })
+          if ((event as Event).defaultPrevented) return;
-        .on('click', (clickedNode) => {
+          toggleChildren(clickedNode.data);
-          if ((d3.event as Event).defaultPrevented) return;
-          toggleChildren(clickedNode);
           update();
         });
 
       nodeEnterInnerGroup
         .append('text')
-        .attr({
+        .attr('class', 'nodeText')
-          class: 'nodeText',
+        .attr('text-anchor', 'middle')
-          'text-anchor': 'middle',
+        .attr('transform', 'translate(0,0)')
-          transform: 'translate(0,0)',
+        .attr('dy', '.35em')
-          dy: '.35em',
+        .style('fill-opacity', 0)
-        })
+        .text((d) => d.data.name)
-        .style({
+        .on('click', (_, datum) => {
-          'fill-opacity': 0,
+          onClickText(datum);
-        })
-        .text((d) => d.name)
-        .on('click', onClickText);
-
-      // update the text to reflect whether node has children or not
-      node.select('text').text((d) => d.name);
-
-      // change the circle fill depending on whether it has children and is collapsed
-      node.select('circle').style({
-        stroke: 'black',
-        'stroke-width': '1.5px',
-        fill: (d) =>
-          d._children
-            ? style.node.colors.collapsed
-            : d.children
-            ? style.node.colors.parent
-            : style.node.colors.default,
-      });
-
-      // transition nodes to their new position
-      const nodeUpdate = node
-        .transition()
-        .duration(transitionDuration)
-        .attr({
-          transform: (d) => `translate(${d.y!},${d.x!})`,
         });
 
+      const nodeEnterAndUpdate = nodeEnter.merge(node);
+
+      // update the text to reflect whether node has children or not
+      nodeEnterAndUpdate.select('text').text((d) => d.data.name);
+
+      // change the circle fill depending on whether it has children and is collapsed
+      nodeEnterAndUpdate
+        .select('circle')
+        .style('stroke', 'black')
+        .style('stroke-width', '1.5px')
+        .style('fill', (d) =>
+          d.data._children && d.data._children.length > 0
+            ? nodeStyleOptions.colors.collapsed
+            : d.data.children && d.data.children.length > 0
+            ? nodeStyleOptions.colors.parent
+            : nodeStyleOptions.colors.default
+        );
+
+      // transition nodes to their new position
+      const nodeUpdate = nodeEnterAndUpdate
+        .transition()
+        .duration(transitionDuration)
+        .attr('transform', (d) => `translate(${d.y},${d.x})`);
+
       // ensure circle radius is correct
-      nodeUpdate.select('circle').attr('r', style.node.radius);
+      nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius);
 
       // fade the text in and align it
       nodeUpdate
-        .select('text')
+        .select<SVGTextElement>('text')
         .style('fill-opacity', 1)
-        .attr({
+        .attr('transform', function transform(d) {
-          transform: function transform(this: SVGGraphicsElement, d) {
+          const x =
-            const x =
+            (((d.data.children ?? d.data._children)?.length ?? 0) > 0
-              (d.children || d._children ? -1 : 1) *
+              ? -1
-              (this.getBBox().width / 2 + style.node.radius + 5);
+              : 1) *
-            return `translate(${x},0)`;
+            (this.getBBox().width / 2 + nodeStyleOptions.radius + 5);
-          },
+          return `translate(${x},0)`;
         });
 
       // blink updated nodes
-      node
+      nodeEnterAndUpdate
-        .filter(function flick(this: any, d) {
+        .filter(function flick(
+          this: SVGGElement & {
+            __oldData__?: HierarchyPointNode<InternalNode>;
+          },
+          d
+        ) {
           // test whether the relevant properties of d match
           // the equivalent property of the oldData
           // also test whether the old data exists,
           // to catch the entering elements!
-          return this.__oldData__ && d.value !== this.__oldData__.value;
+          return (
+            !!this.__oldData__ && d.data.value !== this.__oldData__.data.value
+          );
         })
         .select('g')
         .style('opacity', '0.3')
@@ -492,21 +451,19 @@ export default function (
 
       // transition exiting nodes to the parent's new position
       const nodeExit = node
-        .exit()
+        .exit<HierarchyPointNode<InternalNode>>()
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('transform', (d) => {
-          transform: (d) => {
+          const position = findParentNodePosition(
-            const position = findParentNodePosition(
+            previousNodePositionsById,
-              previousNodePositionsById,
+            d.data.id,
-              d.id,
+            (n) => !!nodePositionsById[n.id]
-              (n) => !!nodePositionsById[n.id]
+          );
-            );
+          const futurePosition =
-            const futurePosition =
+            (position && nodePositionsById[position.id]) ||
-              (position && nodePositionsById[position.id]) ||
+            nodePositionsById.root;
-              nodePositionsById.root;
+          return `translate(${futurePosition.y},${futurePosition.x})`;
-            return `translate(${futurePosition.y!},${futurePosition.x!})`;
-          },
         })
         .remove();
 
@@ -516,65 +473,66 @@ export default function (
 
       // update the links
       const link = vis
-        .selectAll('path.link')
+        .selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
-        .data(links, (d) => (d.target as NodeWithId).id);
+          'path.link'
+        )
+        .data(links, (d) => d.target.data.id);
 
       // enter any new links at the parent's previous position
-      link
+      const linkEnter = link
         .enter()
         .insert('path', 'g')
-        .attr({
+        .attr('class', 'link')
-          class: 'link',
+        .attr('d', (d) => {
-          d: (d) => {
+          const position = findParentNodePosition(
-            const position = findParentNodePosition(
+            nodePositionsById,
-              nodePositionsById,
+            d.target.data.id,
-              (d.target as NodeWithId).id,
+            (n) => !!previousNodePositionsById[n.id]
-              (n) => !!previousNodePositionsById[n.id]
+          );
-            );
+          const previousPosition =
-            const previousPosition =
+            (position && previousNodePositionsById[position.id]) ||
-              (position && previousNodePositionsById[position.id]) ||
+            previousNodePositionsById.root;
-              previousNodePositionsById.root;
+          return linkHorizontal({
-            return diagonal({
+            source: previousPosition,
-              source: previousPosition,
+            target: previousPosition,
-              target: previousPosition,
+          });
-            } as d3.svg.diagonal.Link<NodePosition>);
+        });
-          },
+
-        })
+      for (const [key, value] of Object.entries(linkStyles)) {
-        .style(style.link);
+        linkEnter.style(key, value);
+      }
+
+      const linkEnterAndUpdate = linkEnter.merge(link);
 
       // transition links to their new position
-      link
+      linkEnterAndUpdate
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('d', linkHorizontal);
-          d: diagonal as unknown as Primitive,
-        });
 
       // transition exiting nodes to the parent's new position
       link
-        .exit()
+        .exit<HierarchyPointLink<InternalNode>>()
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('d', (d) => {
-          d: (d) => {
+          const position = findParentNodePosition(
-            const position = findParentNodePosition(
+            previousNodePositionsById,
-              previousNodePositionsById,
+            d.target.data.id,
-              (d.target as NodeWithId).id,
+            (n) => !!nodePositionsById[n.id]
-              (n) => !!nodePositionsById[n.id]
+          );
-            );
+          const futurePosition =
-            const futurePosition =
+            (position && nodePositionsById[position.id]) ||
-              (position && nodePositionsById[position.id]) ||
+            nodePositionsById.root;
-              nodePositionsById.root;
+          return linkHorizontal({
-            return diagonal({
+            source: futurePosition,
-              source: futurePosition,
+            target: futurePosition,
-              target: futurePosition,
+          });
-            });
-          },
         })
         .remove();
 
       // delete the old data once it's no longer needed
-      node.property('__oldData__', null);
+      nodeEnterAndUpdate.property('__oldData__', null);
 
       // stash the old positions for transition
       previousNodePositionsById = nodePositionsById;
@@ -582,4 +540,4 @@ export default function (
   };
 }
 
-export { Primitive };
+export type { Node };

packages/d3-state-visualizer/src/charts/tree/utils.ts

@@ -1,38 +1,38 @@
 import { is, join, pipe, replace } from 'ramda';
 import sortAndSerialize from './sortAndSerialize';
-import { NodeWithId } from './tree';
+import type { InternalNode } from './tree';
 
-export function collapseChildren(node: NodeWithId) {
+export function collapseChildren(node: InternalNode) {
   if (node.children) {
     node._children = node.children;
     node._children.forEach(collapseChildren);
-    node.children = null;
+    node.children = undefined;
   }
 }
 
-export function expandChildren(node: NodeWithId) {
+export function expandChildren(node: InternalNode) {
   if (node._children) {
     node.children = node._children;
     node.children.forEach(expandChildren);
-    node._children = null;
+    node._children = undefined;
   }
 }
 
-export function toggleChildren(node: NodeWithId) {
+export function toggleChildren(node: InternalNode) {
   if (node.children) {
     node._children = node.children;
-    node.children = null;
+    node.children = undefined;
   } else if (node._children) {
     node.children = node._children;
-    node._children = null;
+    node._children = undefined;
   }
   return node;
 }
 
 export function visit(
-  parent: NodeWithId,
+  parent: InternalNode,
-  visitFn: (parent: NodeWithId) => void,
+  visitFn: (parent: InternalNode) => void,
-  childrenFn: (parent: NodeWithId) => NodeWithId[] | null | undefined
+  childrenFn: (parent: InternalNode) => InternalNode[] | null | undefined
 ) {
   if (!parent) {
     return;
@@ -50,10 +50,10 @@ export function visit(
   }
 }
 
-export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
+export function getNodeGroupByDepthCount(rootNode: InternalNode) {
   const nodeGroupByDepthCount = [1];
 
-  const traverseFrom = function traverseFrom(node: NodeWithId, depth = 0) {
+  const traverseFrom = function traverseFrom(node: InternalNode, depth = 0) {
     if (!node.children || node.children.length === 0) {
       return 0;
     }
@@ -73,11 +73,7 @@ export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
   return nodeGroupByDepthCount;
 }
 
-export function getTooltipString(
+export function getTooltipString(node: InternalNode, { indentationSize = 4 }) {
-  node: unknown,
-  i: number | undefined,
-  { indentationSize = 4 }
-) {
   if (!is(Object, node)) return '';
 
   const spacer = join('  ');
@@ -89,7 +85,6 @@ export function getTooltipString(
 
   if (typeof node.value !== 'undefined') return json2html(node.value);
   if (typeof node.object !== 'undefined') return json2html(node.object);
-  if (children && children.length)
+  if (children && children.length) return `childrenCount: ${children.length}`;
-    return `childrenCount: ${(children as unknown[]).length}`;
   return 'empty';
 }

packages/d3-state-visualizer/src/index.ts

@@ -1,2 +1,2 @@
 export { tree } from './charts';
-export type { InputOptions, NodeWithId, Primitive } from './charts';
+export type { HierarchyPointNode, Node, Options, StyleValue } from './charts';

packages/d3tooltip/README.md

@@ -10,45 +10,45 @@ It was created by [@romseguy](https://github.com/romseguy) and merged from [`rom
 ## Quick usage
 
 ```javascript
-import d3 from 'd3';
+import * as d3 from 'd3';
 import { tooltip } from 'd3tooltip';
 
 const DOMNode = document.getElementById('chart');
 const root = d3.select(DOMNode);
 const vis = root.append('svg');
 
-let options = {
+const options = {
-  offset: {left: 30, top: 10}
+  offset: { left: 30, top: 10 },
+  styles: { 'min-width': '50px', 'border-radius': '5px' },
 };
 
-vis.selectAll('circle').data(someData).enter()
+vis
+  .selectAll('circle')
+  .data(someData)
+  .enter()
   .append('circle')
   .attr('r', 10)
   .call(
-    d3tooltip(d3, 'tooltipClassName', options)
+    d3tooltip('tooltipClassName', {
-      .text((d, i) => toStringOrHtml(d))
+      ...options,
-      .attr({ 'class': 'anotherClassName' })
+      text: (d) => toStringOrHtml(d),
-      .style({ 'min-width': '50px', 'border-radius: 5px' })
+    })
   )
-  .on({
+  .on('mouseover', function () {
-    mouseover(d, i) {
+    d3.select(this).style('fill', 'skyblue');
-      d3.select(this).style({
+  })
-        fill: 'skyblue'
+  .on('mouseout', function () {
-      });
+    d3.select(this).style('fill', 'black');
-    },
-    mouseout(d, i) {
-      d3.select(this).style({
-        fill: 'black'
-      });
-    }
   });
 ```
 
 ## API
 
-| Option   | Type        | Default             | Description                                                                                                                                                     |
+| Option   | Type               | Default             | Description                                                                                                                                                      |
-| -------- | ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -------- | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `root`   | DOM.Element | `body`              | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select)               |
+| `root`   | DOM.Element        | `body`              | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select).               |
-| `left`   | Number      | `undefined`         | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element                                                        |
+| `left`   | Number             | `undefined`         | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element.                                                        |
-| `top`    | Number      | `undefined`         | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element                                                        |
+| `top`    | Number             | `undefined`         | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element.                                                        |
-| `offset` | Object      | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option |
+| `offset` | Object             | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option. |
+| `styles` | Object             | `{}`                | Sets the styles of the tooltip element.                                                                                                                          |
+| `text`   | String or Function | `''`                | Sets the text of the tooltip. Can be a constant `string` or a function that takes the datum and returns a `string`.                                              |

packages/d3tooltip/package.json

@@ -19,18 +19,16 @@
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
-  "unpkg": "lib/umd/d3tooltip.umd.js",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
+    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
     "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
     "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:umd": "rollup -c",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
@@ -38,36 +36,25 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6"
-    "ramda": "^0.28.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@types/d3": "^7.4.0",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@rollup/plugin-terser": "^0.1.0",
+    "d3": "^7.8.0",
-    "@types/d3": "^3.5.47",
+    "eslint": "^8.30.0",
-    "@types/node": "^18.11.9",
-    "@types/ramda": "^0.28.20",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "d3": "^3.5.17",
-    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.5.0",
+    "typescript": "~4.9.4"
-    "rollup-plugin-typescript2": "^0.34.1",
-    "tslib": "^2.4.1",
-    "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "@types/d3": "^3.5.47",
+    "@types/d3": "^7.4.0",
-    "d3": "^3.5.17"
+    "d3": "^7.8.0"
   }
 }

packages/d3tooltip/rollup.config.mjs

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3tooltip',
-      file: 'lib/umd/d3tooltip.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3tooltip',
-      file: 'lib/umd/d3tooltip.min.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-  },
-];
-
-export default config;

packages/d3tooltip/src/index.ts

@@ -1,161 +1,102 @@
-import d3Package, { Primitive, Selection } from 'd3';
+import * as d3 from 'd3';
-import { is } from 'ramda';
+import type { BaseType, Selection } from 'd3';
-import utils from './utils';
-const { prependClass, functor } = utils;
 
-interface Options<Datum> {
+export type StyleValue = string | number | boolean;
+
+interface Options<
+  Datum,
+  RootGElement extends BaseType,
+  RootDatum,
+  RootPElement extends BaseType,
+  RootPDatum
+> {
   left: number | undefined;
   top: number | undefined;
   offset: {
     left: number;
     top: number;
   };
-  root: Selection<Datum> | undefined;
+  root:
+    | Selection<RootGElement, RootDatum, RootPElement, RootPDatum>
+    | undefined;
+  styles: { [key: string]: StyleValue };
+  text: string | ((datum: Datum) => string);
 }
 
-const defaultOptions: Options<unknown> = {
+const defaultOptions: Options<unknown, BaseType, unknown, BaseType, unknown> = {
   left: undefined, // mouseX
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
   root: undefined,
+  styles: {},
+  text: '',
 };
 
-interface Tip<Datum> {
+export function tooltip<
-  (selection: Selection<Datum>): void;
+  GElement extends BaseType,
-  attr: (
+  Datum,
-    this: this,
+  PElement extends BaseType,
-    d:
+  PDatum,
-      | string
+  RootGElement extends BaseType,
-      | {
+  RootDatum,
-          [key: string]:
+  RootPElement extends BaseType,
-            | Primitive
+  RootPDatum
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
+>(
-        }
-  ) => this;
-  style: (
-    this: this,
-    d:
-      | string
-      | {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }
-      | undefined
-  ) => this;
-  text: (
-    this: this,
-    d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
-  ) => this;
-}
-
-export function tooltip<Datum>(
-  d3: typeof d3Package,
   className = 'tooltip',
-  options: Partial<Options<Datum>> = {}
+  options: Partial<
-): Tip<Datum> {
+    Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>
-  const { left, top, offset, root } = {
+  > = {}
+) {
+  const { left, top, offset, root, styles, text } = {
     ...defaultOptions,
     ...options,
-  } as Options<Datum>;
+  } as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>;
 
-  let attrs = { class: className };
+  let el: Selection<HTMLDivElement, RootDatum, BaseType, unknown>;
-  let text: (datum: Datum, index?: number, outerIndex?: number) => string = (
+  const anchor: Selection<
-    node: Datum
+    RootGElement,
-  ) => '';
+    RootDatum,
-  let styles = {};
+    RootPElement | HTMLElement,
+    RootPDatum
+  > = root || d3.select<RootGElement, RootDatum>('body');
+  const rootNode = anchor.node()!;
 
-  let el: Selection<Datum>;
+  return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
-  const anchor = root || d3.select('body');
+    selection.on('mouseover.tip', (event, datum) => {
-  const rootNode = anchor.node();
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
-
+      const [x, y] = [
-  function tip(selection: Selection<Datum>) {
+        left || pointerX + offset.left,
-    selection.on('mouseover.tip', (node) => {
+        top || pointerY - offset.top,
-      const [mouseX, mouseY] = d3.mouse(rootNode);
+      ];
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
 
       anchor.selectAll(`div.${className}`).remove();
 
       el = anchor
         .append('div')
-        .attr(prependClass(className)(attrs))
+        .attr('class', className)
-        .style({
+        .style('position', 'absolute')
-          position: 'absolute',
+        .style('z-index', 1001)
-          'z-index': 1001,
+        .style('left', `${x}px`)
-          left: `${x}px`,
+        .style('top', `${y}px`)
-          top: `${y}px`,
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
-          ...styles,
+
-        })
+      for (const [key, value] of Object.entries(styles)) {
-        .html(() => text(node)) as Selection<Datum>;
+        el.style(key, value);
+      }
     });
 
-    selection.on('mousemove.tip', (node) => {
+    selection.on('mousemove.tip', (event, datum) => {
-      const [mouseX, mouseY] = d3.mouse(rootNode);
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
+      const [x, y] = [
+        left || pointerX + offset.left,
+        top || pointerY - offset.top,
+      ];
 
-      el.style({
+      el.style('left', `${x}px`)
-        left: `${x}px`,
+        .style('top', `${y}px`)
-        top: `${y}px`,
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
-      }).html(() => text(node));
     });
 
     selection.on('mouseout.tip', () => el.remove());
-  }
-
-  tip.attr = function setAttr(
-    this: typeof tip,
-    d:
-      | string
-      | {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }
-  ) {
-    if (is(Object, d)) {
-      attrs = {
-        ...attrs,
-        ...(d as {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }),
-      };
-    }
-    return this;
   };
-
-  tip.style = function setStyle(
-    this: typeof tip,
-    d:
-      | string
-      | {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }
-      | undefined
-  ) {
-    if (is(Object, d)) {
-      styles = {
-        ...styles,
-        ...(d as {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }),
-      };
-    }
-    return this;
-  };
-
-  tip.text = function setText(
-    this: typeof tip,
-    d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
-  ) {
-    text = functor(d);
-    return this;
-  };
-
-  return tip;
 }

packages/d3tooltip/src/utils/functor.ts

@@ -1,20 +0,0 @@
-import { is } from 'ramda';
-import { Primitive } from 'd3';
-
-export default function functor<Datum>(
-  v: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
-): (datum: Datum, index?: number, outerIndex?: number) => string;
-export default function functor<Datum>(
-  v:
-    | Primitive
-    | ((datum: Datum, index: number, outerIndex?: number) => Primitive)
-): (datum: Datum, index?: number, outerIndex?: number) => Primitive;
-export default function functor<Datum>(
-  v:
-    | Primitive
-    | ((datum: Datum, index: number, outerIndex?: number) => Primitive)
-): (datum: Datum, index: number, outerIndex?: number) => Primitive {
-  return is(Function, v)
-    ? (v as (datum: Datum, index: number, outerIndex?: number) => Primitive)
-    : () => v;
-}

packages/d3tooltip/src/utils/index.ts

@@ -1,7 +0,0 @@
-import prependClass from './prependClass';
-import functor from './functor';
-
-export default {
-  prependClass,
-  functor,
-};

packages/d3tooltip/src/utils/prependClass.ts

@@ -1,28 +0,0 @@
-import { mapObjIndexed, join } from 'ramda';
-import functor from './functor';
-import { Primitive } from 'd3';
-
-export default function prependClass<Datum>(className: string) {
-  return mapObjIndexed(
-    (
-      value:
-        | Primitive
-        | ((datum: Datum, index: number, outerIndex?: number) => Primitive),
-      key
-    ) => {
-      if (key === 'class') {
-        const fn = functor(value);
-
-        return (d: Datum, i: number) => {
-          const classNames = fn(d, i);
-          if (classNames !== className) {
-            return join(' ', [className, classNames]);
-          }
-          return classNames;
-        };
-      }
-
-      return value;
-    }
-  );
-}

packages/map2tree/package.json

@@ -22,18 +22,16 @@
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
-  "unpkg": "lib/umd/map2tree.umd.js",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
+    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
     "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
     "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:umd": "rollup -c",
     "clean": "rimraf lib",
     "test": "jest",
     "lint": "eslint . --ext .ts",
@@ -42,35 +40,26 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@types/jest": "^29.2.4",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@types/lodash": "^4.14.191",
-    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@rollup/plugin-terser": "^0.1.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@types/jest": "^29.2.3",
+    "eslint": "^8.30.0",
-    "@types/lodash": "^4.14.190",
-    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "immutable": "^4.1.0",
     "jest": "^29.3.1",
     "rimraf": "^3.0.2",
-    "rollup": "^3.5.0",
-    "rollup-plugin-typescript2": "^0.34.1",
     "ts-jest": "^29.0.3",
-    "tslib": "^2.4.1",
+    "typescript": "~4.9.4"
-    "typescript": "~4.9.3"
   }
 }

packages/map2tree/rollup.config.mjs

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'map2tree',
-      file: 'lib/umd/map2tree.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'map2tree',
-      file: 'lib/umd/map2tree.min.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-  },
-];
-
-export default config;

packages/map2tree/src/index.ts

@@ -4,7 +4,8 @@ import mapValues from 'lodash/mapValues';
 
 export interface Node {
   name: string;
-  children?: Node[] | null;
+  children?: this[];
+  object?: unknown;
   value?: unknown;
 }
 
@@ -43,7 +44,6 @@ function getNode(tree: Node, key: string): Node | null {
 }
 
 export function map2tree(
-  // eslint-disable-next-line @typescript-eslint/ban-types
   root: unknown,
   options: { key?: string; pushMethod?: 'push' | 'unshift' } = {},
   tree: Node = { name: options.key || 'state', children: [] }

packages/react-base16-styling/package.json

@@ -39,9 +39,9 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@types/base16": "^1.0.2",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
     "base16": "^1.0.0",
     "color": "^4.2.3",
     "csstype": "^3.1.1",
@@ -49,23 +49,23 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
     "@types/color": "^3.0.3",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/lodash.curry": "^4.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   }
 }

packages/react-dock/demo/package.json

@@ -11,36 +11,36 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-bootstrap": "^2.6.0",
+    "react-bootstrap": "^2.7.0",
     "react-dock": "^0.6.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/react-dock/package.json

@@ -39,29 +39,29 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
     "@types/prop-types": "^15.7.5",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
@@ -70,7 +70,7 @@
     "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",

packages/react-json-tree/examples/package.json

@@ -26,27 +26,27 @@
     "react-json-tree": "^0.17.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/react-json-tree/package.json

@@ -45,44 +45,44 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
     "@types/prop-types": "^15.7.5",
     "prop-types": "^15.8.1",
     "react-base16-styling": "^0.9.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-terser": "^0.2.1",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
     "react": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.5.0",
+    "rollup": "^3.7.5",
     "rollup-plugin-typescript2": "^0.34.1",
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.1",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",

packages/redux-devtools-app/jest.config.js

@@ -6,7 +6,10 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transform: {
+    '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
   },
-  resolver: '<rootDir>/jestResolver.js',
+  transformIgnorePatterns: [
+    'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)',
+  ],
 };

packages/redux-devtools-app/jestResolver.js

@@ -1,15 +0,0 @@
-module.exports = (path, options) => {
-  return options.defaultResolver(path, {
-    ...options,
-    packageFilter: (pkg) => {
-      if (pkg.name === 'nanoid') {
-        pkg.exports['.'].browser = pkg.exports['.'].require;
-      }
-      if (pkg.name === 'uuid' && pkg.version.startsWith('8.')) {
-        delete pkg.exports;
-        delete pkg.module;
-      }
-      return pkg;
-    },
-  });
-};

packages/redux-devtools-app/package.json

@@ -40,7 +40,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/chart-monitor": "^3.0.0",
     "@redux-devtools/core": "^3.13.0",
     "@redux-devtools/inspector-monitor": "^3.0.0",
@@ -50,7 +50,7 @@
     "@redux-devtools/rtk-query-monitor": "^3.0.0",
     "@redux-devtools/slider-monitor": "^4.0.0",
     "@redux-devtools/ui": "^1.3.0",
-    "@reduxjs/toolkit": "^1.9.0",
+    "@reduxjs/toolkit": "^1.9.1",
     "@types/prop-types": "^15.7.5",
     "d3-state-visualizer": "^1.6.0",
     "javascript-stringify": "^2.1.0",
@@ -59,7 +59,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
     "react-redux": "^8.0.5",
     "redux": "^4.2.0",
@@ -68,7 +68,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
@@ -77,28 +77,28 @@
     "@rjsf/core": "^4.2.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/jsan": "^3.1.2",
     "@types/json-schema": "^7.0.11",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/socketcluster-client": "^16.0.0",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.3.1",
@@ -110,9 +110,9 @@
     "styled-components": "^5.3.6",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },
   "peerDependencies": {

packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx

@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { ChartMonitor } from '@redux-devtools/chart-monitor';
-import { NodeWithId } from 'd3-state-visualizer';
+import type { HierarchyPointNode, Node } from 'd3-state-visualizer';
 import { selectMonitorWithState } from '../../actions';
 
-export function getPath(obj: NodeWithId, inspectedStatePath: string[]) {
+export function getPath(
+  obj: HierarchyPointNode<Node>,
+  inspectedStatePath: string[]
+) {
   const parent = obj.parent;
   if (!parent) return;
   getPath(parent, inspectedStatePath);
-  let name = obj.name;
+  let name = obj.data.name;
   const item = /.+\[(\d+)]/.exec(name);
   if (item) name = item[1];
   inspectedStatePath.push(name);
@@ -20,7 +23,7 @@ type Props = DispatchProps;
 class ChartMonitorWrapper extends Component<Props> {
   static update = ChartMonitor.update;
 
-  onClickText = (data: NodeWithId) => {
+  onClickText = (data: HierarchyPointNode<Node>) => {
     const inspectedStatePath: string[] = [];
     getPath(data, inspectedStatePath);
     this.props.selectMonitorWithState('InspectorMonitor', {

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/ChartTab.tsx

@@ -1,7 +1,8 @@
 import React, { Component, RefCallback } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { withTheme } from 'styled-components';
-import { InputOptions, NodeWithId, tree } from 'd3-state-visualizer';
+import { tree } from 'd3-state-visualizer';
+import type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer';
 import { getPath } from '../ChartMonitorWrapper';
 import { updateMonitorState } from '../../../actions';
 import { ThemeFromProvider } from '@redux-devtools/ui';
@@ -54,12 +55,12 @@ class ChartTab extends Component<Props> {
     this.renderChart(props.data as {} | null | undefined);
   }
 
-  getChartTheme(theme: ThemeFromProvider): Partial<InputOptions> {
+  getChartTheme(theme: ThemeFromProvider): Partial<Options> {
     return {
       heightBetweenNodesCoeff: 1,
       widthBetweenNodesCoeff: 1.3,
       tooltipOptions: {
-        style: {
+        styles: {
           color: theme.base06,
           'background-color': theme.base01,
           opacity: '0.9',
@@ -69,29 +70,29 @@ class ChartTab extends Component<Props> {
         offset: { left: 30, top: 10 },
         indentationSize: 2,
       },
-      style: {
+      chartStyles: {
         width: '100%',
         height: '100%',
-        node: {
+      },
-          colors: {
+      nodeStyleOptions: {
-            default: theme.base0B,
+        colors: {
-            collapsed: theme.base0B,
+          default: theme.base0B,
-            parent: theme.base0E,
+          collapsed: theme.base0B,
-          },
+          parent: theme.base0E,
-          radius: 7,
+        },
-        } as unknown as string,
+        radius: 7,
-        text: {
+      },
-          colors: {
+      textStyleOptions: {
-            default: theme.base0D,
+        colors: {
-            hover: theme.base06,
+          default: theme.base0D,
-          },
+          hover: theme.base06,
-        } as unknown as string,
+        },
       },
       onClickText: this.onClickText,
     };
   }
 
-  onClickText = (data: NodeWithId) => {
+  onClickText = (data: HierarchyPointNode<Node>) => {
     const inspectedStatePath: string[] = [];
     getPath(data, inspectedStatePath);
     this.props.updateMonitorState({

packages/redux-devtools-chart-monitor/README.md

@@ -47,16 +47,18 @@ Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tre
 
 You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below:
 
-| Name                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| Name                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultIsVisible`        | By default, set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `defaultIsVisible`        | By default, set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `transitionDuration`      | By default, set to `750`, in milliseconds.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `transitionDuration`      | By default, set to `750`, in milliseconds.                                                                                                                                                                                                                                                                                                                                                                                     |
-| `heightBetweenNodesCoeff` | By default, set to `1`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `heightBetweenNodesCoeff` | By default, set to `1`.                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `widthBetweenNodesCoeff`  | By default, set to `1.3`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `widthBetweenNodesCoeff`  | By default, set to `1.3`.                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `isSorted`                | By default, set to `false`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `isSorted`                | By default, set to `false`.                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `style`                   | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<br>} |
+| `chartStyles`             | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>}                                                                                                                                                                                                                                         |
-| `onClickText`             | Function called with a reference to the clicked node as first argument when clicking on the text next to a node.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `textStyleOptions`        | {<br>&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;default: `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`,<br>&nbsp;&nbsp;},<br>}                                                                                                                                                                                                                                                                        |
-| `tooltipOptions`          | {<br>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;style: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px'<br>&nbsp;&nbsp;}<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api).                                                                                                                                                                                                                                                                                                                                                        |
+| `nodeStyleOptions`        | {<br>&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;default: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`,<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;radius: 7,<br>}                                                                                                                                                                                       |
+| `onClickText`             | Function called with a reference to the clicked node as first argument when clicking on the text next to a node.                                                                                                                                                                                                                                                                                                               |
+| `tooltipOptions`          | {<br>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;styles: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px',<br>&nbsp;&nbsp;},<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |
 
 #### Redux DevTools props
 

packages/redux-devtools-chart-monitor/package.json

@@ -39,34 +39,32 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
-    "@types/prop-types": "^15.7.5",
     "@types/redux-devtools-themes": "^1.0.0",
     "d3-state-visualizer": "^1.6.0",
     "deepmerge": "^4.2.2",
-    "prop-types": "^15.8.1",
     "redux-devtools-themes": "^1.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@redux-devtools/core": "^3.13.1",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",

packages/redux-devtools-chart-monitor/src/Chart.tsx

@@ -1,6 +1,6 @@
 import React, { Component, createRef } from 'react';
-import PropTypes from 'prop-types';
+import { tree } from 'd3-state-visualizer';
-import { tree, NodeWithId, Primitive } from 'd3-state-visualizer';
+import type { Options } from 'd3-state-visualizer';
 import { Action, Dispatch } from 'redux';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import * as themes from 'redux-devtools-themes';
@@ -12,7 +12,8 @@ const wrapperStyle = {
 };
 
 export interface Props<S, A extends Action<unknown>>
-  extends LiftedState<S, A, ChartMonitorState> {
+  extends LiftedState<S, A, ChartMonitorState>,
+    Options {
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
@@ -20,76 +21,10 @@ export interface Props<S, A extends Action<unknown>>
   invertTheme: boolean;
 
   state: S | null;
-  isSorted: boolean;
-  heightBetweenNodesCoeff: number;
-  widthBetweenNodesCoeff: number;
-  onClickText: (datum: NodeWithId) => void;
-  tooltipOptions: {
-    disabled: boolean;
-    offset: {
-      left: number;
-      top: number;
-    };
-    indentationSize: number;
-    style: { [key: string]: Primitive } | undefined;
-  };
-  style: { [key: string]: Primitive } | undefined;
   defaultIsVisible?: boolean;
 }
 
 class Chart<S, A extends Action<unknown>> extends Component<Props<S, A>> {
-  static propTypes = {
-    state: PropTypes.object,
-    rootKeyName: PropTypes.string,
-    pushMethod: PropTypes.oneOf(['push', 'unshift']),
-    tree: PropTypes.shape({
-      name: PropTypes.string,
-      children: PropTypes.array,
-    }),
-    id: PropTypes.string,
-    style: PropTypes.shape({
-      node: PropTypes.shape({
-        colors: PropTypes.shape({
-          default: PropTypes.string,
-          parent: PropTypes.string,
-          collapsed: PropTypes.string,
-        }),
-        radius: PropTypes.number,
-      }),
-      text: PropTypes.shape({
-        colors: PropTypes.shape({
-          default: PropTypes.string,
-          hover: PropTypes.string,
-        }),
-      }),
-      link: PropTypes.object,
-    }),
-    size: PropTypes.number,
-    aspectRatio: PropTypes.number,
-    margin: PropTypes.shape({
-      top: PropTypes.number,
-      right: PropTypes.number,
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-    }),
-    isSorted: PropTypes.bool,
-    heightBetweenNodesCoeff: PropTypes.number,
-    widthBetweenNodesCoeff: PropTypes.number,
-    transitionDuration: PropTypes.number,
-    onClickText: PropTypes.func,
-    tooltipOptions: PropTypes.shape({
-      disabled: PropTypes.bool,
-      left: PropTypes.number,
-      top: PropTypes.number,
-      offset: PropTypes.shape({
-        left: PropTypes.number,
-        top: PropTypes.number,
-      }),
-      indentationSize: PropTypes.number,
-      style: PropTypes.object,
-    }),
-  };
-
   divRef = createRef<HTMLDivElement>();
   // eslint-disable-next-line @typescript-eslint/ban-types
   renderChart?: (state?: {} | null | undefined) => void;

packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx

@@ -1,5 +1,4 @@
 import React, { CSSProperties, PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import * as themes from 'redux-devtools-themes';
 import {
   ActionCreators,
@@ -8,7 +7,7 @@ import {
 } from '@redux-devtools/core';
 import deepmerge from 'deepmerge';
 import { Action, Dispatch } from 'redux';
-import { NodeWithId, Primitive } from 'd3-state-visualizer';
+import type { Options } from 'd3-state-visualizer';
 
 import reducer, { ChartMonitorState } from './reducers';
 import Chart, { Props } from './Chart';
@@ -41,37 +40,14 @@ function invertColors(theme: themes.Base16Theme) {
 }
 
 export interface ChartMonitorProps<S, A extends Action<unknown>>
-  extends LiftedState<S, A, ChartMonitorState> {
+  extends LiftedState<S, A, ChartMonitorState>,
+    Options {
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
   theme: keyof typeof themes | themes.Base16Theme;
   invertTheme: boolean;
 
-  state: S | null;
-  isSorted: boolean;
-  heightBetweenNodesCoeff: number;
-  widthBetweenNodesCoeff: number;
-  onClickText: (datum: NodeWithId) => void;
-  tooltipOptions: unknown;
-  style: {
-    width: number;
-    height: number;
-    node: {
-      colors: {
-        default: string;
-        collapsed: string;
-        parent: string;
-      };
-      radius: number;
-    };
-    text: {
-      colors: {
-        default: string;
-        hover: string;
-      };
-    };
-  };
   defaultIsVisible?: boolean;
 }
 
@@ -80,23 +56,6 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
 > {
   static update = reducer;
 
-  static propTypes = {
-    dispatch: PropTypes.func,
-    computedStates: PropTypes.array,
-    currentStateIndex: PropTypes.number,
-    actionsById: PropTypes.object,
-    stagedActionIds: PropTypes.array,
-    skippedActionIds: PropTypes.array,
-    monitorState: PropTypes.shape({
-      initialScrollTop: PropTypes.number,
-    }),
-
-    preserveScrollTop: PropTypes.bool,
-    select: PropTypes.func.isRequired,
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    invertTheme: PropTypes.bool,
-  };
-
   static defaultProps = {
     select: (state: unknown) => state,
     theme: 'nicinabox',
@@ -140,45 +99,10 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
     return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox;
   }
 
-  getChartStyle() {
-    const theme = this.getTheme();
-
-    return {
-      width: '100%',
-      height: '100%',
-      node: {
-        colors: {
-          default: theme.base0B,
-          collapsed: theme.base0B,
-          parent: theme.base0E,
-        },
-        radius: 7,
-      },
-      text: {
-        colors: {
-          default: theme.base0D,
-          hover: theme.base06,
-        },
-      },
-    };
-  }
-
   getChartOptions(props = this.props): Props<S, A> {
     const { computedStates } = props;
     const theme = this.getTheme();
 
-    const tooltipOptions = {
-      disabled: false,
-      offset: { left: 30, top: 10 },
-      indentationSize: 2,
-      style: {
-        'background-color': theme.base06,
-        opacity: '0.7',
-        'border-radius': '5px',
-        padding: '5px',
-      },
-    };
-
     const defaultOptions = {
       state: computedStates.length
         ? computedStates[props.currentStateIndex].state
@@ -186,10 +110,35 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
       isSorted: false,
       heightBetweenNodesCoeff: 1,
       widthBetweenNodesCoeff: 1.3,
-      tooltipOptions,
+      tooltipOptions: {
-      style: this.getChartStyle() as unknown as
+        disabled: false,
-        | { [key: string]: Primitive }
+        offset: { left: 30, top: 10 },
-        | undefined,
+        indentationSize: 2,
+        styles: {
+          'background-color': theme.base06,
+          opacity: '0.7',
+          'border-radius': '5px',
+          padding: '5px',
+        },
+      },
+      chartStyles: {
+        width: '100%',
+        height: '100%',
+      },
+      nodeStyleOptions: {
+        colors: {
+          default: theme.base0B,
+          collapsed: theme.base0B,
+          parent: theme.base0E,
+        },
+        radius: 7,
+      },
+      textStyleOptions: {
+        colors: {
+          default: theme.base0D,
+          hover: theme.base06,
+        },
+      },
     };
 
     return deepmerge(defaultOptions, props);
@@ -198,10 +147,9 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
   render() {
     const theme = this.getTheme();
 
-    const ChartAsAny = Chart as any;
     return (
       <div style={{ ...styles.container, backgroundColor: theme.base07 }}>
-        <ChartAsAny {...this.getChartOptions()} />
+        <Chart {...this.getChartOptions()} />
       </div>
     );
   }

packages/redux-devtools-cli/package.json

@@ -41,13 +41,13 @@
   },
   "dependencies": {
     "@redux-devtools/app": "^2.1.3",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "apollo-server-express": "^3.11.1",
     "body-parser": "^1.20.1",
     "chalk": "^4.1.2",
     "cors": "^2.8.5",
     "cross-spawn": "^7.0.3",
-    "electron": "^21.3.1",
+    "electron": "^22.0.0",
     "express": "^4.18.2",
     "getport": "^0.1.0",
     "graphql": "^16.6.0",
@@ -61,37 +61,37 @@
     "react-is": "^18.2.0",
     "semver": "^7.3.8",
     "socketcluster-server": "^17.2.0",
-    "sqlite3": "^5.1.2",
+    "sqlite3": "^5.1.4",
     "styled-components": "^5.3.6",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/body-parser": "^1.19.2",
-    "@types/cors": "^2.8.12",
+    "@types/cors": "^2.8.13",
     "@types/cross-spawn": "^6.0.2",
-    "@types/express": "^4.17.14",
+    "@types/express": "^4.17.15",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
     "@types/minimist": "^1.2.2",
     "@types/morgan": "^1.9.3",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
     "@types/semver": "^7.3.13",
     "@types/socketcluster-client": "^16.0.0",
     "@types/socketcluster-server": "^16.1.0",
     "@types/styled-components": "^5.1.26",
     "@types/supertest": "^2.0.12",
     "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "jest": "^29.3.1",
     "ncp": "^2.0.0",
     "rimraf": "^3.0.2",
     "socketcluster-client": "^17.1.0",
-    "supertest": "^6.3.1",
+    "supertest": "^6.3.3",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   }
 }

packages/redux-devtools-dock-monitor/package.json

@@ -41,7 +41,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@types/prop-types": "^15.7.5",
     "parse-key": "^0.2.1",
     "prop-types": "^15.8.1",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
@@ -57,17 +57,17 @@
     "@babel/preset-typescript": "^7.18.6",
     "@redux-devtools/core": "^3.13.1",
     "@types/parse-key": "^0.2.0",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",

packages/redux-devtools-extension/package.json

@@ -29,23 +29,23 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "immutable": "^4.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "redux": "^3.1.0 || ^4.0.0"

packages/redux-devtools-inspector-monitor-test-tab/demo/package.json

@@ -21,39 +21,39 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.6.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/lodash.shuffle": "^4.2.7",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.26",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/redux-devtools-inspector-monitor-test-tab/jest.config.js

@@ -5,7 +5,8 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transform: {
+    '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
   },
-  resolver: '<rootDir>/jestResolver.js',
+  transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'],
 };

packages/redux-devtools-inspector-monitor-test-tab/jestResolver.js

@@ -1,11 +0,0 @@
-module.exports = (path, options) => {
-  return options.defaultResolver(path, {
-    ...options,
-    packageFilter: (pkg) => {
-      if (pkg.name === 'nanoid') {
-        pkg.exports['.'].browser = pkg.exports['.'].require;
-      }
-      return pkg;
-    },
-  });
-};

packages/redux-devtools-inspector-monitor-test-tab/package.json

@@ -43,7 +43,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/ui": "^1.3.0",
     "@types/prop-types": "^15.7.5",
     "es6template": "^1.0.5",
@@ -51,12 +51,12 @@
     "jsan": "^3.1.14",
     "object-path": "^0.11.8",
     "prop-types": "^15.8.1",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "simple-diff": "^1.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
@@ -66,16 +66,16 @@
     "@redux-devtools/inspector-monitor": "^3.0.0",
     "@testing-library/react": "^13.4.0",
     "@types/es6template": "^1.0.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/jsan": "^3.1.2",
     "@types/object-path": "^0.11.1",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/simple-diff": "^1.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
@@ -85,7 +85,7 @@
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/inspector-monitor": "^3.0.0",

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "@babel/code-frame": "^7.18.6",
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
-    "@types/chrome": "^0.0.203",
+    "@types/chrome": "^0.0.206",
     "anser": "^2.1.1",
     "html-entities": "^2.3.3",
     "path-browserify": "^1.0.1",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
@@ -52,17 +52,17 @@
     "@testing-library/react": "^13.4.0",
     "@types/babel__code-frame": "^7.0.3",
     "@types/html-entities": "^1.3.4",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
     "@types/path-browserify": "^1.0.0",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/source-map": "0.5.2",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
@@ -73,7 +73,7 @@
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/inspector-monitor": "^3.0.0",

packages/redux-devtools-inspector-monitor-trace-tab/rollup.config.js

@@ -1,39 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import babel from '@rollup/plugin-babel';
-import nodePolyfills from 'rollup-plugin-node-polyfills';
-
-const config = [
-  {
-    input: 'src/StackTraceTab.tsx',
-    output: [
-      {
-        file: 'dist/redux-devtools-inspector-monitor-trace-tab.cjs.js',
-        format: 'cjs',
-      },
-      {
-        file: 'dist/redux-devtools-inspector-monitor-trace-tab.esm.js',
-        format: 'esm',
-      },
-    ],
-    plugins: [
-      typescript(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts', '.tsx'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      nodePolyfills(),
-    ],
-    external: [
-      /@babel\/runtime/,
-      'react',
-      'redux-devtools-themes',
-      'source-map',
-      '@babel/code-frame',
-      'anser',
-      'html-entities',
-    ],
-  },
-];
-
-export default config;

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -17,39 +17,39 @@
     "immutable": "^4.1.0",
     "lodash.shuffle": "^4.2.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.6.0",
+    "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.6.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/base16": "^1.0.2",
     "@types/lodash.shuffle": "^4.2.7",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/redux-devtools-inspector-monitor/package.json

@@ -35,11 +35,11 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@types/dragula": "^3.7.1",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
     "@types/prop-types": "^15.7.5",
-    "dateformat": "^4.6.3",
+    "dateformat": "^5.0.3",
     "hex-rgba": "^1.0.2",
     "immutable": "^4.1.0",
     "javascript-stringify": "^2.1.0",
@@ -55,30 +55,30 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@redux-devtools/core": "^3.13.1",
-    "@types/dateformat": "^3.0.1",
+    "@types/dateformat": "^5.0.0",
     "@types/hex-rgba": "^1.0.1",
     "@types/history": "^4.7.11",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dragula": "^1.1.0",
     "@types/redux-devtools-themes": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",

packages/redux-devtools-instrument/package.json

@@ -41,30 +41,30 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "jest": "^29.3.1",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "rxjs": "^7.5.7",
+    "rxjs": "^7.8.0",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "redux": "^3.4.0 || ^4.0.0"

packages/redux-devtools-log-monitor/package.json

@@ -41,7 +41,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@types/lodash.debounce": "^4.0.7",
     "@types/prop-types": "^15.7.5",
     "@types/redux-devtools-themes": "^1.0.0",
@@ -52,24 +52,24 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@redux-devtools/core": "^3.13.1",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",

packages/redux-devtools-remote/package.json

@@ -41,7 +41,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/instrument": "^2.1.0",
     "@redux-devtools/utils": "^2.0.0",
     "jsan": "^3.1.14",
@@ -51,22 +51,22 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
     "@types/jsan": "^3.1.2",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
     "@types/rn-host-detect": "^1.2.0",
     "@types/socketcluster-client": "^16.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "redux": "^3.5.2 || ^4.0.0"

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -10,53 +10,53 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
-    "@chakra-ui/react": "^2.4.1",
+    "@chakra-ui/react": "^2.4.4",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mswjs/data": "^0.11.0",
     "@redux-devtools/core": "^3.13.0",
     "@redux-devtools/dock-monitor": "^3.0.0",
     "@redux-devtools/rtk-query-monitor": "^3.1.0",
-    "@reduxjs/toolkit": "^1.9.0",
+    "@reduxjs/toolkit": "^1.9.1",
-    "framer-motion": "^7.6.12",
+    "framer-motion": "^8.0.1",
-    "msw": "^0.49.0",
+    "msw": "^0.49.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.6.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/copy-webpack-plugin": "^8.0.1",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },
   "msw": {

packages/redux-devtools-rtk-query-monitor/jest.config.js

@@ -5,7 +5,8 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transform: {
+    '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
   },
-  resolver: '<rootDir>/jestResolver.js',
+  transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'],
 };

packages/redux-devtools-rtk-query-monitor/jestResolver.js

@@ -1,11 +0,0 @@
-module.exports = (path, options) => {
-  return options.defaultResolver(path, {
-    ...options,
-    packageFilter: (pkg) => {
-      if (pkg.name === 'nanoid') {
-        pkg.exports['.'].browser = pkg.exports['.'].require;
-      }
-      return pkg;
-    },
-  });
-};

packages/redux-devtools-rtk-query-monitor/package.json

@@ -44,9 +44,9 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/ui": "^1.3.0",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
     "@types/prop-types": "^15.7.5",
     "@types/redux-devtools-themes": "^1.0.0",
     "hex-rgba": "^1.0.2",
@@ -61,25 +61,25 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@redux-devtools/core": "^3.13.1",
-    "@reduxjs/toolkit": "^1.9.0",
+    "@reduxjs/toolkit": "^1.9.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/hex-rgba": "^1.0.1",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
@@ -90,11 +90,11 @@
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",
-    "@reduxjs/toolkit": "^1.9.0",
+    "@reduxjs/toolkit": "^1.9.1",
     "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
     "@types/styled-components": "^5.1.26",
     "react": "^16.3.0 || ^17.0.0 || ^18.0.0",

packages/redux-devtools-serialize/package.json

@@ -37,28 +37,28 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "jsan": "^3.1.14"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/jsan": "^3.1.2",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "immutable": "^4.1.0",
     "jest": "^29.3.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "immutable": "^4.1.0"

packages/redux-devtools-slider-monitor/examples/todomvc/package.json

@@ -30,33 +30,33 @@
     "todomvc-app-css": "^2.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/classnames": "^2.3.1",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/styled-components": "^5.1.26",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/redux-devtools-slider-monitor/package.json

@@ -32,7 +32,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/ui": "^1.3.0",
     "@types/prop-types": "^15.7.5",
     "@types/redux-devtools-themes": "^1.0.0",
@@ -41,29 +41,24 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@redux-devtools/core": "^3.13.1",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@types/node": "^18.11.17",
-    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.26",
-    "@types/react": "^18.0.25",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "eslint": "^8.30.0",
-    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.5.0",
+    "typescript": "~4.9.4"
-    "rollup-plugin-typescript2": "^0.34.1",
-    "tslib": "^2.4.1",
-    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",

packages/redux-devtools-ui/jest.config.js

@@ -5,7 +5,8 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transform: {
+    '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
   },
-  resolver: '<rootDir>/jestResolver.js',
+  transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'],
 };

packages/redux-devtools-ui/jestResolver.js

@@ -1,11 +0,0 @@
-module.exports = (path, options) => {
-  return options.defaultResolver(path, {
-    ...options,
-    packageFilter: (pkg) => {
-      if (pkg.name === 'nanoid') {
-        pkg.exports['.'].browser = pkg.exports['.'].require;
-      }
-      return pkg;
-    },
-  });
-};

packages/redux-devtools-ui/package.json

@@ -30,7 +30,7 @@
     "build": "pnpm run build:lib && pnpm run build:storybook",
     "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
     "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
-    "build:esm": "babel src --config-file ./babel.config.esm.json --no-babelrc --extensions \".ts,.tsx\" --out-dir lib/esm",
+    "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
     "build:types": "tsc --emitDeclarationOnly",
     "build:css": "ncp fonts lib/fonts",
     "clean": "rimraf lib storybook-static",
@@ -42,7 +42,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@rjsf/core": "^4.2.3",
     "@types/base16": "^1.0.2",
     "@types/codemirror": "^5.60.5",
@@ -51,40 +51,40 @@
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/simple-element-resize-detector": "^1.3.0",
     "base16": "^1.0.0",
-    "codemirror": "^5.65.10",
+    "codemirror": "^5.65.11",
     "color": "^4.2.3",
     "prop-types": "^15.8.1",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
-    "react-select": "^5.6.1",
+    "react-select": "^5.7.0",
     "redux-devtools-themes": "^1.0.0",
     "simple-element-resize-detector": "^1.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.5.15",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/color": "^3.0.3",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "csstype": "^3.1.1",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
@@ -96,13 +96,13 @@
     "require-from-string": "^2.0.2",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.6",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0"
   },
   "peerDependencies": {

packages/redux-devtools-ui/test/__snapshots__/Form.test.tsx.snap

@@ -188,17 +188,17 @@ exports[`Form renders correctly 1`] = `
             class="css-1f43avz-a11yText-A11yText"
           />
           <div
-            class=" css-gdsksj-control"
+            class=" css-10g0wlc-control"
           >
             <div
-              class=" css-1dzc0nd-ValueContainer"
+              class=" css-1gpx584-ValueContainer"
             >
               <div
-                class=" css-du77wi-placeholder"
+                class=" css-1m6ztbo-placeholder"
                 id="react-select-2-placeholder"
               />
               <div
-                class=" css-1xl7is7-Input"
+                class=" css-mh08on-Input"
                 data-value=""
               >
                 <input
@@ -225,11 +225,11 @@ exports[`Form renders correctly 1`] = `
               class=" css-1hb7zxy-IndicatorsContainer"
             >
               <span
-                class=" css-1urf5ax-indicatorSeparator"
+                class=" css-19norqf-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                class=" css-aazq4s-indicatorContainer"
+                class=" css-17vo4tq-indicatorContainer"
               >
                 <svg
                   aria-hidden="true"
@@ -538,17 +538,17 @@ exports[`Form renders with no button 1`] = `
             class="css-1f43avz-a11yText-A11yText"
           />
           <div
-            class=" css-gdsksj-control"
+            class=" css-10g0wlc-control"
           >
             <div
-              class=" css-1dzc0nd-ValueContainer"
+              class=" css-1gpx584-ValueContainer"
             >
               <div
-                class=" css-du77wi-placeholder"
+                class=" css-1m6ztbo-placeholder"
                 id="react-select-4-placeholder"
               />
               <div
-                class=" css-1xl7is7-Input"
+                class=" css-mh08on-Input"
                 data-value=""
               >
                 <input
@@ -575,11 +575,11 @@ exports[`Form renders with no button 1`] = `
               class=" css-1hb7zxy-IndicatorsContainer"
             >
               <span
-                class=" css-1urf5ax-indicatorSeparator"
+                class=" css-19norqf-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                class=" css-aazq4s-indicatorContainer"
+                class=" css-17vo4tq-indicatorContainer"
               >
                 <svg
                   aria-hidden="true"
@@ -879,17 +879,17 @@ exports[`Form renders with primary button 1`] = `
             class="css-1f43avz-a11yText-A11yText"
           />
           <div
-            class=" css-gdsksj-control"
+            class=" css-10g0wlc-control"
           >
             <div
-              class=" css-1dzc0nd-ValueContainer"
+              class=" css-1gpx584-ValueContainer"
             >
               <div
-                class=" css-du77wi-placeholder"
+                class=" css-1m6ztbo-placeholder"
                 id="react-select-3-placeholder"
               />
               <div
-                class=" css-1xl7is7-Input"
+                class=" css-mh08on-Input"
                 data-value=""
               >
                 <input
@@ -916,11 +916,11 @@ exports[`Form renders with primary button 1`] = `
               class=" css-1hb7zxy-IndicatorsContainer"
             >
               <span
-                class=" css-1urf5ax-indicatorSeparator"
+                class=" css-19norqf-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                class=" css-aazq4s-indicatorContainer"
+                class=" css-17vo4tq-indicatorContainer"
               >
                 <svg
                   aria-hidden="true"

packages/redux-devtools-ui/test/__snapshots__/Select.test.tsx.snap

@@ -15,19 +15,19 @@ exports[`Select renders correctly 1`] = `
     class="css-1f43avz-a11yText-A11yText"
   />
   <div
-    class=" css-gdsksj-control"
+    class=" css-10g0wlc-control"
   >
     <div
-      class=" css-1dzc0nd-ValueContainer"
+      class=" css-1gpx584-ValueContainer"
     >
       <div
-        class=" css-du77wi-placeholder"
+        class=" css-1m6ztbo-placeholder"
         id="react-select-2-placeholder"
       >
         Select...
       </div>
       <div
-        class=" css-1xl7is7-Input"
+        class=" css-mh08on-Input"
         data-value=""
       >
         <input
@@ -53,11 +53,11 @@ exports[`Select renders correctly 1`] = `
       class=" css-1hb7zxy-IndicatorsContainer"
     >
       <span
-        class=" css-1urf5ax-indicatorSeparator"
+        class=" css-19norqf-indicatorSeparator"
       />
       <div
         aria-hidden="true"
-        class=" css-aazq4s-indicatorContainer"
+        class=" css-17vo4tq-indicatorContainer"
       >
         <svg
           aria-hidden="true"
@@ -92,22 +92,22 @@ exports[`Select renders with props 1`] = `
     class="css-1f43avz-a11yText-A11yText"
   />
   <div
-    class=" css-gdsksj-control"
+    class=" css-10g0wlc-control"
   >
     <div
-      class=" css-be27w2-ValueContainer"
+      class=" css-1ei5tw5-ValueContainer"
     >
       <div
-        class="css-168vvpw-multiValue"
+        class=" css-7ef4eb-multiValue"
       >
         <div
-          class="css-1m51f4l"
+          class=" css-sro4fq-MultiValueGeneric"
         >
           One
         </div>
         <div
           aria-label="Remove One"
-          class="css-1to589f"
+          class=" css-1f177ni-MultiValueRemove"
           role="button"
         >
           <svg
@@ -143,7 +143,7 @@ exports[`Select renders with props 1`] = `
     >
       <div
         aria-hidden="true"
-        class=" css-1gilzap-loadingIndicator"
+        class=" css-1x631db-loadingIndicator"
       >
         <span
           class="css-1xtdfmb-LoadingDot"
@@ -156,11 +156,11 @@ exports[`Select renders with props 1`] = `
         />
       </div>
       <span
-        class=" css-1urf5ax-indicatorSeparator"
+        class=" css-19norqf-indicatorSeparator"
       />
       <div
         aria-hidden="true"
-        class=" css-aazq4s-indicatorContainer"
+        class=" css-17vo4tq-indicatorContainer"
       >
         <svg
           aria-hidden="true"
@@ -204,13 +204,13 @@ exports[`Select should select another option 1`] = `
     </span>
   </span>
   <div
-    class=" css-1gv8qk2-control"
+    class=" css-mjg7mv-control"
   >
     <div
-      class=" css-1dzc0nd-ValueContainer"
+      class=" css-1gpx584-ValueContainer"
     >
       <div
-        class=" css-e4ucyw-Input"
+        class=" css-jpmdcb-Input"
         data-value="two"
       >
         <input
@@ -238,11 +238,11 @@ exports[`Select should select another option 1`] = `
       class=" css-1hb7zxy-IndicatorsContainer"
     >
       <span
-        class=" css-1urf5ax-indicatorSeparator"
+        class=" css-19norqf-indicatorSeparator"
       />
       <div
         aria-hidden="true"
-        class=" css-aazq4s-indicatorContainer"
+        class=" css-17vo4tq-indicatorContainer"
       >
         <svg
           aria-hidden="true"
@@ -260,15 +260,15 @@ exports[`Select should select another option 1`] = `
     </div>
   </div>
   <div
-    class=" css-17wpf85-menu"
+    class=" css-sromc4-menu"
     id="react-select-4-listbox"
   >
     <div
-      class=" css-87spde-MenuList"
+      class=" css-hln2r9-MenuList"
     >
       <div
         aria-disabled="false"
-        class=" css-1npzjqc-option"
+        class=" css-1t6re7j-option"
         id="react-select-4-option-1"
         tabindex="-1"
       >
@@ -303,13 +303,13 @@ exports[`Select shouldn't find any results 1`] = `
     </span>
   </span>
   <div
-    class=" css-1gv8qk2-control"
+    class=" css-mjg7mv-control"
   >
     <div
-      class=" css-1dzc0nd-ValueContainer"
+      class=" css-1gpx584-ValueContainer"
     >
       <div
-        class=" css-e4ucyw-Input"
+        class=" css-jpmdcb-Input"
         data-value="text"
       >
         <input
@@ -337,11 +337,11 @@ exports[`Select shouldn't find any results 1`] = `
       class=" css-1hb7zxy-IndicatorsContainer"
     >
       <span
-        class=" css-1urf5ax-indicatorSeparator"
+        class=" css-19norqf-indicatorSeparator"
       />
       <div
         aria-hidden="true"
-        class=" css-aazq4s-indicatorContainer"
+        class=" css-17vo4tq-indicatorContainer"
       >
         <svg
           aria-hidden="true"
@@ -359,14 +359,14 @@ exports[`Select shouldn't find any results 1`] = `
     </div>
   </div>
   <div
-    class=" css-17wpf85-menu"
+    class=" css-sromc4-menu"
     id="react-select-5-listbox"
   >
     <div
-      class=" css-87spde-MenuList"
+      class=" css-hln2r9-MenuList"
     >
       <div
-        class=" css-36co7-NoOptionsMessage"
+        class=" css-v8tq8h-NoOptionsMessage"
       >
         No options
       </div>

packages/redux-devtools-utils/package.json

@@ -32,7 +32,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/core": "^3.13.1",
     "@redux-devtools/serialize": "^0.4.1",
     "@types/get-params": "^0.1.0",
@@ -40,25 +40,25 @@
     "immutable": "^4.1.0",
     "jsan": "^3.1.14",
     "lodash": "^4.17.21",
-    "nanoid": "^3.3.4",
+    "nanoid": "^4.0.0",
     "redux": "^4.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
     "@types/jsan": "^3.1.2",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.13.1",

packages/redux-devtools/examples/counter/package.json

@@ -30,29 +30,29 @@
     "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/redux-devtools/examples/todomvc/package.json

@@ -43,32 +43,32 @@
     "todomvc-app-css": "^2.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/classnames": "^2.3.1",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
+    "typescript": "~4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
 }

packages/redux-devtools/package.json

@@ -41,7 +41,7 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.20.6",
     "@redux-devtools/instrument": "^2.1.0",
     "@types/prop-types": "^15.7.5",
     "lodash": "^4.17.21",
@@ -49,21 +49,21 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/lodash": "^4.14.190",
+    "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.3.1",
@@ -73,7 +73,7 @@
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",