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

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

"use client";
import { jsxs as N, jsx as a } from "react/jsx-runtime";
import { forwardRef as O, useRef as S, useCallback as o } from "react";
import q from "classnames";
import { IconCalendar as z } from "../../internal/Icons/IconCalendar.js";
import { ValidationState as A } from "../../internal/inputs/ValidationProps.js";
import { useValidation as G } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as H } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as J } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as K } from "../../internal/inputs/useValidationIcon.js";
import { useInternalId as L } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as Q } from "../../internal/hooks/useInternalRef.js";
import e from "./InputDate.module.css.js";
const U = O(
  ({
    id: V,
    className: x,
    placeholder: y = "YYYY-MM-DD",
    disabled: R,
    value: d,
    onChange: p = () => {
    },
    onFocus: u = () => {
    },
    onBlur: f = () => {
    },
    onKeyDown: b = () => {
    },
    onKeyUp: w = () => {
    },
    defaultValue: h,
    revalidateOnFormChange: C,
    validation: r,
    errorMessage: D,
    displayIcon: I = !0,
    ...n
  }, F) => {
    const Y = !!r || typeof n.min == "string" || typeof n.max == "string", l = L(V), i = S(null), { validateTextual: s, validity: g, setValidity: m } = G({ validation: r, hasValidators: Y }), c = Q(F);
    J({ errorMessage: D, inputRef: c, setValidity: m, validation: r }), H(c, s, C);
    const j = K(g), k = d ?? h, v = o(
      (t) => {
        p(t), i?.current && (i.current.innerText = t.target.value);
      },
      [p]
    ), B = o(() => {
      m(A.error);
    }, [m]), M = o(
      (t) => {
        u(t), t.target.showPicker();
      },
      [u]
    ), T = o(
      (t) => {
        f(t);
      },
      [f]
    ), E = o(
      (t) => {
        s(t);
      },
      [s]
    );
    return /* @__PURE__ */ N(
      "div",
      {
        className: q(
          e.wrapper,
          { [e.withValidationIcon]: I },
          x
        ),
        children: [
          /* @__PURE__ */ N("div", { className: e.toggle, children: [
            /* @__PURE__ */ a(
              "input",
              {
                ...n,
                id: l,
                ref: c,
                className: e.input,
                type: "date",
                disabled: R,
                value: d,
                defaultValue: h,
                onChange: v,
                onInvalid: B,
                onInput: E,
                onFocus: M,
                onBlur: T,
                onKeyUp: w,
                onKeyDown: b
              }
            ),
            /* @__PURE__ */ a("label", { htmlFor: l, className: e.icon, children: /* @__PURE__ */ a(z, {}) })
          ] }),
          /* @__PURE__ */ a("label", { htmlFor: l, className: e.label, ref: i, children: k || y }),
          I && g && /* @__PURE__ */ a(j, { className: e.validity })
        ]
      }
    );
  }
);
U.displayName = "InputDate";
export {
  U as InputDate
};
//# sourceMappingURL=InputDate.js.map