@ariakit/react-core 0.0.1 → 0.1.0

package/cjs/select/select-popover.cjs

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _YAJKVIK2cjs = require('../__chunks/YAJKVIK2.cjs');
+require('../__chunks/GEJXRZB4.cjs');
+require('../__chunks/2ZU7T6CD.cjs');
+require('../__chunks/XKBGBOWQ.cjs');
+require('../__chunks/ORRE4SVW.cjs');
+require('../__chunks/5EIZ4QQ7.cjs');
+require('../__chunks/RDNP4FTV.cjs');
+require('../__chunks/XFVLDGPP.cjs');
+require('../__chunks/ZNVMDYMM.cjs');
+require('../__chunks/YHG3KGFW.cjs');
+require('../__chunks/X2GXTE3P.cjs');
+require('../__chunks/CMHDB7LY.cjs');
+require('../__chunks/KWHAB2F2.cjs');
+require('../__chunks/T4TB3AAZ.cjs');
+require('../__chunks/SOPRUU56.cjs');
+require('../__chunks/CQSUIL2D.cjs');
+require('../__chunks/N2VCZZLP.cjs');
+
+
+var _MAVPFWFVcjs = require('../__chunks/MAVPFWFV.cjs');
+require('../__chunks/W2ODSL37.cjs');
+require('../__chunks/RCGSDYWJ.cjs');
+require('../__chunks/W5PBA4D6.cjs');
+require('../__chunks/GV5LATA3.cjs');
+require('../__chunks/6622YWGR.cjs');
+require('../__chunks/44UMDBZE.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+require('../__chunks/IVRU7X3P.cjs');
+require('../__chunks/MAH7ORCZ.cjs');
+require('../__chunks/NS56XHXG.cjs');
+require('../__chunks/SWSQUGVG.cjs');
+require('../__chunks/DGBC5VB4.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/select/select-popover.ts
+var useSelectPopover = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({ store, ...props }) => {
+    props = _MAVPFWFVcjs.useSelectList.call(void 0, { store, ...props });
+    props = _YAJKVIK2cjs.usePopover.call(void 0, { store, ...props });
+    return props;
+  }
+);
+var SelectPopover = _UYIFJ7U3cjs.createComponent.call(void 0, (props) => {
+  const htmlProps = useSelectPopover(props);
+  return _UYIFJ7U3cjs.createElement.call(void 0, "div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  SelectPopover.displayName = "SelectPopover";
+}
+
+
+
+exports.SelectPopover = SelectPopover; exports.useSelectPopover = useSelectPopover;

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

@@ -0,0 +1,36 @@
+import type { PopoverOptions } from "../popover/popover.js";
+import type { As, Props } from "../utils/types.js";
+import type { SelectListOptions } from "./select-list.js";
+/**
+ * Returns props to create a `SelectPopover` component.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectPopover({ store });
+ * <Role {...props}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </Role>
+ * ```
+ */
+export declare const useSelectPopover: import("../utils/types.js").Hook<SelectPopoverOptions<"div">>;
+/**
+ * Renders a select popover. The `role` prop 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.org/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore();
+ * <Select store={select} />
+ * <SelectPopover store={select}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+export declare const SelectPopover: import("../utils/types.js").Component<SelectPopoverOptions<"div">>;
+export interface SelectPopoverOptions<T extends As = "div"> extends SelectListOptions<T>, Omit<PopoverOptions<T>, "store"> {
+}
+export type SelectPopoverProps<T extends As = "div"> = Props<SelectPopoverOptions<T>>;

package/cjs/select/select-row.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _TZSSCEPYcjs = require('../__chunks/TZSSCEPY.cjs');
+
+
+var _RCGSDYWJcjs = require('../__chunks/RCGSDYWJ.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/select/select-row.ts
+var _react = require('react');
+var _dom = require('@ariakit/core/utils/dom');
+var _misc = require('@ariakit/core/utils/misc');
+var useSelectRow = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({ store, ...props }) => {
+    const context = _react.useContext.call(void 0, _RCGSDYWJcjs.SelectContext);
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "SelectRow must be wrapped in a SelectList or SelectPopover component"
+    );
+    const contentElement = store.useState("contentElement");
+    const popupRole = _dom.getPopupRole.call(void 0, contentElement);
+    const role = popupRole === "grid" ? "row" : "presentation";
+    props = { role, ...props };
+    props = _TZSSCEPYcjs.useCompositeRow.call(void 0, { store, ...props });
+    return props;
+  }
+);
+var SelectRow = _UYIFJ7U3cjs.createComponent.call(void 0, (props) => {
+  const htmlProps = useSelectRow(props);
+  return _UYIFJ7U3cjs.createElement.call(void 0, "div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  SelectRow.displayName = "SelectRow";
+}
+
+
+
+exports.SelectRow = SelectRow; exports.useSelectRow = useSelectRow;

package/cjs/select/select-row.d.ts

@@ -0,0 +1,47 @@
+import type { CompositeRowOptions } from "../composite/composite-row.js";
+import type { As, Props } from "../utils/types.js";
+import type { SelectStore } from "./select-store.js";
+/**
+ * Returns props to create a `SelectRow` component.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectRow({ store });
+ * <SelectPopover store={store}>
+ *   <Role {...props}>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </Role>
+ * </SelectPopover>
+ * ```
+ */
+export declare const useSelectRow: import("../utils/types.js").Hook<SelectRowOptions<"div">>;
+/**
+ * Renders a select row.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore();
+ * <Select store={select} />
+ * <SelectPopover store={select}>
+ *   <SelectRow>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectRow>
+ *   <SelectRow>
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Grape" />
+ *   </SelectRow>
+ * </SelectPopover>
+ * ```
+ */
+export declare const SelectRow: import("../utils/types.js").Component<SelectRowOptions<"div">>;
+export interface SelectRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
+    /**
+     * Object returned by the `useSelectStore` hook. If not provided, the parent
+     * `SelectList` or `SelectPopover` components' context will be used.
+     */
+    store?: SelectStore;
+}
+export type SelectRowProps<T extends As = "div"> = Props<SelectRowOptions<T>>;

package/cjs/select/select-separator.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _IZT4J627cjs = require('../__chunks/IZT4J627.cjs');
+require('../__chunks/ET6BKYQA.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+
+// src/select/select-separator.ts
+var useSelectSeparator = _UYIFJ7U3cjs.createHook.call(void 0, 
+  (props) => {
+    props = _IZT4J627cjs.useCompositeSeparator.call(void 0, props);
+    return props;
+  }
+);
+var SelectSeparator = _UYIFJ7U3cjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useSelectSeparator(props);
+    return _UYIFJ7U3cjs.createElement.call(void 0, "hr", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  SelectSeparator.displayName = "SelectSeparator";
+}
+
+
+
+exports.SelectSeparator = SelectSeparator; exports.useSelectSeparator = useSelectSeparator;

package/cjs/select/select-separator.d.ts

@@ -0,0 +1,43 @@
+import type { CompositeSeparatorOptions } from "../composite/composite-separator.js";
+import type { As, Props } from "../utils/types.js";
+import type { SelectStore } from "./select-store.js";
+/**
+ * Returns props to create a `SelectSeparator` component.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectSeparator({ store });
+ * <SelectPopover store={store}>
+ *   <SelectItem value="Item 1" />
+ *   <Role {...props} />
+ *   <SelectItem value="Item 2" />
+ *   <SelectItem value="Item 3" />
+ * </SelectPopover>
+ * ```
+ */
+export declare const useSelectSeparator: import("../utils/types.js").Hook<SelectSeparatorOptions<"hr">>;
+/**
+ * Renders a separator element for select items.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore();
+ * <Select store={select} />
+ * <SelectPopover store={select}>
+ *   <SelectItem value="Item 1" />
+ *   <SelectSeparator />
+ *   <SelectItem value="Item 2" />
+ *   <SelectItem value="Item 3" />
+ * </SelectPopover>
+ * ```
+ */
+export declare const SelectSeparator: import("../utils/types.js").Component<SelectSeparatorOptions<"hr">>;
+export interface SelectSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
+    /**
+     * Object returned by the `useSelectStore` hook. If not provided, the parent
+     * `SelectList` or `SelectPopover` components' context will be used.
+     */
+    store?: SelectStore;
+}
+export type SelectSeparatorProps<T extends As = "hr"> = Props<SelectSeparatorOptions<T>>;

package/cjs/select/select-store.cjs

@@ -0,0 +1,44 @@
+"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 _RG6JXX7Tcjs = require('../__chunks/RG6JXX7T.cjs');
+require('../__chunks/5LMWS5O4.cjs');
+
+
+
+var _WYGT6WVDcjs = require('../__chunks/WYGT6WVD.cjs');
+require('../__chunks/H5Z2A5K2.cjs');
+require('../__chunks/ND6THRTE.cjs');
+
+
+
+var _F6IOE5QTcjs = require('../__chunks/F6IOE5QT.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/select/select-store.ts
+var _selectstore = require('@ariakit/core/select/select-store'); var Core = _interopRequireWildcard(_selectstore);
+function useSelectStoreOptions(props) {
+  return {
+    ..._RG6JXX7Tcjs.useCompositeStoreOptions.call(void 0, props),
+    ..._WYGT6WVDcjs.usePopoverStoreOptions.call(void 0, props)
+  };
+}
+function useSelectStoreProps(store, props) {
+  store = _RG6JXX7Tcjs.useCompositeStoreProps.call(void 0, store, props);
+  store = _WYGT6WVDcjs.usePopoverStoreProps.call(void 0, store, props);
+  _F6IOE5QTcjs.useStoreProps.call(void 0, store, props, "value", "setValue");
+  return store;
+}
+function useSelectStore(props = {}) {
+  const options = useSelectStoreOptions(props);
+  const store = _F6IOE5QTcjs.useStore.call(void 0, 
+    () => Core.createSelectStore({ ...props, ...options })
+  );
+  return useSelectStoreProps(store, props);
+}
+
+
+
+
+exports.useSelectStore = useSelectStore; exports.useSelectStoreOptions = useSelectStoreOptions; exports.useSelectStoreProps = useSelectStoreProps;

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

@@ -0,0 +1,86 @@
+import * as Core from "@ariakit/core/select/select-store";
+import type { BivariantCallback, PickRequired } from "@ariakit/core/utils/types";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { Store } from "../utils/store.js";
+type Item = Core.SelectStoreItem;
+type Value = Core.SelectStoreValue;
+export declare function useSelectStoreOptions<T extends Value = Value>(props: SelectStoreProps<T>): {
+    getAnchorRect: ((anchor: HTMLElement | null) => {
+        x?: number | undefined;
+        y?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+    } | null) | undefined;
+    renderCallback: ((props: import("@ariakit/core/popover/popover-store").PopoverStoreRenderCallbackProps) => void | (() => void)) | undefined;
+    setOpen?: ((open: boolean) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    animated?: number | boolean | undefined;
+    setItems?: BivariantCallback<(items: ({
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        rowId?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: string | undefined;
+    } & {
+        value?: string | undefined;
+    })[]) => void> | undefined;
+    defaultItems?: ({
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        rowId?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: string | undefined;
+    } & {
+        value?: string | undefined;
+    })[] | undefined;
+    items?: ({
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        rowId?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: string | undefined;
+    } & {
+        value?: string | undefined;
+    })[] | undefined;
+};
+export declare function useSelectStoreProps<T extends SelectStore>(store: T, props: SelectStoreProps): T;
+/**
+ * Creates a select store.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectState({ defaultValue: "Apple" });
+ * <Select state={select} />
+ * <SelectPopover state={select}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+export declare function useSelectStore<T extends Value = Value>(props: PickRequired<SelectStoreProps<T>, "value" | "defaultValue">): SelectStore<T>;
+export declare function useSelectStore(props?: SelectStoreProps): SelectStore;
+export type SelectStoreItem = Item;
+export type SelectStoreValue = Value;
+export interface SelectStoreState<T extends Value = Value> extends Core.SelectStoreState<T>, CompositeStoreState<Item>, PopoverStoreState {
+}
+export interface SelectStoreFunctions<T extends Value = Value> extends Core.SelectStoreFunctions<T>, CompositeStoreFunctions<Item>, PopoverStoreFunctions {
+}
+export interface SelectStoreOptions<T extends Value = Value> extends Core.SelectStoreOptions<T>, CompositeStoreOptions<Item>, PopoverStoreOptions {
+    /**
+     * Function that will be called when the `value` state changes.
+     * @param value The new value.
+     * @example
+     * function MySelect({ value, onChange }) {
+     *   const select = useSelectStore({ value, setValue: onChange });
+     * }
+     */
+    setValue?: BivariantCallback<(value: SelectStoreState<T>["value"]) => void>;
+}
+export type SelectStoreProps<T extends Value = Value> = SelectStoreOptions<T> & Core.SelectStoreProps<T>;
+export type SelectStore<T extends Value = Value> = SelectStoreFunctions<T> & Store<Core.SelectStore<T>>;
+export {};

package/cjs/select/select.cjs

@@ -0,0 +1,248 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _LICOAFSXcjs = require('../__chunks/LICOAFSX.cjs');
+require('../__chunks/22VQR3WC.cjs');
+require('../__chunks/VSKE43XZ.cjs');
+require('../__chunks/GTWUFHVO.cjs');
+
+
+var _VXIYZJTUcjs = require('../__chunks/VXIYZJTU.cjs');
+require('../__chunks/QTUC5TMJ.cjs');
+
+
+var _W2ODSL37cjs = require('../__chunks/W2ODSL37.cjs');
+
+
+var _RCGSDYWJcjs = require('../__chunks/RCGSDYWJ.cjs');
+require('../__chunks/W5PBA4D6.cjs');
+require('../__chunks/BJTWNJAP.cjs');
+require('../__chunks/EWCMH6G3.cjs');
+require('../__chunks/6622YWGR.cjs');
+require('../__chunks/44UMDBZE.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+var _DGBC5VB4cjs = require('../__chunks/DGBC5VB4.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+
+
+
+
+
+var _5QY4WCTRcjs = require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/select/select.tsx
+var _react = require('react');
+var _dom = require('@ariakit/core/utils/dom');
+var _events = require('@ariakit/core/utils/events');
+var _jsxruntime = require('react/jsx-runtime');
+function getSelectedValues(select) {
+  return Array.from(select.selectedOptions).map((option) => option.value);
+}
+function nextWithValue(store, next) {
+  return () => {
+    const nextId = next();
+    if (!nextId)
+      return;
+    let i = 0;
+    let nextItem = store.item(nextId);
+    const firstItem = nextItem;
+    while (nextItem && nextItem.value == null) {
+      const nextId2 = next(++i);
+      if (!nextId2)
+        return;
+      nextItem = store.item(nextId2);
+      if (nextItem === firstItem)
+        break;
+    }
+    return _optionalChain([nextItem, 'optionalAccess', _ => _.id]);
+  };
+}
+var useSelect = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({
+    store,
+    name,
+    form,
+    required,
+    showOnKeyDown = true,
+    moveOnKeyDown = true,
+    toggleOnClick = false,
+    toggleOnPress = !toggleOnClick,
+    ...props
+  }) => {
+    toggleOnPress = toggleOnClick ? false : toggleOnPress;
+    const onKeyDownProp = props.onKeyDown;
+    const showOnKeyDownProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, showOnKeyDown);
+    const moveOnKeyDownProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, moveOnKeyDown);
+    const toggleOnPressProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, toggleOnPress);
+    const placement = store.useState("placement");
+    const dir = placement.split("-")[0];
+    const value = store.useState("value");
+    const multiSelectable = Array.isArray(value);
+    const onKeyDown = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onKeyDownProp, 'optionalCall', _2 => _2(event)]);
+      if (event.defaultPrevented)
+        return;
+      const { orientation, items: items2, activeId } = store.getState();
+      if (event.key === " " || event.key === "Enter") {
+        if (toggleOnPressProp(event)) {
+          event.preventDefault();
+          store.toggle();
+        }
+      }
+      const isVertical = orientation !== "horizontal";
+      const isHorizontal = orientation !== "vertical";
+      const isGrid = !!_optionalChain([items2, 'access', _3 => _3.find, 'call', _4 => _4(
+        (item) => !item.disabled && item.value != null
+      ), 'optionalAccess', _5 => _5.rowId]);
+      const moveKeyMap = {
+        ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
+        ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
+        ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
+        ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous)
+      };
+      const getId = moveKeyMap[event.key];
+      if (getId && moveOnKeyDownProp(event)) {
+        event.preventDefault();
+        store.move(getId());
+      }
+      const isTopOrBottom = dir === "top" || dir === "bottom";
+      const isLeft = dir === "left";
+      const isRight = dir === "right";
+      const canShowKeyMap = {
+        ArrowDown: isTopOrBottom,
+        ArrowUp: isTopOrBottom,
+        ArrowLeft: isLeft,
+        ArrowRight: isRight
+      };
+      const canShow = canShowKeyMap[event.key];
+      if (canShow && showOnKeyDownProp(event)) {
+        event.preventDefault();
+        store.show();
+        store.move(activeId);
+      }
+    });
+    const onMouseDownProp = props.onMouseDown;
+    const onMouseDown = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onMouseDownProp, 'optionalCall', _6 => _6(event)]);
+      if (event.defaultPrevented)
+        return;
+      if (event.button)
+        return;
+      if (event.ctrlKey)
+        return;
+      if (!toggleOnPressProp(event))
+        return;
+      const element = event.currentTarget;
+      _events.queueBeforeEvent.call(void 0, element, "focusin", () => {
+        store.setDisclosureElement(element);
+        store.toggle();
+      });
+    });
+    props = _5QY4WCTRcjs.useWrapElement.call(void 0, 
+      props,
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RCGSDYWJcjs.SelectContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    const [autofill, setAutofill] = _react.useState.call(void 0, false);
+    const nativeSelectChangedRef = _react.useRef.call(void 0, false);
+    _react.useEffect.call(void 0, () => {
+      const nativeSelectChanged = nativeSelectChangedRef.current;
+      nativeSelectChangedRef.current = false;
+      if (nativeSelectChanged)
+        return;
+      setAutofill(false);
+    }, [value]);
+    const labelId = store.useState((state) => _optionalChain([state, 'access', _7 => _7.labelElement, 'optionalAccess', _8 => _8.id]));
+    const label = props["aria-label"];
+    const labelledBy = props["aria-labelledby"] || labelId;
+    const items = store.useState("items");
+    const values = _react.useMemo.call(void 0, 
+      // Filter out items without value and duplicate values.
+      () => [...new Set(items.map((i) => i.value).filter((v) => v != null))],
+      [items]
+    );
+    props = _5QY4WCTRcjs.useWrapElement.call(void 0, 
+      props,
+      (element) => {
+        if (!name)
+          return element;
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _DGBC5VB4cjs.VisuallyHidden,
+            {
+              as: "select",
+              tabIndex: -1,
+              "aria-hidden": true,
+              "aria-label": label,
+              "aria-labelledby": labelledBy,
+              name,
+              form,
+              required,
+              value,
+              multiple: multiSelectable,
+              onFocus: () => _optionalChain([store, 'access', _9 => _9.getState, 'call', _10 => _10(), 'access', _11 => _11.selectElement, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]),
+              onChange: (event) => {
+                nativeSelectChangedRef.current = true;
+                setAutofill(true);
+                store.setValue(
+                  multiSelectable ? getSelectedValues(event.target) : event.target.value
+                );
+              },
+              children: values.map((value2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: value2, children: value2 }, value2))
+            }
+          ),
+          element
+        ] });
+      },
+      [
+        store,
+        label,
+        labelledBy,
+        name,
+        form,
+        required,
+        value,
+        multiSelectable,
+        values
+      ]
+    );
+    const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      value,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VXIYZJTUcjs.SelectArrow, {})
+    ] });
+    const contentElement = store.useState("contentElement");
+    props = {
+      role: "combobox",
+      "aria-autocomplete": "none",
+      "aria-labelledby": labelId,
+      "aria-haspopup": _dom.getPopupRole.call(void 0, contentElement, "listbox"),
+      "data-autofill": autofill ? "" : void 0,
+      "data-name": name,
+      children,
+      ...props,
+      ref: _5QY4WCTRcjs.useForkRef.call(void 0, store.setSelectElement, props.ref),
+      onKeyDown,
+      onMouseDown
+    };
+    props = _LICOAFSXcjs.usePopoverDisclosure.call(void 0, { store, toggleOnClick, ...props });
+    props = _W2ODSL37cjs.useCompositeTypeahead.call(void 0, { store, ...props });
+    return props;
+  }
+);
+var Select = _UYIFJ7U3cjs.createComponent.call(void 0, (props) => {
+  const htmlProps = useSelect(props);
+  return _UYIFJ7U3cjs.createElement.call(void 0, "button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Select.displayName = "Select";
+}
+
+
+
+exports.Select = Select; exports.useSelect = useSelect;