welcome-ui/dist/DatePicker.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './DatePicker.css';
import { jsxs as G, jsx as l } from "react/jsx-runtime";
import { useState as A, useMemo as $, useEffect as S, forwardRef as J, useRef as Q } from "react";
import { D as V, C as W } from "./CustomPopper-C1wIDHbM.js";
import { Button as j } from "./Button.js";
import { Icon as F } from "./Icon.js";
import { Select as M } from "./Select.js";
import { c as v } from "./index-B6iGEm-i.js";
import { g as X, a as Z, s as B, b as Y, D as P } from "./utils-ZE_dEXnJ.js";
import { InputText as g } from "./InputText.js";
const C = v(B), L = ({
  changeMonth: x,
  changeYear: N,
  date: f,
  decreaseMonth: T,
  decreaseYear: z,
  endYear: m,
  increaseMonth: I,
  increaseYear: y,
  isMonthYearPicker: t,
  locale: D,
  startYear: c
}) => {
  const [p, R] = A(null), [a, k] = A(null), i = $(() => X(D), [D]), r = $(() => Z(c, m), [c, m]), o = (t || p === i[0].label) && a === c, w = (t || p === i[i.length - 1].label) && a === m;
  return S(() => {
    const b = new Date(f), u = i[b.getMonth()].label, E = b.getFullYear();
    R(u), k(E);
  }, [f, i]), /* @__PURE__ */ G("div", { className: C("custom-header"), children: [
    /* @__PURE__ */ l(
      j,
      {
        disabled: o,
        onClick: t ? z : T,
        size: "sm",
        title: `Previous ${t ? "year" : "month"}`,
        variant: "tertiary",
        children: /* @__PURE__ */ l(F, { name: "angle-left-b", size: "xs" })
      }
    ),
    !t && /* @__PURE__ */ l(
      M,
      {
        id: "month",
        name: "month",
        onChange: x,
        options: i,
        size: "md",
        value: p
      }
    ),
    /* @__PURE__ */ l(M, { id: "year", name: "year", onChange: N, options: r, size: "md", value: a }),
    /* @__PURE__ */ l(
      j,
      {
        disabled: w,
        onClick: t ? y : I,
        size: "sm",
        title: `Next ${t ? "year" : "month"}`,
        variant: "tertiary",
        children: /* @__PURE__ */ l(F, { name: "angle-right-b", size: "xs" })
      }
    )
  ] });
};
L.displayName = "DateTimePicker.CustomHeader";
const K = v(B), h = J(
  ({
    autoFocus: x,
    className: N,
    dateFormat: f = "dd/MM/yyyy",
    disabled: T,
    endYear: z = P.getFullYear(),
    icon: m,
    iconPlacement: I = "left",
    locale: y,
    onChange: t,
    placeholder: D,
    preventVirtualKeyboard: c = !1,
    showMonthYearPicker: p,
    size: R = "md",
    startYear: a = 1900,
    transparent: k,
    useWeekdaysShort: i = !0,
    value: r = P,
    ...o
  }, w) => {
    const b = o == null ? void 0 : o.timeIntervals, u = (e) => Y(e, b), [E, d] = A(u(r)), O = Q(), H = w || O;
    S(() => {
      t == null || t(u(r));
    }, []), S(() => {
      var n;
      const e = u(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
      ((n = new Date(Date.parse(s))) == null ? void 0 : n.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), d(e);
    }, [r]);
    const U = (e) => {
      var s;
      ["Enter", "Escape"].includes(e.key) && ((s = H.current) == null || s.blur());
    }, _ = (e) => {
      var s;
      e.preventDefault(), (s = H.current) == null || s.blur(), d(null), t == null || t(null);
    }, q = (e) => {
      if (!e) {
        d(null), t == null || t(null);
        return;
      }
      const s = Array.isArray(e) ? e[0] : e;
      if (!s) {
        d(null), t == null || t(null);
        return;
      }
      const n = u(s);
      s.setHours(n.getHours(), n.getMinutes()), d(s), t == null || t(new Date(s));
    };
    return (
      // type issue in react-datepicker (https://github.com/Hacker0x01/react-datepicker/issues/5391)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      /* @__PURE__ */ l(
        V,
        {
          autoComplete: "off",
          calendarClassName: "date-picker-popper",
          customInput: /* @__PURE__ */ l(
            g,
            {
              autoFocus: x,
              className: K("date-picker", N),
              "data-testid": o["data-testid"],
              disabled: T,
              icon: m,
              iconPlacement: I,
              inputMode: c ? "none" : "text",
              isClearable: !0,
              onReset: _,
              placeholder: D,
              ref: H,
              size: R,
              transparent: k
            }
          ),
          dateFormat: f,
          locale: y,
          onChange: q,
          onKeyDown: U,
          popperContainer: W,
          renderCustomHeader: (e) => /* @__PURE__ */ l(
            L,
            {
              endYear: z,
              isMonthYearPicker: p,
              locale: y,
              startYear: a,
              ...e
            }
          ),
          selected: E,
          showMonthYearPicker: p,
          useWeekdaysShort: i,
          ...o,
          wrapperClassName: K(o.wrapperClassName, "date-picker-wrapper", "field-input")
        }
      )
    );
  }
);
h.displayName = "DatePicker";
export {
  h as DatePicker,
  B as datePickerClasses
};