@ariakit/react-components 0.1.0

package/dist/select/select-item.js

@@ -0,0 +1,143 @@
+"use client";
+import { useCompositeItem } from "../composite/composite-item.js";
+import { useCompositeHover } from "../composite/composite-hover.js";
+import { SelectItemCheckedContext, useSelectScopedContext } from "./select-context.js";
+import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent, useId, useWrapElement } from "@ariakit/react-utils";
+import { disabledFromProps, getPopupItemRole, invariant, isDownloading, isOpeningInNewTab } from "@ariakit/utils";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState, useStoreStateObject } from "@ariakit/react-store";
+//#region src/select/select-item.tsx
+const TagName = "div";
+function isSelected(storeValue, itemValue) {
+	if (itemValue == null) return;
+	if (storeValue == null) return false;
+	if (Array.isArray(storeValue)) return storeValue.includes(itemValue);
+	return storeValue === itemValue;
+}
+/**
+* Returns props to create a `SelectItem` component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* const store = useSelectStore();
+* const props = useSelectItem({ store, value: "Apple" });
+* <Role {...props} />
+* ```
+*/
+const useSelectItem = createHook(function useSelectItem({ store, value, getItem: getItemProp, hideOnClick, setValueOnClick = value != null, preventScrollOnKeyDown = true, focusOnHover = true, ...props }) {
+	const context = useSelectScopedContext();
+	store = store || context;
+	invariant(store, "SelectItem must be wrapped in a SelectList or SelectPopover component.");
+	const id = useId(props.id);
+	const disabled = disabledFromProps(props);
+	const { listElement, multiSelectable, selected, autoFocus } = useStoreStateObject(store, {
+		listElement: "listElement",
+		multiSelectable(state) {
+			return Array.isArray(state.value);
+		},
+		selected(state) {
+			return isSelected(state.value, value);
+		},
+		autoFocus(state) {
+			if (value == null) return false;
+			if (state.value == null) return false;
+			if (state.activeId !== id && store?.item(state.activeId)) return false;
+			if (Array.isArray(state.value)) return state.value[state.value.length - 1] === value;
+			return state.value === value;
+		}
+	});
+	const virtualFocus = useStoreState(store?.combobox, "virtualFocus");
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			value: disabled ? void 0 : value
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		disabled,
+		value,
+		getItemProp
+	]);
+	hideOnClick = hideOnClick ?? (value != null && !multiSelectable);
+	const onClickProp = props.onClick;
+	const setValueOnClickProp = useBooleanEvent(setValueOnClick);
+	const hideOnClickProp = useBooleanEvent(hideOnClick);
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isDownloading(event)) return;
+		if (isOpeningInNewTab(event)) return;
+		if (setValueOnClickProp(event) && value != null) store?.setValue((prevValue) => {
+			if (!Array.isArray(prevValue)) return value;
+			if (prevValue.includes(value)) return prevValue.filter((v) => v !== value);
+			return [...prevValue, value];
+		});
+		if (hideOnClickProp(event)) store?.hide();
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(SelectItemCheckedContext.Provider, {
+		value: selected ?? false,
+		children: element
+	}), [selected]);
+	const shouldAutoFocus = props.autoFocus ?? autoFocus;
+	props = {
+		role: getPopupItemRole(listElement),
+		"aria-selected": selected,
+		children: value,
+		...props,
+		id,
+		autoFocus: virtualFocus === false ? false : shouldAutoFocus,
+		"data-autofocus": shouldAutoFocus || void 0,
+		onClick
+	};
+	props = useCompositeItem({
+		store,
+		getItem,
+		preventScrollOnKeyDown,
+		...props
+	});
+	const focusOnHoverProp = useBooleanEvent(focusOnHover);
+	props = useCompositeHover({
+		store,
+		...props,
+		focusOnHover(event) {
+			if (!focusOnHoverProp(event)) return false;
+			return store.getState().open;
+		}
+	});
+	return props;
+});
+/**
+* Renders a select item inside a
+* [`SelectList`](https://ariakit.com/reference/select-list) or
+* [`SelectPopover`](https://ariakit.com/reference/select-popover).
+*
+* The `role` attribute will be automatically set on the item based on the
+* list's own `role` attribute. For example, if the
+* [`SelectPopover`](https://ariakit.com/reference/select-popover) component's
+* `role` attribute is set to `listbox` (which is the default), the item `role`
+* will be set to `option`.
+*
+* By default, the [`value`](https://ariakit.com/reference/select-item#value)
+* prop will be rendered as the children, but this can be overriden if a custom
+* children is provided.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {4-5}
+* <SelectProvider>
+*   <Select />
+*   <SelectPopover>
+*     <SelectItem value="Apple" />
+*     <SelectItem value="Orange" />
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const SelectItem = memo(forwardRef(function SelectItem(props) {
+	return createElement(TagName, useSelectItem(props));
+}));
+//#endregion
+export { SelectItem, useSelectItem };
+
+//# sourceMappingURL=select-item.js.map

package/dist/select/select-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.js","names":[],"sources":["../../src/select/select-item.tsx"],"sourcesContent":["import { useStoreState, useStoreStateObject } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  getPopupItemRole,\n  isDownloading,\n  isOpeningInNewTab,\n  disabledFromProps,\n  invariant,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport type { CompositeHoverOptions } from \"../composite/composite-hover.tsx\";\nimport { useCompositeHover } from \"../composite/composite-hover.tsx\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport { useCompositeItem } from \"../composite/composite-item.tsx\";\nimport {\n  SelectItemCheckedContext,\n  useSelectScopedContext,\n} from \"./select-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isSelected(\n  storeValue?: string | readonly string[],\n  itemValue?: string,\n) {\n  if (itemValue == null) return;\n  if (storeValue == null) return false;\n  if (Array.isArray(storeValue)) {\n    return storeValue.includes(itemValue);\n  }\n  return storeValue === itemValue;\n}\n\n/**\n * Returns props to create a `SelectItem` component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * const store = useSelectStore();\n * const props = useSelectItem({ store, value: \"Apple\" });\n * <Role {...props} />\n * ```\n */\nexport const useSelectItem = createHook<TagName, SelectItemOptions>(\n  function useSelectItem({\n    store,\n    value,\n    getItem: getItemProp,\n    hideOnClick,\n    setValueOnClick = value != null,\n    preventScrollOnKeyDown = true,\n    focusOnHover = true,\n    ...props\n  }) {\n    const context = useSelectScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"SelectItem must be wrapped in a SelectList or SelectPopover component.\",\n    );\n\n    const id = useId(props.id);\n    const disabled = disabledFromProps(props);\n\n    const { listElement, multiSelectable, selected, autoFocus } =\n      useStoreStateObject(store, {\n        listElement: \"listElement\",\n        multiSelectable(state) {\n          return Array.isArray(state.value);\n        },\n        selected(state) {\n          return isSelected(state.value, value);\n        },\n        autoFocus(state) {\n          if (value == null) return false;\n          if (state.value == null) return false;\n          if (state.activeId !== id && store?.item(state.activeId)) {\n            return false;\n          }\n          if (Array.isArray(state.value)) {\n            return state.value[state.value.length - 1] === value;\n          }\n          return state.value === value;\n        },\n      });\n\n    const virtualFocus = useStoreState(store?.combobox, \"virtualFocus\");\n\n    const getItem = useCallback<NonNullable<CompositeItemOptions[\"getItem\"]>>(\n      (item) => {\n        // When the item is disabled, we don't register its value.\n        const nextItem = {\n          ...item,\n          value: disabled ? undefined : value,\n        };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [disabled, value, getItemProp],\n    );\n\n    hideOnClick = hideOnClick ?? (value != null && !multiSelectable);\n\n    const onClickProp = props.onClick;\n    const setValueOnClickProp = useBooleanEvent(setValueOnClick);\n    const hideOnClickProp = useBooleanEvent(hideOnClick);\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isDownloading(event)) return;\n      if (isOpeningInNewTab(event)) return;\n      if (setValueOnClickProp(event) && value != null) {\n        store?.setValue((prevValue) => {\n          if (!Array.isArray(prevValue)) return value;\n          if (prevValue.includes(value)) {\n            return prevValue.filter((v) => v !== value);\n          }\n          return [...prevValue, value];\n        });\n      }\n      if (hideOnClickProp(event)) {\n        store?.hide();\n      }\n    });\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <SelectItemCheckedContext.Provider value={selected ?? false}>\n          {element}\n        </SelectItemCheckedContext.Provider>\n      ),\n      [selected],\n    );\n\n    const shouldAutoFocus = props.autoFocus ?? autoFocus;\n\n    props = {\n      role: getPopupItemRole(listElement),\n      \"aria-selected\": selected,\n      children: value,\n      ...props,\n      id,\n      // When virtualFocus is false (e.g., iOS Safari), we suppress autoFocus to\n      // prevent a re-mounted selected item from stealing focus from the\n      // combobox input (which dismisses the iOS keyboard). We keep\n      // data-autofocus so the dialog's initial focus effect can still find and\n      // focus this element. See https://github.com/ariakit/ariakit/issues/5047\n      autoFocus: virtualFocus === false ? false : shouldAutoFocus,\n      \"data-autofocus\": shouldAutoFocus || undefined,\n      onClick,\n    };\n\n    props = useCompositeItem<TagName>({\n      store,\n      getItem,\n      preventScrollOnKeyDown,\n      ...props,\n    });\n\n    const focusOnHoverProp = useBooleanEvent(focusOnHover);\n\n    props = useCompositeHover({\n      store,\n      ...props,\n      // We have to disable focusOnHover when the popup is closed, otherwise\n      // the active item will change to null (the container) when the popup is\n      // closed by clicking on an item.\n      focusOnHover(event) {\n        if (!focusOnHoverProp(event)) return false;\n        const state = store.getState();\n        return state.open;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a select item inside a\n * [`SelectList`](https://ariakit.com/reference/select-list) or\n * [`SelectPopover`](https://ariakit.com/reference/select-popover).\n *\n * The `role` attribute will be automatically set on the item based on the\n * list's own `role` attribute. For example, if the\n * [`SelectPopover`](https://ariakit.com/reference/select-popover) component's\n * `role` attribute is set to `listbox` (which is the default), the item `role`\n * will be set to `option`.\n *\n * By default, the [`value`](https://ariakit.com/reference/select-item#value)\n * prop will be rendered as the children, but this can be overriden if a custom\n * children is provided.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {4-5}\n * <SelectProvider>\n *   <Select />\n *   <SelectPopover>\n *     <SelectItem value=\"Apple\" />\n *     <SelectItem value=\"Orange\" />\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const SelectItem = memo(\n  forwardRef(function SelectItem(props: SelectItemProps) {\n    const htmlProps = useSelectItem(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface SelectItemOptions<T extends ElementType = TagName>\n  extends CompositeItemOptions<T>, CompositeHoverOptions<T> {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If\n   * not provided, the parent\n   * [`SelectList`](https://ariakit.com/reference/select-list) or\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components'\n   * context will be used.\n   */\n  store?: SelectStore;\n  /**\n   * The value of the item. This will be rendered as the children by default.\n   * - If\n   *   [`setValueOnClick`](https://ariakit.com/reference/select-item#setvalueonclick)\n   *   is set to `true`, the\n   *   [`value`](https://ariakit.com/reference/select-provider#value) state will\n   *   be set to this value when the user clicks on it.\n   * - If\n   *   [`setValueOnMove`](https://ariakit.com/reference/select-provider#setvalueonmove)\n   *   is set to `true`, the\n   *   [`value`](https://ariakit.com/reference/select-provider#value) state will\n   *   be set to this value when the user moves to it (which is usually the case\n   *   when moving through the items using the keyboard).\n   *\n   * Live examples:\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   * - [Animated Select](https://ariakit.com/examples/select-animated)\n   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)\n   * - [Select Grid](https://ariakit.com/examples/select-grid)\n   * - [SelectGroup](https://ariakit.com/examples/select-group)\n   * - [Select with custom\n   *   item](https://ariakit.com/examples/select-item-custom)\n   * @example\n   * ```jsx\n   * <SelectItem value=\"Apple\" />\n   * ```\n   */\n  value?: string;\n  /**\n   * Whether to hide the select when this item is clicked. By default, it's\n   * `true` when the [`value`](https://ariakit.com/reference/select-item#value)\n   * prop is also provided.\n   */\n  hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Whether to set the select value with this item's value, if any, when this\n   * item is clicked. By default, it's `true` when the\n   * [`value`](https://ariakit.com/reference/select-item#value) prop is also\n   * provided.\n   *\n   * Live examples:\n   * - [Select with Next.js App\n   *   Router](https://ariakit.com/examples/select-next-router)\n   */\n  setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n}\n\nexport type SelectItemProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAoCA,MAAA,UAAS;SAIH,WAAa,YAAM,WAAA;CACvB,IAAI,aAAA,MAAc;CAClB,IAAI,cAAc,MAAA,OAChB;CAEF,IAAA,MAAO,QAAA,UAAe,GAAA,OAAA,WAAA,SAAA,SAAA;CACxB,OAAA,eAAA;;;;;;;;;;;;MAuBI,gBAAgB,WAAA,SAAuB,cAAA,EAAA,OAAA,OAAA,SAAA,aAAA,aAAA,kBAAA,SAAA,MAAA,yBAAA,MAAA,eAAA,MAAA,GAAA,SAAA;CACvC,MAAA,UAAQ,uBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,wEAAQ;CACzB,MAAM,KAAA,MAAW,MAAA,EAAA;CAEjB,MAAM,WAAE,kBAAa,KAAiB;OAElC,EAAA,aAAa,iBAAA,UAAA,cAAA,oBAAA,OAAA;EACb,aAAA;kBACe,OAAQ;GACvB,OAAA,MAAA,QAAA,MAAA,KAAA;EACA;WACS,OAAA;GACT,OAAA,WAAA,MAAA,OAAA,KAAA;EACA;YACM,OAAS;GACb,IAAI,SAAM,MAAS,OAAM;GACzB,IAAI,MAAM,SAAA,MAAa,OAAM;GAG7B,IAAI,MAAM,aAAQ,MAAW,OAC3B,KAAO,MAAM,QAAM,GAAM,OAAM;GAEjC,IAAA,MAAO,QAAM,MAAU,KAAA,GAAA,OAAA,MAAA,MAAA,MAAA,MAAA,SAAA,OAAA;GACzB,OAAA,MAAA,UAAA;EACD;CAEH,CAAA;CAEA,MAAM,eAAU,cACb,OAAS,UAAA,cAAA;OAER,UAAM,aAAW,SAAA;QACZ,WAAA;GACH,GAAA;GACF,OAAA,WAAA,KAAA,IAAA;EACA;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAU;EAAO;EACpB;CAEA,CAAA;CAEA,cAAM,gBAAoB,SAAA,QAAA,CAAA;CAC1B,MAAM,cAAA,MAAA;CACN,MAAM,sBAAkB,gBAAgB,eAAW;CAEnD,MAAM,kBAAU,gBAA0C,WAAA;OACxD,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAsB;EAC1B,IAAI,cAAA,KAAkB,GAAA;EACtB,IAAI,kBAAA,KAAoB,GAAK;MAEzB,oBAAmB,KAAS,KAAG,SAAO,MAAA,OAAA,UAAA,cAAA;GACtC,IAAI,CAAA,MAAA,QAAU,SAAc,GAC1B,OAAO;GAET,IAAA,UAAW,SAAW,KAAK,GAAA,OAAA,UAAA,QAAA,MAAA,MAAA,KAAA;GAC5B,OAAA,CAAA,GAAA,WAAA,KAAA;EAEH,CAAA;EAGD,IAAA,gBAAA,KAAA,GAAA,OAAA,KAAA;CAED,CAAA;SAG8C,eAAY,QAAA,YAAA,oBAAA,yBAAA,UAAA;qBACnD;EACgC,UAEpC;CAGH,CAAA,GAAA,CAAA,QAAM,CAAA;CAEN,MAAA,kBAAQ,MAAA,aAAA;SACA;EACN,MAAA,iBAAiB,WAAA;EACjB,iBAAU;EACV,UAAG;EACH,GAAA;EAMA;EACA,WAAA,iBAAkB,QAAA,QAAmB;EACrC,kBAAA,mBAAA,KAAA;EACF;CAEA;SACE,iBAAA;EACA;EACA;EACA;EACD,GAAA;CAED,CAAA;CAEA,MAAA,mBAAQ,gBAAkB,YAAA;SACxB,kBAAA;EACA;EAIA,GAAA;eACO,OAAA;GAEL,IAAA,CAAA,iBAAW,KAAE,GAAA,OAAA;GACf,OAAA,MAAA,SAAA,EAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BI,aAAO,KAAc,WADH,SAAA,WACqB,OAAA;CACxC,OACH,cAAA,SAAA,cAAA,KAAA,CAAA"}

package/dist/select/select-label.d.ts

@@ -0,0 +1,55 @@
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/select/select-label.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectLabel` component. Since it's not a native
+ * select element, we can't use the native label element. The `SelectLabel`
+ * component will move focus and click on the `Select` component when the user
+ * clicks on the label.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectLabel({ store });
+ * <Role {...props}>Favorite fruit</Role>
+ * <Select store={store} />
+ * ```
+ */
+declare const useSelectLabel: import("@ariakit/react-utils").Hook<"div", SelectLabelOptions<"div">>;
+/**
+ * Renders a label for the [`Select`](https://ariakit.com/reference/select)
+ * component. Since it's not a native select element, we can't use the native
+ * label element. This component will move focus and click on the
+ * [`Select`](https://ariakit.com/reference/select) component when clicked.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {2}
+ * <SelectProvider defaultValue="Apple">
+ *   <SelectLabel>Favorite fruit</SelectLabel>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectLabel: (props: SelectLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectLabelOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest
+   * [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * component's context will be used.
+   */
+  store?: SelectStore;
+}
+type SelectLabelProps<T extends ElementType = TagName> = Props<T, SelectLabelOptions<T>>;
+//#endregion
+export { SelectLabel, SelectLabelOptions, SelectLabelProps, useSelectLabel };
+//# sourceMappingURL=select-label.d.ts.map

package/dist/select/select-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-label.d.ts","names":["Options","Props","ElementType","SelectStore","TagName","useSelectLabel","SelectLabelOptions","Hook","SelectLabel","SelectLabelProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/select/select-label.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAe7B;;;;AAjBqD,cAiBhCC,cAAAA,iCAA+CE,IAAAA,QAAYD,kBAAkB;AAmBlG;;;;;;;;;AAA+I;AAC/I;;;;;;;;AADA,cAAqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,YAA8BJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA/BE;;;;;;AAQxB;EAAnBY,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,kBAAAA,CAAmBS,CAAAA"}

package/dist/select/select-label.js

@@ -0,0 +1,70 @@
+"use client";
+import { useSelectProviderContext } from "./select-context.js";
+import { createElement, createHook, forwardRef, memo, useEvent, useId, useMergeRefs } from "@ariakit/react-utils";
+import { invariant, removeUndefinedValues } from "@ariakit/utils";
+//#region src/select/select-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `SelectLabel` component. Since it's not a native
+* select element, we can't use the native label element. The `SelectLabel`
+* component will move focus and click on the `Select` component when the user
+* clicks on the label.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* const store = useSelectStore();
+* const props = useSelectLabel({ store });
+* <Role {...props}>Favorite fruit</Role>
+* <Select store={store} />
+* ```
+*/
+const useSelectLabel = createHook(function useSelectLabel({ store, ...props }) {
+	const context = useSelectProviderContext();
+	store = store || context;
+	invariant(store, "SelectLabel must receive a `store` prop or be wrapped in a SelectProvider component.");
+	const id = useId(props.id);
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		queueMicrotask(() => {
+			(store?.getState().selectElement)?.focus();
+		});
+	});
+	props = {
+		...props,
+		id,
+		ref: useMergeRefs(store.setLabelElement, props.ref),
+		onClick,
+		style: {
+			cursor: "default",
+			...props.style
+		}
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a label for the [`Select`](https://ariakit.com/reference/select)
+* component. Since it's not a native select element, we can't use the native
+* label element. This component will move focus and click on the
+* [`Select`](https://ariakit.com/reference/select) component when clicked.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {2}
+* <SelectProvider defaultValue="Apple">
+*   <SelectLabel>Favorite fruit</SelectLabel>
+*   <Select />
+*   <SelectPopover>
+*     <SelectItem value="Apple" />
+*     <SelectItem value="Orange" />
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const SelectLabel = memo(forwardRef(function SelectLabel(props) {
+	return createElement(TagName, useSelectLabel(props));
+}));
+//#endregion
+export { SelectLabel, useSelectLabel };
+
+//# sourceMappingURL=select-label.js.map

package/dist/select/select-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-label.js","names":[],"sources":["../../src/select/select-label.tsx"],"sourcesContent":["import {\n  useEvent,\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { invariant, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useSelectProviderContext } from \"./select-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `SelectLabel` component. Since it's not a native\n * select element, we can't use the native label element. The `SelectLabel`\n * component will move focus and click on the `Select` component when the user\n * clicks on the label.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * const store = useSelectStore();\n * const props = useSelectLabel({ store });\n * <Role {...props}>Favorite fruit</Role>\n * <Select store={store} />\n * ```\n */\nexport const useSelectLabel = createHook<TagName, SelectLabelOptions>(\n  function useSelectLabel({ store, ...props }) {\n    const context = useSelectProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"SelectLabel must receive a `store` prop or be wrapped in a SelectProvider component.\",\n    );\n\n    const id = useId(props.id);\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      // queueMicrotask will guarantee that the focus and click events will be\n      // triggered only after the current event queue is flushed (which includes\n      // this click event).\n      queueMicrotask(() => {\n        const select = store?.getState().selectElement;\n        select?.focus();\n      });\n    });\n\n    props = {\n      ...props,\n      id,\n      ref: useMergeRefs(store.setLabelElement, props.ref),\n      onClick,\n      style: {\n        cursor: \"default\",\n        ...props.style,\n      },\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a label for the [`Select`](https://ariakit.com/reference/select)\n * component. Since it's not a native select element, we can't use the native\n * label element. This component will move focus and click on the\n * [`Select`](https://ariakit.com/reference/select) component when clicked.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {2}\n * <SelectProvider defaultValue=\"Apple\">\n *   <SelectLabel>Favorite fruit</SelectLabel>\n *   <Select />\n *   <SelectPopover>\n *     <SelectItem value=\"Apple\" />\n *     <SelectItem value=\"Orange\" />\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const SelectLabel = memo(\n  forwardRef(function SelectLabel(props: SelectLabelProps) {\n    const htmlProps = useSelectLabel(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface SelectLabelOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If\n   * not provided, the closest\n   * [`SelectProvider`](https://ariakit.com/reference/select-provider)\n   * component's context will be used.\n   */\n  store?: SelectStore;\n}\n\nexport type SelectLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;MAmCI,iBAAgB,WAAA,SAAyB,eAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,sFAAQ;CAEzB,MAAM,KAAA,MAAA,MAAc,EAAA;CAEpB,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EAIV,IAAA,MAAA,kBAAqB;uBACc;GAElC,CAAA,OAAA,SAAA,EAAA,gBAAA,MAAA;EACF,CAAA;CAED,CAAA;SACK;EACH,GAAA;EACA;EACA,KAAA,aAAA,MAAA,iBAAA,MAAA,GAAA;EACA;SACE;GACA,QAAG;GACL,GAAA,MAAA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;MAuBI,cAAO,KAAc,WADH,SAAA,YACqB,OAAA;CACxC,OACH,cAAA,SAAA,eAAA,KAAA,CAAA"}

package/dist/select/select-list.d.ts

@@ -0,0 +1,80 @@
+import { n as DisclosureContentOptions } from "../disclosure-content-BbPkZgAc.js";
+import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { n as CompositeTypeaheadOptions } from "../composite-typeahead-DDhpyKqm.js";
+import { t as SelectStore } from "../select-store-BsLTAyKh.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, KeyboardEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/select/select-list.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectList` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectList({ store });
+ * <Role {...props}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </Role>
+ * ```
+ */
+declare const useSelectList: import("@ariakit/react-utils").Hook<"div", SelectListOptions<"div">>;
+/**
+ * Renders a wrapper for
+ * [`SelectItem`](https://ariakit.com/reference/select-item) elements. This
+ * component may be rendered within a
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover) component if
+ * there are other non-item elements inside the popover.
+ *
+ * The `aria-labelledby` prop is set to the
+ * [`Select`](https://ariakit.com/reference/select) element's `id` by default.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {5-8}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectDismiss />
+ *     <SelectList>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectList>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectList: (props: SelectListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface SelectListOptions<T extends ElementType = TagName> extends CompositeOptions<T>, CompositeTypeaheadOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest
+   * [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * component's context will be used.
+   */
+  store?: SelectStore;
+  /**
+   * Whether the select value should be reset to the value before the list got
+   * shown when Escape is pressed. This has effect only when
+   * [`setValueOnMove`](https://ariakit.com/reference/select-provider#setvalueonmove)
+   * is `true`.
+   * @default true
+   */
+  resetOnEscape?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Whether the [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * should be hidden when the user presses Enter or Space while the list
+   * element is focused and no item is active.
+   * @default true
+   */
+  hideOnEnter?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+}
+type SelectListProps<T extends ElementType = TagName> = Props<T, SelectListOptions<T>>;
+//#endregion
+export { SelectList, SelectListOptions, SelectListProps, useSelectList };
+//# sourceMappingURL=select-list.d.ts.map

package/dist/select/select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-list.d.ts","names":["Props","BooleanOrCallback","ElementType","KeyboardEvent","CompositeTypeaheadOptions","CompositeOptions","DisclosureContentOptions","SelectStore","TagName","useSelectList","SelectListOptions","Hook","SelectList","SelectListProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","Pick","store","resetOnEscape","hideOnEnter"],"sources":["../../src/select/select-list.d.ts"],"mappings":";;;;;;;;;cAOcQ,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAc7B;;;AAhBqD,cAgBhCC,aAAAA,iCAA8CE,IAAAA,QAAYD,iBAAiB;AAAA;AAyBhG;;;;;;;;;AAA6I;AAC7I;;;;;;;;;;;;;AA1BgG,cAyB3EE,UAAAA,GAAaE,KAAAA,EAAOD,eAAe,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvGN,iBAAAA,WAA4BR,WAAAA,GAAcM,OAAAA,UAAiBH,gBAAAA,CAAiBY,CAAAA,GAAIb,yBAAAA,CAA0Ba,CAAAA,GAAIE,IAAAA,CAAKb,wBAAAA;EAAxDD;;;;;;;EAQxEe,KAAAA,GAAQb,WAAAA;EARgEF;;;;;;;EAgBxEgB,aAAAA,GAAgBpB,iBAAAA,CAAkBE,aAAAA,CAAce,WAAAA;EAAhDG;;;;;;;EAQAC,WAAAA,GAAcrB,iBAAAA,CAAkBE,aAAAA,CAAce,WAAAA;AAAAA;AAAAA,KAEtCL,eAAAA,WAA0BX,WAAAA,GAAcM,OAAAA,IAAWR,KAAAA,CAAMiB,CAAAA,EAAGP,iBAAAA,CAAkBO,CAAAA"}

package/dist/select/select-list.js

@@ -0,0 +1,143 @@
+"use client";
+import { isHidden } from "../disclosure/disclosure-content.js";
+import { useComposite } from "../composite/composite.js";
+import { useCompositeTypeahead } from "../composite/composite-typeahead.js";
+import { SelectHeadingContext, SelectScopedContextProvider, useSelectContext } from "./select-context.js";
+import { createElement, createHook, forwardRef, useAttribute, useBooleanEvent, useEvent, useId, useMergeRefs, useTransactionState, useWrapElement } from "@ariakit/react-utils";
+import { invariant, isSelfTarget } from "@ariakit/utils";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/select/select-list.tsx
+const TagName = "div";
+const SelectListContext = createContext(null);
+/**
+* Returns props to create a `SelectList` component.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx
+* const store = useSelectStore();
+* const props = useSelectList({ store });
+* <Role {...props}>
+*   <SelectItem value="Apple" />
+*   <SelectItem value="Orange" />
+* </Role>
+* ```
+*/
+const useSelectList = createHook(function useSelectList({ store, resetOnEscape = true, hideOnEnter = true, focusOnMove = true, composite, alwaysVisible, ...props }) {
+	const context = useSelectContext();
+	store = store || context;
+	invariant(store, "SelectList must receive a `store` prop or be wrapped in a SelectProvider component.");
+	const id = useId(props.id);
+	const value = useStoreState(store, "value");
+	const multiSelectable = Array.isArray(value);
+	const [defaultValue, setDefaultValue] = useState(value);
+	const mounted = useStoreState(store, "mounted");
+	useEffect(() => {
+		if (mounted) return;
+		setDefaultValue(value);
+	}, [mounted, value]);
+	resetOnEscape = resetOnEscape && !multiSelectable;
+	const onKeyDownProp = props.onKeyDown;
+	const resetOnEscapeProp = useBooleanEvent(resetOnEscape);
+	const hideOnEnterProp = useBooleanEvent(hideOnEnter);
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape" && resetOnEscapeProp(event)) store?.setValue(defaultValue);
+		if (event.key === " " || event.key === "Enter") {
+			if (isSelfTarget(event) && hideOnEnterProp(event)) {
+				event.preventDefault();
+				store?.hide();
+			}
+		}
+	});
+	const headingContext = useContext(SelectHeadingContext);
+	const headingState = useState();
+	const [headingId, setHeadingId] = headingContext || headingState;
+	const headingContextValue = useMemo(() => [headingId, setHeadingId], [headingId, setHeadingId]);
+	const [childStore, setChildStore] = useState(null);
+	const setStore = useContext(SelectListContext);
+	useEffect(() => {
+		if (!setStore) return;
+		setStore(store);
+		return () => setStore(null);
+	}, [setStore, store]);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(SelectListContext.Provider, {
+			value: setChildStore,
+			children: /* @__PURE__ */ jsx(SelectHeadingContext.Provider, {
+				value: headingContextValue,
+				children: element
+			})
+		})
+	}), [store, headingContextValue]);
+	const hasCombobox = !!store.combobox;
+	composite = composite ?? (!hasCombobox && childStore !== store);
+	const [element, setElement] = useTransactionState(composite ? store.setListElement : null);
+	const role = useAttribute(element, "role", props.role);
+	const ariaMultiSelectable = composite || role === "listbox" || role === "menu" || role === "tree" || role === "grid" ? multiSelectable || void 0 : void 0;
+	const hidden = isHidden(mounted, props.hidden, alwaysVisible);
+	const style = hidden ? {
+		...props.style,
+		display: "none"
+	} : props.style;
+	if (composite) props = {
+		role: "listbox",
+		"aria-multiselectable": ariaMultiSelectable,
+		...props
+	};
+	const labelId = useStoreState(store, (state) => headingId || state.labelElement?.id);
+	props = {
+		"aria-labelledby": props["aria-label"] != null ? void 0 : labelId,
+		hidden,
+		...props,
+		id,
+		ref: useMergeRefs(setElement, props.ref),
+		style,
+		onKeyDown
+	};
+	props = useComposite({
+		store,
+		...props,
+		composite
+	});
+	props = useCompositeTypeahead({
+		store,
+		typeahead: !hasCombobox,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a wrapper for
+* [`SelectItem`](https://ariakit.com/reference/select-item) elements. This
+* component may be rendered within a
+* [`SelectPopover`](https://ariakit.com/reference/select-popover) component if
+* there are other non-item elements inside the popover.
+*
+* The `aria-labelledby` prop is set to the
+* [`Select`](https://ariakit.com/reference/select) element's `id` by default.
+* @see https://ariakit.com/components/select
+* @example
+* ```jsx {5-8}
+* <SelectProvider>
+*   <Select />
+*   <SelectPopover>
+*     <SelectDismiss />
+*     <SelectList>
+*       <SelectItem value="Apple" />
+*       <SelectItem value="Orange" />
+*     </SelectList>
+*   </SelectPopover>
+* </SelectProvider>
+* ```
+*/
+const SelectList = forwardRef(function SelectList(props) {
+	return createElement(TagName, useSelectList(props));
+});
+//#endregion
+export { SelectList, useSelectList };
+
+//# sourceMappingURL=select-list.js.map

package/dist/select/select-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-list.js","names":[],"sources":["../../src/select/select-list.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useAttribute,\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useMergeRefs,\n  useTransactionState,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { isSelfTarget, invariant } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { CompositeTypeaheadOptions } from \"../composite/composite-typeahead.tsx\";\nimport { useCompositeTypeahead } from \"../composite/composite-typeahead.tsx\";\nimport type { CompositeOptions } from \"../composite/composite.tsx\";\nimport { useComposite } from \"../composite/composite.tsx\";\nimport type { DisclosureContentOptions } from \"../disclosure/disclosure-content.tsx\";\nimport { isHidden } from \"../disclosure/disclosure-content.tsx\";\nimport {\n  SelectHeadingContext,\n  SelectScopedContextProvider,\n  useSelectContext,\n} from \"./select-context.tsx\";\nimport type { SelectStore } from \"./select-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nconst SelectListContext = createContext<\n  ((store: SelectStore | null) => void) | null\n>(null);\n\n/**\n * Returns props to create a `SelectList` component.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx\n * const store = useSelectStore();\n * const props = useSelectList({ store });\n * <Role {...props}>\n *   <SelectItem value=\"Apple\" />\n *   <SelectItem value=\"Orange\" />\n * </Role>\n * ```\n */\nexport const useSelectList = createHook<TagName, SelectListOptions>(\n  function useSelectList({\n    store,\n    resetOnEscape = true,\n    hideOnEnter = true,\n    focusOnMove = true,\n    composite,\n    alwaysVisible,\n    ...props\n  }) {\n    const context = useSelectContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"SelectList must receive a `store` prop or be wrapped in a SelectProvider component.\",\n    );\n\n    const id = useId(props.id);\n    const value = useStoreState(store, \"value\");\n    const multiSelectable = Array.isArray(value);\n    const [defaultValue, setDefaultValue] = useState(value);\n\n    const mounted = useStoreState(store, \"mounted\");\n\n    // Stores the intial value so we can reset it later when Escape is pressed\n    useEffect(() => {\n      if (mounted) return;\n      setDefaultValue(value);\n    }, [mounted, value]);\n\n    resetOnEscape = resetOnEscape && !multiSelectable;\n\n    const onKeyDownProp = props.onKeyDown;\n    const resetOnEscapeProp = useBooleanEvent(resetOnEscape);\n    const hideOnEnterProp = useBooleanEvent(hideOnEnter);\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (event.key === \"Escape\" && resetOnEscapeProp(event)) {\n        store?.setValue(defaultValue);\n      }\n      if (event.key === \" \" || event.key === \"Enter\") {\n        if (isSelfTarget(event) && hideOnEnterProp(event)) {\n          event.preventDefault();\n          store?.hide();\n        }\n      }\n    });\n\n    const headingContext = useContext(SelectHeadingContext);\n    const headingState = useState<string>();\n    const [headingId, setHeadingId] = headingContext || headingState;\n\n    const headingContextValue: typeof headingState = useMemo(\n      () => [headingId, setHeadingId],\n      [headingId, setHeadingId],\n    );\n\n    const [childStore, setChildStore] = useState<SelectStore | null>(null);\n    const setStore = useContext(SelectListContext);\n\n    useEffect(() => {\n      if (!setStore) return;\n      setStore(store);\n      return () => setStore(null);\n    }, [setStore, store]);\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <SelectScopedContextProvider value={store}>\n          <SelectListContext.Provider value={setChildStore}>\n            <SelectHeadingContext.Provider value={headingContextValue}>\n              {element}\n            </SelectHeadingContext.Provider>\n          </SelectListContext.Provider>\n        </SelectScopedContextProvider>\n      ),\n      [store, headingContextValue],\n    );\n\n    const hasCombobox = !!store.combobox;\n    composite = composite ?? (!hasCombobox && childStore !== store);\n\n    const [element, setElement] = useTransactionState(\n      composite ? store.setListElement : null,\n    );\n\n    const role = useAttribute(element, \"role\", props.role);\n    const isCompositeRole =\n      role === \"listbox\" ||\n      role === \"menu\" ||\n      role === \"tree\" ||\n      role === \"grid\";\n    const ariaMultiSelectable =\n      composite || isCompositeRole ? multiSelectable || undefined : undefined;\n\n    const hidden = isHidden(mounted, props.hidden, alwaysVisible);\n    const style = hidden ? { ...props.style, display: \"none\" } : props.style;\n\n    if (composite) {\n      props = {\n        role: \"listbox\",\n        \"aria-multiselectable\": ariaMultiSelectable,\n        ...props,\n      };\n    }\n\n    const labelId = useStoreState(\n      store,\n      (state) => headingId || state.labelElement?.id,\n    );\n\n    props = {\n      \"aria-labelledby\": props[\"aria-label\"] != null ? undefined : labelId,\n      hidden,\n      ...props,\n      id,\n      ref: useMergeRefs(setElement, props.ref),\n      style,\n      onKeyDown,\n    };\n\n    props = useComposite({ store, ...props, composite });\n    props = useCompositeTypeahead({ store, typeahead: !hasCombobox, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a wrapper for\n * [`SelectItem`](https://ariakit.com/reference/select-item) elements. This\n * component may be rendered within a\n * [`SelectPopover`](https://ariakit.com/reference/select-popover) component if\n * there are other non-item elements inside the popover.\n *\n * The `aria-labelledby` prop is set to the\n * [`Select`](https://ariakit.com/reference/select) element's `id` by default.\n * @see https://ariakit.com/components/select\n * @example\n * ```jsx {5-8}\n * <SelectProvider>\n *   <Select />\n *   <SelectPopover>\n *     <SelectDismiss />\n *     <SelectList>\n *       <SelectItem value=\"Apple\" />\n *       <SelectItem value=\"Orange\" />\n *     </SelectList>\n *   </SelectPopover>\n * </SelectProvider>\n * ```\n */\nexport const SelectList = forwardRef(function SelectList(\n  props: SelectListProps,\n) {\n  const htmlProps = useSelectList(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface SelectListOptions<T extends ElementType = TagName>\n  extends\n    CompositeOptions<T>,\n    CompositeTypeaheadOptions<T>,\n    Pick<DisclosureContentOptions, \"alwaysVisible\"> {\n  /**\n   * Object returned by the\n   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If\n   * not provided, the closest\n   * [`SelectProvider`](https://ariakit.com/reference/select-provider)\n   * component's context will be used.\n   */\n  store?: SelectStore;\n  /**\n   * Whether the select value should be reset to the value before the list got\n   * shown when Escape is pressed. This has effect only when\n   * [`setValueOnMove`](https://ariakit.com/reference/select-provider#setvalueonmove)\n   * is `true`.\n   * @default true\n   */\n  resetOnEscape?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * Whether the [`SelectList`](https://ariakit.com/reference/select-list) or\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components\n   * should be hidden when the user presses Enter or Space while the list\n   * element is focused and no item is active.\n   * @default true\n   */\n  hideOnEnter?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n}\n\nexport type SelectListProps<T extends ElementType = TagName> = Props<\n  T,\n  SelectListOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;AAmCA,MAAM,UAAA;;;;;;;;;;;;;;;MA2BF,gBAAgB,WAAA,SAAiB,cAAA,EAAA,OAAA,gBAAA,MAAA,cAAA,MAAA,cAAA,MAAA,WAAA,eAAA,GAAA,SAAA;CACjC,MAAA,UAAQ,iBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,qFAAQ;CACzB,MAAM,KAAA,MAAQ,MAAA,EAAA;CACd,MAAM,QAAA,cAAkB,OAAM,OAAQ;CACtC,MAAM,kBAAe,MAAA,QAAA,KAAmB;CAExC,MAAM,CAAA,cAAU,mBAAqB,SAAS,KAAA;CAG9C,MAAA,UAAgB,cAAA,OAAA,SAAA;iBACD;EACb,IAAA,SAAA;EACF,gBAAa,KAAM;CAEnB,GAAA,CAAA,SAAA,KAAgB,CAAA;CAEhB,gBAAM,iBAAsB,CAAA;CAC5B,MAAM,gBAAA,MAAoB;CAC1B,MAAM,oBAAkB,gBAAgB,aAAW;CAEnD,MAAM,kBAAY,gBAA6C,WAAA;OAC7D,YAAgB,UAAK,UAAA;EACrB,gBAAU,KAAA;EACV,IAAI,MAAM,kBAAQ;EAGlB,IAAI,MAAM,QAAQ,YAAO,kBACvB,KAAA,GAAA,OAAA,SAAA,YAAA;YAAI,QAAa,OAAK,MAAK,QAAA;OACzB,aAAM,KAAe,KAAA,gBAAA,KAAA,GAAA;IACrB,MAAA,eAAY;IACd,OAAA,KAAA;;;CAIJ,CAAA;CACA,MAAM,iBAAe,WAAiB,oBAAA;CACtC,MAAM,eAAY,SAAA;CAElB,MAAM,CAAA,WAAA,gBAA2C,kBACxC;CAIT,MAAM,sBAAa,cAAiB,CAAA,WAAiC,YAAA,GAAA,CAAA,WAAA,YAAA,CAAA;CACrE,MAAM,CAAA,YAAW,iBAAW,SAAiB,IAAA;CAE7C,MAAA,WAAgB,WAAA,iBAAA;iBACC;EACf,IAAA,CAAA,UAAc;EACd,SAAA,KAAa;EACf,aAAc,SAAM,IAAA;CAEpB,GAAA,CAAA,UAAQ,KAAA,CAAA;SAGgC,eAAA,QAAA,YAAA,oBAAA,6BAAA;;YACC,oBAAA,kBAAA,UAAA;;aACK,oBAAA,qBAAA,UAAA;;IAEP,UAAA;GACL,CAAA;EACD,CAAA;CAKjC,CAAA,GAAA,CAAA,OAAM,mBAAsB,CAAA;CAC5B,MAAA,cAAY,CAAA,CAAA,MAAe;CAE3B,YAAO,cAAS,CAAA,eAAc,eAC5B;CAGF,MAAM,CAAA,SAAO,cAAa,oBAAuB,YAAI,MAAA,iBAAA,IAAA;CAMrD,MAAM,OAAA,aAAA,SACJ,QALA,MAAA,IAAS;CAOX,MAAM,sBAAkB,aAAe,SAAQ,aAAa,SAAA,UAAA,SAAA,UAAA,SAAA,SAAA,mBAAA,KAAA,IAAA,KAAA;CAC5D,MAAM,SAAQ,SAAS,SAAA,MAAA,QAAA,aAAA;OAAK,QAAM,SAAA;EAAO,GAAA,MAAS;EAAO,SAAU;CAEnE,IAAI,MAAA;KAEA,WAAM,QAAA;EACN,MAAA;EACA,wBAAG;EACL,GAAA;CAGF;CAKA,MAAA,UAAQ,cAAA,QAAA,UAAA,aAAA,MAAA,cAAA,EAAA;SACN;EACA,mBAAA,MAAA,iBAAA,OAAA,KAAA,IAAA;EACA;EACA,GAAA;EACA;EACA,KAAA,aAAA,YAAA,MAAA,GAAA;EACA;EACF;CAEA;SAAuB,aAAA;EAAO;EAAU,GAAA;EAAW;CACnD,CAAA;SAAgC,sBAAA;EAAO;EAAyB,WAAG,CAAA;EAAO,GAAA;CAE1E,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BE,aAAO,WAAc,SADH,WACoB,OAAC;CACxC,OAAA,cAAA,SAAA,cAAA,KAAA,CAAA"}

package/dist/select/select-popover.d.ts

@@ -0,0 +1,44 @@
+import { n as PopoverOptions } from "../popover-CCqiRKqg.js";
+import { SelectListOptions } from "./select-list.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/select/select-popover.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `SelectPopover` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectPopover({ store });
+ * <Role {...props}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </Role>
+ * ```
+ */
+declare const useSelectPopover: import("@ariakit/react-utils").Hook<"div", SelectPopoverOptions<"div">>;
+/**
+ * Renders a select popover. The `role` attribute is set to `listbox` by
+ * default, but can be overriden by any other valid select popup role
+ * (`listbox`, `menu`, `tree`, `grid` or `dialog`).
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {3-6}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+declare const SelectPopover: (props: SelectPopoverProps<"div">) => import("react/jsx-runtime").JSX.Element | null;
+interface SelectPopoverOptions<T extends ElementType = TagName> extends SelectListOptions<T>, Omit<PopoverOptions<T>, "store"> {}
+type SelectPopoverProps<T extends ElementType = TagName> = Props<T, SelectPopoverOptions<T>>;
+//#endregion
+export { SelectPopover, SelectPopoverOptions, SelectPopoverProps, useSelectPopover };
+//# sourceMappingURL=select-popover.d.ts.map

package/dist/select/select-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-popover.d.ts","names":["Props","ElementType","PopoverOptions","SelectListOptions","TagName","useSelectPopover","SelectPopoverOptions","Hook","SelectPopover","SelectPopoverProps","props","JSX","Element","T","Omit"],"sources":["../../src/select/select-popover.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAc7B;;;AAhB2D,cAgBtCC,gBAAAA,iCAAiDE,IAAAA,QAAYD,oBAAoB;AAAA;AAiBtG;;;;;;;;;AAAiH;AACjH;;;;;AAlBsG,cAiBjFE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,wCAAwCE,GAAAA,CAAIC,OAAAA;AAAAA,UACzFN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBD,iBAAAA,CAAkBU,CAAAA,GAAIC,IAAAA,CAAKZ,cAAAA,CAAeW,CAAAA;AAAAA,KAE7GJ,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}