welcome-ui/dist/DatePicker.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as d } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { useState as k, useRef as w, useEffect as E } from "react";
import { g as G, D as R, S as J, c as Q, C as V, b as W } from "./CustomPopper-DavRfSDP.mjs";
import { forwardRef as X } from "./System.mjs";
const Z = X(
  ({
    autoFocus: I,
    dataTestId: P,
    dateFormat: S = "dd/MM/yyyy",
    disabled: b,
    endYear: F = R.getFullYear(),
    icon: p,
    iconPlacement: u = "left",
    locale: l,
    onBlur: i,
    onChange: s,
    onFocus: m,
    placeholder: H,
    popperProps: M,
    preventVirtualKeyboard: g = !1,
    showMonthYearPicker: f,
    size: y = "md",
    startYear: h = 1900,
    transparent: C,
    useWeekdaysShort: N = !0,
    value: t = R,
    ...o
  }, c) => {
    const A = o == null ? void 0 : o.timeIntervals, r = (e) => G(e, A), K = H || o.placeholderText, [B, D] = k(I && "date" || null), [L, a] = k(r(t)), x = w();
    E(() => {
      s && s(r(t));
    }, []), E(() => {
      var j;
      const e = r(t), n = typeof t == "object" ? t == null ? void 0 : t.toISOString() : t;
      ((j = new Date(Date.parse(n))) == null ? void 0 : j.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && s && s(e), a(e);
    }, [t]);
    const T = () => {
      var e;
      return (e = x.current) == null ? void 0 : e.blur();
    }, O = (e) => {
      D("date"), m && m(e);
    }, U = (e) => {
      D(null), i && i(e);
    }, Y = (e) => {
      ["Enter", "Escape"].includes(e.key) && T();
    }, _ = (e) => {
      e.preventDefault(), T(), a(null), s && s(null);
    }, q = (e) => {
      if (!e) return;
      const n = r(e);
      e.setHours(n.getHours(), n.getMinutes()), a(e), s && s(new Date(e));
    };
    return (
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      /* @__PURE__ */ d.jsx(
        J,
        {
          autoComplete: "off",
          calendarClassName: "date-picker-popper",
          customInput: /* @__PURE__ */ d.jsx(
            W,
            {
              className: "date-picker",
              "data-testid": P,
              focused: B,
              handleBlur: (e) => U(e),
              handleFocus: (e) => O(e),
              icon: p,
              iconPlacement: u,
              inputMode: g ? "none" : "text",
              onReset: _,
              ref: (e) => {
                x.current = e, typeof c == "function" ? c(e) : c.current = e;
              },
              size: y
            }
          ),
          dateFormat: S,
          disabled: b,
          iconPlacement: !!p && u,
          locale: l,
          onChange: q,
          onKeyDown: Y,
          placeholderText: K,
          popperContainer: Q,
          popperProps: M,
          renderCustomHeader: (e) => /* @__PURE__ */ d.jsx(
            V,
            {
              endYear: F,
              isMonthYearPicker: f,
              locale: l,
              startYear: h,
              ...e
            }
          ),
          selected: L,
          showMonthYearPicker: f,
          size: y,
          transparent: C,
          useWeekdaysShort: N,
          ...o
        }
      )
    );
  }
);
Z.displayName = "DatePicker";
export {
  Z as DatePicker
};