@ariakit/react-core 0.3.12 → 0.3.14

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ariakit/react-core
 
+## 0.3.14
+
+- Fixed a regression introduced in `v0.3.13` where dialogs wouldn't close when clicking outside on iOS.
+
+## 0.3.13
+
+### Improved performance of large collections
+
+Components like [`MenuItem`](https://ariakit.org/reference/menu-item), [`ComboboxItem`](https://ariakit.org/reference/combobox-item), and [`SelectItem`](https://ariakit.org/reference/select-item) should now offer improved performance when rendering large collections.
+
+### New `FormControl` component
+
+This version introduces a new [`FormControl`](https://ariakit.org/reference/form-control) component. In future versions, this will replace the [`FormField`](https://ariakit.org/reference/form-field) component.
+
+### Other updates
+
+- Adjusted the focus behavior in Safari to occur prior to the `pointerup` event instead of `mouseup`.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/core@0.3.11`
+
 ## 0.3.12
 
 - The auto-select feature on [Combobox](https://ariakit.org/components/combobox) now resets with each keystroke.

package/cjs/__chunks/{7HJPL3H2.cjs → I2KHXDVL.cjs}

@@ -6,10 +6,10 @@
 var _KXQOQQ5Bcjs = require('./KXQOQQ5B.cjs');
 
 
-var _KDG57VZVcjs = require('./KDG57VZV.cjs');
+var _OUEE5HOScjs = require('./OUEE5HOS.cjs');
 
 
-var _EKB76T2Ucjs = require('./EKB76T2U.cjs');
+var _ZL5DC555cjs = require('./ZL5DC555.cjs');
 
 
 
@@ -283,7 +283,7 @@ var useHovercard = _RNZNGEL4cjs.createHook.call(void 0,
     const autoFocusOnShow = store.useState(
       (state) => modal || state.autoFocusOnShow
     );
-    props = _KDG57VZVcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _OUEE5HOScjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       modal,
       portal,
@@ -304,7 +304,7 @@ var useHovercard = _RNZNGEL4cjs.createHook.call(void 0,
     return props;
   }
 );
-var Hovercard = _EKB76T2Ucjs.createDialogComponent.call(void 0, 
+var Hovercard = _ZL5DC555cjs.createDialogComponent.call(void 0, 
   _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
     const htmlProps = useHovercard(props);
     return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);

package/cjs/__chunks/{VCDQISP7.cjs → N3XK7EAH.cjs}

@@ -22,7 +22,7 @@ var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
 
 var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
 
-// src/form/form-field.ts
+// src/form/form-control.ts
 var _react = require('react');
 var _dom = require('@ariakit/core/utils/dom');
 var _misc = require('@ariakit/core/utils/misc');
@@ -43,7 +43,7 @@ function useItem(store, name, type) {
     (state) => state.items.find((item) => item.type === type && item.name === name)
   );
 }
-var useFormField = _RNZNGEL4cjs.createHook.call(void 0, 
+var useFormControl = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, {
       store,
@@ -60,7 +60,7 @@ var useFormField = _RNZNGEL4cjs.createHook.call(void 0,
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
-      process.env.NODE_ENV !== "production" && "FormField must be wrapped in a Form component."
+      process.env.NODE_ENV !== "production" && "FormControl must be wrapped in a Form component."
     );
     const name = `${nameProp}`;
     const id = _EO6LS72Hcjs.useId.call(void 0, props.id);
@@ -118,15 +118,15 @@ var useFormField = _RNZNGEL4cjs.createHook.call(void 0,
     return props;
   }
 );
-var FormField = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
-  const htmlProps = useFormField(props);
+var FormControl = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
+  const htmlProps = useFormControl(props);
   return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
-  FormField.displayName = "FormField";
+  FormControl.displayName = "FormControl";
 }
 
 
 
 
-exports.useFormField = useFormField; exports.FormField = FormField;
+exports.useFormControl = useFormControl; exports.FormControl = FormControl;

package/cjs/__chunks/{KDG57VZV.cjs → OUEE5HOS.cjs}

@@ -2,7 +2,7 @@
 
 
 
-var _EKB76T2Ucjs = require('./EKB76T2U.cjs');
+var _ZL5DC555cjs = require('./ZL5DC555.cjs');
 
 
 
@@ -356,7 +356,7 @@ var usePopover = _RNZNGEL4cjs.createHook.call(void 0,
         position: "relative"
       }, props.style)
     });
-    props = _EKB76T2Ucjs.useDialog.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _ZL5DC555cjs.useDialog.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       modal,
       portal,
@@ -369,7 +369,7 @@ var usePopover = _RNZNGEL4cjs.createHook.call(void 0,
     return props;
   }
 );
-var Popover = _EKB76T2Ucjs.createDialogComponent.call(void 0, 
+var Popover = _ZL5DC555cjs.createDialogComponent.call(void 0, 
   _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
     const htmlProps = usePopover(props);
     return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);

package/cjs/__chunks/{EKB76T2U.cjs → ZL5DC555.cjs}

@@ -5,7 +5,7 @@ var _WZ3DRKGPcjs = require('./WZ3DRKGP.cjs');
 
 
 
-var _NKR65BKCcjs = require('./NKR65BKC.cjs');
+var _KSPMHEYZcjs = require('./KSPMHEYZ.cjs');
 
 
 var _344F3DYOcjs = require('./344F3DYO.cjs');
@@ -21,10 +21,10 @@ var _JVDUGICDcjs = require('./JVDUGICD.cjs');
 var _VV6WA3I6cjs = require('./VV6WA3I6.cjs');
 
 
-var _JF225FQ5cjs = require('./JF225FQ5.cjs');
+var _5GTNIPQ6cjs = require('./5GTNIPQ6.cjs');
 
 
-var _5GTNIPQ6cjs = require('./5GTNIPQ6.cjs');
+var _JF225FQ5cjs = require('./JF225FQ5.cjs');
 
 
 var _7566TIRWcjs = require('./7566TIRW.cjs');
@@ -266,7 +266,7 @@ var useDialog = _RNZNGEL4cjs.createHook.call(void 0,
       const dialog = ref.current;
       if (!dialog)
         return;
-      return _NKR65BKCcjs.disableTree.call(void 0, dialog);
+      return _KSPMHEYZcjs.disableTree.call(void 0, dialog);
     }, [open, mounted, domReady]);
     const canTakeTreeSnapshot = open && domReady;
     _EO6LS72Hcjs.useSafeLayoutEffect.call(void 0, () => {
@@ -294,7 +294,7 @@ var useDialog = _RNZNGEL4cjs.createHook.call(void 0,
       if (modal) {
         return _misc.chain.call(void 0, 
           _VV6WA3I6cjs.markTreeOutside.call(void 0, id, allElements),
-          _NKR65BKCcjs.disableTreeOutside.call(void 0, id, allElements)
+          _KSPMHEYZcjs.disableTreeOutside.call(void 0, id, allElements)
         );
       }
       return _VV6WA3I6cjs.markTreeOutside.call(void 0, id, [disclosureElement, ...allElements]);

package/cjs/button/button.d.cts

@@ -18,7 +18,7 @@ export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"
  * @see https://ariakit.org/components/button
  * @example
  * ```jsx
- * <Button render={<div />}>Accessible button</Button>
+ * <Button>Button</Button>
  * ```
  */
 export declare const Button: import("../utils/types.js").Component<ButtonOptions<"button">>;

package/cjs/button/button.d.ts

@@ -18,7 +18,7 @@ export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"
  * @see https://ariakit.org/components/button
  * @example
  * ```jsx
- * <Button render={<div />}>Accessible button</Button>
+ * <Button>Button</Button>
  * ```
  */
 export declare const Button: import("../utils/types.js").Component<ButtonOptions<"button">>;

package/cjs/checkbox/checkbox-check.d.cts

@@ -12,7 +12,14 @@ import type { CheckboxStore } from "./checkbox-store.js";
  */
 export declare const useCheckboxCheck: import("../utils/types.js").Hook<CheckboxCheckOptions<"span">>;
 /**
- * Renders a check mark icon, usually inside a `Checkbox` component.
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
+ * `true`. The icon can be overridden by providing a different one as children.
+ *
+ * When rendered inside a [`Checkbox`](https://ariakit.org/reference/checkbox)
+ * component, the
+ * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
+ * automatically derived from the context.
  * @see https://ariakit.org/components/checkbox
  * @example
  * ```jsx
@@ -22,18 +29,19 @@ export declare const useCheckboxCheck: import("../utils/types.js").Hook<Checkbox
 export declare const CheckboxCheck: import("../utils/types.js").Component<CheckboxCheckOptions<"span">>;
 export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T> {
     /**
-     * Object returned by the `useCheckboxStore` hook. If not provided, the parent
-     * `Checkbox` component's context will be used. If the `checked` prop is
-     * provided, it will override this prop.
+     * Object returned by the
+     * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
+     * hook.
      */
     store?: CheckboxStore;
     /**
-     * Determines if the check mark should be displayed. This value is
-     * automatically derived from the
-     * [`store`](https://ariakit.org/reference/checkbox-check#store) prop or the
-     * parent [`Checkbox`](https://ariakit.org/reference/checkbox) component.
+     * Determines if the checkmark should be rendered. This value is automatically
+     * derived from the context when it exists. Manually setting this prop will
+     * supersede the derived value.
      *
-     * Manually setting this prop will supersede the derived value.
+     * Live examples:
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     checked?: boolean;
 }

package/cjs/checkbox/checkbox-check.d.ts

@@ -12,7 +12,14 @@ import type { CheckboxStore } from "./checkbox-store.js";
  */
 export declare const useCheckboxCheck: import("../utils/types.js").Hook<CheckboxCheckOptions<"span">>;
 /**
- * Renders a check mark icon, usually inside a `Checkbox` component.
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
+ * `true`. The icon can be overridden by providing a different one as children.
+ *
+ * When rendered inside a [`Checkbox`](https://ariakit.org/reference/checkbox)
+ * component, the
+ * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
+ * automatically derived from the context.
  * @see https://ariakit.org/components/checkbox
  * @example
  * ```jsx
@@ -22,18 +29,19 @@ export declare const useCheckboxCheck: import("../utils/types.js").Hook<Checkbox
 export declare const CheckboxCheck: import("../utils/types.js").Component<CheckboxCheckOptions<"span">>;
 export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T> {
     /**
-     * Object returned by the `useCheckboxStore` hook. If not provided, the parent
-     * `Checkbox` component's context will be used. If the `checked` prop is
-     * provided, it will override this prop.
+     * Object returned by the
+     * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
+     * hook.
      */
     store?: CheckboxStore;
     /**
-     * Determines if the check mark should be displayed. This value is
-     * automatically derived from the
-     * [`store`](https://ariakit.org/reference/checkbox-check#store) prop or the
-     * parent [`Checkbox`](https://ariakit.org/reference/checkbox) component.
+     * Determines if the checkmark should be rendered. This value is automatically
+     * derived from the context when it exists. Manually setting this prop will
+     * supersede the derived value.
      *
-     * Manually setting this prop will supersede the derived value.
+     * Live examples:
+     * - [Submenu with
+     *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     checked?: boolean;
 }

package/cjs/checkbox/checkbox-provider.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
+var _VPQQSYH7cjs = require('../__chunks/VPQQSYH7.cjs');
 
 
-var _VPQQSYH7cjs = require('../__chunks/VPQQSYH7.cjs');
+var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
 require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');

package/cjs/checkbox/checkbox-provider.d.cts

@@ -3,8 +3,10 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CheckboxStoreProps, CheckboxStoreValue } from "./checkbox-store.js";
 type Value = CheckboxStoreValue;
 /**
- * Provides a checkbox store to its descendants. This is useful to create a
- * group of checkboxes that share the same store.
+ * Provides a checkbox store for its descendants. This comes in handy when
+ * creating a group of checkboxes that share the same state. `CheckboxProvider`
+ * can efficiently manage the value of a checkbox, whether it's a single string,
+ * number, or boolean value, or an array of such values.
  * @see https://ariakit.org/components/checkbox
  * @example
  * ```jsx

package/cjs/checkbox/checkbox-provider.d.ts

@@ -3,8 +3,10 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CheckboxStoreProps, CheckboxStoreValue } from "./checkbox-store.js";
 type Value = CheckboxStoreValue;
 /**
- * Provides a checkbox store to its descendants. This is useful to create a
- * group of checkboxes that share the same store.
+ * Provides a checkbox store for its descendants. This comes in handy when
+ * creating a group of checkboxes that share the same state. `CheckboxProvider`
+ * can efficiently manage the value of a checkbox, whether it's a single string,
+ * number, or boolean value, or an array of such values.
  * @see https://ariakit.org/components/checkbox
  * @example
  * ```jsx

package/cjs/checkbox/checkbox-store.d.cts

@@ -3,7 +3,8 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { Store } from "../utils/store.js";
 export declare function useCheckboxStoreProps<T extends Core.CheckboxStore>(store: T, update: () => void, props: CheckboxStoreProps): T;
 /**
- * Creates a checkbox store.
+ * Creates a checkbox store to conveniently manage a checkbox value,
+ * whether it's a string, number, boolean, or an array of strings or numbers.
  * @see https://ariakit.org/components/checkbox
  * @example
  * ```jsx
@@ -18,8 +19,9 @@ export type CheckboxStoreState<T extends CheckboxStoreValue = CheckboxStoreValue
 export type CheckboxStoreFunctions<T extends CheckboxStoreValue = CheckboxStoreValue> = Core.CheckboxStoreFunctions<T>;
 export interface CheckboxStoreOptions<T extends CheckboxStoreValue = CheckboxStoreValue> extends Core.CheckboxStoreOptions<T> {
     /**
-     * A callback that gets called when the `value` state changes.
-     * @param value The new value.
+     * A callback that gets called when the
+     * [`value`](https://ariakit.org/reference/checkbox-provider#value) state
+     * changes.
      * @example
      * function MyCheckbox({ value, onChange }) {
      *   const checkbox = useCheckboxStore({ value, setValue: onChange });

package/cjs/checkbox/checkbox-store.d.ts

@@ -3,7 +3,8 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { Store } from "../utils/store.js";
 export declare function useCheckboxStoreProps<T extends Core.CheckboxStore>(store: T, update: () => void, props: CheckboxStoreProps): T;
 /**
- * Creates a checkbox store.
+ * Creates a checkbox store to conveniently manage a checkbox value,
+ * whether it's a string, number, boolean, or an array of strings or numbers.
  * @see https://ariakit.org/components/checkbox
  * @example
  * ```jsx
@@ -18,8 +19,9 @@ export type CheckboxStoreState<T extends CheckboxStoreValue = CheckboxStoreValue
 export type CheckboxStoreFunctions<T extends CheckboxStoreValue = CheckboxStoreValue> = Core.CheckboxStoreFunctions<T>;
 export interface CheckboxStoreOptions<T extends CheckboxStoreValue = CheckboxStoreValue> extends Core.CheckboxStoreOptions<T> {
     /**
-     * A callback that gets called when the `value` state changes.
-     * @param value The new value.
+     * A callback that gets called when the
+     * [`value`](https://ariakit.org/reference/checkbox-provider#value) state
+     * changes.
      * @example
      * function MyCheckbox({ value, onChange }) {
      *   const checkbox = useCheckboxStore({ value, setValue: onChange });

package/cjs/checkbox/checkbox.d.cts

@@ -40,18 +40,21 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
     store?: CheckboxStore;
     /**
      * The native `name` attribute.
+     *
+     * Live examples:
+     * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
      */
     name?: string;
     /**
      * The value of the checkbox. This is useful when the same checkbox store is
-     * used for multiple `Checkbox` elements, in which case the value will be an
-     * array of checked values.
+     * used for multiple [`Checkbox`](https://ariakit.org/reference/checkbox)
+     * elements, in which case the value will be an array of checked values.
      *
      * Live examples:
      * - [Checkbox group](https://ariakit.org/examples/checkbox-group)
      * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
      * @example
-     * ```jsx
+     * ```jsx "value"
      * <CheckboxProvider defaultValue={["Apple", "Orange"]}>
      *   <Checkbox value="Apple" />
      *   <Checkbox value="Orange" />
@@ -61,18 +64,20 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      */
     value?: InputHTMLAttributes<HTMLInputElement>["value"];
     /**
-     * The default `checked` state of the checkbox. This prop is ignored if the
-     * `checked` or the `store` props are provided.
+     * The default checked state of the checkbox. This prop is ignored if the
+     * [`checked`](https://ariakit.org/reference/checkbox#checked) or the
+     * [`store`](https://ariakit.org/reference/checkbox#store) props are provided.
      */
     defaultChecked?: "mixed" | boolean;
     /**
-     * The `checked` state of the checkbox. This will override the value inferred
-     * from `store` prop, if provided. This can be `"mixed"` to indicate that the
-     * checkbox is partially checked.
+     * The checked state of the checkbox. This will override the value inferred
+     * from [`store`](https://ariakit.org/reference/checkbox#store) prop, if
+     * provided. This can be `"mixed"` to indicate that the checkbox is partially
+     * checked.
      */
     checked?: "mixed" | boolean;
     /**
-     * A function that is called when the checkbox's `checked` store changes.
+     * A function that is called when the checkbox's checked state changes.
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }

package/cjs/checkbox/checkbox.d.ts

@@ -40,18 +40,21 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
     store?: CheckboxStore;
     /**
      * The native `name` attribute.
+     *
+     * Live examples:
+     * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
      */
     name?: string;
     /**
      * The value of the checkbox. This is useful when the same checkbox store is
-     * used for multiple `Checkbox` elements, in which case the value will be an
-     * array of checked values.
+     * used for multiple [`Checkbox`](https://ariakit.org/reference/checkbox)
+     * elements, in which case the value will be an array of checked values.
      *
      * Live examples:
      * - [Checkbox group](https://ariakit.org/examples/checkbox-group)
      * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
      * @example
-     * ```jsx
+     * ```jsx "value"
      * <CheckboxProvider defaultValue={["Apple", "Orange"]}>
      *   <Checkbox value="Apple" />
      *   <Checkbox value="Orange" />
@@ -61,18 +64,20 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      */
     value?: InputHTMLAttributes<HTMLInputElement>["value"];
     /**
-     * The default `checked` state of the checkbox. This prop is ignored if the
-     * `checked` or the `store` props are provided.
+     * The default checked state of the checkbox. This prop is ignored if the
+     * [`checked`](https://ariakit.org/reference/checkbox#checked) or the
+     * [`store`](https://ariakit.org/reference/checkbox#store) props are provided.
      */
     defaultChecked?: "mixed" | boolean;
     /**
-     * The `checked` state of the checkbox. This will override the value inferred
-     * from `store` prop, if provided. This can be `"mixed"` to indicate that the
-     * checkbox is partially checked.
+     * The checked state of the checkbox. This will override the value inferred
+     * from [`store`](https://ariakit.org/reference/checkbox#store) prop, if
+     * provided. This can be `"mixed"` to indicate that the checkbox is partially
+     * checked.
      */
     checked?: "mixed" | boolean;
     /**
-     * A function that is called when the checkbox's `checked` store changes.
+     * A function that is called when the checkbox's checked state changes.
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }

package/cjs/collection/collection-item.d.cts

@@ -17,8 +17,10 @@ import type { CollectionStore } from "./collection-store.js";
 export declare const useCollectionItem: import("../utils/types.js").Hook<CollectionItemOptions<"div">>;
 /**
  * Renders an item in a collection. The collection store can be passed
- * explicitly through the `store` prop or implicitly through the parent
- * `Collection` component.
+ * explicitly through the
+ * [`store`](https://ariakit.org/reference/collection-item#store) prop or
+ * implicitly through the parent
+ * [`Collection`](https://ariakit.org/reference/collection) component.
  * @see https://ariakit.org/components/collection
  * @example
  * ```jsx
@@ -33,14 +35,27 @@ export interface CollectionItemOptions<T extends As = "div"> extends Options<T>
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [`Collection`](https://ariakit.org/reference/collection) or
      * [`CollectionProvider`](https://ariakit.org/reference/collection-provider)
      * components' context will be used.
+     *
+     * Live examples:
+     * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
      */
     store?: CollectionStore;
     /**
-     * Whether the item should be registered to the store.
+     * The unique ID of the item. This will be used to register the item in the
+     * store and for the element's `id` attribute. If not provided, a unique ID
+     * will be automatically generated.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
+     */
+    id?: string;
+    /**
+     * Whether the item should be registered as part of the collection.
      *
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
@@ -48,13 +63,12 @@ export interface CollectionItemOptions<T extends As = "div"> extends Options<T>
      */
     shouldRegisterItem?: boolean;
     /**
-     * A memoized function that returns props that will be passed along with the
-     * item when it gets registered to the store.
+     * A memoized function that returns props to be passed with the item during
+     * its registration in the store.
      * @example
      * ```jsx
-     * const store = useCollectionStore();
-     * const getItem = useCallback((item) => ({ ...item, custom: true }), []);
-     * <CollectionItem store={store} getItem={getItem} />
+     * const getItem = useCallback((data) => ({ ...data, custom: true }), []);
+     * <CollectionItem getItem={getItem} />
      * ```
      */
     getItem?: (props: CollectionStoreItem) => CollectionStoreItem;

package/cjs/collection/collection-item.d.ts

@@ -17,8 +17,10 @@ import type { CollectionStore } from "./collection-store.js";
 export declare const useCollectionItem: import("../utils/types.js").Hook<CollectionItemOptions<"div">>;
 /**
  * Renders an item in a collection. The collection store can be passed
- * explicitly through the `store` prop or implicitly through the parent
- * `Collection` component.
+ * explicitly through the
+ * [`store`](https://ariakit.org/reference/collection-item#store) prop or
+ * implicitly through the parent
+ * [`Collection`](https://ariakit.org/reference/collection) component.
  * @see https://ariakit.org/components/collection
  * @example
  * ```jsx
@@ -33,14 +35,27 @@ export interface CollectionItemOptions<T extends As = "div"> extends Options<T>
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [`Collection`](https://ariakit.org/reference/collection) or
      * [`CollectionProvider`](https://ariakit.org/reference/collection-provider)
      * components' context will be used.
+     *
+     * Live examples:
+     * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
      */
     store?: CollectionStore;
     /**
-     * Whether the item should be registered to the store.
+     * The unique ID of the item. This will be used to register the item in the
+     * store and for the element's `id` attribute. If not provided, a unique ID
+     * will be automatically generated.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
+     */
+    id?: string;
+    /**
+     * Whether the item should be registered as part of the collection.
      *
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
@@ -48,13 +63,12 @@ export interface CollectionItemOptions<T extends As = "div"> extends Options<T>
      */
     shouldRegisterItem?: boolean;
     /**
-     * A memoized function that returns props that will be passed along with the
-     * item when it gets registered to the store.
+     * A memoized function that returns props to be passed with the item during
+     * its registration in the store.
      * @example
      * ```jsx
-     * const store = useCollectionStore();
-     * const getItem = useCallback((item) => ({ ...item, custom: true }), []);
-     * <CollectionItem store={store} getItem={getItem} />
+     * const getItem = useCallback((data) => ({ ...data, custom: true }), []);
+     * <CollectionItem getItem={getItem} />
      * ```
      */
     getItem?: (props: CollectionStoreItem) => CollectionStoreItem;

package/cjs/collection/collection-provider.d.cts

@@ -2,7 +2,8 @@ import type { ReactElement, ReactNode } from "react";
 import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CollectionStoreItem, CollectionStoreProps } from "./collection-store.js";
 /**
- * Provides a collection store to CollectionItem components.
+ * Provides a collection store to
+ * [`CollectionItem`](https://ariakit.org/reference/collection-item) components.
  * @see https://ariakit.org/components/collection
  * @example
  * ```jsx

package/cjs/collection/collection-provider.d.ts

@@ -2,7 +2,8 @@ import type { ReactElement, ReactNode } from "react";
 import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CollectionStoreItem, CollectionStoreProps } from "./collection-store.js";
 /**
- * Provides a collection store to CollectionItem components.
+ * Provides a collection store to
+ * [`CollectionItem`](https://ariakit.org/reference/collection-item) components.
  * @see https://ariakit.org/components/collection
  * @example
  * ```jsx

package/cjs/collection/collection-renderer.d.cts

@@ -327,7 +327,7 @@ export interface CollectionRendererOptions<T extends Item = any> {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [Collection](https://ariakit.org/components/collection) component's
      * context will be used.
      *

package/cjs/collection/collection-renderer.d.ts

@@ -327,7 +327,7 @@ export interface CollectionRendererOptions<T extends Item = any> {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [Collection](https://ariakit.org/components/collection) component's
      * context will be used.
      *