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