welcome-ui/dist/DatePicker.js

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

"use client";
import { jsxs as U, jsx as o } from "react/jsx-runtime";
import { useState as $, useMemo as F, useEffect as j, forwardRef as _, useRef as G } from "react";
import { D as J, C as P } from "./CustomPopper-vwbOQq72.js";
import { Button as L } from "./Button.js";
import "./Icon-BisRi8B3.js";
import { L as Q } from "./index-CWVOLBDY.js";
import { R as V } from "./index-Dcq5gh3E.js";
import { Select as M } from "./Select.js";
import { c as w } from "./index-PAaZGbyz.js";
import { g as W, a as X, s as K, b as Z, D as q } from "./utils-BNMgUIHQ.js";
import { InputText as Y } from "./InputText.js";
const g = w(K), h = ({
  changeMonth: b,
  changeYear: R,
  date: f,
  decreaseMonth: I,
  decreaseYear: z,
  endYear: m,
  increaseMonth: N,
  increaseYear: y,
  isMonthYearPicker: t,
  locale: D,
  startYear: u
}) => {
  const [a, T] = $(null), [l, E] = $(null), i = F(() => W(D), [D]), r = F(() => X(u, m), [u, m]), c = (t || a === i[0].label) && l === u, A = (t || a === i[i.length - 1].label) && l === m;
  return j(() => {
    const x = new Date(f), p = i[x.getMonth()].label, H = x.getFullYear();
    T(p), E(H);
  }, [f, i]), /* @__PURE__ */ U("div", { className: g("custom-header"), children: [
    /* @__PURE__ */ o(
      L,
      {
        disabled: c,
        onClick: t ? z : I,
        shape: "square",
        size: "xs",
        title: `Previous ${t ? "year" : "month"}`,
        variant: "tertiary",
        children: /* @__PURE__ */ o(Q, { size: "xs" })
      }
    ),
    !t && /* @__PURE__ */ o(
      M,
      {
        id: "month",
        name: "month",
        onChange: b,
        options: i,
        size: "sm",
        value: a
      }
    ),
    /* @__PURE__ */ o(M, { id: "year", name: "year", onChange: R, options: r, size: "sm", value: l }),
    /* @__PURE__ */ o(
      L,
      {
        disabled: A,
        onClick: t ? y : N,
        shape: "square",
        size: "xs",
        title: `Next ${t ? "year" : "month"}`,
        variant: "tertiary",
        children: /* @__PURE__ */ o(V, { size: "xs" })
      }
    )
  ] });
}, C = w(K), pt = _(
  ({
    autoFocus: b,
    className: R,
    dateFormat: f = "dd/MM/yyyy",
    disabled: I,
    endYear: z = q.getFullYear(),
    icon: m,
    iconPlacement: N = "left",
    locale: y,
    onChange: t,
    placeholder: D,
    preventVirtualKeyboard: u = !1,
    showMonthYearPicker: a,
    size: T = "md",
    startYear: l = 1900,
    transparent: E,
    useWeekdaysShort: i = !0,
    value: r = q,
    ...c
  }, A) => {
    const x = c == null ? void 0 : c.timeIntervals, p = (e) => Z(e, x), [H, n] = $(p(r)), k = G(), S = A || k;
    j(() => {
      t == null || t(p(r));
    }, []), j(() => {
      var d;
      const e = p(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
      ((d = new Date(Date.parse(s))) == null ? void 0 : d.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), n(e);
    }, [r]);
    const v = (e) => {
      var s;
      ["Enter", "Escape"].includes(e.key) && ((s = S.current) == null || s.blur());
    }, B = (e) => {
      var s;
      e.preventDefault(), (s = S.current) == null || s.blur(), n(null), t == null || t(null);
    }, O = (e) => {
      if (!e) {
        n(null), t == null || t(null);
        return;
      }
      const s = Array.isArray(e) ? e[0] : e;
      if (!s) {
        n(null), t == null || t(null);
        return;
      }
      const d = p(s);
      s.setHours(d.getHours(), d.getMinutes()), n(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__ */ o(
        J,
        {
          autoComplete: "off",
          calendarClassName: "date-picker-popper",
          customInput: /* @__PURE__ */ o(
            Y,
            {
              autoFocus: b,
              className: C("date-picker", R),
              "data-testid": c["data-testid"],
              disabled: I,
              icon: m,
              iconPlacement: N,
              inputMode: u ? "none" : "text",
              isClearable: !0,
              onReset: B,
              placeholder: D,
              ref: S,
              size: T,
              transparent: E
            }
          ),
          dateFormat: f,
          locale: y,
          onChange: O,
          onKeyDown: v,
          popperContainer: P,
          renderCustomHeader: (e) => /* @__PURE__ */ o(
            h,
            {
              endYear: z,
              isMonthYearPicker: a,
              locale: y,
              startYear: l,
              ...e
            }
          ),
          selected: H,
          showMonthYearPicker: a,
          useWeekdaysShort: i,
          ...c
        }
      )
    );
  }
);
export {
  pt as DatePicker
};