Use ResizeObserver instead of observing the window width

storybookjs · Jan 26, 2023 · 29f6344 · 29f6344
1 parent 57e3767
commit 29f6344
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 41 deletions.
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
@@ -54,6 +54,7 @@
     "@storybook/theming": "7.0.0-beta.34",
     "@storybook/types": "7.0.0-beta.34",
     "memoizerific": "^1.11.3",
+    "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {

diff --git a/code/ui/components/src/hooks/useOnWindowResize.tsx b/code/ui/components/src/hooks/useOnWindowResize.tsx
diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { sanitize } from '@storybook/csf';
 import { styled } from '@storybook/theming';
+import useResizeObserver from 'use-resize-observer';
 import { TabButton } from '../bar/button';
-import { useOnWindowResize } from '../hooks/useOnWindowResize';
 import { TooltipLinkList } from '../tooltip/TooltipLinkList';
 import { WithTooltip } from '../tooltip/WithTooltip';
 import type { ChildrenList } from './tabs.helpers';
@@ -36,6 +36,9 @@ export function useList(list: ChildrenList) {
   const tabBarRef = useRef<HTMLDivElement>();
   const addonsRef = useRef<HTMLButtonElement>();
   const tabRefs = useRef(new Map<string, HTMLButtonElement>());
+  const { width: tabBarWidth = 1 } = useResizeObserver<HTMLDivElement>({
+    ref: tabBarRef,
+  });
 
   const [visibleList, setVisibleList] = useState(list);
   const [invisibleList, setInvisibleList] = useState<ChildrenList>([]);
@@ -60,14 +63,14 @@ export function useList(list: ChildrenList) {
             withArrows={false}
             visible={isTooltipVisible}
             onVisibleChange={setTooltipVisible}
+            placement="bottom"
             delayHide={100}
             tooltip={
               <TooltipLinkList
                 links={invisibleList.map(({ title, id, color, active }) => {
-                  const tabTitle = typeof title === 'function' ? title() : title;
                   return {
                     id,
-                    title: tabTitle,
+                    title,
                     color,
                     active,
                     onClick: (e) => {
@@ -96,22 +99,21 @@ export function useList(list: ChildrenList) {
             </AddonButton>
           </WithTooltip>
           {invisibleList.map(({ title, id, color }) => {
-            const tabTitle = typeof title === 'function' ? title() : title;
             return (
               <TabButton
-                id={`tabbutton-${sanitize(tabTitle)}`}
+                id={`tabbutton-${sanitize(title)}`}
                 style={{ visibility: 'hidden' }}
                 tabIndex={-1}
                 ref={(ref: HTMLButtonElement) => {
-                  tabRefs.current.set(tabTitle, ref);
+                  tabRefs.current.set(title, ref);
                 }}
                 className="tabbutton"
                 type="button"
                 key={id}
                 textColor={color}
                 role="tab"
               >
-                {tabTitle}
+                {title}
               </TabButton>
             );
           })}
@@ -133,8 +135,7 @@ export function useList(list: ChildrenList) {
 
     const newInvisibleList = list.filter((item) => {
       const { title } = item;
-      const tabTitle = typeof title === 'function' ? title() : title;
-      const tabButton = tabRefs.current.get(tabTitle);
+      const tabButton = tabRefs.current.get(title);
 
       if (!tabButton) {
         return false;
@@ -159,9 +160,7 @@ export function useList(list: ChildrenList) {
     }
   }, [invisibleList.length, list, visibleList]);
 
-  useOnWindowResize(setTabLists);
-
-  useLayoutEffect(setTabLists, [setTabLists]);
+  useLayoutEffect(setTabLists, [setTabLists, tabBarWidth]);
 
   return {
     tabRefs,

diff --git a/code/ui/components/src/tabs/tabs.stories.tsx b/code/ui/components/src/tabs/tabs.stories.tsx
@@ -120,20 +120,7 @@ const content = Object.entries(panels).map(([k, v]) => (
 
 export default {
   title: 'Tabs',
-  decorators: [
-    (story) => (
-      <div
-        style={{
-          position: 'relative',
-          height: 'calc(100vh - 20px)',
-          width: 'calc(100vw - 20px)',
-          margin: 10,
-        }}
-      >
-        {story()}
-      </div>
-    ),
-  ],
+  decorators: [(story) => <div>{story()}</div>],
   args: {
     menuName: 'Addons',
   },

diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
@@ -153,13 +153,11 @@ export const Tabs: FC<TabsProps> = memo(
         <WrapperChildren backgroundColor={backgroundColor}>
           <TabBar ref={tabBarRef} role="tablist">
             {visibleList.map(({ title, id, active, color }, index) => {
-              const tabTitle = typeof title === 'function' ? title() : title;
-
               return (
                 <TabButton
-                  id={`tabbutton-${sanitize(tabTitle)}`}
+                  id={`tabbutton-${sanitize(title)}`}
                   ref={(ref: HTMLButtonElement) => {
-                    tabRefs.current.set(tabTitle, ref);
+                    tabRefs.current.set(title, ref);
                   }}
                   className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
                   type="button"
@@ -172,7 +170,7 @@ export const Tabs: FC<TabsProps> = memo(
                   }}
                   role="tab"
                 >
-                  {tabTitle}
+                  {title}
                 </TabButton>
               );
             })}

diff --git a/code/ui/manager/src/components/panel/panel.tsx b/code/ui/manager/src/components/panel/panel.tsx
@@ -90,7 +90,7 @@ const AddonPanel = React.memo<{
       id="storybook-panel-root"
     >
       {Object.entries(panels).map(([k, v]) => (
-        <SafeTab key={k} id={k} title={v.title}>
+        <SafeTab key={k} id={k} title={typeof v.title === 'function' ? v.title() : v.title}>
           {v.render}
         </SafeTab>
       ))}

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -3092,6 +3092,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@juggle/resize-observer@npm:^3.3.1":
+  version: 3.4.0
+  resolution: "@juggle/resize-observer@npm:3.4.0"
+  checksum: 12930242357298c6f2ad5d4ec7cf631dfb344ca7c8c830ab7f64e6ac11eb1aae486901d8d880fd08fb1b257800c160a0da3aee1e7ed9adac0ccbb9b7c5d93347
+  languageName: node
+  linkType: hard
+
 "@leichtgewicht/ip-codec@npm:^2.0.1":
   version: 2.0.4
   resolution: "@leichtgewicht/ip-codec@npm:2.0.4"
@@ -6029,6 +6036,7 @@ __metadata:
     react-textarea-autosize: ^8.3.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
+    use-resize-observer: ^9.1.0
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -27864,6 +27872,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-resize-observer@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "use-resize-observer@npm:9.1.0"
+  dependencies:
+    "@juggle/resize-observer": ^3.3.1
+  peerDependencies:
+    react: 16.8.0 - 18
+    react-dom: 16.8.0 - 18
+  checksum: 6ccdeb09fe20566ec182b1635a22f189e13d46226b74610432590e69b31ef5d05d069badc3306ebd0d2bb608743b17981fb535763a1d7dc2c8ae462ee8e5999c
+  languageName: node
+  linkType: hard
+
 "use@npm:^3.1.0":
   version: 3.1.1
   resolution: "use@npm:3.1.1"