@doist/reactist 28.0.0 → 28.1.1

package/dist/reactist.cjs.development.js

@@ -2776,7 +2776,7 @@ function ModalActions(_ref5) {
   }, children));
 }
 
-var modules_40c67f5b = {"tab":"_9f64e89a","fullTabList":"_49fe8e5a","track":"_1f449e3a","selected":"a8ac92b1","tab-neutral":"_6c6b8a2b","tab-themed":"_0eddd76d","track-neutral":"be66f12e","track-themed":"d21ccd50","selected-neutral":"_33211e81","selected-themed":"_4d1cbd10"};
+var modules_40c67f5b = {"tab":"_33c9c271","fullTabList":"_479349aa","track":"_2862a4ba","selected":"_1161c811","tab-neutral":"_9502e79a","tab-themed":"c39f1053","track-neutral":"b3554a83","track-themed":"_511b0be0","selected-neutral":"c81dc609","selected-themed":"_87552972"};
 
 const _excluded$5 = ["children", "space", "width", "align", "exceptionallySetClassName"],
       _excluded2$1 = ["children", "id", "renderMode"];
@@ -2855,35 +2855,63 @@ function TabList(_ref2) {
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded$5);
 
+  const tabListRef = React__namespace.useRef(null);
+  const tabListPrevWidthRef = React__namespace.useRef(0);
   const tabContextValue = React__namespace.useContext(TabsContext);
   const [selectedTabElement, setSelectedTabElement] = React__namespace.useState(null);
   const [selectedTabStyle, setSelectedTabStyle] = React__namespace.useState({});
-  const tabListRef = React__namespace.useRef(null);
   const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
-  React__namespace.useLayoutEffect(() => {
-    function updateSelectedTabStyle() {
-      if (!selectedId || !tabListRef.current) {
-        return;
-      }
+  const updateSelectedTabPosition = React__namespace.useCallback(function updateSelectedTabPositionCallback() {
+    if (!selectedId || !tabListRef.current) {
+      return;
+    }
 
-      const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
-      const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+    const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+    const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+
+    if (selectedTab) {
+      setSelectedTabElement(selectedTab);
+      setSelectedTabStyle({
+        left: selectedTab.offsetLeft + "px",
+        width: selectedTab.offsetWidth + "px"
+      });
+    }
+  }, [selectedId]);
+  React__namespace.useEffect(function updateSelectedTabPositionOnTabChange() {
+    updateSelectedTabPosition();
+  }, // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
+  [selectedId, updateSelectedTabPosition]);
+  React__namespace.useEffect(function observeTabListWidthChange() {
+    let animationFrameId = null;
+    const tabListObserver = new ResizeObserver(([entry]) => {
+      const width = entry == null ? void 0 : entry.contentRect.width;
+
+      if (width && tabListPrevWidthRef.current !== width) {
+        tabListPrevWidthRef.current = width;
+
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+        }
 
-      if (selectedTab) {
-        setSelectedTabElement(selectedTab);
-        setSelectedTabStyle({
-          left: selectedTab.offsetLeft + "px",
-          width: selectedTab.offsetWidth + "px"
+        animationFrameId = requestAnimationFrame(() => {
+          updateSelectedTabPosition();
+          animationFrameId = null;
         });
       }
+    });
+
+    if (tabListRef.current) {
+      tabListObserver.observe(tabListRef.current);
     }
 
-    updateSelectedTabStyle();
-    window.addEventListener('resize', updateSelectedTabStyle);
-    return function cleanupEventListener() {
-      window.removeEventListener('resize', updateSelectedTabStyle);
+    return function cleanupResizeObserver() {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+
+      tabListObserver.disconnect();
     };
-  }, [selectedId]);
+  }, [updateSelectedTabPosition]);
 
   if (!tabContextValue) {
     return null;