@anoki/fse-ui/dist/index.es97.js

FSE UI components library

import { j as d } from "./index.es278.js";
import { DateTime as l } from "./index.es3.js";
import './components/ui/DatePicker/DatePicker.css';/* empty css            */
import { clsx as g } from "./index.es280.js";
import { useRef as j, useEffect as N } from "react";
const E = ({
  label: o,
  value: c,
  maxValue: m,
  minValue: u,
  className: b,
  disabled: n,
  onClick: a,
  onChange: v,
  error: t,
  required: f = !1,
  id: x,
  autoComplete: h = "off"
}) => {
  const r = j(null), e = x || `datepicker-${o.toLowerCase().replace(/\s+/g, "-")}`;
  N(() => {
    t && r.current ? (r.current.setAttribute("aria-invalid", "true"), r.current.setAttribute("aria-describedby", `${e}-error`)) : r.current && (r.current.setAttribute("aria-invalid", "false"), r.current.removeAttribute("aria-describedby"));
  }, [t, e]);
  const D = (i) => {
    i.key === "Enter" && !n && (a == null || a());
  }, p = c ? l.fromJSDate(c).toFormat("yyyy-MM-dd") : "";
  return /* @__PURE__ */ d.jsxs(
    "div",
    {
      className: g("datepicker-container", b),
      role: "group",
      "aria-labelledby": `${e}-label`,
      "aria-describedby": t ? `${e}-error` : void 0,
      children: [
        /* @__PURE__ */ d.jsxs(
          "label",
          {
            id: `${e}-label`,
            htmlFor: e,
            className: "datepicker-label fs-7",
            children: [
              o,
              f && /* @__PURE__ */ d.jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })
            ]
          }
        ),
        /* @__PURE__ */ d.jsx(
          "input",
          {
            ref: r,
            id: e,
            type: "date",
            className: "datepicker-input fs-6",
            disabled: n,
            value: p,
            max: m ? l.fromJSDate(m).toFormat("yyyy-MM-dd") : void 0,
            min: u ? l.fromJSDate(u).toFormat("yyyy-MM-dd") : void 0,
            onClick: () => a == null ? void 0 : a(),
            onInput: (i) => {
              const s = i.currentTarget, y = s.value.split("-")[0];
              y && y.length > 4 && (s.value = p);
            },
            onChange: (i) => {
              const s = new Date(i.target.value);
              isNaN(s.getTime()) || v(s);
            },
            onKeyDown: D,
            "aria-required": f,
            "aria-disabled": n,
            "aria-label": o,
            "aria-invalid": !!t,
            "aria-describedby": t ? `${e}-error` : void 0,
            autoComplete: h
          }
        ),
        t && /* @__PURE__ */ d.jsx(
          "div",
          {
            id: `${e}-error`,
            className: "datepicker-error",
            role: "alert",
            "aria-live": "polite",
            children: t
          }
        )
      ]
    }
  );
};
export {
  E as DatePicker
};
//# sourceMappingURL=index.es97.js.map