@konstructio/ui/dist/components/Autocomplete/Autocomplete.js

A set of reusable and customizable React components built for konstruct.io

import { jsxs as N, jsx as l } from "react/jsx-runtime";
import { forwardRef as b, useRef as i, useId as C, useImperativeHandle as R } from "react";
import { cn as m } from "../../utils/index.js";
import { labelVariants as A, autocompleteVariants as O } from "./Autocomplete.variants.js";
import { useAutocomplete as V } from "./hooks/useAutocomplete.js";
import { List as g } from "./components/List/List.js";
const j = b(
  ({
    autoComplete: d = "off",
    className: s,
    label: t,
    labelClassName: p,
    name: r,
    options: c,
    placeholder: u,
    placeHolderEmptyValues: f = "No values...",
    placeHolderEmptyValuesClassName: h,
    theme: v,
    onChange: w
  }, x) => {
    const a = i(null), o = i(null), n = C();
    R(x, () => o.current, [o]);
    const e = V({
      options: c,
      inputRef: o,
      wrapperRef: a,
      onChange: w
    });
    return /* @__PURE__ */ N(
      "div",
      {
        ref: a,
        className: "relative flex flex-col",
        "data-theme": v,
        children: [
          t ? /* @__PURE__ */ l(
            "label",
            {
              htmlFor: r ?? n,
              className: m(
                A({
                  className: p
                })
              ),
              children: t
            }
          ) : null,
          /* @__PURE__ */ l(
            "input",
            {
              ref: o,
              id: t ? r ?? n : void 0,
              type: "text",
              name: r,
              role: "combobox",
              autoComplete: d,
              className: m(O({ className: s })),
              onChange: e.handleChange,
              value: e.value,
              placeholder: u,
              "aria-expanded": e.showOptions ? "true" : "false"
            }
          ),
          e.showOptions && /* @__PURE__ */ l("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm border-zinc-200 overflow-hidden", children: /* @__PURE__ */ l(
            g,
            {
              className: s,
              inputRef: o,
              wrapperRef: a,
              options: e.newOptions,
              placeholder: f,
              placeholderClassName: h,
              onClick: e.handleSelectValue
            }
          ) })
        ]
      }
    );
  }
);
j.displayName = "Autocomplete";
export {
  j as Autocomplete
};