@uva-glass/component-library/dist/components/SearchField/SearchField.js

React components UvA

import { jsxs as x, jsx as s } from "react/jsx-runtime";
import { useRef as y, useState as k, useEffect as F, Children as m, isValidElement as N, cloneElement as O } from "react";
import { c as S } from "../../clsx-OuTLNxxd.js";
import { ResultOption as D } from "./components/ResultsOption.js";
import { s as t } from "../../SearchField.module-CMUEgX7d.js";
import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
import { Icon as w } from "../Icon/Icon.js";
import { useOnClickOutside as j } from "../hooks/useOnClickOutside.js";
const A = ({
  id: d,
  placeholder: u,
  isLoading: b = !1,
  isCompact: l,
  onChange: c,
  children: a,
  resultCountRow: h
}) => {
  const n = y(null), [_, f] = k(!1), p = y(null), R = () => {
    n.current && (n.current.value = "", n.current.focus());
  }, v = (e) => {
    const o = e.target, r = o.value;
    o.setSelectionRange(r.length, r.length), r && c(r);
  }, g = (e) => {
    switch (e.key) {
      case "Escape":
        e.preventDefault(), c(""), n.current && (n.current.value = ""), l && (f(!1), n.current?.blur());
        break;
      case "ArrowDown": {
        e.preventDefault();
        const r = p.current?.querySelector('li[role="option"]:not([tabindex="-1"])');
        if (r) {
          let i = r;
          for (; i && i.getAttribute("tabindex") === "-1"; )
            i = i.nextElementSibling;
          i?.focus();
        }
        break;
      }
    }
  };
  return F(() => {
    m.count(a) || f(!1);
  }, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: t["search-field__input-wrapper"], children: [
    l && /* @__PURE__ */ s(
      "button",
      {
        type: "button",
        className: t["search-field__compact-button"],
        onClick: () => f(!0),
        "aria-label": u,
        children: /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
      }
    ),
    /* @__PURE__ */ x(
      "div",
      {
        className: S(t["search-field__input-container"], {
          [t["search-field__input-container--hidden"]]: l && !_,
          [t["search-field__input-container--visible"]]: l && _
        }),
        children: [
          /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
          /* @__PURE__ */ s(
            "input",
            {
              type: "text",
              className: t["search-field__input-field"],
              placeholder: u,
              id: d,
              onChange: (e) => c(e.target.value),
              onFocus: v,
              onKeyDown: g,
              role: "combobox",
              "aria-expanded": !!m.count(a) || b,
              "aria-controls": `${d}-results`,
              "aria-autocomplete": "list",
              "aria-haspopup": "listbox",
              "aria-label": u,
              autoComplete: "off",
              ref: n
            }
          )
        ]
      }
    ),
    (a || b) && /* @__PURE__ */ s(E, { resultCountRow: h || null, ref: p, children: m.map(a, (e, o) => N(e) ? O(e, {
      key: o,
      onReset: R
    }) : e) })
  ] });
};
A.ResultOption = D;
export {
  A as SearchField
};
//# sourceMappingURL=SearchField.js.map