@murdock-ui/murdock-react/dist/murdock-select.js

Murdock React - React components for Murdock UI.

import './murdock-select.css'
import { jsxs as d, jsx as s } from "react/jsx-runtime";
import { HeadlessMurdockSelect as r } from "@murdock-ui/murdock-core";
import { useHeadlessComponent as m } from "./murdock-react.js";
import "react";
const b = (l) => {
  var a, c;
  const e = m(r, l), o = e.rootClassName ?? "";
  return /* @__PURE__ */ d(
    "div",
    {
      onFocus: () => {
        e.setFocused(!0);
      },
      onBlur: () => {
        e.setFocused(!1);
      },
      id: e.id,
      className: o,
      style: { width: e.width },
      children: [
        /* @__PURE__ */ d("div", { className: "mk-select-wrapper", children: [
          /* @__PURE__ */ s(
            "input",
            {
              disabled: l.disabled,
              placeholder: e.placeholder,
              "aria-expanded": e.open,
              "aria-haspopup": "listbox",
              "aria-owns": e.id + "-menu",
              "aria-controls": e.id + "-menu",
              "aria-autocomplete": "list",
              type: "text",
              style: { width: e.width },
              ref: (t) => e.inputRef && e.inputRef(t),
              className: "mk-select-input",
              onClick: e.onInputClick,
              value: e.search,
              onInput: (t) => e.setSearch(t.currentTarget.value),
              onKeyDown: (t) => e.handleKey(t)
            }
          ),
          e.fetching && /* @__PURE__ */ s("div", { className: "mk-select-progress-bar", children: /* @__PURE__ */ s("div", { className: "mk-select-progress-bar-value" }) }),
          e.selectedItem && /* @__PURE__ */ s("div", { className: "mk-select-clear-button-container", children: /* @__PURE__ */ s("button", { disabled: l.disabled, className: "mk-select-clear-button", onClick: e.onClearButtonClick }) }),
          !e.selectedItem && /* @__PURE__ */ s("button", { disabled: l.disabled, className: "mk-select-menu-button", onClick: e.onMenuButtonClick })
        ] }),
        /* @__PURE__ */ s("div", { tabIndex: -1, className: "mk-select-dropdown-wrapper", children: /* @__PURE__ */ s(
          "div",
          {
            tabIndex: -1,
            style: { opacity: (a = e.searchResults) != null && a.length && e.open ? 1 : 0 },
            ref: (t) => e.listRef && e.listRef(t),
            id: e.id + "-menu",
            className: `mk-select-dropdown${e.open ? "" : " hidden"}`,
            children: (c = e.searchResults) == null ? void 0 : c.map((t) => {
              var i, n;
              return /* @__PURE__ */ s(
                "div",
                {
                  tabIndex: -1,
                  className: `mk-select-dropdown-item${t.focused ? " focus-item" : ""}`,
                  onClick: () => t.setSelected(!0),
                  children: (i = e.itemToString) == null ? void 0 : i.call(e, t.item)
                },
                (n = l.itemToString) == null ? void 0 : n.call(l, t.item)
              );
            })
          }
        ) })
      ]
    }
  );
};
export {
  b as MurdockSelect
};
//# sourceMappingURL=murdock-select.js.map