@ariakit/react-core/cjs/combobox/combobox-popover.cjs

Ariakit React core

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

var _LNC7ZL3Hcjs = require('../__chunks/LNC7ZL3H.cjs');


var _5XOEJL7Acjs = require('../__chunks/5XOEJL7A.cjs');
require('../__chunks/Y7XCL7GY.cjs');
require('../__chunks/UI5KWBYV.cjs');
require('../__chunks/L634CRNJ.cjs');
require('../__chunks/RDDLXR5T.cjs');
require('../__chunks/EQD56WGF.cjs');
require('../__chunks/LMAY3X4U.cjs');
require('../__chunks/W32FX7DM.cjs');
require('../__chunks/HIRVBNBX.cjs');
require('../__chunks/ENNAUHNH.cjs');
require('../__chunks/FW2GMPNK.cjs');
require('../__chunks/XYFLKFU6.cjs');
require('../__chunks/VC5V2CPO.cjs');
require('../__chunks/JLMLKTUB.cjs');
require('../__chunks/LCWSLOYU.cjs');
require('../__chunks/V7JASX7S.cjs');
require('../__chunks/56NPFF7P.cjs');
require('../__chunks/GASMO7Y4.cjs');
require('../__chunks/6IDGXS7Y.cjs');
require('../__chunks/26P4PLHI.cjs');
require('../__chunks/YVOQ2BCB.cjs');
require('../__chunks/4SKDRUBR.cjs');
require('../__chunks/AQ2LO7WV.cjs');


var _EPN4PDJZcjs = require('../__chunks/EPN4PDJZ.cjs');
require('../__chunks/VIIJ4PIK.cjs');
require('../__chunks/FMHXK2IU.cjs');
require('../__chunks/6PUNKVPO.cjs');
require('../__chunks/FCZ3IGUB.cjs');


var _PH2DFCJScjs = require('../__chunks/PH2DFCJS.cjs');
require('../__chunks/ZVJRPAXY.cjs');
require('../__chunks/YDPERDKF.cjs');
require('../__chunks/KVXNVDJK.cjs');
require('../__chunks/D6FV6EYS.cjs');
require('../__chunks/YUGKYIYY.cjs');
require('../__chunks/T3QB4FR3.cjs');


var _25BPIGZHcjs = require('../__chunks/25BPIGZH.cjs');
require('../__chunks/6HKL3JR2.cjs');




var _WULEED4Qcjs = require('../__chunks/WULEED4Q.cjs');
require('../__chunks/OZM4QA2V.cjs');
require('../__chunks/FDRJDQ5Y.cjs');




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

// src/combobox/combobox-popover.tsx
var _dom = require('@ariakit/core/utils/dom');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var TagName = "div";
function isController(target, ...ids) {
  if (!target) return false;
  if ("id" in target) {
    const selector = ids.filter(Boolean).map((id) => `[aria-controls~="${id}"]`).join(", ");
    if (!selector) return false;
    return target.matches(selector);
  }
  return false;
}
var useComboboxPopover = _WULEED4Qcjs.createHook.call(void 0, 
  function useComboboxPopover2(_a) {
    var _b = _a, {
      store,
      modal,
      tabIndex,
      alwaysVisible,
      autoFocusOnHide = true,
      hideOnInteractOutside = true
    } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
      "store",
      "modal",
      "tabIndex",
      "alwaysVisible",
      "autoFocusOnHide",
      "hideOnInteractOutside"
    ]);
    const context = _PH2DFCJScjs.useComboboxProviderContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component."
    );
    const baseElement = store.useState("baseElement");
    const hiddenByClickOutsideRef = _react.useRef.call(void 0, false);
    const treeSnapshotKey = _25BPIGZHcjs.useStoreState.call(void 0, 
      store.tag,
      (state) => state == null ? void 0 : state.renderedItems.length
    );
    props = _EPN4PDJZcjs.useComboboxList.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store, alwaysVisible }, props));
    props = _LNC7ZL3Hcjs.usePopover.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
      store,
      modal,
      alwaysVisible,
      backdrop: false,
      autoFocusOnShow: false,
      finalFocus: baseElement,
      preserveTabOrderAnchor: null,
      unstable_treeSnapshotKey: treeSnapshotKey
    }, props), {
      // When the combobox popover is modal, we make sure to include the
      // combobox input and all the combobox controls (cancel, disclosure) in
      // the list of persistent elements so they make part of the modal context,
      // allowing users to tab through them.
      getPersistentElements() {
        var _a2;
        const elements = ((_a2 = props.getPersistentElements) == null ? void 0 : _a2.call(props)) || [];
        if (!modal) return elements;
        if (!store) return elements;
        const { contentElement, baseElement: baseElement2 } = store.getState();
        if (!baseElement2) return elements;
        const doc = _dom.getDocument.call(void 0, baseElement2);
        const selectors = [];
        if (contentElement == null ? void 0 : contentElement.id) {
          selectors.push(`[aria-controls~="${contentElement.id}"]`);
        }
        if (baseElement2 == null ? void 0 : baseElement2.id) {
          selectors.push(`[aria-controls~="${baseElement2.id}"]`);
        }
        if (!selectors.length) return [...elements, baseElement2];
        const selector = selectors.join(",");
        const controlElements = doc.querySelectorAll(selector);
        return [...elements, ...controlElements];
      },
      // The combobox popover should focus on the combobox input when it hides,
      // unless the event was triggered by a click outside the popover, in which
      // case the input shouldn't be re-focused.
      autoFocusOnHide(element) {
        if (_misc.isFalsyBooleanCallback.call(void 0, autoFocusOnHide, element)) return false;
        if (hiddenByClickOutsideRef.current) {
          hiddenByClickOutsideRef.current = false;
          return false;
        }
        return true;
      },
      // Make sure we don't hide the popover when the user interacts with the
      // combobox cancel or the combobox disclosure buttons. They will have the
      // aria-controls attribute pointing to either the combobox input or the
      // combobox popover elements.
      hideOnInteractOutside(event) {
        var _a2, _b2;
        const state = store == null ? void 0 : store.getState();
        const contentId = (_a2 = state == null ? void 0 : state.contentElement) == null ? void 0 : _a2.id;
        const baseId = (_b2 = state == null ? void 0 : state.baseElement) == null ? void 0 : _b2.id;
        if (isController(event.target, contentId, baseId)) return false;
        const result = typeof hideOnInteractOutside === "function" ? hideOnInteractOutside(event) : hideOnInteractOutside;
        if (result) {
          hiddenByClickOutsideRef.current = event.type === "click";
        }
        return result;
      }
    }));
    return props;
  }
);
var ComboboxPopover = _5XOEJL7Acjs.createDialogComponent.call(void 0, 
  _WULEED4Qcjs.forwardRef.call(void 0, function ComboboxPopover2(props) {
    const htmlProps = useComboboxPopover(props);
    return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
  }),
  _PH2DFCJScjs.useComboboxProviderContext
);



exports.ComboboxPopover = ComboboxPopover; exports.useComboboxPopover = useComboboxPopover;