@ariakit/react-core 0.4.12 → 0.4.14

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @ariakit/react-core
 
+## 0.4.14
+
+### Improved performance on composite widgets
+
+Composite item components such as [`ComboboxItem`](https://ariakit.org/reference/combobox-item) and [`SelectItem`](https://ariakit.org/reference/select-item) now render 20-30% faster compared to Ariakit v0.4.13.
+
+This enhancement should decrease the time needed to render large collections of items in composite widgets and improve the Interaction to Next Paint (INP) metric. We're working on further optimizations to make composite widgets even faster in future releases.
+
+### Combobox auto-scroll
+
+The [`Combobox`](https://ariakit.org/reference/combobox) component now scrolls the list to the top while typing when the [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop is disabled.
+
+The behavior is now consistent with the [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop, except the first item won't be automatically focused.
+
+### Other updates
+
+- Fixed the [`item`](https://ariakit.org/reference/use-collection-store#item) method to prevent it from returning items that have been removed from the collection store.
+- Fixed the [`item`](https://ariakit.org/reference/use-menu-store#item) method when keeping different menu stores in sync.
+- Added experimental `offscreenBehavior` prop to collection and composite item components.
+- Added [`id`](https://ariakit.org/reference/use-composite-store#id) prop to composite stores.
+- Fixed composite typeahead functionality when rendering virtualized lists.
+- Added `useStoreStateObject` function.
+- Fixed `TagInput` when pasting content with final newline.
+- Fixed [`SelectValue`](https://ariakit.org/reference/select-value) to display the [`fallback`](https://ariakit.org/reference/select-value#fallback) when the value is an empty array or string.
+- Fixed an issue where composite widgets might not navigate to the correct item when pressing <kbd>↑</kbd> while the composite base element was focused.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/core@0.4.13`
+
+## 0.4.13
+
+### Accessible composite widgets with invalid `activeId`
+
+We've improved the logic for composite widgets such as [Tabs](https://ariakit.org/components/tab) and [Toolbar](https://ariakit.org/components/toolbar) when the [`activeId`](https://ariakit.org/reference/composite-provider#activeid) state points to an element that is disabled or missing from the DOM. This can happen if an item is dynamically removed, disabled, or lazily rendered, potentially making the composite widget inaccessible to keyboard users.
+
+Now, when the [`activeId`](https://ariakit.org/reference/composite-provider#activeid) state is invalid, all composite items will remain tabbable, enabling users to <kbd>Tab</kbd> into the composite widget. Once a composite item receives focus or the element referenced by the [`activeId`](https://ariakit.org/reference/composite-provider#activeid) state becomes available, the roving tabindex behavior is restored.
+
+### Other updates
+
+- Fixed regression in [`focusShift`](https://ariakit.org/reference/composite-provider#focusshift).
+- Fixed [Radio](https://ariakit.org/components/radio) to prevent `onChange` from triggering on radios that are already checked.
+- Fixed [`DisclosureContent`](https://ariakit.org/reference/disclosure-content) setting an incorrect `animating` state value during enter animations.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/core@0.4.12`
+
 ## 0.4.12
 
 ### Tab panels with scroll restoration
@@ -37,7 +81,7 @@ A new [`--dialog-viewport-height`](https://ariakit.org/guide/styling#--dialog-vi
 
 ### Overriding composite state for specific methods
 
-The [`next`](https://ariakit.org/reference/use-composite-store#next), [`previous`](https://ariakit.org/reference/use-composite-store#previous), [`up`](https://ariakit.org/reference/use-composite-store#up), and [`down`](https://ariakit.org/reference/use-composite-store#down) methods of the [composite store](https://ariakit.org/reference/use-composite-store) now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a different [`activeId`](https://ariakit.org/reference/use-composite-store#activeId) value to the [`next`](https://ariakit.org/reference/use-composite-store#next) method so it returns the next item based on that value rather than the current active item in the composite store:
+The [`next`](https://ariakit.org/reference/use-composite-store#next), [`previous`](https://ariakit.org/reference/use-composite-store#previous), [`up`](https://ariakit.org/reference/use-composite-store#up), and [`down`](https://ariakit.org/reference/use-composite-store#down) methods of the [composite store](https://ariakit.org/reference/use-composite-store) now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a different [`activeId`](https://ariakit.org/reference/use-composite-store#activeid) value to the [`next`](https://ariakit.org/reference/use-composite-store#next) method so it returns the next item based on that value rather than the current active item in the composite store:
 
 ```js
 const store = useCompositeStore({ defaultActiveId: "item1" });

package/cjs/__chunks/{2JLI27ZJ.cjs → 26CLTSY6.cjs}

@@ -1,65 +1,65 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _7ZBP2RUNcjs = require('./7ZBP2RUN.cjs');
+var _GJ42LWUCcjs = require('./GJ42LWUC.cjs');
 
 
 
-var _2XWRXJTWcjs = require('./2XWRXJTW.cjs');
+var _CLOVACVYcjs = require('./CLOVACVY.cjs');
 
 
-var _HOK4HLECcjs = require('./HOK4HLEC.cjs');
+var _UWFFCHQUcjs = require('./UWFFCHQU.cjs');
 
 
-var _UGPAREOWcjs = require('./UGPAREOW.cjs');
+var _EIHHM2LOcjs = require('./EIHHM2LO.cjs');
 
 
-var _CWQPJ74Pcjs = require('./CWQPJ74P.cjs');
+var _5ENGRSQKcjs = require('./5ENGRSQK.cjs');
 
 
-var _56NPFF7Pcjs = require('./56NPFF7P.cjs');
 
+var _WWQLUY5Wcjs = require('./WWQLUY5W.cjs');
 
-var _W32FX7DMcjs = require('./W32FX7DM.cjs');
 
+var _56NPFF7Pcjs = require('./56NPFF7P.cjs');
 
 
-var _WWQLUY5Wcjs = require('./WWQLUY5W.cjs');
+var _W32FX7DMcjs = require('./W32FX7DM.cjs');
 
 
 var _YVOQ2BCBcjs = require('./YVOQ2BCB.cjs');
 
 
-var _5UGU5HIQcjs = require('./5UGU5HIQ.cjs');
+var _ZEICBQM2cjs = require('./ZEICBQM2.cjs');
 
 
 var _L634CRNJcjs = require('./L634CRNJ.cjs');
 
 
-var _GAIXLTBNcjs = require('./GAIXLTBN.cjs');
+var _2WZY5KXBcjs = require('./2WZY5KXB.cjs');
 
 
 
-var _WFEIS2SRcjs = require('./WFEIS2SR.cjs');
+var _53NM5U3Acjs = require('./53NM5U3A.cjs');
 
 
 
 
 
-var _E3JIN4WHcjs = require('./E3JIN4WH.cjs');
+var _VF7H2WBXcjs = require('./VF7H2WBX.cjs');
 
 
-var _XFOTDXSHcjs = require('./XFOTDXSH.cjs');
+var _KYD66ZXYcjs = require('./KYD66ZXY.cjs');
 
 
 
 
-var _MFAH5VLWcjs = require('./MFAH5VLW.cjs');
+var _6TI3NXX6cjs = require('./6TI3NXX6.cjs');
 
 
-var _2BYHFNPPcjs = require('./2BYHFNPP.cjs');
+var _T272CHVScjs = require('./T272CHVS.cjs');
 
 
-var _Y7UE4JBRcjs = require('./Y7UE4JBR.cjs');
+var _76LCMKUIcjs = require('./76LCMKUI.cjs');
 
 
 
@@ -68,7 +68,7 @@ var _Y7UE4JBRcjs = require('./Y7UE4JBR.cjs');
 
 
 
-var _TM5Y6AJUcjs = require('./TM5Y6AJU.cjs');
+var _L5A2ID7Scjs = require('./L5A2ID7S.cjs');
 
 
 
@@ -112,7 +112,7 @@ function getElementFromProp(prop, focusable = false) {
   if (focusable) return _focus.isFocusable.call(void 0, element) ? element : null;
   return element;
 }
-var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
+var useDialog = _6TI3NXX6cjs.createHook.call(void 0, function useDialog2(_a) {
   var _b = _a, {
     store: storeProp,
     open: openProp,
@@ -150,9 +150,9 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     "unmountOnHide",
     "unstable_treeSnapshotKey"
   ]);
-  const context = _E3JIN4WHcjs.useDialogProviderContext.call(void 0, );
+  const context = _VF7H2WBXcjs.useDialogProviderContext.call(void 0, );
   const ref = _react.useRef.call(void 0, null);
-  const store = _2BYHFNPPcjs.useDialogStore.call(void 0, {
+  const store = _T272CHVScjs.useDialogStore.call(void 0, {
     store: storeProp || context,
     open: openProp,
     setOpen(open2) {
@@ -168,22 +168,22 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
       store.setOpen(true);
     }
   });
-  const { portalRef, domReady } = _TM5Y6AJUcjs.usePortalRef.call(void 0, portal, props.portalRef);
+  const { portalRef, domReady } = _L5A2ID7Scjs.usePortalRef.call(void 0, portal, props.portalRef);
   const preserveTabOrderProp = props.preserveTabOrder;
-  const preserveTabOrder = _Y7UE4JBRcjs.useStoreState.call(void 0, 
+  const preserveTabOrder = _76LCMKUIcjs.useStoreState.call(void 0, 
     store,
     (state) => preserveTabOrderProp && !modal && state.mounted
   );
-  const id = _TM5Y6AJUcjs.useId.call(void 0, props.id);
-  const open = _Y7UE4JBRcjs.useStoreState.call(void 0, store, "open");
-  const mounted = _Y7UE4JBRcjs.useStoreState.call(void 0, store, "mounted");
-  const contentElement = _Y7UE4JBRcjs.useStoreState.call(void 0, store, "contentElement");
-  const hidden = _WFEIS2SRcjs.isHidden.call(void 0, mounted, props.hidden, props.alwaysVisible);
-  _HOK4HLECcjs.usePreventBodyScroll.call(void 0, contentElement, id, preventBodyScroll && !hidden);
-  _CWQPJ74Pcjs.useHideOnInteractOutside.call(void 0, store, hideOnInteractOutside, domReady);
-  const { wrapElement, nestedDialogs } = _UGPAREOWcjs.useNestedDialogs.call(void 0, store);
-  props = _TM5Y6AJUcjs.useWrapElement.call(void 0, props, wrapElement, [wrapElement]);
-  _TM5Y6AJUcjs.useSafeLayoutEffect.call(void 0, () => {
+  const id = _L5A2ID7Scjs.useId.call(void 0, props.id);
+  const open = _76LCMKUIcjs.useStoreState.call(void 0, store, "open");
+  const mounted = _76LCMKUIcjs.useStoreState.call(void 0, store, "mounted");
+  const contentElement = _76LCMKUIcjs.useStoreState.call(void 0, store, "contentElement");
+  const hidden = _53NM5U3Acjs.isHidden.call(void 0, mounted, props.hidden, props.alwaysVisible);
+  _UWFFCHQUcjs.usePreventBodyScroll.call(void 0, contentElement, id, preventBodyScroll && !hidden);
+  _5ENGRSQKcjs.useHideOnInteractOutside.call(void 0, store, hideOnInteractOutside, domReady);
+  const { wrapElement, nestedDialogs } = _EIHHM2LOcjs.useNestedDialogs.call(void 0, store);
+  props = _L5A2ID7Scjs.useWrapElement.call(void 0, props, wrapElement, [wrapElement]);
+  _L5A2ID7Scjs.useSafeLayoutEffect.call(void 0, () => {
     if (!open) return;
     const dialog = ref.current;
     const activeElement = _dom.getActiveElement.call(void 0, dialog, true);
@@ -245,24 +245,24 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     if (existingDismiss) return;
     return _W32FX7DMcjs.prependHiddenDismiss.call(void 0, dialog, store.hide);
   }, [store, modal, mounted, domReady]);
-  _TM5Y6AJUcjs.useSafeLayoutEffect.call(void 0, () => {
+  _L5A2ID7Scjs.useSafeLayoutEffect.call(void 0, () => {
     if (!_56NPFF7Pcjs.supportsInert.call(void 0, )) return;
     if (open) return;
     if (!mounted) return;
     if (!domReady) return;
     const dialog = ref.current;
     if (!dialog) return;
-    return _2XWRXJTWcjs.disableTree.call(void 0, dialog);
+    return _CLOVACVYcjs.disableTree.call(void 0, dialog);
   }, [open, mounted, domReady]);
   const canTakeTreeSnapshot = open && domReady;
-  _TM5Y6AJUcjs.useSafeLayoutEffect.call(void 0, () => {
+  _L5A2ID7Scjs.useSafeLayoutEffect.call(void 0, () => {
     if (!id) return;
     if (!canTakeTreeSnapshot) return;
     const dialog = ref.current;
     return _YVOQ2BCBcjs.createWalkTreeSnapshot.call(void 0, id, [dialog]);
   }, [id, canTakeTreeSnapshot, unstable_treeSnapshotKey]);
-  const getPersistentElementsProp = _TM5Y6AJUcjs.useEvent.call(void 0, getPersistentElements);
-  _TM5Y6AJUcjs.useSafeLayoutEffect.call(void 0, () => {
+  const getPersistentElementsProp = _L5A2ID7Scjs.useEvent.call(void 0, getPersistentElements);
+  _L5A2ID7Scjs.useSafeLayoutEffect.call(void 0, () => {
     if (!id) return;
     if (!canTakeTreeSnapshot) return;
     const { disclosureElement } = store.getState();
@@ -276,7 +276,7 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     if (modal) {
       return _misc.chain.call(void 0, 
         _WWQLUY5Wcjs.markTreeOutside.call(void 0, id, allElements),
-        _2XWRXJTWcjs.disableTreeOutside.call(void 0, id, allElements)
+        _CLOVACVYcjs.disableTreeOutside.call(void 0, id, allElements)
       );
     }
     return _WWQLUY5Wcjs.markTreeOutside.call(void 0, id, [disclosureElement, ...allElements]);
@@ -290,7 +290,7 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     unstable_treeSnapshotKey
   ]);
   const mayAutoFocusOnShow = !!autoFocusOnShow;
-  const autoFocusOnShowProp = _TM5Y6AJUcjs.useBooleanEvent.call(void 0, autoFocusOnShow);
+  const autoFocusOnShowProp = _L5A2ID7Scjs.useBooleanEvent.call(void 0, autoFocusOnShow);
   const [autoFocusEnabled, setAutoFocusEnabled] = _react.useState.call(void 0, false);
   _react.useEffect.call(void 0, () => {
     if (!open) return;
@@ -328,7 +328,7 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     autoFocusOnShowProp
   ]);
   const mayAutoFocusOnHide = !!autoFocusOnHide;
-  const autoFocusOnHideProp = _TM5Y6AJUcjs.useBooleanEvent.call(void 0, autoFocusOnHide);
+  const autoFocusOnHideProp = _L5A2ID7Scjs.useBooleanEvent.call(void 0, autoFocusOnHide);
   const [hasOpened, setHasOpened] = _react.useState.call(void 0, false);
   _react.useEffect.call(void 0, () => {
     if (!open) return;
@@ -371,7 +371,7 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     [store, finalFocus, autoFocusOnHideProp]
   );
   const focusedOnHideRef = _react.useRef.call(void 0, false);
-  _TM5Y6AJUcjs.useSafeLayoutEffect.call(void 0, () => {
+  _L5A2ID7Scjs.useSafeLayoutEffect.call(void 0, () => {
     if (open) return;
     if (!hasOpened) return;
     if (!mayAutoFocusOnHide) return;
@@ -391,7 +391,7 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
       focusOnHide(dialog);
     };
   }, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
-  const hideOnEscapeProp = _TM5Y6AJUcjs.useBooleanEvent.call(void 0, hideOnEscape);
+  const hideOnEscapeProp = _L5A2ID7Scjs.useBooleanEvent.call(void 0, hideOnEscape);
   _react.useEffect.call(void 0, () => {
     if (!domReady) return;
     if (!mounted) return;
@@ -417,20 +417,20 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     };
     return _events.addGlobalEventListener.call(void 0, "keydown", onKeyDown, true);
   }, [store, domReady, mounted, hideOnEscapeProp]);
-  props = _TM5Y6AJUcjs.useWrapElement.call(void 0, 
+  props = _L5A2ID7Scjs.useWrapElement.call(void 0, 
     props,
     (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _L634CRNJcjs.HeadingLevel, { level: modal ? 1 : void 0, children: element }),
     [modal]
   );
   const hiddenProp = props.hidden;
   const alwaysVisible = props.alwaysVisible;
-  props = _TM5Y6AJUcjs.useWrapElement.call(void 0, 
+  props = _L5A2ID7Scjs.useWrapElement.call(void 0, 
     props,
     (element) => {
       if (!backdrop) return element;
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _7ZBP2RUNcjs.DialogBackdrop,
+          _GJ42LWUCcjs.DialogBackdrop,
           {
             store,
             backdrop,
@@ -445,9 +445,9 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
   );
   const [headingId, setHeadingId] = _react.useState.call(void 0, );
   const [descriptionId, setDescriptionId] = _react.useState.call(void 0, );
-  props = _TM5Y6AJUcjs.useWrapElement.call(void 0, 
+  props = _L5A2ID7Scjs.useWrapElement.call(void 0, 
     props,
-    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E3JIN4WHcjs.DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E3JIN4WHcjs.DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E3JIN4WHcjs.DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
+    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VF7H2WBXcjs.DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VF7H2WBXcjs.DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VF7H2WBXcjs.DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
     [store]
   );
   props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
@@ -458,21 +458,21 @@ var useDialog = _MFAH5VLWcjs.createHook.call(void 0, function useDialog2(_a) {
     "aria-labelledby": headingId,
     "aria-describedby": descriptionId
   }, props), {
-    ref: _TM5Y6AJUcjs.useMergeRefs.call(void 0, ref, props.ref)
+    ref: _L5A2ID7Scjs.useMergeRefs.call(void 0, ref, props.ref)
   });
-  props = _5UGU5HIQcjs.useFocusableContainer.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), {
+  props = _ZEICBQM2cjs.useFocusableContainer.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), {
     autoFocusOnShow: autoFocusEnabled
   }));
-  props = _WFEIS2SRcjs.useDisclosureContent.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
-  props = _XFOTDXSHcjs.useFocusable.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), { focusable }));
-  props = _GAIXLTBNcjs.usePortal.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { portal }, props), { portalRef, preserveTabOrder }));
+  props = _53NM5U3Acjs.useDisclosureContent.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
+  props = _KYD66ZXYcjs.useFocusable.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), { focusable }));
+  props = _2WZY5KXBcjs.usePortal.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { portal }, props), { portalRef, preserveTabOrder }));
   return props;
 });
-function createDialogComponent(Component, useProviderContext = _E3JIN4WHcjs.useDialogProviderContext) {
-  return _MFAH5VLWcjs.forwardRef.call(void 0, function DialogComponent(props) {
+function createDialogComponent(Component, useProviderContext = _VF7H2WBXcjs.useDialogProviderContext) {
+  return _6TI3NXX6cjs.forwardRef.call(void 0, function DialogComponent(props) {
     const context = useProviderContext();
     const store = props.store || context;
-    const mounted = _Y7UE4JBRcjs.useStoreState.call(void 0, 
+    const mounted = _76LCMKUIcjs.useStoreState.call(void 0, 
       store,
       (state) => !props.unmountOnHide || (state == null ? void 0 : state.mounted) || !!props.open
     );
@@ -481,11 +481,11 @@ function createDialogComponent(Component, useProviderContext = _E3JIN4WHcjs.useD
   });
 }
 var Dialog = createDialogComponent(
-  _MFAH5VLWcjs.forwardRef.call(void 0, function Dialog2(props) {
+  _6TI3NXX6cjs.forwardRef.call(void 0, function Dialog2(props) {
     const htmlProps = useDialog(props);
-    return _MFAH5VLWcjs.createElement.call(void 0, TagName, htmlProps);
+    return _6TI3NXX6cjs.createElement.call(void 0, TagName, htmlProps);
   }),
-  _E3JIN4WHcjs.useDialogProviderContext
+  _VF7H2WBXcjs.useDialogProviderContext
 );
 
 

package/cjs/__chunks/{LTKKWFIO.cjs → 26FMIDEO.cjs}

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _4RLNADFKcjs = require('./4RLNADFK.cjs');
+var _GR3PIV3Ncjs = require('./GR3PIV3N.cjs');
 
 
-var _QMCNFBPOcjs = require('./QMCNFBPO.cjs');
+var _QTZ3KD4Acjs = require('./QTZ3KD4A.cjs');
 
 
 
-var _5X5VM34Kcjs = require('./5X5VM34K.cjs');
+var _ZVS6SBRRcjs = require('./ZVS6SBRR.cjs');
 
 
 
 
-var _MFAH5VLWcjs = require('./MFAH5VLW.cjs');
+var _6TI3NXX6cjs = require('./6TI3NXX6.cjs');
 
 
 
-var _TM5Y6AJUcjs = require('./TM5Y6AJU.cjs');
+var _L5A2ID7Scjs = require('./L5A2ID7S.cjs');
 
 
 
@@ -27,34 +27,34 @@ var _7EQBAZ46cjs = require('./7EQBAZ46.cjs');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
 var TagName = "button";
-var usePopoverDisclosure = _MFAH5VLWcjs.createHook.call(void 0, function usePopoverDisclosure2(_a) {
+var usePopoverDisclosure = _6TI3NXX6cjs.createHook.call(void 0, function usePopoverDisclosure2(_a) {
   var _b = _a, { store } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, ["store"]);
-  const context = _5X5VM34Kcjs.usePopoverProviderContext.call(void 0, );
+  const context = _ZVS6SBRRcjs.usePopoverProviderContext.call(void 0, );
   store = store || context;
   _misc.invariant.call(void 0, 
     store,
     process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
   );
   const onClickProp = props.onClick;
-  const onClick = _TM5Y6AJUcjs.useEvent.call(void 0, (event) => {
+  const onClick = _L5A2ID7Scjs.useEvent.call(void 0, (event) => {
     store == null ? void 0 : store.setAnchorElement(event.currentTarget);
     onClickProp == null ? void 0 : onClickProp(event);
   });
-  props = _TM5Y6AJUcjs.useWrapElement.call(void 0, 
+  props = _L5A2ID7Scjs.useWrapElement.call(void 0, 
     props,
-    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5X5VM34Kcjs.PopoverScopedContextProvider, { value: store, children: element }),
+    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZVS6SBRRcjs.PopoverScopedContextProvider, { value: store, children: element }),
     [store]
   );
   props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), {
     onClick
   });
-  props = _QMCNFBPOcjs.usePopoverAnchor.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
-  props = _4RLNADFKcjs.useDialogDisclosure.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
+  props = _QTZ3KD4Acjs.usePopoverAnchor.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
+  props = _GR3PIV3Ncjs.useDialogDisclosure.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
   return props;
 });
-var PopoverDisclosure = _MFAH5VLWcjs.forwardRef.call(void 0, function PopoverDisclosure2(props) {
+var PopoverDisclosure = _6TI3NXX6cjs.forwardRef.call(void 0, function PopoverDisclosure2(props) {
   const htmlProps = usePopoverDisclosure(props);
-  return _MFAH5VLWcjs.createElement.call(void 0, TagName, htmlProps);
+  return _6TI3NXX6cjs.createElement.call(void 0, TagName, htmlProps);
 });
 
 

package/cjs/__chunks/2C4LCZ5B.cjs

@@ -0,0 +1,139 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _DQ3AW7HUcjs = require('./DQ3AW7HU.cjs');
+
+
+var _3YJARQUNcjs = require('./3YJARQUN.cjs');
+
+
+var _6TI3NXX6cjs = require('./6TI3NXX6.cjs');
+
+
+
+
+var _L5A2ID7Scjs = require('./L5A2ID7S.cjs');
+
+
+
+
+var _7EQBAZ46cjs = require('./7EQBAZ46.cjs');
+
+// src/collection/collection-item-offscreen.tsx
+var _misc = require('@ariakit/core/utils/misc');
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+function requestIdleCallback(callback) {
+  if (typeof window.requestIdleCallback === "function") {
+    return window.requestIdleCallback(callback);
+  }
+  callback();
+  return 0;
+}
+function cancelIdleCallback(id) {
+  if (typeof window.cancelIdleCallback === "function") {
+    window.cancelIdleCallback(id);
+  }
+}
+function useCollectionItemOffscreen(_a) {
+  var _b = _a, { offscreenBehavior = "active", offscreenRoot } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, ["offscreenBehavior", "offscreenRoot"]);
+  const id = _L5A2ID7Scjs.useId.call(void 0, props.id);
+  const [updated, forceUpdate] = _L5A2ID7Scjs.useForceUpdate.call(void 0, );
+  const forcedUpdatesCountRef = _react.useRef.call(void 0, 0);
+  const [_active, setActive] = _react.useState.call(void 0, offscreenBehavior === "active");
+  const active = _active || offscreenBehavior === "active";
+  const observerRef = _react.useRef.call(void 0, null);
+  const idleCallbackIdRef = _react.useRef.call(void 0, 0);
+  const ref = _react.useCallback.call(void 0, 
+    (element) => {
+      var _a2;
+      if (!element || offscreenBehavior === "active") {
+        cancelIdleCallback(idleCallbackIdRef.current);
+        (_a2 = observerRef.current) == null ? void 0 : _a2.disconnect();
+        return;
+      }
+      _misc.invariant.call(void 0, 
+        offscreenRoot !== void 0,
+        process.env.NODE_ENV !== "production" && "The offscreenRoot prop must provided."
+      );
+      const getOffscreenRoot = () => {
+        if (!offscreenRoot) return null;
+        if (typeof offscreenRoot === "function") {
+          return offscreenRoot(element);
+        }
+        if ("current" in offscreenRoot) {
+          return offscreenRoot.current;
+        }
+        return offscreenRoot;
+      };
+      const root = getOffscreenRoot();
+      if (!root) {
+        forcedUpdatesCountRef.current++;
+        if (forcedUpdatesCountRef.current > 3) {
+          throw new Error(
+            "The offscreenRoot is not available. Please make sure the root element is mounted."
+          );
+        }
+        forceUpdate();
+        return;
+      }
+      if (!observerRef.current || observerRef.current.root !== root) {
+        observerRef.current = new IntersectionObserver(
+          ([entry]) => {
+            cancelIdleCallback(idleCallbackIdRef.current);
+            const isIntersecting = !!(entry == null ? void 0 : entry.isIntersecting);
+            idleCallbackIdRef.current = requestIdleCallback(() => {
+              if (!isIntersecting && offscreenBehavior === "lazy") return;
+              setActive(isIntersecting);
+            });
+          },
+          { root, rootMargin: "40%" }
+        );
+      }
+      observerRef.current.observe(element);
+    },
+    [updated, offscreenBehavior, offscreenRoot]
+  );
+  return {
+    id,
+    active,
+    ref,
+    "data-offscreen": !active || void 0
+  };
+}
+var CollectionItem2 = _6TI3NXX6cjs.forwardRef.call(void 0, function CollectionItem3(_a) {
+  var _b = _a, {
+    offscreenBehavior,
+    offscreenRoot
+  } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
+    "offscreenBehavior",
+    "offscreenRoot"
+  ]);
+  const _a2 = useCollectionItemOffscreen(_7EQBAZ46cjs.__spreadValues.call(void 0, {
+    offscreenBehavior,
+    offscreenRoot
+  }, props)), { active, ref } = _a2, rest = _7EQBAZ46cjs.__objRest.call(void 0, _a2, ["active", "ref"]);
+  const allProps = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, rest), props), { ref: _L5A2ID7Scjs.useMergeRefs.call(void 0, ref, props.ref) });
+  if (active) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DQ3AW7HUcjs.CollectionItem, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, allProps));
+  }
+  const _b2 = allProps, {
+    store,
+    shouldRegisterItem,
+    getItem,
+    element: element
+  } = _b2, htmlProps = _7EQBAZ46cjs.__objRest.call(void 0, _b2, [
+    "store",
+    "shouldRegisterItem",
+    "getItem",
+    // @ts-expect-error This prop may come from a collection renderer.
+    "element"
+  ]);
+  const Component = _3YJARQUNcjs.Role[TagName];
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, htmlProps));
+});
+
+
+
+
+exports.useCollectionItemOffscreen = useCollectionItemOffscreen; exports.CollectionItem = CollectionItem2;

package/cjs/__chunks/{U4RXV3KO.cjs → 2FD5S7KL.cjs}

@@ -1,20 +1,20 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
 
-var _PSEQY4EMcjs = require('./PSEQY4EM.cjs');
+var _PV4FS33Bcjs = require('./PV4FS33B.cjs');
 
 
 
-var _Y7UE4JBRcjs = require('./Y7UE4JBR.cjs');
+var _76LCMKUIcjs = require('./76LCMKUI.cjs');
 
 // src/tooltip/tooltip-store.ts
 var _tooltipstore = require('@ariakit/core/tooltip/tooltip-store'); var Core = _interopRequireWildcard(_tooltipstore);
 function useTooltipStoreProps(store, update, props) {
-  _Y7UE4JBRcjs.useStoreProps.call(void 0, store, props, "type");
-  _Y7UE4JBRcjs.useStoreProps.call(void 0, store, props, "skipTimeout");
-  return _PSEQY4EMcjs.useHovercardStoreProps.call(void 0, store, update, props);
+  _76LCMKUIcjs.useStoreProps.call(void 0, store, props, "type");
+  _76LCMKUIcjs.useStoreProps.call(void 0, store, props, "skipTimeout");
+  return _PV4FS33Bcjs.useHovercardStoreProps.call(void 0, store, update, props);
 }
 function useTooltipStore(props = {}) {
-  const [store, update] = _Y7UE4JBRcjs.useStore.call(void 0, Core.createTooltipStore, props);
+  const [store, update] = _76LCMKUIcjs.useStore.call(void 0, Core.createTooltipStore, props);
   return useTooltipStoreProps(store, update, props);
 }