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

FSE UI components library

import { j as i } from "./index.es244.js";
import n from "./index.es225.js";
import "./index.es3.js";
import './components/ui/DatePicker/DatePicker.css';/* empty css            */
import { clsx as D } from "./index.es246.js";
import { useRef as h, useEffect as j } from "react";
const F = ({
  label: s,
  value: m,
  maxValue: c,
  minValue: l,
  className: f,
  disabled: d,
  onClick: a,
  onChange: y,
  error: r,
  required: p = !1,
  id: b
}) => {
  const t = h(null), e = b || `datepicker-${s.toLowerCase().replace(/\s+/g, "-")}`;
  j(() => {
    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 v = (o) => {
    o.key === "Enter" && !d && (a == null || a());
  }, x = m ? n.fromJSDate(m).toFormat("yyyy-MM-dd") : "";
  return /* @__PURE__ */ i.jsxs(
    "div",
    {
      className: D("datepicker-container", f),
      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,
              p && /* @__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: x,
            max: c ? n.fromJSDate(c).toFormat("yyyy-MM-dd") : void 0,
            min: l ? n.fromJSDate(l).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: v,
            "aria-required": p,
            "aria-disabled": d,
            "aria-label": s,
            "aria-invalid": !!r,
            "aria-describedby": r ? `${e}-error` : void 0
          }
        ),
        r && /* @__PURE__ */ i.jsx(
          "div",
          {
            id: `${e}-error`,
            className: "datepicker-error",
            role: "alert",
            "aria-live": "polite",
            children: r
          }
        )
      ]
    }
  );
};
export {
  F as DatePicker
};
//# sourceMappingURL=index.es77.js.map