koval-ui/dist/src/lib/Select/Select.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as p, jsx as o } from "react/jsx-runtime";
import { forwardRef as B, useMemo as M, useCallback as f } from "react";
import O from "classnames";
import { useLocalTheme as W } from "css-vars-hook";
import { IconExpand as $ } from "../../internal/Icons/IconExpand.js";
import { ValidationState as q } from "../../internal/inputs/ValidationProps.js";
import { useValidation as A } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as D } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as G } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as H } from "../../internal/inputs/useValidationIcon.js";
import { useInternalId as J } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as K } from "../../internal/hooks/useInternalRef.js";
import e from "./Select.module.css.js";
const Q = B(
  ({
    prefix: s,
    className: h,
    disabled: u,
    value: I,
    onChange: l = () => {
    },
    onFocus: N = () => {
    },
    onBlur: x = () => {
    },
    onKeyDown: V = () => {
    },
    onKeyUp: v = () => {
    },
    id: R,
    multiple: n,
    children: w,
    size: i = 16,
    revalidateOnFormChange: y,
    validation: a,
    errorMessage: C,
    ...S
  }, b) => {
    const { LocalRoot: g } = W(), j = M(
      () => ({
        "select-width": `${i}ch`
      }),
      [i]
    ), E = !!a, { validateTextual: m, validity: c, setValidity: t } = A({ validation: a, hasValidators: E }), r = K(b);
    D(r, m, y), G({ errorMessage: C, inputRef: r, setValidity: t, validation: a });
    const F = H(c), L = f(
      (k) => {
        l(k);
      },
      [l]
    ), T = f(() => {
      t(q.error);
    }, [t]), d = J(R);
    return /* @__PURE__ */ p(g, { theme: j, className: O(e.wrapper, h), children: [
      s && /* @__PURE__ */ o("label", { className: e.prefix, htmlFor: d, children: /* @__PURE__ */ o(s, {}) }),
      /* @__PURE__ */ p("div", { className: e.iconWrapper, children: [
        /* @__PURE__ */ o(
          "select",
          {
            ...S,
            id: d,
            multiple: n,
            className: e.select,
            ref: r,
            disabled: u,
            value: I,
            onChange: L,
            onFocus: N,
            onBlur: x,
            onKeyUp: v,
            onKeyDown: V,
            onInvalid: T,
            onInput: m,
            children: w
          }
        ),
        !n && /* @__PURE__ */ o($, { className: e.icon })
      ] }),
      c && /* @__PURE__ */ o(F, { className: e.validation })
    ] });
  }
);
Q.displayName = "Select";
export {
  Q as Select
};
//# sourceMappingURL=Select.js.map