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

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

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