@epam/ai-dial-ui-kit 0.15.0-dev.3 → 0.15.0-dev.30

package/dist/components/New/Calendar/Calendar.js

@@ -1,343 +1,391 @@
-import { jsx as t, jsxs as o, Fragment as O } from "react/jsx-runtime";
-import { useFloating as ne, autoUpdate as re, offset as se, flip as ie, shift as oe, useClick as ce, useDismiss as de, useRole as me, useInteractions as fe, FloatingPortal as pe, FloatingFocusManager as ue } from "@floating-ui/react";
-import { IconChevronDown as he } from "@tabler/icons-react";
-import { useId as ge, useState as E, useMemo as S, useEffect as be } from "react";
-import { Label as xe } from "../Label/Label.js";
-import { StaticIconButton as $ } from "../IconButton/IconButtonWrappers.js";
-import { DIAL_KIT_ICON_STROKE as ye } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as ve } from "../../../constants/icon.js";
-import { CalendarMode as v } from "../../../types/calendar.js";
-import { ElementSize as j } from "../../../types/size.js";
-import { useThemeScope as De } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as c } from "../../../utils/merge-classes.js";
-import { DEFAULT_CALENDAR_LOCALE as Ne, calendarModeDefaultPlaceholder as Ce, calendarFieldIconClassName as Ie, calendarNavIcons as V, calendarDaySelectedClassName as Le, calendarDayTodayClassName as Te, calendarDayOutsideClassName as Fe, calendarDayButtonBaseClassName as Se, calendarIcon as Me, calendarFieldDisabledClassName as Z, calendarFieldInvalidClassName as q, calendarFieldBaseClassName as H, calendarPopoverClassName as Oe } from "./constants.js";
-import { getWeekdayShortLabels as we, getWeekdayOptions as ke, getMonthGrid as Be, formatTimeLabel as M, formatMonthLabel as Ee, isSameDay as P, isDateOutOfRange as W, formatDayAriaLabel as Ae, sanitizeTimeInput as _e, isCompleteTimeString as Re, setTimeOnDate as K, formatDateLabel as U } from "./utils.js";
-const Y = ({
+import { jsx as e, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { useFloating as oe, autoUpdate as ce, offset as de, flip as me, shift as pe, useClick as fe, useDismiss as ue, useRole as he, useInteractions as ge, FloatingPortal as be, FloatingFocusManager as xe } from "@floating-ui/react";
+import { IconChevronDown as ye } from "@tabler/icons-react";
+import { useId as ve, useState as B, useMemo as S, useEffect as Ne } from "react";
+import { Label as De } from "../Label/Label.js";
+import { StaticIconButton as K } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as Ce } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as Ie } from "../../../constants/icon.js";
+import { CalendarMode as D } from "../../../types/calendar.js";
+import { ElementSize as P } from "../../../types/size.js";
+import { useThemeScope as Le } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { getTimezoneLabel as Te } from "../../../utils/timezone.js";
+import { DEFAULT_CALENDAR_LOCALE as Se, calendarModeDefaultPlaceholder as Fe, calendarFieldIconClassName as Me, calendarNavIcons as W, calendarDaySelectedClassName as Oe, calendarDayTodayClassName as we, calendarDayOutsideClassName as ke, calendarDayButtonBaseClassName as Ae, calendarIcon as _e, calendarFieldDisabledClassName as J, calendarFieldInvalidClassName as Q, calendarFieldBaseClassName as X, calendarPopoverClassName as Ee } from "./constants.js";
+import { getWeekdayShortLabels as Be, getWeekdayOptions as Re, getMonthGrid as ze, formatTimeLabel as M, formatMonthLabel as $e, isSameDay as U, isDateOutOfRange as Y, formatDayAriaLabel as je, sanitizeTimeInput as Ve, isCompleteTimeString as Ke, setTimeOnDate as G, formatDateLabel as Z } from "./utils.js";
+import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
+const q = ({
   id: s,
-  disabled: l,
-  invalid: m,
-  trigger: i,
-  panelClassName: N,
-  fieldClassName: h,
-  panel: g,
-  labelledBy: C,
-  panelLabel: b
+  disabled: a,
+  invalid: p,
+  trigger: C,
+  panelClassName: i,
+  fieldClassName: I,
+  panel: x,
+  labelledBy: y,
+  panelLabel: L
 }) => {
-  const x = De(), [f, n] = E(!1), { refs: D, floatingStyles: p, context: a } = ne({
-    open: f,
-    onOpenChange: (F) => n(l ? !1 : F),
+  const f = Le(), [u, h] = B(!1), { refs: l, floatingStyles: v, context: o } = oe({
+    open: u,
+    onOpenChange: (k) => h(a ? !1 : k),
     placement: "bottom-start",
-    whileElementsMounted: re,
-    middleware: [se(8), ie({ padding: 8 }), oe({ padding: 8 })]
-  }), w = ce(a, { enabled: !l }), u = de(a), T = me(a, { role: "dialog" }), { getReferenceProps: k, getFloatingProps: I } = fe([
-    w,
-    u,
-    T
+    whileElementsMounted: ce,
+    middleware: [de(8), me({ padding: 8 }), pe({ padding: 8 })]
+  }), g = fe(o, { enabled: !a }), n = ue(o), w = he(o, { role: "dialog" }), { getReferenceProps: b, getFloatingProps: F } = ge([
+    g,
+    n,
+    w
   ]);
-  return /* @__PURE__ */ o(O, { children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ c(O, { children: [
+    /* @__PURE__ */ e(
       "div",
       {
         id: s,
-        ref: D.setReference,
+        ref: l.setReference,
         role: "button",
         "aria-haspopup": "dialog",
-        "aria-expanded": f,
-        "aria-disabled": l,
-        "aria-labelledby": C,
-        tabIndex: l ? -1 : 0,
-        className: c(
-          H,
+        "aria-expanded": u,
+        "aria-disabled": a,
+        "aria-labelledby": y,
+        tabIndex: a ? -1 : 0,
+        className: d(
+          X,
           "focus-visible:outline focus-visible:outline-focus",
-          m && q,
-          l && Z,
-          h
+          p && Q,
+          a && J,
+          I
         ),
-        ...k(),
-        children: i
+        ...b(),
+        children: C
       }
     ),
-    f && /* @__PURE__ */ t(pe, { children: /* @__PURE__ */ t(
-      ue,
+    u && /* @__PURE__ */ e(be, { children: /* @__PURE__ */ e(
+      xe,
       {
-        context: a,
+        context: o,
         modal: !1,
         initialFocus: -1,
         returnFocus: !0,
-        children: /* @__PURE__ */ t(
+        children: /* @__PURE__ */ e(
           "div",
           {
-            ref: D.setFloating,
-            style: p,
-            "aria-label": b,
-            className: c(
-              Oe,
-              x,
-              N
+            ref: l.setFloating,
+            style: v,
+            "aria-label": L,
+            className: d(
+              Ee,
+              f,
+              i
             ),
-            ...I(),
-            children: g(() => n(!1))
+            ...F(),
+            children: x(() => h(!1))
           }
         )
       }
     ) })
   ] });
-}, G = ({
+}, H = ({
   id: s,
-  value: l,
-  onChange: m,
+  value: a,
+  onChange: p,
+  onBlur: C,
   disabled: i,
-  invalid: N,
-  className: h,
-  ariaLabel: g,
-  placeholder: C = "--:--"
+  invalid: I,
+  className: x,
+  ariaLabel: y,
+  placeholder: L = "--:--",
+  timezoneLabel: f
 }) => {
-  const [b, x] = E(l);
-  return be(() => {
-    x(l);
-  }, [l]), /* @__PURE__ */ t(
+  const [u, h] = B(a);
+  Ne(() => {
+    h(a);
+  }, [a]);
+  const l = /* @__PURE__ */ e(
     "input",
     {
       id: s,
       type: "text",
       inputMode: "numeric",
       autoComplete: "off",
-      "aria-label": g,
-      placeholder: C,
+      "aria-label": y,
+      placeholder: L,
       disabled: i,
-      value: b,
-      onChange: (f) => {
-        const n = _e(f.target.value);
-        x(n), Re(n) && m(n);
+      value: u,
+      onChange: (v) => {
+        const o = Ve(v.target.value);
+        h(o), Ke(o) && p(o);
       },
-      className: c(
-        H,
-        N && q,
-        i && Z,
-        h
+      onBlur: C,
+      className: d(
+        X,
+        I && Q,
+        i && J,
+        x
       )
     }
   );
-}, Qe = ({
-  mode: s = v.Date,
-  value: l,
-  onChange: m,
+  return f ? /* @__PURE__ */ c("div", { className: "relative w-full", children: [
+    l,
+    /* @__PURE__ */ e("span", { className: "dial-small-paragraph-text pointer-events-none absolute end-4 top-1/2 -translate-y-1/2 truncate text-secondary", children: f })
+  ] }) : l;
+}, rt = ({
+  mode: s = D.Date,
+  value: a,
+  onChange: p,
+  onBlur: C,
   labelProps: i,
-  placeholder: N,
-  disabled: h = !1,
-  invalid: g = !1,
-  id: C,
-  className: b,
-  minDate: x,
-  maxDate: f,
-  locale: n = Ne,
-  fieldClassName: D
+  placeholder: I,
+  disabled: x = !1,
+  invalid: y = !1,
+  id: L,
+  className: f,
+  minDate: u,
+  maxDate: h,
+  locale: l = Se,
+  fieldClassName: v,
+  showTimezone: o = !1
 }) => {
-  const p = N ?? Ce[s], a = l instanceof Date ? l : null, w = ge(), u = C ?? w, T = i?.id ?? `${u}-label`, k = !!i?.label, I = typeof i?.label == "string" ? i.label : void 0, F = k ? `${T} ${u}` : void 0, B = i ? /* @__PURE__ */ t(xe, { ...i, id: T, htmlFor: u }) : null, [L, J] = E(
-    () => a ?? /* @__PURE__ */ new Date()
-  ), Q = S(() => /* @__PURE__ */ new Date(), []), X = S(
-    () => we(n),
-    [n]
-  ), A = S(() => ke(n), [n]), ee = S(
-    () => Be(L.getFullYear(), L.getMonth()),
-    [L]
-  ), _ = (r) => {
-    J(
-      (e) => new Date(e.getFullYear(), e.getMonth() + r, 1)
+  const g = I ?? Fe[s], n = a instanceof Date ? a : null, w = ve(), b = L ?? w, F = i?.id ?? `${b}-label`, k = !!i?.label, A = typeof i?.label == "string" ? i.label : void 0, R = k ? `${F} ${b}` : void 0, _ = i ? /* @__PURE__ */ e(De, { ...i, id: F, htmlFor: b }) : null, [T, ee] = B(
+    () => n ?? /* @__PURE__ */ new Date()
+  ), te = S(() => /* @__PURE__ */ new Date(), []), ae = S(
+    () => o ? Te({ locale: l }) : null,
+    [o, l]
+  ), le = S(
+    () => Be(l),
+    [l]
+  ), z = S(() => Re(l), [l]), ne = S(
+    () => ze(T.getFullYear(), T.getMonth()),
+    [T]
+  ), $ = (r) => {
+    ee(
+      (t) => new Date(t.getFullYear(), t.getMonth() + r, 1)
     );
-  }, te = (r, e) => {
-    if (W(r, x, f)) return;
-    const y = s === v.DateTime && a ? K(r, M(a)) : r;
-    m?.(y), s === v.Date && e();
-  }, ae = (r) => {
-    m?.(K(a ?? /* @__PURE__ */ new Date(), r));
-  }, le = () => a ? s === v.DateTime ? `${U(a, n)}, ${M(a)}` : U(a, n) : p;
-  if (s === v.Time) {
-    const r = typeof l == "string" ? l : a ? M(a) : "";
-    return /* @__PURE__ */ o("div", { className: c("flex flex-col gap-y-3", b), children: [
-      B,
-      /* @__PURE__ */ t(
-        G,
-        {
-          id: u,
-          value: r,
-          onChange: (e) => m?.(e),
-          disabled: h,
-          invalid: g,
-          placeholder: p,
-          className: D
-        }
-      )
-    ] });
-  }
-  if (s === v.Weekday) {
-    const r = typeof l == "string" ? l : void 0, e = A.find((y) => y.value === r);
-    return /* @__PURE__ */ o("div", { className: c("flex flex-col gap-y-3", b), children: [
-      B,
-      /* @__PURE__ */ t(
-        Y,
-        {
-          id: u,
-          disabled: h,
-          invalid: g,
-          labelledBy: F,
-          panelLabel: I ?? p,
-          fieldClassName: D,
-          trigger: /* @__PURE__ */ o(O, { children: [
-            /* @__PURE__ */ t(
-              "span",
-              {
-                className: c(
-                  "truncate",
-                  !e && "text-secondary"
-                ),
-                children: e?.label ?? p
-              }
-            ),
-            /* @__PURE__ */ t(
-              he,
-              {
-                size: ve.MD,
-                stroke: ye,
-                "aria-hidden": "true",
-                className: Ie
-              }
-            )
-          ] }),
-          panel: (y) => /* @__PURE__ */ t(
-            "div",
+  }, re = (r, t) => {
+    if (Y(r, u, h)) return;
+    const N = s === D.DateTime && n ? G(r, M(n)) : r;
+    p?.(N), s === D.Date && t();
+  }, se = (r) => {
+    p?.(G(n ?? /* @__PURE__ */ new Date(), r));
+  }, ie = () => n ? s === D.DateTime ? `${Z(n, l)}, ${M(n)}` : Z(n, l) : g;
+  if (s === D.Time) {
+    const r = typeof a == "string" ? a : n ? M(n) : "";
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        className: d(
+          "flex flex-col gap-y-3",
+          f,
+          E.calendar
+        ),
+        children: [
+          _,
+          /* @__PURE__ */ e(
+            H,
             {
-              role: "listbox",
-              "aria-label": I ?? p,
-              className: "flex flex-col gap-0.5",
-              children: A.map((d) => /* @__PURE__ */ t(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": d.value === r,
-                  className: c(
-                    "flex w-full items-center rounded-lg px-3 py-2 text-left dial-small-text text-primary hover:bg-control-accent-alpha-hover",
-                    "focus-visible:outline focus-visible:outline-focus",
-                    d.value === r && "bg-control-accent-alpha-hover"
-                  ),
-                  onClick: () => {
-                    m?.(d.value), y();
-                  },
-                  children: d.label
-                },
-                d.value
-              ))
+              id: b,
+              value: r,
+              onChange: (t) => p?.(t),
+              onBlur: C,
+              disabled: x,
+              invalid: y,
+              placeholder: g,
+              className: v,
+              timezoneLabel: ae
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ o("div", { className: c("flex flex-col gap-y-3", b), children: [
-    B,
-    /* @__PURE__ */ t(
-      Y,
+  if (s === D.Weekday) {
+    const r = typeof a == "string" ? a : void 0, t = z.find((N) => N.value === r);
+    return /* @__PURE__ */ c(
+      "div",
       {
-        id: u,
-        disabled: h,
-        invalid: g,
-        labelledBy: F,
-        panelLabel: I ?? p,
-        fieldClassName: D,
-        trigger: /* @__PURE__ */ o(O, { children: [
-          /* @__PURE__ */ t(
-            "span",
+        className: d(
+          "flex flex-col gap-y-3",
+          f,
+          E.calendar
+        ),
+        children: [
+          _,
+          /* @__PURE__ */ e(
+            q,
             {
-              className: c(
-                "truncate",
-                !a && "text-secondary"
-              ),
-              children: le()
+              id: b,
+              disabled: x,
+              invalid: y,
+              labelledBy: R,
+              panelLabel: A ?? g,
+              fieldClassName: v,
+              trigger: /* @__PURE__ */ c(O, { children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: d(
+                      "truncate",
+                      !t && "text-secondary"
+                    ),
+                    children: t?.label ?? g
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  ye,
+                  {
+                    size: Ie.MD,
+                    stroke: Ce,
+                    "aria-hidden": "true",
+                    className: Me
+                  }
+                )
+              ] }),
+              panel: (N) => /* @__PURE__ */ e(
+                "div",
+                {
+                  role: "listbox",
+                  "aria-label": A ?? g,
+                  className: "flex flex-col gap-0.5",
+                  children: z.map((m) => /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": m.value === r,
+                      className: d(
+                        "flex w-full items-center rounded-lg px-3 py-2 text-left dial-small-text text-primary hover:bg-control-accent-alpha-hover",
+                        "focus-visible:outline focus-visible:outline-focus",
+                        m.value === r && "bg-control-accent-alpha-hover"
+                      ),
+                      onClick: () => {
+                        p?.(m.value), N();
+                      },
+                      children: m.label
+                    },
+                    m.value
+                  ))
+                }
+              )
             }
-          ),
-          Me
-        ] }),
-        panel: (r) => /* @__PURE__ */ o(O, { children: [
-          /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ t(
-              $,
-              {
-                "aria-label": "Previous month",
-                icon: V.prev,
-                size: j.Small,
-                onClick: () => _(-1)
-              }
-            ),
-            /* @__PURE__ */ t(
-              "div",
-              {
-                className: "dial-small-semi-text text-primary",
-                "aria-live": "polite",
-                children: Ee(L, n)
-              }
-            ),
-            /* @__PURE__ */ t(
-              $,
-              {
-                "aria-label": "Next month",
-                icon: V.next,
-                size: j.Small,
-                onClick: () => _(1)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ o("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
-            X.map((e) => /* @__PURE__ */ t(
-              "div",
-              {
-                "aria-hidden": "true",
-                className: "dial-tiny-text py-1 text-secondary",
-                children: e
-              },
-              e
-            )),
-            ee.map((e) => {
-              const y = e.getMonth() !== L.getMonth(), d = P(e, a), R = P(e, Q), z = W(e, x, f);
-              return /* @__PURE__ */ t(
-                "button",
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: d(
+        "flex flex-col gap-y-3",
+        f,
+        E.calendar
+      ),
+      children: [
+        _,
+        /* @__PURE__ */ e(
+          q,
+          {
+            id: b,
+            disabled: x,
+            invalid: y,
+            labelledBy: R,
+            panelLabel: A ?? g,
+            fieldClassName: v,
+            trigger: /* @__PURE__ */ c(O, { children: [
+              /* @__PURE__ */ e(
+                "span",
                 {
-                  type: "button",
-                  disabled: z,
-                  "aria-label": Ae(e, n),
-                  "aria-pressed": d,
-                  "aria-current": R ? "date" : void 0,
-                  className: c(
-                    Se,
-                    y && Fe,
-                    R && !d && Te,
-                    d && Le,
-                    z && "cursor-not-allowed opacity-40 hover:bg-transparent"
+                  className: d(
+                    "truncate",
+                    !n && "text-secondary"
                   ),
-                  onClick: () => te(e, r),
-                  children: e.getDate()
-                },
-                e.toISOString()
-              );
-            })
-          ] }),
-          s === v.DateTime && /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
-            /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: "Time" }),
-            /* @__PURE__ */ t(
-              G,
-              {
-                ariaLabel: "Time",
-                value: a ? M(a) : "",
-                onChange: ae,
-                className: "w-[120px] px-3 py-1.5"
-              }
-            )
-          ] })
-        ] })
-      }
-    )
-  ] });
+                  children: ie()
+                }
+              ),
+              _e
+            ] }),
+            panel: (r) => /* @__PURE__ */ c(O, { children: [
+              /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ e(
+                  K,
+                  {
+                    "aria-label": "Previous month",
+                    icon: W.prev,
+                    size: P.Small,
+                    onClick: () => $(-1)
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "dial-small-semi-text text-primary",
+                    "aria-live": "polite",
+                    children: $e(T, l)
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  K,
+                  {
+                    "aria-label": "Next month",
+                    icon: W.next,
+                    size: P.Small,
+                    onClick: () => $(1)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ c("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
+                le.map((t) => /* @__PURE__ */ e(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "dial-tiny-text py-1 text-secondary",
+                    children: t
+                  },
+                  t
+                )),
+                ne.map((t) => {
+                  const N = t.getMonth() !== T.getMonth(), m = U(t, n), j = U(t, te), V = Y(t, u, h);
+                  return /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: V,
+                      "aria-label": je(t, l),
+                      "aria-pressed": m,
+                      "aria-current": j ? "date" : void 0,
+                      className: d(
+                        Ae,
+                        N && ke,
+                        j && !m && we,
+                        m && Oe,
+                        V && "cursor-not-allowed opacity-40 hover:bg-transparent"
+                      ),
+                      onClick: () => re(t, r),
+                      children: t.getDate()
+                    },
+                    t.toISOString()
+                  );
+                })
+              ] }),
+              s === D.DateTime && /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
+                /* @__PURE__ */ e("span", { className: "dial-small-text text-primary", children: "Time" }),
+                /* @__PURE__ */ e(
+                  H,
+                  {
+                    ariaLabel: "Time",
+                    value: n ? M(n) : "",
+                    onChange: se,
+                    onBlur: C,
+                    className: "w-[120px] px-3 py-1.5"
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  Qe as Calendar
+  rt as Calendar
 };