Remove styling prop

packages/redux-devtools-inspector-monitor/src/ActionList.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useLayoutEffect, useRef } from 'react';
 import { Action } from 'redux';
 import { PerformAction } from '@redux-devtools/core';
-import { StylingFunction } from 'react-base16-styling';
 import {
   closestCenter,
   DndContext,
@@ -56,7 +55,6 @@ interface Props<A extends Action<string>> {
   draggableActions: boolean;
   hideMainButtons: boolean | undefined;
   hideActionButtons: boolean | undefined;
-  styling: StylingFunction;
   onSearch: (value: string) => void;
   onSelect: (e: React.MouseEvent<HTMLDivElement>, actionId: number) => void;
   onToggleAction: (actionId: number) => void;
@@ -69,7 +67,6 @@ interface Props<A extends Action<string>> {
 }
 
 export default function ActionList<A extends Action<string>>({
-  styling,
   actions,
   actionIds,
   isWideLayout,
@@ -158,7 +155,6 @@ export default function ActionList<A extends Action<string>>({
       css={[actionListCss, isWideLayout && actionListWideCss]}
     >
       <ActionListHeader
-        styling={styling}
         onSearch={onSearch}
         onCommit={onCommit}
         onSweep={onSweep}
@@ -185,7 +181,6 @@ export default function ActionList<A extends Action<string>>({
             {filteredActionIds.map((actionId) => (
               <SortableItem key={actionId} actionId={actionId}>
                 <ActionListRow
-                  styling={styling}
                   actionId={actionId}
                   isInitAction={!actionId}
                   isSelected={

packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import { StylingFunction } from 'react-base16-styling';
 import RightSlider from './RightSlider';
 import {
   actionListHeaderCss,
@@ -16,7 +15,6 @@ const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
   );
 
 interface Props {
-  styling: StylingFunction;
   onSearch: (value: string) => void;
   onCommit: () => void;
   onSweep: () => void;
@@ -27,7 +25,6 @@ interface Props {
 }
 
 const ActionListHeader: FunctionComponent<Props> = ({
-  styling,
   onSearch,
   hasSkippedActions,
   hasStagedActions,
@@ -45,7 +42,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
     />
     {!hideMainButtons && (
       <div css={actionListHeaderWrapperCss}>
-        <RightSlider shown={hasStagedActions} styling={styling}>
+        <RightSlider shown={hasStagedActions}>
           <div css={actionListHeaderSelectorCss}>
             {getActiveButtons(hasSkippedActions).map((btn) => (
               <div

packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx

@@ -2,7 +2,6 @@ import React, { MouseEvent, MouseEventHandler, PureComponent } from 'react';
 import dateformat from 'dateformat';
 import type { DebouncedFunc } from 'lodash';
 import debounce from 'lodash.debounce';
-import { StylingFunction } from 'react-base16-styling';
 import { Action } from 'redux';
 import RightSlider from './RightSlider';
 import {
@@ -26,7 +25,6 @@ const BUTTON_JUMP = 'Jump';
 type Button = typeof BUTTON_SKIP | typeof BUTTON_JUMP;
 
 interface Props<A extends Action<string>> {
-  styling: StylingFunction;
   actionId: number;
   isInitAction: boolean;
   isSelected: boolean;
@@ -52,7 +50,6 @@ export default class ActionListRow<
 
   render() {
     const {
-      styling,
       isSelected,
       action,
       actionId,
@@ -104,7 +101,7 @@ export default class ActionListRow<
           {actionType}
         </div>
         {hideActionButtons ? (
-          <RightSlider styling={styling} shown>
+          <RightSlider shown>
             <div css={actionListItemTimeCss}>
               {timeDelta === 0
                 ? '+00:00:00'
@@ -116,7 +113,7 @@ export default class ActionListRow<
           </RightSlider>
         ) : (
           <div css={actionListItemButtonsCss}>
-            <RightSlider styling={styling} shown={!showButtons} rotate>
+            <RightSlider shown={!showButtons} rotate>
               <div css={actionListItemTimeCss}>
                 {timeDelta === 0
                   ? '+00:00:00'
@@ -126,7 +123,7 @@ export default class ActionListRow<
                     )}
               </div>
             </RightSlider>
-            <RightSlider styling={styling} shown={showButtons} rotate>
+            <RightSlider shown={showButtons} rotate>
               <div css={actionListItemSelectorCss}>
                 {([BUTTON_JUMP, BUTTON_SKIP] as const).map(
                   (btn) =>

packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Base16Theme } from 'redux-devtools-themes';
 import { Action } from 'redux';
-import type { StylingFunction } from 'react-base16-styling';
 import type { LabelRenderer } from 'react-json-tree';
 import { PerformAction } from '@redux-devtools/core';
 import { Delta } from 'jsondiffpatch';
@@ -19,7 +18,6 @@ import {
 
 export interface TabComponentProps<S, A extends Action<string>> {
   labelRenderer: LabelRenderer;
-  styling: StylingFunction;
   computedStates: { state: S; error?: string }[];
   actions: { [actionId: number]: PerformAction<A> };
   selectedActionId: number | null;
@@ -74,7 +72,6 @@ interface Props<S, A extends Action<string>> {
   dataTypeKey: string | symbol | undefined;
   monitorState: DevtoolsInspectorState;
   updateMonitorState: (monitorState: Partial<DevtoolsInspectorState>) => void;
-  styling: StylingFunction;
   onInspectPath: (path: (string | number)[]) => void;
   inspectedPath: (string | number)[];
   onSelectTab: (tabName: string) => void;
@@ -91,7 +88,6 @@ class ActionPreview<S, A extends Action<string>> extends Component<
 
   render() {
     const {
-      styling,
       delta,
       error,
       nextState,
@@ -130,14 +126,13 @@ class ActionPreview<S, A extends Action<string>> extends Component<
       <div key="actionPreview" css={actionPreviewCss}>
         <ActionPreviewHeader
           tabs={renderedTabs as unknown as Tab<unknown, Action<string>>[]}
-          {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
+          {...{ inspectedPath, onInspectPath, tabName, onSelectTab }}
         />
         {!error && (
           <div key="actionPreviewContent" css={actionPreviewContentCss}>
             <TabComponent
               labelRenderer={this.labelRenderer}
               {...{
-                styling,
                 computedStates,
                 actions,
                 selectedActionId,
@@ -163,11 +158,11 @@ class ActionPreview<S, A extends Action<string>> extends Component<
   }
 
   labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => {
-    const { styling, onInspectPath, inspectedPath } = this.props;
+    const { onInspectPath, inspectedPath } = this.props;
 
     return (
       <span>
-        <span {...styling('treeItemKey')}>{key}</span>
+        <span>{key}</span>
         <span
           css={treeItemPinCss}
           onClick={() =>

packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx

@@ -1,6 +1,5 @@
 import React, { FunctionComponent } from 'react';
 import { Action } from 'redux';
-import { StylingFunction } from 'react-base16-styling';
 import { Tab } from './ActionPreview';
 import {
   inspectedPathCss,
@@ -14,7 +13,6 @@ import {
 
 interface Props<S, A extends Action<string>> {
   tabs: Tab<S, A>[];
-  styling: StylingFunction;
   inspectedPath: (string | number)[];
   onInspectPath: (path: (string | number)[]) => void;
   tabName: string;
@@ -23,7 +21,7 @@ interface Props<S, A extends Action<string>> {
 
 const ActionPreviewHeader: FunctionComponent<
   Props<unknown, Action<string>>
-> = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
+> = ({ inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
   <div key="previewHeader" css={previewHeaderCss}>
     <div css={tabSelectorCss}>
       {tabs.map((tab) => (

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -297,7 +297,7 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
       tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
     const { themeState, isWideLayout, action, nextState, delta, error } =
       this.state;
-    const { base16Theme, styling } = themeState;
+    const { base16Theme } = themeState;
 
     return (
       <ThemeProvider
@@ -321,7 +321,6 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
               draggableActions,
               hideMainButtons,
               hideActionButtons,
-              styling,
             }}
             onSearch={this.handleSearch}
             onSelect={this.handleSelectAction}
@@ -354,7 +353,6 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
             }}
             monitorState={this.props.monitorState}
             updateMonitorState={this.updateMonitorState}
-            styling={styling}
             onInspectPath={(path: (string | number)[]) =>
               this.handleInspectPath(inspectedPathType, path)
             }

packages/redux-devtools-inspector-monitor/src/RightSlider.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import { StylingFunction } from 'react-base16-styling';
 import {
   rightSliderCss,
   rightSliderRotateCss,
@@ -8,18 +7,12 @@ import {
 } from './utils/createStylingFromTheme';
 
 interface Props {
-  styling: StylingFunction;
   shown?: boolean;
   children: React.ReactNode;
   rotate?: boolean;
 }
 
-const RightSlider: FunctionComponent<Props> = ({
+const RightSlider: FunctionComponent<Props> = ({ shown, children, rotate }) => (
-  styling,
-  shown,
-  children,
-  rotate,
-}) => (
   <div
     css={[
       rightSliderCss,

packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx

@@ -9,7 +9,6 @@ const ActionTab: FunctionComponent<
   TabComponentProps<unknown, Action<string>>
 > = ({
   action,
-  styling,
   base16Theme,
   invertTheme,
   labelRenderer,
@@ -21,7 +20,7 @@ const ActionTab: FunctionComponent<
     theme={getJsonTreeTheme(base16Theme)}
     data={action}
     getItemString={(type, data) =>
-      getItemString(styling, type, data, dataTypeKey, isWideLayout)
+      getItemString(type, data, dataTypeKey, isWideLayout)
     }
     invertTheme={invertTheme}
     hideRoot

packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx

@@ -7,7 +7,6 @@ const DiffTab: FunctionComponent<
   TabComponentProps<unknown, Action<string>>
 > = ({
   delta,
-  styling,
   base16Theme,
   invertTheme,
   labelRenderer,
@@ -17,7 +16,6 @@ const DiffTab: FunctionComponent<
   <JSONDiff
     {...{
       delta,
-      styling,
       base16Theme,
       invertTheme,
       labelRenderer,

packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx

@@ -3,7 +3,6 @@ import { JSONTree } from 'react-json-tree';
 import type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree';
 import { stringify } from 'javascript-stringify';
 import { Delta } from 'jsondiffpatch';
-import { StylingFunction } from 'react-base16-styling';
 import { Base16Theme } from 'redux-devtools-themes';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
@@ -58,7 +57,6 @@ function prepareDelta(value: any) {
 
 interface Props {
   delta: Delta | null | undefined | false;
-  styling: StylingFunction;
   base16Theme: Base16Theme;
   invertTheme: boolean;
   labelRenderer: LabelRenderer;
@@ -92,7 +90,7 @@ export default class JSONDiff extends Component<Props, State> {
   }
 
   render() {
-    const { styling, base16Theme, ...props } = this.props;
+    const { base16Theme, ...props } = this.props;
 
     if (!this.state.data) {
       return <div css={stateDiffEmptyCss}>(states are equal)</div>;
@@ -115,7 +113,6 @@ export default class JSONDiff extends Component<Props, State> {
 
   getItemString = (type: string, data: any) =>
     getItemString(
-      this.props.styling,
       type,
       data,
       this.props.dataTypeKey,
@@ -124,7 +121,7 @@ export default class JSONDiff extends Component<Props, State> {
     );
 
   valueRenderer = (raw: any, value: any) => {
-    const { styling, isWideLayout } = this.props;
+    const { isWideLayout } = this.props;
 
     if (Array.isArray(value)) {
       switch (value.length) {

packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx

@@ -9,7 +9,6 @@ const StateTab: React.FunctionComponent<
   TabComponentProps<any, Action<string>>
 > = ({
   nextState,
-  styling,
   base16Theme,
   invertTheme,
   labelRenderer,
@@ -23,7 +22,7 @@ const StateTab: React.FunctionComponent<
     theme={getJsonTreeTheme(base16Theme)}
     data={nextState}
     getItemString={(type, data) =>
-      getItemString(styling, type, data, dataTypeKey, isWideLayout)
+      getItemString(type, data, dataTypeKey, isWideLayout)
     }
     invertTheme={invertTheme}
     hideRoot

packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
-import { StylingFunction } from 'react-base16-styling';
 import isIterable from '../utils/isIterable';
 import { treeItemHintCss } from '../utils/createStylingFromTheme';
 
@@ -73,7 +72,6 @@ function getText(
 }
 
 const getItemString = (
-  styling: StylingFunction,
   type: string,
   data: any,
   dataTypeKey: string | symbol | undefined,