@ariakit/react-core/esm/select/select.js

Ariakit React core

"use client";
import {
  SelectArrow
} from "../__chunks/FUK2F2YU.js";
import {
  SelectScopedContextProvider,
  useSelectProviderContext
} from "../__chunks/QI6TYHPV.js";
import "../__chunks/SBR6PKI6.js";
import {
  useCompositeTypeahead
} from "../__chunks/WXLNFAIL.js";
import {
  usePopoverDisclosure
} from "../__chunks/NG75I6FS.js";
import "../__chunks/DTOLNWNF.js";
import "../__chunks/GYHYTZZN.js";
import "../__chunks/NJZUP4KO.js";
import "../__chunks/5VQZOHHZ.js";
import "../__chunks/MWF5B7KS.js";
import "../__chunks/63N3TCQX.js";
import "../__chunks/FFSBKSAM.js";
import "../__chunks/72IB6YNO.js";
import "../__chunks/J4DPQC5Y.js";
import "../__chunks/WJ7PHYH7.js";
import "../__chunks/US3TW2XI.js";
import "../__chunks/SWN3JYXT.js";
import "../__chunks/45YOMIF3.js";
import {
  createElement,
  createHook,
  forwardRef
} from "../__chunks/ILRXHV7V.js";
import {
  useBooleanEvent,
  useEvent,
  useMergeRefs,
  useWrapElement
} from "../__chunks/K2XTQB3X.js";
import "../__chunks/YXGXYGQX.js";

// src/select/select.tsx
import { toArray } from "@ariakit/core/utils/array";
import { getPopupRole } from "@ariakit/core/utils/dom";
import { queueBeforeEvent } from "@ariakit/core/utils/events";
import { invariant } from "@ariakit/core/utils/misc";
import { useEffect, useMemo, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var TagName = "button";
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 nextItem == null ? void 0 : nextItem.id;
  };
}
var useSelect = createHook(function useSelect2({
  store,
  name,
  form,
  required,
  showOnKeyDown = true,
  moveOnKeyDown = true,
  toggleOnPress = true,
  toggleOnClick = toggleOnPress,
  ...props
}) {
  const context = useSelectProviderContext();
  store = store || context;
  invariant(
    store,
    process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
  );
  const onKeyDownProp = props.onKeyDown;
  const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
  const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);
  const placement = store.useState("placement");
  const dir = placement.split("-")[0];
  const value = store.useState("value");
  const multiSelectable = Array.isArray(value);
  const onKeyDown = useEvent((event) => {
    var _a;
    onKeyDownProp == null ? void 0 : onKeyDownProp(event);
    if (event.defaultPrevented) return;
    if (!store) return;
    const { orientation, items: items2, activeId } = store.getState();
    const isVertical = orientation !== "horizontal";
    const isHorizontal = orientation !== "vertical";
    const isGrid = !!((_a = items2.find((item) => !item.disabled && item.value != null)) == null ? void 0 : _a.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.move(activeId);
      queueBeforeEvent(event.currentTarget, "keyup", store.show);
    }
  });
  props = useWrapElement(
    props,
    (element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, { value: store, children: element }),
    [store]
  );
  const [autofill, setAutofill] = useState(false);
  const nativeSelectChangedRef = useRef(false);
  useEffect(() => {
    const nativeSelectChanged = nativeSelectChangedRef.current;
    nativeSelectChangedRef.current = false;
    if (nativeSelectChanged) return;
    setAutofill(false);
  }, [value]);
  const labelId = store.useState((state) => {
    var _a;
    return (_a = state.labelElement) == null ? void 0 : _a.id;
  });
  const label = props["aria-label"];
  const labelledBy = props["aria-labelledby"] || labelId;
  const items = store.useState((state) => {
    if (!name) return;
    return state.items;
  });
  const values = useMemo(() => {
    return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
  }, [items]);
  props = useWrapElement(
    props,
    (element) => {
      if (!name) return element;
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsxs(
          "select",
          {
            style: {
              border: 0,
              clip: "rect(0 0 0 0)",
              height: "1px",
              margin: "-1px",
              overflow: "hidden",
              padding: 0,
              position: "absolute",
              whiteSpace: "nowrap",
              width: "1px"
            },
            tabIndex: -1,
            "aria-hidden": true,
            "aria-label": label,
            "aria-labelledby": labelledBy,
            name,
            form,
            required,
            disabled: props.disabled,
            value,
            multiple: multiSelectable,
            onFocus: () => {
              var _a;
              return (_a = store == null ? void 0 : store.getState().selectElement) == null ? void 0 : _a.focus();
            },
            onChange: (event) => {
              nativeSelectChangedRef.current = true;
              setAutofill(true);
              store == null ? void 0 : store.setValue(
                multiSelectable ? getSelectedValues(event.target) : event.target.value
              );
            },
            children: [
              toArray(value).map((value2) => {
                if (value2 == null) return null;
                if (values.includes(value2)) return null;
                return /* @__PURE__ */ jsx("option", { value: value2, children: value2 }, value2);
              }),
              values.map((value2) => /* @__PURE__ */ jsx("option", { value: value2, children: value2 }, value2))
            ]
          }
        ),
        element
      ] });
    },
    [
      store,
      label,
      labelledBy,
      name,
      form,
      required,
      value,
      multiSelectable,
      values,
      props.disabled
    ]
  );
  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
    value,
    /* @__PURE__ */ jsx(SelectArrow, {})
  ] });
  const contentElement = store.useState("contentElement");
  props = {
    role: "combobox",
    "aria-autocomplete": "none",
    "aria-labelledby": labelId,
    "aria-haspopup": getPopupRole(contentElement, "listbox"),
    "data-autofill": autofill || void 0,
    "data-name": name,
    children,
    ...props,
    ref: useMergeRefs(store.setSelectElement, props.ref),
    onKeyDown
  };
  props = usePopoverDisclosure({ store, toggleOnClick, ...props });
  props = useCompositeTypeahead({ store, ...props });
  return props;
});
var Select = forwardRef(function Select2(props) {
  const htmlProps = useSelect(props);
  return createElement(TagName, htmlProps);
});
export {
  Select,
  useSelect
};