@ariakit/react-core/cjs/select/select.cjs

Ariakit React core

"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _CTKMAM75cjs = require('../__chunks/CTKMAM75.cjs');



var _CGP2XJO5cjs = require('../__chunks/CGP2XJO5.cjs');
require('../__chunks/647QLJCE.cjs');


var _YM5HDH3Ccjs = require('../__chunks/YM5HDH3C.cjs');


var _4OTMDXRRcjs = require('../__chunks/4OTMDXRR.cjs');
require('../__chunks/VKWO5RWC.cjs');
require('../__chunks/7GKSQOUW.cjs');
require('../__chunks/5K46XOEI.cjs');
require('../__chunks/2XVCJUVB.cjs');
require('../__chunks/7X7JMIHX.cjs');
require('../__chunks/WDV6EJ2U.cjs');
require('../__chunks/VFNUZFXS.cjs');
require('../__chunks/EOGOO37X.cjs');
require('../__chunks/F6OAWDMC.cjs');
require('../__chunks/HAR6UDZU.cjs');
require('../__chunks/BB34VMZX.cjs');
require('../__chunks/T3QB4FR3.cjs');


var _RDNUVX4Vcjs = require('../__chunks/RDNUVX4V.cjs');
require('../__chunks/ZYZTL3IQ.cjs');




var _SQLDFLTEcjs = require('../__chunks/SQLDFLTE.cjs');





var _4KGS3DOWcjs = require('../__chunks/4KGS3DOW.cjs');
require('../__chunks/TWX5YNTH.cjs');

// src/select/select.tsx
var _array = require('@ariakit/core/utils/array');
var _dom = require('@ariakit/core/utils/dom');
var _events = require('@ariakit/core/utils/events');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('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 = _SQLDFLTEcjs.createHook.call(void 0, function useSelect2({
  store,
  name,
  form,
  required,
  showOnKeyDown = true,
  moveOnKeyDown = true,
  toggleOnPress = true,
  toggleOnClick = toggleOnPress,
  ...props
}) {
  const context = _CGP2XJO5cjs.useSelectProviderContext.call(void 0, );
  store = store || context;
  _misc.invariant.call(void 0, 
    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 = _4KGS3DOWcjs.useBooleanEvent.call(void 0, showOnKeyDown);
  const moveOnKeyDownProp = _4KGS3DOWcjs.useBooleanEvent.call(void 0, moveOnKeyDown);
  const placement = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "placement");
  const dir = placement.split("-")[0];
  const value = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "value");
  const multiSelectable = Array.isArray(value);
  const onKeyDown = _4KGS3DOWcjs.useEvent.call(void 0, (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);
      _events.queueBeforeEvent.call(void 0, event.currentTarget, "keyup", store.show);
    }
  });
  props = _4KGS3DOWcjs.useWrapElement.call(void 0, 
    props,
    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CGP2XJO5cjs.SelectScopedContextProvider, { 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 = _RDNUVX4Vcjs.useStoreState.call(void 0, store, (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 = _RDNUVX4Vcjs.useStoreState.call(void 0, store, (state) => {
    if (!name) return;
    return state.items;
  });
  const values = _react.useMemo.call(void 0, () => {
    return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
  }, [items]);
  props = _4KGS3DOWcjs.useWrapElement.call(void 0, 
    props,
    (element) => {
      if (!name) return element;
      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
          "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": label != null ? void 0 : 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: [
              _array.toArray.call(void 0, value).map((value2) => {
                if (value2 == null) return null;
                if (values.includes(value2)) return null;
                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: value2, children: value2 }, value2);
              }),
              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,
      props.disabled
    ]
  );
  const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
    value,
    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CTKMAM75cjs.SelectArrow, {})
  ] });
  const contentElement = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "contentElement");
  props = {
    role: "combobox",
    "aria-autocomplete": "none",
    "aria-labelledby": props["aria-label"] != null ? void 0 : labelId,
    "aria-haspopup": _dom.getPopupRole.call(void 0, contentElement, "listbox"),
    "data-autofill": autofill || void 0,
    "data-name": name,
    children,
    ...props,
    ref: _4KGS3DOWcjs.useMergeRefs.call(void 0, store.setSelectElement, props.ref),
    onKeyDown
  };
  props = _4OTMDXRRcjs.usePopoverDisclosure.call(void 0, { store, toggleOnClick, ...props });
  props = _YM5HDH3Ccjs.useCompositeTypeahead.call(void 0, { store, ...props });
  return props;
});
var Select = _SQLDFLTEcjs.forwardRef.call(void 0, function Select2(props) {
  const htmlProps = useSelect(props);
  return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
});



exports.Select = Select; exports.useSelect = useSelect;