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

Ariakit React core

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

var _IOFHSY3Lcjs = require('../__chunks/IOFHSY3L.cjs');
require('../__chunks/7X7JMIHX.cjs');
require('../__chunks/WDV6EJ2U.cjs');
require('../__chunks/VFNUZFXS.cjs');
require('../__chunks/EOGOO37X.cjs');


var _F6OAWDMCcjs = 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/combobox/combobox-cancel.tsx
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "button";
var children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
  "svg",
  {
    "aria-hidden": "true",
    display: "block",
    viewBox: "0 0 16 16",
    fill: "none",
    stroke: "currentColor",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: 1.5,
    width: "1em",
    height: "1em",
    pointerEvents: "none",
    children: [
      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "5", y1: "11", x2: "11", y2: "5" })
    ]
  }
);
var useComboboxCancel = _SQLDFLTEcjs.createHook.call(void 0, 
  function useComboboxCancel2({ store, hideWhenEmpty, ...props }) {
    const context = _IOFHSY3Lcjs.useComboboxProviderContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "ComboboxCancel must receive a `store` prop or be wrapped in a ComboboxProvider component."
    );
    const onClickProp = props.onClick;
    const onClick = _4KGS3DOWcjs.useEvent.call(void 0, (event) => {
      onClickProp == null ? void 0 : onClickProp(event);
      if (event.defaultPrevented) return;
      store == null ? void 0 : store.setValue("");
      store == null ? void 0 : store.move(null);
    });
    const comboboxId = _RDNUVX4Vcjs.useStoreState.call(void 0, store, (state) => {
      var _a;
      return (_a = state.baseElement) == null ? void 0 : _a.id;
    });
    const empty = _RDNUVX4Vcjs.useStoreState.call(void 0, store, (state) => state.value === "");
    props = _4KGS3DOWcjs.useWrapElement.call(void 0, 
      props,
      (element) => {
        if (!hideWhenEmpty) return element;
        if (empty) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, {});
        return element;
      },
      [hideWhenEmpty, empty]
    );
    props = {
      children,
      "aria-label": "Clear input",
      // This aria-controls will ensure the combobox popup remains visible when
      // this element gets focused. This logic is done in the ComboboxPopover
      // component.
      "aria-controls": comboboxId,
      ...props,
      onClick
    };
    props = _F6OAWDMCcjs.useButton.call(void 0, props);
    return props;
  }
);
var ComboboxCancel = _SQLDFLTEcjs.forwardRef.call(void 0, function ComboboxCancel2(props) {
  const htmlProps = useComboboxCancel(props);
  return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
});



exports.ComboboxCancel = ComboboxCancel; exports.useComboboxCancel = useComboboxCancel;