Merge branch 'master' into renovate/redux-persist-6.x

extension/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

extension/jest.config.js

@@ -2,4 +2,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
   testPathIgnorePatterns: ['<rootDir>/examples'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
 };

extension/src/app/middlewares/api.ts

@@ -355,7 +355,7 @@ function getReducerError() {
 
 function togglePersist() {
   const state = window.store.getState();
-  if (state.persistStates) {
+  if (state.instances.persisted) {
     Object.keys(state.instances.connections).forEach((id) => {
       if (connections.tab[id]) return;
       window.store.dispatch({ type: REMOVE_INSTANCE, id });
@@ -492,7 +492,7 @@ function disconnect(
     if (p) p.onDisconnect.removeListener(disconnectListener);
     delete connections[type][id];
     if (type === 'tab') {
-      if (!window.store.getState().persistStates) {
+      if (!window.store.getState().instances.persisted) {
         window.store.dispatch({ type: REMOVE_INSTANCE, id });
         toMonitors({ type: 'NA', id });
       }
@@ -522,7 +522,7 @@ function onConnect<S, A extends Action<unknown>>(port: chrome.runtime.Port) {
         if (isMonitored) port.postMessage({ type: 'START' });
 
         const state = window.store.getState();
-        if (state.persistStates) {
+        if (state.instances.persisted) {
           const instanceId = `${id}/${msg.instanceId}`;
           const persistedState = state.instances.states[instanceId];
           if (!persistedState) return;
@@ -585,7 +585,6 @@ window.syncOptions = syncOptions(toAllTabs); // Expose to the options page
 export default function api() {
   return (next: Dispatch<BackgroundAction>) => (action: BackgroundAction) => {
     if (action.type === LIFTED_ACTION) toContentScript(action);
-    else if (action.type === 'TOGGLE_PERSIST') togglePersist();
     return next(action);
   };
 }

extension/src/app/middlewares/panelSync.ts

@@ -6,17 +6,15 @@ import {
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
-import { StoreActionWithTogglePersist } from '../stores/windowStore';
+import { StoreAction } from '@redux-devtools/app/lib/actions';
 
 function panelDispatcher(bgConnection: chrome.runtime.Port) {
   let autoselected = false;
   const tabId = chrome.devtools.inspectedWindow.tabId;
 
-  return (
+  return (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
-      store: MiddlewareAPI<Dispatch<StoreActionWithTogglePersist>, StoreState>
+    (next: Dispatch<StoreAction>) =>
-    ) =>
+    (action: StoreAction) => {
-    (next: Dispatch<StoreActionWithTogglePersist>) =>
-    (action: StoreActionWithTogglePersist) => {
       const result = next(action);
       if (!autoselected && action.type === UPDATE_STATE && tabId) {
         autoselected = true;
@@ -25,7 +23,7 @@ function panelDispatcher(bgConnection: chrome.runtime.Port) {
           next({ type: SELECT_INSTANCE, selected: connections[0] });
         }
       }
-      if (action.type === LIFTED_ACTION || action.type === 'TOGGLE_PERSIST') {
+      if (action.type === LIFTED_ACTION) {
         const instances = store.getState().instances;
         const instanceId = getActiveInstance(instances);
         const id = instances.options[instanceId].connectionId;

extension/src/app/middlewares/windowSync.ts

@@ -6,10 +6,7 @@ import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
 import { BackgroundState } from '../reducers/background';
 import { StoreAction } from '@redux-devtools/app/lib/actions';
-import {
+import { WindowStoreAction } from '../stores/windowStore';
-  WindowStoreAction,
-  StoreActionWithTogglePersist,
-} from '../stores/windowStore';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
 import { BackgroundAction } from '../stores/backgroundStore';
 
@@ -17,14 +14,14 @@ const syncStores =
   (baseStore: Store<BackgroundState, BackgroundAction>) =>
   (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
   (next: Dispatch<WindowStoreAction>) =>
-  (action: StoreActionWithTogglePersist) => {
+  (action: StoreAction) => {
     if (action.type === UPDATE_STATE) {
       return next({
         ...action,
         instances: baseStore.getState().instances,
       });
     }
-    if (action.type === LIFTED_ACTION || action.type === 'TOGGLE_PERSIST') {
+    if (action.type === LIFTED_ACTION) {
       const instances = store.getState().instances;
       const instanceId = getActiveInstance(instances);
       const id = instances.options[instanceId].connectionId;

extension/src/app/reducers/background/index.ts

@@ -2,18 +2,15 @@ import { combineReducers, Reducer } from 'redux';
 import instances, {
   InstancesState,
 } from '@redux-devtools/app/lib/reducers/instances';
-import persistStates from './persistStates';
 import { BackgroundAction } from '../../stores/backgroundStore';
 
 export interface BackgroundState {
   readonly instances: InstancesState;
-  readonly persistStates: boolean;
 }
 
 const rootReducer: Reducer<BackgroundState, BackgroundAction> =
   combineReducers<BackgroundState>({
     instances,
-    persistStates,
   });
 
 export default rootReducer;

extension/src/app/reducers/background/persistStates.ts

@@ -1,6 +0,0 @@
-import { BackgroundAction } from '../../stores/backgroundStore';
-
-export default function persistStates(state = false, action: BackgroundAction) {
-  if (action.type === 'TOGGLE_PERSIST') return !state;
-  return state;
-}

extension/src/app/reducers/panel/index.ts

@@ -1,17 +1,37 @@
 import { combineReducers, Reducer } from 'redux';
-import instances from '@redux-devtools/app/lib/reducers/instances';
+import instances, {
-import monitor from '@redux-devtools/app/lib/reducers/monitor';
+  InstancesState,
-import notification from '@redux-devtools/app/lib/reducers/notification';
+} from '@redux-devtools/app/lib/reducers/instances';
-import reports from '@redux-devtools/app/lib/reducers/reports';
+import monitor, {
-import section from '@redux-devtools/app/lib/reducers/section';
+  MonitorState,
-import theme from '@redux-devtools/app/lib/reducers/theme';
+} from '@redux-devtools/app/lib/reducers/monitor';
-import connection from '@redux-devtools/app/lib/reducers/connection';
+import notification, {
-import socket from '@redux-devtools/app/lib/reducers/socket';
+  NotificationState,
-import { StoreState } from '@redux-devtools/app/lib/reducers';
+} from '@redux-devtools/app/lib/reducers/notification';
-import { StoreActionWithTogglePersist } from '../../stores/windowStore';
+import reports, {
+  ReportsState,
+} from '@redux-devtools/app/lib/reducers/reports';
+import section, {
+  SectionState,
+} from '@redux-devtools/app/lib/reducers/section';
+import theme, { ThemeState } from '@redux-devtools/app/lib/reducers/theme';
+import connection, {
+  ConnectionState,
+} from '@redux-devtools/app/lib/reducers/connection';
+import { StoreAction } from '@redux-devtools/app/lib/actions';
 
-const rootReducer: Reducer<StoreState, StoreActionWithTogglePersist> =
+export interface StoreStateWithoutSocket {
-  combineReducers<StoreState>({
+  readonly section: SectionState;
+  readonly theme: ThemeState;
+  readonly connection: ConnectionState;
+  readonly monitor: MonitorState;
+  readonly instances: InstancesState;
+  readonly reports: ReportsState;
+  readonly notification: NotificationState;
+}
+
+const rootReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
+  combineReducers<StoreStateWithoutSocket>({
     instances,
     monitor,
     reports,
@@ -19,7 +39,6 @@ const rootReducer: Reducer<StoreState, StoreActionWithTogglePersist> =
     section,
     theme,
     connection,
-    socket,
   });
 
 export default rootReducer;

extension/src/app/stores/backgroundStore.ts

@@ -45,12 +45,6 @@ export type LiftedActionAction =
   | LiftedActionActionAction
   | LiftedActionExportAction;
 
-interface TogglePersistAction {
-  readonly type: 'TOGGLE_PERSIST';
-  readonly instanceId: string | number;
-  readonly id: string | number | undefined;
-}
-
 interface ConnectedAction {
   readonly type: typeof CONNECTED;
 }
@@ -62,7 +56,6 @@ interface DisconnectedAction {
 export type BackgroundAction =
   | StoreActionWithoutLiftedAction
   | LiftedActionAction
-  | TogglePersistAction
   | ConnectedAction
   | DisconnectedAction;
 

extension/src/app/stores/windowStore.ts

@@ -23,19 +23,12 @@ import { BackgroundState } from '../reducers/background';
 import { BackgroundAction } from './backgroundStore';
 import { EmptyUpdateStateAction, NAAction } from '../middlewares/api';
 
-export interface TogglePersistAction {
-  readonly type: 'TOGGLE_PERSIST';
-}
-
-export type StoreActionWithTogglePersist = StoreAction | TogglePersistAction;
-
 export interface ExpandedUpdateStateAction extends UpdateStateAction {
   readonly instances: InstancesState;
 }
 
 export type WindowStoreAction =
   | StoreActionWithoutUpdateState
-  | TogglePersistAction
   | ExpandedUpdateStateAction
   | NAAction
   | EmptyUpdateStateAction;

extension/src/browser/extension/background/contextMenus.ts

@@ -1,4 +1,4 @@
-import openDevToolsWindow from './openWindow';
+import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 
 export function createMenu() {
   const menus = [
@@ -33,5 +33,5 @@ export function removeMenu() {
 }
 
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
-  openDevToolsWindow(menuItemId);
+  openDevToolsWindow(menuItemId as DevToolsPosition);
 });

extension/src/browser/extension/devpanel/index.tsx

@@ -9,8 +9,9 @@ import getPreloadedState from '../background/getPreloadedState';
 import '../../views/devpanel.pug';
 import { Action, PreloadedState, Store } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
+import { StoreAction } from '@redux-devtools/app/lib/actions';
 import { PanelMessage } from '../../../app/middlewares/api';
-import { StoreActionWithTogglePersist } from '../../../app/stores/windowStore';
+import { StoreStateWithoutSocket } from '../../../app/reducers/panel';
 
 const position = location.hash;
 const messageStyle: CSSProperties = {
@@ -20,7 +21,7 @@ const messageStyle: CSSProperties = {
 };
 
 let rendered: boolean | undefined;
-let store: Store<StoreState, StoreActionWithTogglePersist> | undefined;
+let store: Store<StoreStateWithoutSocket, StoreAction> | undefined;
 let bgConnection: chrome.runtime.Port;
 let naTimeout: NodeJS.Timeout;
 let preloadedState: PreloadedState<StoreState>;

extension/src/browser/extension/window/index.tsx

@@ -7,9 +7,9 @@ import { StoreState } from '@redux-devtools/app/lib/reducers';
 import App from '../../../app/containers/App';
 import configureStore from '../../../app/stores/windowStore';
 import getPreloadedState from '../background/getPreloadedState';
+import { MonitorMessage } from '../../../app/middlewares/api';
 
 import '../../views/window.pug';
-import { MonitorMessage } from '../../../app/middlewares/api';
 
 const position = location.hash;
 let preloadedState: PreloadedState<StoreState>;

extension/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

extension/webpack/base.config.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import webpack from 'webpack';
 import CopyPlugin from 'copy-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 const extpath = path.join(__dirname, '../src/browser/extension/');
 const mock = `${extpath}chromeAPIMock`;
@@ -31,7 +32,15 @@ const baseConfig = (params) => ({
   },
   plugins: [
     new webpack.DefinePlugin(params.globals),
-    ...(params.plugins ? params.plugins : []),
+    ...(params.plugins
+      ? params.plugins
+      : [
+          new ForkTsCheckerWebpackPlugin({
+            typescript: {
+              configFile: 'tsconfig.json',
+            },
+          }),
+        ]),
   ].concat(
     params.copy
       ? new CopyPlugin({
@@ -77,7 +86,7 @@ const baseConfig = (params) => ({
           ]),
       {
         test: /\.css?$/,
-        use: ['style-loader', 'raw-loader'],
+        use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.pug$/,

package.json

@@ -45,7 +45,7 @@
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.5",
     "ts-node": "^10.2.1",
-    "typescript": "^4.3.5",
+    "typescript": "~4.3.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",
@@ -71,5 +71,8 @@
     "packages/redux-devtools/examples/counter",
     "packages/redux-devtools/examples/todomvc",
     "packages/redux-devtools-slider-monitor/examples/todomvc"
-  ]
+  ],
+  "resolutions": {
+    "@babel/highlight/chalk": "Methuselah96/chalk#head=v2-without-process"
+  }
 }

packages/d3-state-visualizer/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

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

@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --open"
+    "start": "webpack serve --open"
   },
   "repository": {
     "type": "git",

packages/d3tooltip/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/devui/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/devui/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Container } from '../src';
 import { listSchemes, listThemes } from '../src/utils/theme';
-import '../src/presets';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/devui/jest.config.js

@@ -2,4 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts',
+  },
 };

packages/devui/package.json

@@ -36,11 +36,11 @@
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@rjsf/core": "^2.5.1",
+    "@rjsf/core": "^3.1.0",
     "@types/base16": "^1.0.2",
     "@types/codemirror": "^5.60.2",
     "@types/prop-types": "^15.7.4",
-    "@types/react-select": "^3.1.2",
+    "@types/react-select": "^4.0.17",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/simple-element-resize-detector": "^1.3.0",
     "@types/styled-components": "^5.1.13",
@@ -49,7 +49,7 @@
     "color": "^3.2.1",
     "prop-types": "^15.7.2",
     "react-icons": "^4.2.0",
-    "react-select": "^3.2.0",
+    "react-select": "^4.3.1",
     "redux-devtools-themes": "^1.0.0",
     "simple-element-resize-detector": "^1.3.0",
     "styled-components": "^5.3.1"

packages/devui/src/Editor/Editor.tsx

@@ -6,6 +6,15 @@ import { Base16Theme } from 'base16';
 import { defaultStyle, themedStyle } from './styles';
 import { Theme } from '../themes/default';
 
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/brace-fold';
+
+import '../../fonts/index.css';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/fold/foldgutter.css';
+
 const EditorContainer = styled.div(
   '' as unknown as TemplateStringsArray,
   ({ theme }: { theme: Theme }) =>

packages/devui/src/Select/Select.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent, Component, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect, {
+  GroupTypeBase,
   NamedProps as ReactSelectProps,
   OptionTypeBase,
 } from 'react-select';
@@ -8,9 +9,10 @@ import createThemedComponent from '../utils/createThemedComponent';
 import { Theme } from '../themes/default';
 
 export interface SelectProps<
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
-> extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
   theme: Theme;
 }
 
@@ -18,9 +20,10 @@ export interface SelectProps<
  * Wrapper around [React Select](https://github.com/JedWatson/react-select).
  */
 export class Select<
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
-> extends (PureComponent || Component)<SelectProps<Option, IsMulti>> {
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+> extends (PureComponent || Component)<SelectProps<Option, IsMulti, Group>> {
   render() {
     return (
       <ReactSelect
@@ -88,17 +91,19 @@ export class Select<
 }
 
 export interface ExternalSelectProps<
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
-> extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
   theme?: Theme;
 }
 
 type SelectComponent = <
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
 >(
-  props: ExternalSelectProps<Option, IsMulti>
+  props: ExternalSelectProps<Option, IsMulti, Group>
 ) => ReactElement;
 
 export default createThemedComponent(Select) as SelectComponent & {

packages/devui/src/presets.ts

@@ -1,12 +0,0 @@
-/* eslint-disable global-require */
-
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/fold/foldcode';
-import 'codemirror/addon/fold/brace-fold';
-
-if (process.env.NODE_ENV !== 'test') {
-  require('../fonts/index.css');
-  require('codemirror/lib/codemirror.css');
-  require('codemirror/addon/fold/foldgutter.css');
-}

packages/devui/tests/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/map2tree/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/react-base16-styling/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/react-dock/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["react-hot-loader/babel"]
-    "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
-  ]
 }

packages/react-dock/package.json

@@ -25,7 +25,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server",
+    "start": "webpack serve",
     "stats": "webpack --profile --json > stats.json",
     "build:demo": "NODE_ENV=production webpack -p",
     "build": "npm run build:types && npm run build:js",
@@ -56,6 +56,7 @@
     "react-dom": "^16.14.0",
     "react-hot-loader": "^4.13.0",
     "react-icons": "^4.2.0",
+    "react-is": "^16.13.1",
     "react-test-renderer": "^16.14.0",
     "styled-components": "^5.3.1"
   },

packages/react-json-tree/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

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

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

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

@@ -12,7 +12,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server --open",
+    "start": "webpack serve --open",
     "stats": "NODE_ENV=production webpack --json > dist/stats.json",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",

packages/redux-devtools-app/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-app/.eslintrc.js

@@ -9,6 +9,14 @@ module.exports = {
         project: ['./tsconfig.json'],
       },
     },
+    {
+      files: ['demo/*.ts', 'demo/*.tsx'],
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.demo.json'],
+      },
+    },
     {
       files: ['test/*.ts', 'test/*.tsx'],
       extends: '../../eslintrc.ts.react.jest.base.json',

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

@@ -2,4 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
 };

packages/redux-devtools-app/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server --hot --env development --env platform=web --progress",
+    "start": "webpack serve --hot --env development --env platform=web --progress",
     "build": "npm run build:types && npm run build:js && npm run build:web && npm run build:umd && npm run build:umd:min",
     "build:types": "tsc --emitDeclarationOnly",
     "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
@@ -63,7 +63,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@rjsf/core": "^2.5.1",
+    "@rjsf/core": "^3.1.0",
     "@types/json-schema": "^7.0.9",
     "@types/socketcluster-client": "^13.0.5",
     "enzyme": "^3.11.0",

packages/redux-devtools-app/src/index.tsx

@@ -1,4 +1,3 @@
-import 'devui/lib/presets';
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';

packages/redux-devtools-app/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/redux-devtools-app/tsconfig.demo.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.react.base.json",
+  "include": ["demo", "src"]
+}

packages/redux-devtools-app/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "lib"
   },
-  "include": ["demo", "src"]
+  "include": ["src"]
 }

packages/redux-devtools-app/webpack.config.ts

@@ -65,7 +65,7 @@ module.exports = (env: { development?: boolean; platform?: string } = {}) => ({
     }),
     new ForkTsCheckerWebpackPlugin({
       typescript: {
-        configFile: 'tsconfig.json',
+        configFile: 'tsconfig.demo.json',
       },
     }),
   ],

packages/redux-devtools-chart-monitor/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-cli/package.json

@@ -58,7 +58,7 @@
     "lodash": "^4.17.21",
     "minimist": "^1.2.5",
     "morgan": "^1.10.0",
-    "open": "^7.4.2",
+    "open": "^8.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "semver": "^7.3.5",

packages/redux-devtools-cli/src/bin/openApp.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import spawn from 'cross-spawn';
 import { Options } from '../options';
 
-export default function openApp(app: boolean | string, options: Options) {
+export default async function openApp(app: true | string, options: Options) {
   if (app === true || app === 'electron') {
     try {
       const port = options.port ? `--port=${options.port}` : '';
@@ -31,9 +31,9 @@ export default function openApp(app: boolean | string, options: Options) {
     }
     return;
   }
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+
-  open(
+  await open(
     `http://localhost:${options.port}/`,
-    app !== 'browser' ? { app: app as string } : undefined
+    app !== 'browser' ? { app: { name: app } } : undefined
   );
 }

packages/redux-devtools-cli/src/bin/redux-devtools.ts

@@ -90,8 +90,8 @@ if (argv.injectserver) {
 // eslint-disable-next-line @typescript-eslint/no-floating-promises
 server(argv).then(function (r) {
   if (argv.open && argv.open !== 'false') {
-    r.on('ready', function () {
+    r.on('ready', async function () {
-      openApp(argv.open, options);
+      await openApp(argv.open, options);
     });
   }
 });

packages/redux-devtools-cli/src/index.ts

@@ -14,7 +14,7 @@ export interface ExtendedOptions extends Options {
 
 export default function (argv: { [arg: string]: any }): Promise<{
   portAlreadyUsed?: boolean;
-  on: (status: 'ready', cb: () => void) => void;
+  on: (status: 'ready', cb: (() => void) | (() => Promise<void>)) => void;
 }> {
   const options = Object.assign(getOptions(argv), {
     workerController: __dirname + '/worker.js',

packages/redux-devtools-dock-monitor/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-inspector-monitor-test-tab/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["@babel/plugin-transform-runtime"]
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ]
 }

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

@@ -2,4 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
 };

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

@@ -29,7 +29,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server --config demo/config/webpack.config.ts",
+    "start": "webpack serve --config demo/config/webpack.config.ts",
     "build": "npm run build:types && npm run build:js",
     "build:types": "tsc --emitDeclarationOnly",
     "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",

packages/redux-devtools-inspector-monitor-test-tab/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/redux-devtools-inspector-monitor-trace-tab/.babelrc

@@ -4,5 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

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

@@ -31,9 +31,8 @@
     "@babel/code-frame": "^7.14.5",
     "@types/chrome": "^0.0.154",
     "anser": "^1.4.10",
-    "html-entities": "^1.4.0",
+    "html-entities": "^2.3.2",
-    "redux-devtools-themes": "^1.0.0",
+    "redux-devtools-themes": "^1.0.0"
-    "settle-promise": "^1.0.0"
   },
   "devDependencies": {
     "@redux-devtools/core": "^3.9.0",

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx

@@ -12,7 +12,7 @@ import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
 import { ScriptLine } from '../utils/stack-frame';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
-// import { codeFrameColumns } from '@babel/code-frame';
+import { codeFrameColumns } from '@babel/code-frame';
 import { nicinabox as theme } from 'redux-devtools-themes';
 
 interface StackFrameCodeBlockPropsType {
@@ -48,25 +48,24 @@ function StackFrameCodeBlock(props: StackFrameCodeBlockPropsType) {
     }
     sourceCode[line - 1] = text;
   });
-  // const ansiHighlight = codeFrameColumns(
+  const ansiHighlight = codeFrameColumns(
-  //   sourceCode.join('\n'),
+    sourceCode.join('\n'),
-  //   {
+    {
-  //     start: {
+      start: {
-  //       line: lineNum,
+        line: lineNum,
-  //       column:
+        column:
-  //         columnNum == null
+          columnNum == null
-  //           ? 0
+            ? 0
-  //           : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
+            : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
-  //     },
+      },
-  //   },
+    },
-  //   {
+    {
-  //     forceColor: true,
+      forceColor: true,
-  //     linesAbove: contextSize,
+      linesAbove: contextSize,
-  //     linesBelow: contextSize,
+      linesBelow: contextSize,
-  //   }
+    }
-  // );
+  );
-  // const htmlHighlight = generateAnsiHTML(ansiHighlight);
+  const htmlHighlight = generateAnsiHTML(ansiHighlight);
-  const htmlHighlight = generateAnsiHTML(sourceCode.join('\n'));
   const code = document.createElement('code');
   code.innerHTML = htmlHighlight;
   absolutifyCaret(code);

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/generateAnsiHTML.ts

@@ -7,9 +7,7 @@
 
 import Anser from 'anser';
 import { nicinabox as theme } from 'redux-devtools-themes';
-import { AllHtmlEntities as Entities } from 'html-entities';
+import { encode } from 'html-entities';
-
-const entities = new Entities();
 
 const anserMap = {
   'ansi-bright-black': theme.base03,
@@ -27,7 +25,7 @@ const anserMap = {
 };
 
 function generateAnsiHTML(txt: string): string {
-  const arr = new Anser().ansiToJson(entities.encode(txt), {
+  const arr = new Anser().ansiToJson(encode(txt), {
     use_classes: true,
   });
 

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/mapper.ts

@@ -8,7 +8,6 @@
 import StackFrame from './stack-frame';
 import { getSourceMap } from './getSourceMap';
 import { getLinesAround } from './getLinesAround';
-import { settle } from 'settle-promise';
 
 /**
  * Enhances a set of <code>StackFrame</code>s with their original positions and code (when available).
@@ -31,7 +30,7 @@ async function map(
     }
     files.push(fileName);
   });
-  await settle(
+  await Promise.allSettled(
     files.map(async (fileName) => {
       const fileSource = await fetch(fileName).then((r) => r.text());
       const map = await getSourceMap(fileName, fileSource);

packages/redux-devtools-inspector-monitor-trace-tab/src/settle-promise.ts

@@ -1,3 +0,0 @@
-declare module 'settle-promise' {
-  export function settle(promises: Promise<void>[]): Promise<void>;
-}

packages/redux-devtools-inspector-monitor/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["@babel/plugin-transform-runtime"]
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ]
 }

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

@@ -22,7 +22,7 @@
     "url": "https://github.com/reduxjs/redux-devtools"
   },
   "scripts": {
-    "start": "webpack-dev-server --config demo/config/webpack.config.ts",
+    "start": "webpack serve --config demo/config/webpack.config.ts",
     "stats": "webpack --profile --json > stats.json",
     "build:demo": "NODE_ENV=production webpack -p",
     "build": "npm run build:types && npm run build:js",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@types/dragula": "^3.7.1",
     "@types/prop-types": "^15.7.4",
-    "dateformat": "^3.0.3",
+    "dateformat": "^4.5.1",
     "hex-rgba": "^1.0.2",
     "immutable": "^4.0.0-rc.14",
     "javascript-stringify": "^2.1.0",

packages/redux-devtools-instrument/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-log-monitor/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-rtk-query-monitor/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-rtk-query-monitor/demo/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["@babel/plugin-transform-runtime"]
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ]
 }

packages/redux-devtools-serialize/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-slider-monitor/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-slider-monitor/examples/todomvc/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["react-hot-loader/babel"]
-    "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
-  ]
 }

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

@@ -8,7 +8,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server",
+    "start": "webpack serve",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "type-check": "tsc --noEmit",

packages/redux-devtools-utils/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-utils/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@redux-devtools/core": "^3.9.0",
     "@redux-devtools/serialize": "^0.3.0",
+    "@types/get-params": "^0.1.0",
     "get-params": "^0.1.2",
     "immutable": "^4.0.0-rc.14",
     "jsan": "^3.1.13",

packages/redux-devtools-utils/src/get-params.ts

@@ -1,4 +0,0 @@
-declare module 'get-params' {
-  function getParams(func: (...args: any[]) => unknown): string[];
-  export default getParams;
-}

packages/redux-devtools/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools/examples/counter/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["react-hot-loader/babel"]
-    "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
-  ]
 }

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

@@ -12,7 +12,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server --open",
+    "start": "webpack serve",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "type-check": "tsc --noEmit",

packages/redux-devtools/examples/todomvc/.babelrc

@@ -4,8 +4,5 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": [
+  "plugins": ["react-hot-loader/babel"]
-    "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
-  ]
 }

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

@@ -24,7 +24,7 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack-dev-server --open",
+    "start": "webpack serve --open",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "type-check": "tsc --noEmit",

renovate.json

@@ -1,5 +1,15 @@
 {
   "extends": ["config:base", "group:allNonMajor", ":maintainLockFilesWeekly"],
   "rangeStrategy": "bump",
-  "rebaseWhen": "conflicted"
+  "rebaseWhen": "conflicted",
+  "packageRules": [
+    {
+      "matchPackageNames": [
+        "@types/react",
+        "@types/react-dom",
+        "@types/react-test-renderer"
+      ],
+      "groupName": "react monorepo"
+    }
+  ]
 }

tsconfig.base.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2018",
+    "target": "es2020",
     "module": "commonjs",
     "declaration": true,
     "strict": true,

yarn.lock

@@ -1941,16 +1941,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime-corejs2@npm:^7.8.7":
-  version: 7.14.6
-  resolution: "@babel/runtime-corejs2@npm:7.14.6"
-  dependencies:
-    core-js: ^2.6.5
-    regenerator-runtime: ^0.13.4
-  checksum: 6b776553c02b16a6fb627451e032c4f6257895bbe8892c2c6cc1cc5f1eef82ed6e1720f390876ce62ddd640d3078f7d51b70227d5f7f9882942c780b68333dbd
-  languageName: node
-  linkType: hard
-
 "@babel/runtime-corejs3@npm:^7.10.2":
   version: 7.14.6
   resolution: "@babel/runtime-corejs3@npm:7.14.6"
@@ -1961,7 +1951,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.14.6
   resolution: "@babel/runtime@npm:7.14.6"
   dependencies:
@@ -1970,6 +1960,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.0":
+  version: 7.15.3
+  resolution: "@babel/runtime@npm:7.15.3"
+  dependencies:
+    regenerator-runtime: ^0.13.4
+  checksum: 2f0b8d2d4e36035ab1d84af0ec26aafa098536870f27c8e07de0a0e398f7a394fdea68a88165535ffb52ded6a68912bdc3450bdf91f229eb132e1c89470789f5
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.12.7, @babel/template@npm:^7.14.5, @babel/template@npm:^7.3.3":
   version: 7.14.5
   resolution: "@babel/template@npm:7.14.5"
@@ -2932,7 +2931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^10.0.27, @emotion/cache@npm:^10.0.9":
+"@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
   dependencies:
@@ -2957,7 +2956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/core@npm:^10.0.9, @emotion/core@npm:^10.1.1":
+"@emotion/core@npm:^10.1.1":
   version: 10.1.1
   resolution: "@emotion/core@npm:10.1.1"
   dependencies:
@@ -2973,7 +2972,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/css@npm:^10.0.27, @emotion/css@npm:^10.0.9":
+"@emotion/css@npm:^10.0.27":
   version: 10.0.27
   resolution: "@emotion/css@npm:10.0.27"
   dependencies:
@@ -3023,7 +3022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.4.1":
+"@emotion/react@npm:^11.1.1, @emotion/react@npm:^11.4.1":
   version: 11.4.1
   resolution: "@emotion/react@npm:11.4.1"
   dependencies:
@@ -3059,7 +3058,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.0.2":
+"@emotion/serialize@npm:^1.0.0, @emotion/serialize@npm:^1.0.2":
   version: 1.0.2
   resolution: "@emotion/serialize@npm:1.0.2"
   dependencies:
@@ -4877,7 +4876,7 @@ __metadata:
     "@redux-devtools/rtk-query-monitor": ^1.0.0
     "@redux-devtools/slider-monitor": ^2.0.0-8
     "@reduxjs/toolkit": ^1.6.1
-    "@rjsf/core": ^2.5.1
+    "@rjsf/core": ^3.1.0
     "@types/json-schema": ^7.0.9
     "@types/socketcluster-client": ^13.0.5
     d3-state-visualizer: ^1.4.0
@@ -4955,7 +4954,7 @@ __metadata:
     minimist: ^1.2.5
     morgan: ^1.10.0
     ncp: ^2.0.0
-    open: ^7.4.2
+    open: ^8.2.1
     react: ^16.14.0
     react-dom: ^16.14.0
     semver: ^7.3.5
@@ -5077,13 +5076,12 @@ __metadata:
     enzyme: ^3.11.0
     enzyme-adapter-react-16: ^1.15.6
     enzyme-to-json: ^3.6.2
-    html-entities: ^1.4.0
+    html-entities: ^2.3.2
     react: ^16.14.0
     react-dom: ^16.14.0
     react-test-renderer: ^16.14.0
     redux: ^4.1.1
     redux-devtools-themes: ^1.0.0
-    settle-promise: ^1.0.0
   peerDependencies:
     "@redux-devtools/inspector-monitor": ^1.0.0
     "@types/react": ^16.3.0 || ^17.0.0
@@ -5110,7 +5108,7 @@ __metadata:
     "@types/redux-logger": ^3.0.9
     base16: ^1.0.0
     connected-react-router: ^6.9.1
-    dateformat: ^3.0.3
+    dateformat: ^4.5.1
     hex-rgba: ^1.0.2
     history: ^4.10.1
     immutable: ^4.0.0-rc.14
@@ -5256,6 +5254,7 @@ __metadata:
   dependencies:
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/serialize": ^0.3.0
+    "@types/get-params": ^0.1.0
     get-params: ^0.1.2
     immutable: ^4.0.0-rc.14
     jsan: ^3.1.13
@@ -5309,24 +5308,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/core@npm:^2.5.1":
+"@rjsf/core@npm:^3.1.0":
-  version: 2.5.1
+  version: 3.1.0
-  resolution: "@rjsf/core@npm:2.5.1"
+  resolution: "@rjsf/core@npm:3.1.0"
   dependencies:
-    "@babel/runtime-corejs2": ^7.8.7
+    "@types/json-schema": ^7.0.7
-    "@types/json-schema": ^7.0.4
     ajv: ^6.7.0
-    core-js: ^2.5.7
+    core-js-pure: ^3.6.5
     json-schema-merge-allof: ^0.6.0
     jsonpointer: ^4.0.1
     lodash: ^4.17.15
+    nanoid: ^3.1.23
     prop-types: ^15.7.2
-    react-app-polyfill: ^1.0.4
     react-is: ^16.9.0
-    shortid: ^2.2.14
   peerDependencies:
     react: ">=16"
-  checksum: 670d097045f60dde7203419df55f112367b7dffe3a4bfb1501535bf39a58bc66d74ef3139b3ad62aaa94cf5d03a8bc6ee1835c1dfa8bff7caadcb007eae2a2ae
+  checksum: fe37da1cbf7fe213b02e37b71769bef7592fc24181726b3ae7a765f1e14308cfb161fdea190f69fa1469547208dd6a0552c57ef0ebe5317b636244dbaf78bc72
   languageName: node
   linkType: hard
 
@@ -6898,6 +6895,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/get-params@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@types/get-params@npm:0.1.0"
+  checksum: be378a08606c975c05faa1a64e73bfec3e98a924bda282109e4a6fe222cffab087ee47277aadf3dbe77e999b4bb5153553e073f008d6b9518862dc924c85ccff
+  languageName: node
+  linkType: hard
+
 "@types/glob-base@npm:^0.3.0":
   version: 0.3.0
   resolution: "@types/glob-base@npm:0.3.0"
@@ -7503,14 +7507,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-select@npm:^3.1.2":
+"@types/react-select@npm:^4.0.17":
-  version: 3.1.2
+  version: 4.0.17
-  resolution: "@types/react-select@npm:3.1.2"
+  resolution: "@types/react-select@npm:4.0.17"
   dependencies:
+    "@emotion/serialize": ^1.0.0
     "@types/react": "*"
     "@types/react-dom": "*"
     "@types/react-transition-group": "*"
-  checksum: 6e4145bf703f36c799a5b890ec314fcc83367e6bb73d36f304a4600f0ef871c7d10b3ef083a7d21bf0a6ed42d4c95347736098fea4ddeccbb3d90810f76cdc7c
+  checksum: aa94bd1ff3536ab2bb8443bcf3c11109bcd78ae965dc534b205273eb98a84487d272e008adff50744870255e4ec5767465283649abd3d449fbc712718c062fca
   languageName: node
   linkType: hard
 
@@ -9458,7 +9463,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asap@npm:^2.0.0, asap@npm:~2.0.3, asap@npm:~2.0.6":
+"asap@npm:^2.0.0, asap@npm:~2.0.3":
   version: 2.0.6
   resolution: "asap@npm:2.0.6"
   checksum: b296c92c4b969e973260e47523207cd5769abd27c245a68c26dc7a0fe8053c55bb04360237cb51cab1df52be939da77150ace99ad331fb7fb13b3423ed73ff3d
@@ -11010,6 +11015,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@Methuselah96/chalk#head=v2-without-process":
+  version: 2.4.2
+  resolution: "chalk@https://github.com/Methuselah96/chalk.git#commit=3dd077ca367b80efec4b522cc300d68b4974499e"
+  dependencies:
+    ansi-styles: ^3.2.1
+    escape-string-regexp: ^1.0.5
+    supports-color: ^5.3.0
+  checksum: dbe195f24bc04b95494b966dd357d9389c57092b548138f9d49b8e7d4a3c9d6f81e181fb52afbebf12ab8abec7e2ae04cd409c83cdcc275bc1f72bb82f4c954c
+  languageName: node
+  linkType: hard
+
 "chalk@npm:2.4.2, chalk@npm:^2.0.0, chalk@npm:^2.0.1, chalk@npm:^2.3.0, chalk@npm:^2.4.1, chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -12146,14 +12162,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.4.0, core-js@npm:^2.5.7, core-js@npm:^2.6.5":
+"core-js-pure@npm:^3.6.5":
+  version: 3.16.3
+  resolution: "core-js-pure@npm:3.16.3"
+  checksum: 15be550ffb1eed2a60c9e4ac72620ccf66c11da696597cdcbc4ad874d70fd2c5a1bfe40fea8ce09fb3ee2d8efcfd98de1bf8404209a170f769d9a4f309644197
+  languageName: node
+  linkType: hard
+
+"core-js@npm:^2.4.0, core-js@npm:^2.6.5":
   version: 2.6.12
   resolution: "core-js@npm:2.6.12"
   checksum: 44fa9934a85f8c78d61e0c8b7b22436330471ffe59ec5076fe7f324d6e8cf7f824b14b1c81ca73608b13bdb0fef035bd820989bf059767ad6fa13123bb8bd016
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.4, core-js@npm:^3.5.0, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
+"core-js@npm:^3.0.4, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
   version: 3.14.0
   resolution: "core-js@npm:3.14.0"
   checksum: a450089e5796496c7f4a84b13139d853fec5233077833ed142fe401bf9ff4ec2a5bae781f3879ef76cefcfe8a274218d3d4d7d813f5f7f32911fbd36e13a6dc4
@@ -12688,13 +12711,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dateformat@npm:^3.0.0, dateformat@npm:^3.0.3":
+"dateformat@npm:^3.0.0":
   version: 3.0.3
   resolution: "dateformat@npm:3.0.3"
   checksum: ca4911148abb09887bd9bdcd632c399b06f3ecad709a18eb594d289a1031982f441e08e281db77ffebcb2cbcbfa1ac578a7cbfbf8743f41009aa5adc1846ed34
   languageName: node
   linkType: hard
 
+"dateformat@npm:^4.5.1":
+  version: 4.5.1
+  resolution: "dateformat@npm:4.5.1"
+  checksum: 2c80b0fed4977db338aa70fbdd605a50c06ec36f4ef8d8fd36193a08c4910da1172eec919a74ed93abfc134fc71dca8707877d4fd149c07f0d1c919d598283e3
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -13121,7 +13151,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "devui@workspace:packages/devui"
   dependencies:
-    "@rjsf/core": ^2.5.1
+    "@rjsf/core": ^3.1.0
     "@storybook/addon-essentials": ^6.3.7
     "@storybook/react": ^6.3.7
     "@types/base16": ^1.0.2
@@ -13129,7 +13159,7 @@ __metadata:
     "@types/enzyme": ^3.10.9
     "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/prop-types": ^15.7.4
-    "@types/react-select": ^3.1.2
+    "@types/react-select": ^4.0.17
     "@types/redux-devtools-themes": ^1.0.0
     "@types/simple-element-resize-detector": ^1.3.0
     "@types/styled-components": ^5.1.13
@@ -13145,7 +13175,7 @@ __metadata:
     react-dom: ^16.14.0
     react-icons: ^4.2.0
     react-is: ^16.13.1
-    react-select: ^3.2.0
+    react-select: ^4.3.1
     redux-devtools-themes: ^1.0.0
     simple-element-resize-detector: ^1.3.0
     styled-components: ^5.3.1
@@ -16808,7 +16838,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"html-entities@npm:^1.2.0, html-entities@npm:^1.2.1, html-entities@npm:^1.4.0":
+"html-entities@npm:^1.2.0, html-entities@npm:^1.2.1":
   version: 1.4.0
   resolution: "html-entities@npm:1.4.0"
   checksum: 4b73ffb9eead200f99146e4fbe70acb0af2fea136901a131fc3a782e9ef876a7cbb07dec303ca1f8804232b812249dbf3643a270c9c524852065d9224a8dcdd0
@@ -21458,13 +21488,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^2.1.0":
-  version: 2.1.11
-  resolution: "nanoid@npm:2.1.11"
-  checksum: 18cd14386816873849787eb4e65667021bfdeb019a8f14c74287c23594c67b7c0e8f42c7d69f6aedf05cd3d100f1ddc41184f9f9b6b17fbaea1c3ee3f0704eec
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^3.1.23, nanoid@npm:^3.1.25":
   version: 3.1.25
   resolution: "nanoid@npm:3.1.25"
@@ -22760,7 +22783,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"open@npm:^7.0.2, open@npm:^7.0.3, open@npm:^7.4.2":
+"open@npm:^7.0.2, open@npm:^7.0.3":
   version: 7.4.2
   resolution: "open@npm:7.4.2"
   dependencies:
@@ -22770,7 +22793,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"open@npm:^8.0.9":
+"open@npm:^8.0.9, open@npm:^8.2.1":
   version: 8.2.1
   resolution: "open@npm:8.2.1"
   dependencies:
@@ -24071,15 +24094,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"promise@npm:^8.0.3":
-  version: 8.1.0
-  resolution: "promise@npm:8.1.0"
-  dependencies:
-    asap: ~2.0.6
-  checksum: 89b71a56154ed7d66a73236d8e8351a9c59adddba3929ecc845f75421ff37fc08ea0c67ad76cd5c0b0d81812c7d07a32bed27e7df5fcc960c6d68b0c1cd771f7
-  languageName: node
-  linkType: hard
-
 "prompts@npm:2.4.0":
   version: 2.4.0
   resolution: "prompts@npm:2.4.0"
@@ -24630,20 +24644,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-app-polyfill@npm:^1.0.4":
-  version: 1.0.6
-  resolution: "react-app-polyfill@npm:1.0.6"
-  dependencies:
-    core-js: ^3.5.0
-    object-assign: ^4.1.1
-    promise: ^8.0.3
-    raf: ^3.4.1
-    regenerator-runtime: ^0.13.3
-    whatwg-fetch: ^3.0.0
-  checksum: d38fb0e5f773eb618e39832e78e34b2382a33a2f633ecbc7aba3af819134938f25f4b6915f40dcbb46efa1096efdfabe44030165142000dcf522f564db7cb3b9
-  languageName: node
-  linkType: hard
-
 "react-base16-styling@^0.8.0, react-base16-styling@workspace:packages/react-base16-styling":
   version: 0.0.0-use.local
   resolution: "react-base16-styling@workspace:packages/react-base16-styling"
@@ -24792,6 +24792,7 @@ fsevents@^1.2.7:
     react-dom: ^16.14.0
     react-hot-loader: ^4.13.0
     react-icons: ^4.2.0
+    react-is: ^16.13.1
     react-test-renderer: ^16.14.0
     styled-components: ^5.3.1
   peerDependencies:
@@ -25157,14 +25158,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-select@npm:^3.2.0":
+"react-select@npm:^4.3.1":
-  version: 3.2.0
+  version: 4.3.1
-  resolution: "react-select@npm:3.2.0"
+  resolution: "react-select@npm:4.3.1"
   dependencies:
-    "@babel/runtime": ^7.4.4
+    "@babel/runtime": ^7.12.0
-    "@emotion/cache": ^10.0.9
+    "@emotion/cache": ^11.4.0
-    "@emotion/core": ^10.0.9
+    "@emotion/react": ^11.1.1
-    "@emotion/css": ^10.0.9
     memoize-one: ^5.0.0
     prop-types: ^15.6.0
     react-input-autosize: ^3.0.0
@@ -25172,7 +25172,7 @@ fsevents@^1.2.7:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
-  checksum: 082c818369fb8c7ce50bbd51260b21794f58dd41e9df5e0798c10e10478fb44b9fd88247f24720d5b443d77a6ec8afa733ecdd15a7722fde85c27bb87c379962
+  checksum: e87e0b42a662ddce7957a69a3029ea769b22264c197cbd1d8bde1ce631e49c5c5f42414773364674a7a6a8431340e1ede49220583bf1dcd966b63e9bd25cfc12
   languageName: node
   linkType: hard
 
@@ -25722,7 +25722,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.3, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
+"regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
   version: 0.13.8
   resolution: "regenerator-runtime@npm:0.13.8"
   checksum: 5f89699ab578301e3f47fe323d2a9e19ed4b7302481b37ce96843602be3a5cb1e5b66a07c1500e69d4710c1dd6fa3b3f3e56d188ef56df4c17a744d853ac36ed
@@ -26398,7 +26398,7 @@ resolve@^2.0.0-next.3:
     stylelint-processor-styled-components: ^1.10.0
     ts-jest: ^27.0.5
     ts-node: ^10.2.1
-    typescript: ^4.3.5
+    typescript: ~4.3.5
     url-loader: ^4.1.1
     webpack: ^5.51.1
     webpack-cli: ^4.8.0
@@ -26976,13 +26976,6 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"settle-promise@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "settle-promise@npm:1.0.0"
-  checksum: e23f35a9eff783f801dc57b5b57ebeb9170bf8033afa8da0af4107f233da197ac6f2470c8c796d7cbc57c75182f48b8192a463a3fa32fdf00e2cda1d3f2258b3
-  languageName: node
-  linkType: hard
-
 "sha.js@npm:^2.4.0, sha.js@npm:^2.4.11, sha.js@npm:^2.4.8":
   version: 2.4.11
   resolution: "sha.js@npm:2.4.11"
@@ -27060,15 +27053,6 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"shortid@npm:^2.2.14":
-  version: 2.2.16
-  resolution: "shortid@npm:2.2.16"
-  dependencies:
-    nanoid: ^2.1.0
-  checksum: 0790ce22fe20aacc226915160da178b5a6af7814d1796404684f6699b60f77e291d39ad3b6b2b4c6efcf5553e1deeee7e29a48b8f46955de1425e67ab934e309
-  languageName: node
-  linkType: hard
-
 "side-channel@npm:^1.0.4":
   version: 1.0.4
   resolution: "side-channel@npm:1.0.4"
@@ -29383,17 +29367,7 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-typescript@^4.3.5:
+"typescript@patch:typescript@~4.3.5#~builtin<compat/typescript>":
-  version: 4.3.5
-  resolution: "typescript@npm:4.3.5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: bab033b5e2b0790dd35b77fd005df976ef80b8d84fd2c6e63cc31808151875beae9216e5a315fe7068e8499905c3c354248fe83272cdfc13b7705635f0c66c97
-  languageName: node
-  linkType: hard
-
-"typescript@patch:typescript@^4.3.5#~builtin<compat/typescript>":
   version: 4.3.5
   resolution: "typescript@patch:typescript@npm%3A4.3.5#~builtin<compat/typescript>::version=4.3.5&hash=d8b4e7"
   bin:
@@ -29403,6 +29377,16 @@ typescript@^4.3.5:
   languageName: node
   linkType: hard
 
+typescript@~4.3.5:
+  version: 4.3.5
+  resolution: "typescript@npm:4.3.5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: bab033b5e2b0790dd35b77fd005df976ef80b8d84fd2c6e63cc31808151875beae9216e5a315fe7068e8499905c3c354248fe83272cdfc13b7705635f0c66c97
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^2.6.1":
   version: 2.8.29
   resolution: "uglify-js@npm:2.8.29"
@@ -30579,13 +30563,6 @@ typescript@^4.3.5:
   languageName: node
   linkType: hard
 
-"whatwg-fetch@npm:^3.0.0":
-  version: 3.6.2
-  resolution: "whatwg-fetch@npm:3.6.2"
-  checksum: ee976b7249e7791edb0d0a62cd806b29006ad7ec3a3d89145921ad8c00a3a67e4be8f3fb3ec6bc7b58498724fd568d11aeeeea1f7827e7e1e5eae6c8a275afed
-  languageName: node
-  linkType: hard
-
 "whatwg-mimetype@npm:^2.3.0":
   version: 2.3.0
   resolution: "whatwg-mimetype@npm:2.3.0"