@doist/reactist 28.1.0 → 28.1.2

package/dist/reactist.cjs.development.js

@@ -2355,31 +2355,13 @@ const TextArea = /*#__PURE__*/React__namespace.forwardRef(function TextArea(_ref
   const containerRef = React__namespace.useRef(null);
   const internalRef = React__namespace.useRef(null);
   const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
+  useAutoExpand({
+    value,
+    autoExpand,
+    containerRef,
+    internalRef
+  });
   const textAreaClassName = classNames__default["default"]([autoExpand ? modules_2728c236.disableResize : null, disableResize ? modules_2728c236.disableResize : null]);
-  React__namespace.useEffect(function setupAutoExpand() {
-    const containerElement = containerRef.current;
-
-    function handleAutoExpand(value) {
-      if (containerElement) {
-        containerElement.dataset.replicatedValue = value;
-      }
-    }
-
-    function handleInput(event) {
-      handleAutoExpand(event.currentTarget.value);
-    }
-
-    const textAreaElement = internalRef.current;
-
-    if (!textAreaElement || !autoExpand) {
-      return undefined;
-    } // Apply change initially, in case the text area has a non-empty initial value
-
-
-    handleAutoExpand(textAreaElement.value);
-    textAreaElement.addEventListener('input', handleInput);
-    return () => textAreaElement.removeEventListener('input', handleInput);
-  }, [autoExpand]);
   return /*#__PURE__*/React__namespace.createElement(BaseField, {
     variant: variant,
     id: id,
@@ -2417,6 +2399,50 @@ const TextArea = /*#__PURE__*/React__namespace.forwardRef(function TextArea(_ref
   });
 });
 
+function useAutoExpand({
+  value,
+  autoExpand,
+  containerRef,
+  internalRef
+}) {
+  const isControlled = value !== undefined;
+  React__namespace.useEffect(function setupAutoExpandWhenUncontrolled() {
+    const textAreaElement = internalRef.current;
+
+    if (!textAreaElement || !autoExpand || isControlled) {
+      return undefined;
+    }
+
+    const containerElement = containerRef.current;
+
+    function handleAutoExpand(value) {
+      if (containerElement) {
+        containerElement.dataset.replicatedValue = value;
+      }
+    }
+
+    function handleInput(event) {
+      handleAutoExpand(event.currentTarget.value);
+    } // Apply change initially, in case the text area has a non-empty initial value
+
+
+    handleAutoExpand(textAreaElement.value);
+    textAreaElement.addEventListener('input', handleInput);
+    return () => textAreaElement.removeEventListener('input', handleInput);
+  }, [autoExpand, containerRef, internalRef, isControlled]);
+  React__namespace.useEffect(function setupAutoExpandWhenControlled() {
+    if (!isControlled) {
+      return;
+    }
+
+    const containerElement = containerRef.current;
+
+    if (containerElement) {
+      containerElement.dataset.replicatedValue = value;
+    }
+  }, [value, containerRef, isControlled]);
+}
+
 function getInitials(name) {
   var _initials;
 
@@ -2855,35 +2881,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"
+    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);
+        }
+
+        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;