@ariakit/react-core/cjs/__chunks/IEXDZLZL.cjs

Ariakit React core

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



var _44ZWQTBBcjs = require('./44ZWQTBB.cjs');


var _ZBFMPPGZcjs = require('./ZBFMPPGZ.cjs');


var _I3ICHD5Kcjs = require('./I3ICHD5K.cjs');


var _W6NEGVNAcjs = require('./W6NEGVNA.cjs');




var _6TI3NXX6cjs = require('./6TI3NXX6.cjs');








var _L5A2ID7Scjs = require('./L5A2ID7S.cjs');




var _7EQBAZ46cjs = require('./7EQBAZ46.cjs');

// src/select/select-list.tsx
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 = "div";
var SelectListContext = _react.createContext.call(void 0, null);
var useSelectList = _6TI3NXX6cjs.createHook.call(void 0, 
  function useSelectList2(_a) {
    var _b = _a, {
      store,
      resetOnEscape = true,
      hideOnEnter = true,
      focusOnMove = true,
      composite,
      alwaysVisible
    } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
      "store",
      "resetOnEscape",
      "hideOnEnter",
      "focusOnMove",
      "composite",
      "alwaysVisible"
    ]);
    const context = _44ZWQTBBcjs.useSelectContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "SelectList must receive a `store` prop or be wrapped in a SelectProvider component."
    );
    const id = _L5A2ID7Scjs.useId.call(void 0, props.id);
    const value = store.useState("value");
    const multiSelectable = Array.isArray(value);
    const [defaultValue, setDefaultValue] = _react.useState.call(void 0, value);
    const mounted = store.useState("mounted");
    _react.useEffect.call(void 0, () => {
      if (mounted) return;
      setDefaultValue(value);
    }, [mounted, value]);
    resetOnEscape = resetOnEscape && !multiSelectable;
    const onKeyDownProp = props.onKeyDown;
    const resetOnEscapeProp = _L5A2ID7Scjs.useBooleanEvent.call(void 0, resetOnEscape);
    const hideOnEnterProp = _L5A2ID7Scjs.useBooleanEvent.call(void 0, hideOnEnter);
    const onKeyDown = _L5A2ID7Scjs.useEvent.call(void 0, (event) => {
      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
      if (event.defaultPrevented) return;
      if (event.key === "Escape" && resetOnEscapeProp(event)) {
        store == null ? void 0 : store.setValue(defaultValue);
      }
      if (event.key === " " || event.key === "Enter") {
        if (_events.isSelfTarget.call(void 0, event) && hideOnEnterProp(event)) {
          event.preventDefault();
          store == null ? void 0 : store.hide();
        }
      }
    });
    const headingContext = _react.useContext.call(void 0, _44ZWQTBBcjs.SelectHeadingContext);
    const headingState = _react.useState.call(void 0, );
    const [headingId, setHeadingId] = headingContext || headingState;
    const headingContextValue = _react.useMemo.call(void 0, 
      () => [headingId, setHeadingId],
      [headingId]
    );
    const [childStore, setChildStore] = _react.useState.call(void 0, null);
    const setStore = _react.useContext.call(void 0, SelectListContext);
    _react.useEffect.call(void 0, () => {
      if (!setStore) return;
      setStore(store);
      return () => setStore(null);
    }, [setStore, store]);
    props = _L5A2ID7Scjs.useWrapElement.call(void 0, 
      props,
      (element2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _44ZWQTBBcjs.SelectScopedContextProvider, { value: store, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectListContext.Provider, { value: setChildStore, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _44ZWQTBBcjs.SelectHeadingContext.Provider, { value: headingContextValue, children: element2 }) }) }),
      [store, headingContextValue]
    );
    const hasCombobox = !!store.combobox;
    composite = composite != null ? composite : !hasCombobox && childStore !== store;
    const [element, setElement] = _L5A2ID7Scjs.useTransactionState.call(void 0, 
      composite ? store.setListElement : null
    );
    const role = _L5A2ID7Scjs.useAttribute.call(void 0, element, "role", props.role);
    const isCompositeRole = role === "listbox" || role === "menu" || role === "tree" || role === "grid";
    const ariaMultiSelectable = composite || isCompositeRole ? multiSelectable || void 0 : void 0;
    const hidden = _I3ICHD5Kcjs.isHidden.call(void 0, mounted, props.hidden, alwaysVisible);
    const style = hidden ? _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props.style), { display: "none" }) : props.style;
    if (composite) {
      props = _7EQBAZ46cjs.__spreadValues.call(void 0, {
        role: "listbox",
        "aria-multiselectable": ariaMultiSelectable
      }, props);
    }
    const labelId = store.useState(
      (state) => {
        var _a2;
        return headingId || ((_a2 = state.labelElement) == null ? void 0 : _a2.id);
      }
    );
    props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
      id,
      "aria-labelledby": labelId,
      hidden
    }, props), {
      ref: _L5A2ID7Scjs.useMergeRefs.call(void 0, setElement, props.ref),
      style,
      onKeyDown
    });
    props = _W6NEGVNAcjs.useComposite.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props), { composite }));
    props = _ZBFMPPGZcjs.useCompositeTypeahead.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store, typeahead: !hasCombobox }, props));
    return props;
  }
);
var SelectList = _6TI3NXX6cjs.forwardRef.call(void 0, function SelectList2(props) {
  const htmlProps = useSelectList(props);
  return _6TI3NXX6cjs.createElement.call(void 0, TagName, htmlProps);
});




exports.useSelectList = useSelectList; exports.SelectList = SelectList;