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

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

import { jsxs as v, jsx as l } from "react/jsx-runtime";
import { forwardRef as C, useRef as i, useId as R, useImperativeHandle as A } from "react";
import { cn as p } from "../../utils/index.js";
import { labelVariants as O, autocompleteVariants as V } from "./Autocomplete.variants.js";
import { useAutocomplete as g } from "./hooks/useAutocomplete.js";
import { List as j } from "./components/List/List.js";
const y = C(
  ({
    autoComplete: c = "off",
    className: a,
    label: n,
    labelClassName: d,
    name: t,
    options: u,
    placeholder: f,
    placeHolderEmptyValues: h = "No values...",
    placeHolderEmptyValuesClassName: w,
    theme: x,
    variant: r,
    onChange: N
  }, b) => {
    const s = i(null), o = i(null), m = R();
    A(b, () => o.current, [o]);
    const e = g({
      options: u,
      inputRef: o,
      wrapperRef: s,
      onChange: N
    });
    return /* @__PURE__ */ v(
      "div",
      {
        ref: s,
        className: "relative flex flex-col",
        "data-theme": x,
        children: [
          n ? /* @__PURE__ */ l(
            "label",
            {
              htmlFor: t ?? m,
              className: p(
                O({
                  variant: r,
                  className: d
                })
              ),
              children: n
            }
          ) : null,
          /* @__PURE__ */ l(
            "input",
            {
              ref: o,
              id: t ?? m,
              type: "text",
              name: t,
              role: "combobox",
              autoComplete: c,
              className: p(
                V({
                  variant: r,
                  className: a
                })
              ),
              onChange: e.handleChange,
              value: e.value,
              placeholder: f,
              "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(
            j,
            {
              className: a,
              inputRef: o,
              wrapperRef: s,
              options: e.newOptions,
              placeholder: h,
              placeholderClassName: w,
              variant: r,
              onClick: e.handleSelectValue
            }
          ) })
        ]
      }
    );
  }
);
y.displayName = "Autocomplete";
export {
  y as Autocomplete
};