@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.51

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

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