From 31136b98be03f2b7fa37a01623e6352ad6117229 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sat, 4 Dec 2021 11:46:27 -0500
Subject: [PATCH] Changes

---
 .../src/ActionPreviewHeader.tsx               | 87 ++++++++++---------
 .../src/tabs/DiffTab.tsx                      | 45 +++++-----
 .../src/selectors.ts                          | 20 +++--
 .../redux-devtools-ui/src/Container/index.tsx | 23 ++---
 .../src/Editor/Editor.stories.tsx             |  2 +-
 .../SegmentedControl.stories.tsx              |  2 +-
 yarn.lock                                     | 13 +--
 7 files changed, 93 insertions(+), 99 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx
index 26dff882..d73910b1 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx
@@ -13,56 +13,57 @@ interface Props<S, A extends Action<unknown>> {
   onSelectTab: (tabName: string) => void;
 }
 
-const ActionPreviewHeader: FunctionComponent<Props<unknown, Action<unknown>>> =
-  ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
-    <div key="previewHeader" {...styling('previewHeader')}>
-      <div {...styling('tabSelector')}>
-        {tabs.map((tab) => (
-          <div
-            onClick={() => onSelectTab(tab.name)}
-            key={tab.name}
-            {...styling(
-              [
-                'selectorButton',
-                tab.name === tabName && 'selectorButtonSelected',
-              ],
-              tab.name === tabName
-            )}
+const ActionPreviewHeader: FunctionComponent<
+  Props<unknown, Action<unknown>>
+> = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
+  <div key="previewHeader" {...styling('previewHeader')}>
+    <div {...styling('tabSelector')}>
+      {tabs.map((tab) => (
+        <div
+          onClick={() => onSelectTab(tab.name)}
+          key={tab.name}
+          {...styling(
+            [
+              'selectorButton',
+              tab.name === tabName && 'selectorButtonSelected',
+            ],
+            tab.name === tabName
+          )}
+        >
+          {tab.name}
+        </div>
+      ))}
+    </div>
+    <div {...styling('inspectedPath')}>
+      {inspectedPath.length ? (
+        <span {...styling('inspectedPathKey')}>
+          <a
+            onClick={() => onInspectPath([])}
+            {...styling('inspectedPathKeyLink')}
           >
-            {tab.name}
-          </div>
-        ))}
-      </div>
-      <div {...styling('inspectedPath')}>
-        {inspectedPath.length ? (
-          <span {...styling('inspectedPathKey')}>
+            {tabName}
+          </a>
+        </span>
+      ) : (
+        tabName
+      )}
+      {inspectedPath.map((key, idx) =>
+        idx === inspectedPath.length - 1 ? (
+          <span key={key}>{key}</span>
+        ) : (
+          <span key={key} {...styling('inspectedPathKey')}>
             <a
-              onClick={() => onInspectPath([])}
+              onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
               {...styling('inspectedPathKeyLink')}
             >
-              {tabName}
+              {key}
             </a>
           </span>
-        ) : (
-          tabName
-        )}
-        {inspectedPath.map((key, idx) =>
-          idx === inspectedPath.length - 1 ? (
-            <span key={key}>{key}</span>
-          ) : (
-            <span key={key} {...styling('inspectedPathKey')}>
-              <a
-                onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
-                {...styling('inspectedPathKeyLink')}
-              >
-                {key}
-              </a>
-            </span>
-          )
-        )}
-      </div>
+        )
+      )}
     </div>
-  );
+  </div>
+);
 
 ActionPreviewHeader.propTypes = {
   tabs: PropTypes.array.isRequired,
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx
index 7aea2078..34dded56 100644
--- a/packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx
@@ -4,28 +4,29 @@ import JSONDiff from './JSONDiff';
 import { TabComponentProps } from '../ActionPreview';
 import { Action } from 'redux';
 
-const DiffTab: FunctionComponent<TabComponentProps<unknown, Action<unknown>>> =
-  ({
-    delta,
-    styling,
-    base16Theme,
-    invertTheme,
-    labelRenderer,
-    isWideLayout,
-    dataTypeKey,
-  }) => (
-    <JSONDiff
-      {...{
-        delta,
-        styling,
-        base16Theme,
-        invertTheme,
-        labelRenderer,
-        isWideLayout,
-        dataTypeKey,
-      }}
-    />
-  );
+const DiffTab: FunctionComponent<
+  TabComponentProps<unknown, Action<unknown>>
+> = ({
+  delta,
+  styling,
+  base16Theme,
+  invertTheme,
+  labelRenderer,
+  isWideLayout,
+  dataTypeKey,
+}) => (
+  <JSONDiff
+    {...{
+      delta,
+      styling,
+      base16Theme,
+      invertTheme,
+      labelRenderer,
+      isWideLayout,
+      dataTypeKey,
+    }}
+  />
+);
 
 DiffTab.propTypes = {
   delta: PropTypes.any,
diff --git a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
index 7fe7757b..5a964aba 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
@@ -200,17 +200,19 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     }
   );
 
-  const selectApiOfCurrentQuery: InspectorSelector<S, null | RtkQueryApiState> =
-    (selectorsSource: SelectorsSource<S>) => {
-      const apiStates = selectApiStates(selectorsSource);
-      const currentQueryInfo = selectCurrentQueryInfo(selectorsSource);
+  const selectApiOfCurrentQuery: InspectorSelector<
+    S,
+    null | RtkQueryApiState
+  > = (selectorsSource: SelectorsSource<S>) => {
+    const apiStates = selectApiStates(selectorsSource);
+    const currentQueryInfo = selectCurrentQueryInfo(selectorsSource);
 
-      if (!apiStates || !currentQueryInfo) {
-        return null;
-      }
+    if (!apiStates || !currentQueryInfo) {
+      return null;
+    }
 
-      return apiStates[currentQueryInfo.reducerPath] ?? null;
-    };
+    return apiStates[currentQueryInfo.reducerPath] ?? null;
+  };
 
   const selectProvidedOfCurrentQuery: InspectorSelector<
     S,
diff --git a/packages/redux-devtools-ui/src/Container/index.tsx b/packages/redux-devtools-ui/src/Container/index.tsx
index f5b106ef..e921e8d4 100644
--- a/packages/redux-devtools-ui/src/Container/index.tsx
+++ b/packages/redux-devtools-ui/src/Container/index.tsx
@@ -11,17 +11,18 @@ interface ContainerFromThemeDataProps {
   className?: string;
 }
 
-const ContainerFromThemeData: React.FunctionComponent<ContainerFromThemeDataProps> =
-  ({ themeData, className, children }) => {
-    const theme = useTheme(themeData);
-    return (
-      <ThemeProvider theme={theme}>
-        <MainContainerWrapper className={className}>
-          {children}
-        </MainContainerWrapper>
-      </ThemeProvider>
-    );
-  };
+const ContainerFromThemeData: React.FunctionComponent<
+  ContainerFromThemeDataProps
+> = ({ themeData, className, children }) => {
+  const theme = useTheme(themeData);
+  return (
+    <ThemeProvider theme={theme}>
+      <MainContainerWrapper className={className}>
+        {children}
+      </MainContainerWrapper>
+    </ThemeProvider>
+  );
+};
 
 interface Props {
   children?: React.ReactNode;
diff --git a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx b/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
index b4ff1878..c898fbec 100644
--- a/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
+++ b/packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
@@ -53,4 +53,4 @@ WithTabs.argTypes = {
   foldGutter: { control: { disable: true } },
   autofocus: { control: { disable: true } },
   onChange: { control: { disable: true } },
-};
+} as any;
diff --git a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
index a06c3b89..a98df328 100644
--- a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
+++ b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
@@ -17,7 +17,7 @@ export default {
   component: SegmentedControl,
 };
 
-const Template: Story<Omit<SegmentedControlProps, 'values'>> = (args) => (
+const Template: Story<SegmentedControlProps> = ({ values, ...args }) => (
   <Container>
     <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
   </Container>
diff --git a/yarn.lock b/yarn.lock
index f20f19f2..31ca79ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7723,18 +7723,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16.14.8, @types/react@npm:>=16.9.11":
-  version: 17.0.36
-  resolution: "@types/react@npm:17.0.36"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: feeaa484d5d7e354ba6830b06342dec6fd1a2ac87f73d21d3d4f2a3d311459de4090330a1e8af7275c8d1e7737b655a7550c8dd3dbc74ccf34ffd3fc824bbd12
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^17.0.37":
+"@types/react@npm:*, @types/react@npm:>=16.14.8, @types/react@npm:>=16.9.11, @types/react@npm:^17.0.37":
   version: 17.0.37
   resolution: "@types/react@npm:17.0.37"
   dependencies: