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

Ariakit React core

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

var _DRXSFB5Ocjs = require('./DRXSFB5O.cjs');





var _IOFHSY3Lcjs = require('./IOFHSY3L.cjs');


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




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






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

// src/combobox/combobox-list.tsx
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "div";
var useComboboxList = _SQLDFLTEcjs.createHook.call(void 0, 
  function useComboboxList2({ store, alwaysVisible, ...props }) {
    const scopedContext = _IOFHSY3Lcjs.useComboboxScopedContext.call(void 0, true);
    const context = _IOFHSY3Lcjs.useComboboxContext.call(void 0, );
    store = store || context;
    const scopedContextSameStore = !!store && store === scopedContext;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component."
    );
    const ref = _react.useRef.call(void 0, null);
    const id = _4KGS3DOWcjs.useId.call(void 0, props.id);
    const mounted = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "mounted");
    const hidden = _DRXSFB5Ocjs.isHidden.call(void 0, mounted, props.hidden, alwaysVisible);
    const style = hidden ? { ...props.style, display: "none" } : props.style;
    const multiSelectable = _RDNUVX4Vcjs.useStoreState.call(void 0, 
      store,
      (state) => Array.isArray(state.selectedValue)
    );
    const role = _4KGS3DOWcjs.useAttribute.call(void 0, ref, "role", props.role);
    const isCompositeRole = role === "listbox" || role === "tree" || role === "grid";
    const ariaMultiSelectable = isCompositeRole ? multiSelectable || void 0 : void 0;
    const [hasListboxInside, setHasListboxInside] = _react.useState.call(void 0, false);
    const contentElement = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "contentElement");
    _4KGS3DOWcjs.useSafeLayoutEffect.call(void 0, () => {
      if (!mounted) return;
      const element = ref.current;
      if (!element) return;
      if (contentElement !== element) return;
      const callback = () => {
        setHasListboxInside(!!element.querySelector("[role='listbox']"));
      };
      const observer = new MutationObserver(callback);
      observer.observe(element, {
        subtree: true,
        childList: true,
        attributeFilter: ["role"]
      });
      callback();
      return () => observer.disconnect();
    }, [mounted, contentElement]);
    if (!hasListboxInside) {
      props = {
        role: "listbox",
        "aria-multiselectable": ariaMultiSelectable,
        ...props
      };
    }
    props = _4KGS3DOWcjs.useWrapElement.call(void 0, 
      props,
      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IOFHSY3Lcjs.ComboboxScopedContextProvider, { value: store, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IOFHSY3Lcjs.ComboboxListRoleContext.Provider, { value: role, children: element }) }),
      [store, role]
    );
    const setContentElement = id && (!scopedContext || !scopedContextSameStore) ? store.setContentElement : null;
    props = {
      hidden,
      ...props,
      id,
      ref: _4KGS3DOWcjs.useMergeRefs.call(void 0, setContentElement, ref, props.ref),
      style
    };
    return _misc.removeUndefinedValues.call(void 0, props);
  }
);
var ComboboxList = _SQLDFLTEcjs.forwardRef.call(void 0, function ComboboxList2(props) {
  const htmlProps = useComboboxList(props);
  return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
});




exports.useComboboxList = useComboboxList; exports.ComboboxList = ComboboxList;