ui: fix deprecated ReactDOM.findDOMNode calls

code/addons/a11y/src/components/Report/Rules.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
 import type { CheckResult } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 
 const List = styled.div({
   display: 'flex',
@@ -53,6 +53,11 @@ const formatSeverityText = (severity: string) => {
 };
 
 const Rule: FC<RuleProps> = ({ rule }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   let badgeType: any = null;
   switch (rule.impact) {
     case ImpactValue.CRITICAL:
@@ -71,14 +76,10 @@ const Rule: FC<RuleProps> = ({ rule }) => {
       break;
   }
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Item elementWidth={size.width || 0}>
+    <Item ref={ref} elementWidth={width || 0}>
       <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
       <Message>{rule.message}</Message>
     </Item>
-      )}
-    </ReactResizeDetector>
   );
 };
 

code/addons/a11y/src/components/Tabs.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { styled } from '@storybook/theming';
 import type { NodeResult, Result } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
@@ -99,6 +99,11 @@ function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
 }
 
 export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   const { tab: activeTab, setTab } = useA11yContext();
 
   const handleToggle = React.useCallback(
@@ -111,9 +116,7 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
   const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
   const highlightLabel = `Highlight results`;
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Container>
+    <Container ref={ref}>
       <List>
         <TabsWrapper>
           {tabs.map((tab, index) => (
@@ -130,10 +133,8 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
         </TabsWrapper>
       </List>
       {tabs[activeTab].items.length > 0 ? (
-            <GlobalToggle elementWidth={size.width || 0}>
-              <HighlightToggleLabel htmlFor={highlightToggleId}>
-                {highlightLabel}
-              </HighlightToggleLabel>
+        <GlobalToggle elementWidth={width || 0}>
+          <HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
           <HighlightToggle
             toggleId={highlightToggleId}
             elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
@@ -142,7 +143,5 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
       ) : null}
       {tabs[activeTab].panel}
     </Container>
-      )}
-    </ReactResizeDetector>
   );
 };

code/addons/jest/src/components/Panel.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { Fragment } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
 import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
-import ResizeObserver from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import { Result } from './Result';
 import type { Test } from '../hoc/provideJestResult';
 import { provideTests as provideJestResult } from '../hoc/provideJestResult';
@@ -118,15 +118,11 @@ const getColorByType = (type: string) => {
   }
 };
 
-const Content = styled(({ tests, className }: ContentProps) => (
-  <div className={className}>
-    {tests.map(({ name, result }) => {
+const TestPanel: FC<{ test: Test }> = ({ test }) => {
+  const { ref, width } = useResizeDetector();
+  const { result } = test;
   if (!result || !result.assertionResults) {
-        return (
-          <Placeholder key={name}>
-            This story has tests configured, but no file was found
-          </Placeholder>
-        );
+    return <Placeholder>This story has tests configured, but no file was found</Placeholder>;
   }
 
   const testsByType: Map<string, any> = getTestsByTypeMap(result);
@@ -134,11 +130,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
   const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
 
   return (
-        <ResizeObserver refreshMode="debounce" key={name}>
-          {(size) => {
-            const { width } = size;
-            return (
-              <section>
+    <section ref={ref}>
       <SuiteHead>
         <SuiteTotals {...{ result, width }} />
         {width > 240 ? (
@@ -149,9 +141,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
                   key={`progress-portion-${entry[0]}`}
                   color={getColorByType(entry[0])}
                   progressPercent={
-                              entry[1]
-                                ? (entry[1].length / result.assertionResults.length) * 100
-                                : 0
+                    entry[1] ? (entry[1].length / result.assertionResults.length) * 100 : 0
                   }
                 />
               );
@@ -258,10 +248,13 @@ const Content = styled(({ tests, className }: ContentProps) => (
       </TabsState>
     </section>
   );
-          }}
-        </ResizeObserver>
-      );
-    })}
+};
+
+const Content = styled(({ tests, className }: ContentProps) => (
+  <div className={className}>
+    {tests.map((test) => (
+      <TestPanel key={test.name} test={test} />
+    ))}
   </div>
 ))({
   flex: '1 1 0%',

code/ui/manager/src/app.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import ResizeObserver from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 
 import { type State } from '@storybook/manager-api';
 import { Symbols } from '@storybook/components';
@@ -27,12 +27,10 @@ export interface AppProps {
   viewMode: State['viewMode'];
   layout: State['layout'];
   panelCount: number;
-  width: number;
-  height: number;
 }
 
-const App = React.memo<AppProps>(
-  ({ viewMode, layout, panelCount, width, height }) => {
+const App: React.FC<AppProps> = ({ viewMode, layout, panelCount }) => {
+  const { width, height, ref } = useResizeDetector();
   let content;
 
   const props = useMemo(
@@ -66,53 +64,22 @@ const App = React.memo<AppProps>(
         {...props}
         viewMode={viewMode}
         options={layout}
-          {...{ width, height }}
+        width={width}
+        height={height}
         panelCount={panelCount}
       />
     );
   }
 
   return (
-      <View>
+    <View ref={ref}>
       <Global styles={createGlobal} />
       <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
       {content}
     </View>
   );
-  },
-  // This is the default shallowEqual implementation, but with custom behavior for the `size` prop.
-  (prevProps: any, nextProps: any) => {
-    if (Object.is(prevProps, nextProps)) return true;
-    if (typeof prevProps !== 'object' || prevProps === null) return false;
-    if (typeof nextProps !== 'object' || nextProps === null) return false;
-
-    const keysA = Object.keys(prevProps);
-    const keysB = Object.keys(nextProps);
-    if (keysA.length !== keysB.length) return false;
-
-    // eslint-disable-next-line no-restricted-syntax
-    for (const key of keysA) {
-      if (key === 'size') {
-        // SizeMe injects a new `size` object every time, even if the width/height doesn't change,
-        // so we chech that one manually.
-        if (prevProps[key].width !== nextProps[key].width) return false;
-        if (prevProps[key].height !== nextProps[key].height) return false;
-      } else {
-        if (!Object.prototype.hasOwnProperty.call(nextProps, key)) return false;
-        if (!Object.is(prevProps[key], nextProps[key])) return false;
-      }
-    }
-
-    return true;
-  }
-);
-
-const SizedApp = (props: Omit<AppProps, 'width' | 'height'>) => (
-  <ResizeObserver>
-    {({ width, height }) => <App {...props} {...{ width, height }} />}
-  </ResizeObserver>
-);
+};
 
 App.displayName = 'App';
 
-export default SizedApp;
+export default App;

code/ui/manager/src/components/layout/container.tsx

@@ -349,9 +349,11 @@ class Layout extends Component<LayoutProps, LayoutState> {
     viewMode: undefined,
   };
 
+  handleRef: React.RefObject<HTMLDivElement>;
+
   constructor(props: LayoutProps) {
     super(props);
-
+    this.handleRef = React.createRef();
     const { bounds, options } = props;
 
     const { resizerNav, resizerPanel } = persistence.get();
@@ -533,8 +535,9 @@ class Layout extends Component<LayoutProps, LayoutState> {
             onStart={this.setDragNav}
             onDrag={this.resizeNav}
             onStop={this.unsetDrag}
+            nodeRef={this.handleRef}
           >
-            <Handle axis="x" isDragging={isDragging === 'nav'} />
+            <Handle ref={this.handleRef} axis="x" isDragging={isDragging === 'nav'} />
           </Draggable>
         )}