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

FSE UI components library

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