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

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

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