@doist/reactist 33.2.0 → 33.2.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [33.2.1](https://github.com/Doist/reactist/compare/v33.2.0...v33.2.1) (2026-06-19)
+
+### Bug Fixes
+
+- avoid ref access in useId ([#1078](https://github.com/Doist/reactist/issues/1078)) ([4d44edf](https://github.com/Doist/reactist/commit/4d44edfb09f436f37e81d28d7876a65a9e439ac0))
+
 ## [33.2.0](https://github.com/Doist/reactist/compare/v33.1.0...v33.2.0) (2026-06-19)
 
 ### Features

package/dist/reactist.cjs.development.js

@@ -1338,13 +1338,17 @@ function generateElementId(prefix) {
  * @deprecated Use `useId` available from React 18 or above instead.
  */
 function useId(providedId) {
-  const ref = React__namespace.useRef(providedId ?? null);
-  // eslint-disable-next-line react-hooks/refs
-  if (!ref.current) {
-    ref.current = generateElementId('element');
+  const $ = reactCompilerRuntime.c(2);
+  let t0;
+  if ($[0] !== providedId) {
+    t0 = () => providedId || generateElementId("element");
+    $[0] = providedId;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
   }
-  // eslint-disable-next-line react-hooks/refs
-  return ref.current;
+  const [id] = React__namespace.useState(t0);
+  return id;
 }
 
 var modules_afa80466 = {"banner":"a9238c10","image":"_74fb1d6c","title":"_7d720b64","description":"e20c1413","secondary":"a4ec529c","typeIcon":"f7f9b63d","iconCopy":"_22bc210c","closeButton":"_97060900","copy":"_32c8bd8c","inlineLink":"_0569f1dd","actions":"_154f8e60","topContent":"f76860a9","content":"cb9aeb0c"};
@@ -6049,27 +6053,60 @@ const TabsContext = /*#__PURE__*/React__namespace.createContext(null);
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
  */
-function Tabs({
-  children,
-  selectedId,
-  defaultSelectedId,
-  variant = 'neutral',
-  onSelectedIdChange
-}) {
-  const tabStore = react.useTabStore({
-    defaultSelectedId,
+function Tabs(t0) {
+  const $ = reactCompilerRuntime.c(11);
+  const {
+    children,
     selectedId,
-    setSelectedId: onSelectedIdChange
-  });
-  const actualSelectedId = tabStore.useState('selectedId');
-  const memoizedTabState = React__namespace.useMemo(() => ({
-    tabStore,
-    variant,
-    selectedId: selectedId ?? actualSelectedId ?? null
-  }), [variant, tabStore, selectedId, actualSelectedId]);
-  return /*#__PURE__*/React__namespace.createElement(TabsContext.Provider, {
-    value: memoizedTabState
-  }, children);
+    defaultSelectedId,
+    variant: t1,
+    onSelectedIdChange
+  } = t0;
+  const variant = t1 === undefined ? "neutral" : t1;
+  let t2;
+  if ($[0] !== defaultSelectedId || $[1] !== onSelectedIdChange || $[2] !== selectedId) {
+    t2 = {
+      defaultSelectedId,
+      selectedId,
+      setSelectedId: onSelectedIdChange
+    };
+    $[0] = defaultSelectedId;
+    $[1] = onSelectedIdChange;
+    $[2] = selectedId;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const tabStore = react.useTabStore(t2);
+  const actualSelectedId = react.useStoreState(tabStore, "selectedId");
+  const t3 = selectedId ?? actualSelectedId ?? null;
+  let t4;
+  if ($[4] !== t3 || $[5] !== tabStore || $[6] !== variant) {
+    t4 = {
+      tabStore,
+      variant,
+      selectedId: t3
+    };
+    $[4] = t3;
+    $[5] = tabStore;
+    $[6] = variant;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const memoizedTabState = t4;
+  let t5;
+  if ($[8] !== children || $[9] !== memoizedTabState) {
+    t5 = /*#__PURE__*/React__namespace.createElement(TabsContext.Provider, {
+      value: memoizedTabState
+    }, children);
+    $[8] = children;
+    $[9] = memoizedTabState;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
 }
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
@@ -6131,64 +6168,133 @@ const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(t0, ref) {
 /**
  * A component used to group `<Tab>` elements together.
  */
-function TabList({
-  children,
-  space,
-  width = 'maxContent',
-  align = 'start',
-  exceptionallySetClassName,
-  ...props
-}) {
+function TabList(t0) {
+  const $ = reactCompilerRuntime.c(44);
+  let children;
+  let exceptionallySetClassName;
+  let props;
+  let space;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      children,
+      space,
+      width: t1,
+      align: t2,
+      exceptionallySetClassName,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = exceptionallySetClassName;
+    $[3] = props;
+    $[4] = space;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    children = $[1];
+    exceptionallySetClassName = $[2];
+    props = $[3];
+    space = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const width = t1 === undefined ? "maxContent" : t1;
+  const align = t2 === undefined ? "start" : t2;
   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 selectedId = tabContextValue?.tabStore.useState('selectedId');
-  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);
-    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_0 = entry?.contentRect.width;
-      if (width_0 && tabListPrevWidthRef.current !== width_0) {
-        tabListPrevWidthRef.current = width_0;
-        if (animationFrameId !== null) {
-          cancelAnimationFrame(animationFrameId);
-        }
-        animationFrameId = requestAnimationFrame(() => {
-          updateSelectedTabPosition();
-          animationFrameId = null;
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {};
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const [selectedTabStyle, setSelectedTabStyle] = React__namespace.useState(t3);
+  const selectedId = react.useStoreState(tabContextValue?.tabStore, "selectedId");
+  let t4;
+  if ($[8] !== selectedId) {
+    t4 = 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);
+      if (selectedTab) {
+        setSelectedTabElement(selectedTab);
+        setSelectedTabStyle({
+          left: `${selectedTab.offsetLeft}px`,
+          width: `${selectedTab.offsetWidth}px`
         });
       }
-    });
-    if (tabListRef.current) {
-      tabListObserver.observe(tabListRef.current);
-    }
-    return function cleanupResizeObserver() {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
+    };
+    $[8] = selectedId;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const updateSelectedTabPosition = t4;
+  let t5;
+  if ($[10] !== updateSelectedTabPosition) {
+    t5 = function updateSelectedTabPositionOnTabChange() {
+      updateSelectedTabPosition();
+    };
+    $[10] = updateSelectedTabPosition;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== selectedId || $[13] !== updateSelectedTabPosition) {
+    t6 = [selectedId, updateSelectedTabPosition];
+    $[12] = selectedId;
+    $[13] = updateSelectedTabPosition;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  React__namespace.useEffect(t5, t6);
+  let t7;
+  let t8;
+  if ($[15] !== updateSelectedTabPosition) {
+    t7 = function observeTabListWidthChange() {
+      let animationFrameId = null;
+      const tabListObserver = new ResizeObserver(t9 => {
+        const [entry] = t9;
+        const width_0 = entry?.contentRect.width;
+        if (width_0 && tabListPrevWidthRef.current !== width_0) {
+          tabListPrevWidthRef.current = width_0;
+          if (animationFrameId !== null) {
+            cancelAnimationFrame(animationFrameId);
+          }
+          animationFrameId = requestAnimationFrame(() => {
+            updateSelectedTabPosition();
+            animationFrameId = null;
+          });
+        }
+      });
+      if (tabListRef.current) {
+        tabListObserver.observe(tabListRef.current);
       }
-      tabListObserver.disconnect();
+      return function cleanupResizeObserver() {
+        if (animationFrameId) {
+          cancelAnimationFrame(animationFrameId);
+        }
+        tabListObserver.disconnect();
+      };
     };
-  }, [updateSelectedTabPosition]);
+    t8 = [updateSelectedTabPosition];
+    $[15] = updateSelectedTabPosition;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t7 = $[16];
+    t8 = $[17];
+  }
+  React__namespace.useEffect(t7, t8);
   if (!tabContextValue) {
     return null;
   }
@@ -6196,83 +6302,210 @@ function TabList({
     tabStore,
     variant
   } = tabContextValue;
-  const justifyContentAlignMap = {
-    start: 'flexStart',
-    end: 'flexEnd',
-    center: 'center'
-  };
-  return (
-    /*#__PURE__*/
-    // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
-    // negative margins from collapsing when used in a flex container which will render the
-    // track with the wrong height
-    React__namespace.createElement(Box$1, {
-      display: "flex",
-      justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align]
-    }, /*#__PURE__*/React__namespace.createElement(react.TabList, _extends__default["default"]({
-      store: tabStore,
-      render: /*#__PURE__*/React__namespace.createElement(Box$1, {
-        position: "relative",
-        width: width,
-        className: exceptionallySetClassName
-      }),
-      ref: tabListRef
-    }, props), /*#__PURE__*/React__namespace.createElement(Box$1, {
-      className: [modules_40c67f5b.track, modules_40c67f5b[`track-${variant}`]]
-    }), selectedTabElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+  let t9;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      start: "flexStart",
+      end: "flexEnd",
+      center: "center"
+    };
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  const justifyContentAlignMap = t9;
+  const t10 = width === "full" ? "center" : justifyContentAlignMap[align];
+  let t11;
+  if ($[19] !== exceptionallySetClassName || $[20] !== width) {
+    t11 = /*#__PURE__*/React__namespace.createElement(Box$1, {
+      position: "relative",
+      width: width,
+      className: exceptionallySetClassName
+    });
+    $[19] = exceptionallySetClassName;
+    $[20] = width;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  const t12 = modules_40c67f5b[`track-${variant}`];
+  let t13;
+  if ($[22] !== t12) {
+    t13 = /*#__PURE__*/React__namespace.createElement(Box$1, {
+      className: [modules_40c67f5b.track, t12]
+    });
+    $[22] = t12;
+    $[23] = t13;
+  } else {
+    t13 = $[23];
+  }
+  let t14;
+  if ($[24] !== selectedTabElement || $[25] !== selectedTabStyle || $[26] !== variant) {
+    t14 = selectedTabElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
       className: [modules_40c67f5b.selected, modules_40c67f5b[`selected-${variant}`]],
       style: selectedTabStyle
-    }) : null, /*#__PURE__*/React__namespace.createElement(Inline, {
+    }) : null;
+    $[24] = selectedTabElement;
+    $[25] = selectedTabStyle;
+    $[26] = variant;
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  const t15 = width === "full" ? modules_40c67f5b.fullTabList : null;
+  let t16;
+  if ($[28] !== t15) {
+    t16 = classNames__default["default"](t15);
+    $[28] = t15;
+    $[29] = t16;
+  } else {
+    t16 = $[29];
+  }
+  let t17;
+  if ($[30] !== children || $[31] !== space || $[32] !== t16) {
+    t17 = /*#__PURE__*/React__namespace.createElement(Inline, {
       space: space,
-      exceptionallySetClassName: classNames__default["default"](width === 'full' ? modules_40c67f5b.fullTabList : null)
-    }, children)))
-  );
+      exceptionallySetClassName: t16
+    }, children);
+    $[30] = children;
+    $[31] = space;
+    $[32] = t16;
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  let t18;
+  if ($[34] !== props || $[35] !== t11 || $[36] !== t13 || $[37] !== t14 || $[38] !== t17 || $[39] !== tabStore) {
+    t18 = /*#__PURE__*/React__namespace.createElement(react.TabList, _extends__default["default"]({
+      store: tabStore,
+      render: t11,
+      ref: tabListRef
+    }, props), t13, t14, t17);
+    $[34] = props;
+    $[35] = t11;
+    $[36] = t13;
+    $[37] = t14;
+    $[38] = t17;
+    $[39] = tabStore;
+    $[40] = t18;
+  } else {
+    t18 = $[40];
+  }
+  let t19;
+  if ($[41] !== t10 || $[42] !== t18) {
+    t19 = /*#__PURE__*/React__namespace.createElement(Box$1, {
+      display: "flex",
+      justifyContent: t10
+    }, t18);
+    $[41] = t10;
+    $[42] = t18;
+    $[43] = t19;
+  } else {
+    t19 = $[43];
+  }
+  return t19;
 }
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
  * corresponding `<Tab>` component.
  */
-const TabPanel = /*#__PURE__*/React__namespace.forwardRef(function TabPanel({
-  children,
-  id,
-  renderMode = 'always',
-  ...props
-}, ref) {
+const TabPanel = /*#__PURE__*/React__namespace.forwardRef(function TabPanel(t0, ref) {
+  const $ = reactCompilerRuntime.c(16);
+  let children;
+  let id;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      id,
+      renderMode: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = id;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    children = $[1];
+    id = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const renderMode = t1 === undefined ? "always" : t1;
   const tabContextValue = React__namespace.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React__namespace.useState(false);
-  const selectedId = tabContextValue?.tabStore.useState('selectedId');
+  const selectedId = react.useStoreState(tabContextValue?.tabStore, "selectedId");
   const tabIsActive = selectedId === id;
-  React__namespace.useEffect(function trackTabRenderedState() {
-    if (!tabRendered && tabIsActive) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setTabRendered(true);
-    }
-  }, [tabRendered, tabIsActive]);
+  let t2;
+  let t3;
+  if ($[5] !== tabIsActive || $[6] !== tabRendered) {
+    t2 = function trackTabRenderedState() {
+      if (!tabRendered && tabIsActive) {
+        setTabRendered(true);
+      }
+    };
+    t3 = [tabRendered, tabIsActive];
+    $[5] = tabIsActive;
+    $[6] = tabRendered;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t2 = $[7];
+    t3 = $[8];
+  }
+  React__namespace.useEffect(t2, t3);
   if (!tabContextValue) {
     return null;
   }
   const {
     tabStore
   } = tabContextValue;
-  const shouldRender = renderMode === 'always' || renderMode === 'active' && tabIsActive || renderMode === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/React__namespace.createElement(react.TabPanel, _extends__default["default"]({}, props, {
-    tabId: id,
-    store: tabStore,
-    ref: ref
-  }), children) : null;
+  const shouldRender = renderMode === "always" || renderMode === "active" && tabIsActive || renderMode === "lazy" && (tabIsActive || tabRendered);
+  let t4;
+  if ($[9] !== children || $[10] !== id || $[11] !== props || $[12] !== ref || $[13] !== shouldRender || $[14] !== tabStore) {
+    t4 = shouldRender ? /*#__PURE__*/React__namespace.createElement(react.TabPanel, _extends__default["default"]({}, props, {
+      tabId: id,
+      store: tabStore,
+      ref: ref
+    }), children) : null;
+    $[9] = children;
+    $[10] = id;
+    $[11] = props;
+    $[12] = ref;
+    $[13] = shouldRender;
+    $[14] = tabStore;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
 });
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the
  * TabPanel component. Can be placed freely within the main `<Tabs>` component.
  */
-function TabAwareSlot({
-  children
-}) {
+function TabAwareSlot(t0) {
+  const $ = reactCompilerRuntime.c(4);
+  const {
+    children
+  } = t0;
   const tabContextValue = React__namespace.useContext(TabsContext);
-  const selectedId = tabContextValue?.tabStore.useState('selectedId');
-  return tabContextValue ? children({
-    selectedId
-  }) : null;
+  const selectedId = react.useStoreState(tabContextValue?.tabStore, "selectedId");
+  let t1;
+  if ($[0] !== children || $[1] !== selectedId || $[2] !== tabContextValue) {
+    t1 = tabContextValue ? children({
+      selectedId
+    }) : null;
+    $[0] = children;
+    $[1] = selectedId;
+    $[2] = tabContextValue;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 }
 
 /** @deprecated */