@apipass/design-system 3.1.0 → 4.0.0

package/dist/lib/ui/primitives/DateRangePicker/DateRangePicker.js

@@ -1,24 +1,25 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { getLocalTimeZone as Ee, toCalendarDate as h, Time as q, toCalendarDateTime as Pe } from "@internationalized/date";
-import { clsx as ze } from "../../../vendor/clsx/dist/clsx.js";
-import { useMemo as Ae, useState as S, useEffect as me, useContext as Oe } from "react";
-import { useLocale as Ve, DialogTrigger as $e, Button as $, Popover as Ge, Dialog as je, DateField as te, Label as ne, Group as re, DateInput as se, DateSegment as ie, RangeCalendar as qe, Heading as He, CalendarGrid as Ke, CalendarCell as Ze, I18nProvider as Je, RangeCalendarStateContext as Me } from "react-aria-components";
-import { createDateRangePresets as Qe } from "./dateRangePresets.js";
+import { getLocalTimeZone as Re, toCalendarDate as h, Time as q, toCalendarDateTime as Ae } from "@internationalized/date";
+import { clsx as Oe } from "../../../vendor/clsx/dist/clsx.js";
+import { useMemo as ze, useState as S, useEffect as me, useContext as Ve } from "react";
+import { useLocale as $e, DialogTrigger as Ge, Button as $, Popover as je, Dialog as qe, DateField as te, Label as ne, Group as re, DateInput as se, DateSegment as ie, RangeCalendar as He, Heading as Ke, CalendarGrid as Ue, CalendarCell as Ze, I18nProvider as _e, RangeCalendarStateContext as Je } from "react-aria-components";
+import { createDateRangePresets as Me } from "./dateRangePresets.js";
 /* empty css                    */
 import { IconCalendar as G } from "../../icons/IconCalendar.js";
-import { IconChevronDown as Ue } from "../../icons/IconChevronDown.js";
+import { IconChevronDown as Qe } from "../../icons/IconChevronDown.js";
 import { TextSmallStrong as le, Text as We } from "../Text/Text.js";
 import { IconCheck as Xe } from "../../icons/IconCheck.js";
 import { IconChevronLeft as Ye } from "../../icons/IconChevronLeft.js";
-import { IconChevronRight as _e } from "../../icons/IconChevronRight.js";
-import { Field as ea, Label as aa, Description as ta } from "../Fieldset/Fieldset.js";
-import { ListBox as na, ListBoxItem as ra } from "../ListBox/ListBox.js";
+import { IconChevronRight as ea } from "../../icons/IconChevronRight.js";
+import { useOverlayPortalContainer as aa } from "../../hooks/useOverlayPortal.js";
+import { Field as ta, Label as na, Description as ra } from "../Fieldset/Fieldset.js";
+import { ListBox as sa, ListBoxItem as ia } from "../ListBox/ListBox.js";
 import { Button as ce } from "../Button/Button.js";
 const j = () => new q(0, 0, 0), oe = () => new q(23, 59, 59);
-function sa({
+function la({
   onAnchorChange: a
 }) {
-  const l = Oe(Me), c = (l == null ? void 0 : l.anchorDate) ?? null, p = c == null ? void 0 : c.toString();
+  const l = Ve(Je), c = (l == null ? void 0 : l.anchorDate) ?? null, p = c == null ? void 0 : c.toString();
   return me(() => {
     a(c);
   }, [p]), null;
@@ -31,8 +32,8 @@ const N = (a) => a && "hour" in a ? new q(a.hour, a.minute, a.second) : null, de
 }, m = (a, l, c) => {
   if (!a) return null;
   const p = h(a);
-  return c || !l ? p : Pe(p, l);
-}, ia = (a, l) => {
+  return c || !l ? p : Ae(p, l);
+}, ca = (a, l) => {
   var c, p;
   return {
     preset: a.preset,
@@ -40,7 +41,7 @@ const N = (a) => a && "hour" in a ? new q(a.hour, a.minute, a.second) : null, de
     end: m((p = a.range) == null ? void 0 : p.end, a.endTime, l)
   };
 };
-function ya({
+function xa({
   className: a,
   locale: l,
   label: c,
@@ -52,54 +53,54 @@ function ya({
   presetKeys: B,
   presetLabels: I,
   hideTime: i = !1,
-  minValue: F,
-  maxValue: R,
+  minValue: E,
+  maxValue: F,
   timezone: ge,
   isDisabled: he = !1,
   isRequired: fe = !1,
   value: y,
   defaultValue: ue,
-  onChange: E
+  onChange: P
 }) {
-  var _, ee;
-  const { locale: ke } = Ve(), P = l ?? ke ?? "pt-BR", z = ge ?? Ee(), {
+  var Y, ee;
+  const ke = aa(), { locale: Ne } = $e(), R = l ?? Ne ?? "pt-BR", A = ge ?? Re(), {
     placeholder: K,
-    relativeLabel: Z,
-    absoluteLabel: J,
-    startDateLabel: Ne,
-    endDateLabel: Te,
-    cancelLabel: A,
-    applyLabel: O
-  } = pe, f = Ae(() => {
+    relativeLabel: U,
+    absoluteLabel: Z,
+    startDateLabel: Te,
+    endDateLabel: be,
+    cancelLabel: O,
+    applyLabel: z
+  } = pe, f = ze(() => {
     if (w) return w;
     if (B) {
       if (!I)
         throw new Error(
           "DateRangePicker: `presetLabels` is required when `presetKeys` is provided."
         );
-      return Qe({
-        locale: P,
-        timezone: z,
+      return Me({
+        locale: R,
+        timezone: A,
         include: B,
         labels: I
       });
     }
-  }, [w, B, I, P, z]), [d, M] = S(
+  }, [w, B, I, R, A]), [d, _] = S(
     () => de(y ?? ue)
-  ), [g, u] = S(d), [be, T] = S(null), [De, V] = S(!1);
+  ), [g, u] = S(d), [Ce, T] = S(null), [De, V] = S(!1);
   me(() => {
-    y !== void 0 && M(de(y));
+    y !== void 0 && _(de(y));
   }, [y]);
   const L = (e) => ({
     ...e,
     preset: void 0
-  }), Ce = (e) => i ? e : {
+  }), ve = (e) => i ? e : {
     ...e,
     startTime: e.startTime ?? j(),
     endTime: e.endTime ?? oe()
-  }, ve = (e) => {
-    e && (u(d), T(null)), V(e);
   }, ye = (e) => {
+    e && (u(d), T(null)), V(e);
+  }, Le = (e) => {
     T(null);
     const { start: n, end: o } = e.getValue();
     u({
@@ -108,58 +109,58 @@ function ya({
       endTime: N(o),
       preset: e
     });
-  }, Le = (e) => {
+  }, Se = (e) => {
     T(e), e && !i && u(
       (n) => L({
         ...n,
         startTime: n.startTime ?? j()
       })
     );
-  }, Se = (e) => {
-    T(null), u((n) => Ce(L({ ...n, range: e })));
   }, xe = (e) => {
+    T(null), u((n) => ve(L({ ...n, range: e })));
+  }, we = (e) => {
     if (!e) return;
     T(null);
     const n = h(e), o = N(e);
     u((r) => {
       var v, ae;
-      const k = i ? r.startTime : o ?? r.startTime ?? j(), b = m(n, k, i), D = m(
+      const k = i ? r.startTime : o ?? r.startTime ?? j(), b = m(n, k, i), C = m(
         (v = r.range) == null ? void 0 : v.end,
         r.endTime,
         i
-      ), C = !!(b && D && D.compare(b) < 0);
+      ), D = !!(b && C && C.compare(b) < 0);
       return L({
         ...r,
         range: {
           start: n,
-          end: C || !((ae = r.range) != null && ae.end) ? n : r.range.end
+          end: D || !((ae = r.range) != null && ae.end) ? n : r.range.end
         },
         startTime: k,
-        endTime: C ? k : r.endTime
+        endTime: D ? k : r.endTime
       });
     });
-  }, we = (e) => {
+  }, Be = (e) => {
     if (!e) return;
     const n = h(e), o = N(e);
     u((r) => {
-      var C, v;
-      const k = i ? r.endTime : o ?? r.endTime ?? oe(), b = m(n, k, i), D = m(
-        (C = r.range) == null ? void 0 : C.start,
+      var D, v;
+      const k = i ? r.endTime : o ?? r.endTime ?? oe(), b = m(n, k, i), C = m(
+        (D = r.range) == null ? void 0 : D.start,
         r.startTime,
         i
       );
-      return D && b && b.compare(D) < 0 ? r : L({
+      return C && b && b.compare(C) < 0 ? r : L({
         ...r,
         range: { start: ((v = r.range) == null ? void 0 : v.start) ?? n, end: n },
         endTime: k
       });
     });
-  }, Be = () => {
-    M(g), E == null || E(ia(g, i)), V(!1);
-  }, Ie = () => V(!1), Fe = !!(A || O), Q = (() => {
+  }, Ie = () => {
+    _(g), P == null || P(ca(g, i)), V(!1);
+  }, Ee = () => V(!1), Fe = !!(O || z), J = (() => {
     if (d.preset) return d.preset.label;
     if (d.range) {
-      const e = (r) => r.toDate(z).toLocaleString(P, {
+      const e = (r) => r.toDate(A).toLocaleString(R, {
         day: "2-digit",
         month: "2-digit",
         year: "numeric",
@@ -176,17 +177,17 @@ function ya({
       if (n && o) return `${e(n)} — ${e(o)}`;
     }
     return null;
-  })(), Re = !!(f && f.length > 0), U = i ? "day" : "second", W = m(
-    ((_ = g.range) == null ? void 0 : _.start) ?? be ?? void 0,
+  })(), Pe = !!(f && f.length > 0), M = i ? "day" : "second", Q = m(
+    ((Y = g.range) == null ? void 0 : Y.start) ?? Ce ?? void 0,
     g.startTime,
     i
-  ), X = m(
+  ), W = m(
     ((ee = g.range) == null ? void 0 : ee.end) ?? void 0,
     g.endTime,
     i
-  ), Y = /* @__PURE__ */ s(ea, { className: ze(a, "date-range-picker"), children: [
-    c && /* @__PURE__ */ t(aa, { children: c }),
-    /* @__PURE__ */ s($e, { isOpen: De, onOpenChange: ve, children: [
+  ), X = /* @__PURE__ */ s(ta, { className: Oe(a, "date-range-picker"), children: [
+    c && /* @__PURE__ */ t(na, { children: c }),
+    /* @__PURE__ */ s(Ge, { isOpen: De, onOpenChange: ye, children: [
       /* @__PURE__ */ s(
         $,
         {
@@ -203,145 +204,153 @@ function ya({
               "span",
               {
                 className: "date-range-picker-value",
-                "data-placeholder": Q ? void 0 : !0,
-                children: Q ?? K
+                "data-placeholder": J ? void 0 : !0,
+                children: J ?? K
               }
             ),
-            /* @__PURE__ */ t(Ue, { "aria-hidden": "true" })
+            /* @__PURE__ */ t(Qe, { "aria-hidden": "true" })
           ]
         }
       ),
-      /* @__PURE__ */ t(Ge, { className: "date-range-picker-popover", placement: "bottom start", children: /* @__PURE__ */ s(je, { className: "date-range-picker-dialog", children: [
-        /* @__PURE__ */ s("div", { className: "date-range-picker-body", children: [
-          Re && /* @__PURE__ */ s("div", { className: "date-range-picker-presets", children: [
-            /* @__PURE__ */ t(le, { className: "date-range-picker-section-title", children: Z }),
-            /* @__PURE__ */ t(
-              na,
-              {
-                "aria-label": Z,
-                className: "date-range-picker-presets-list",
-                selectionMode: "single",
-                selectedKeys: g.preset ? [g.preset.id] : [],
-                items: f,
-                onSelectionChange: (e) => {
-                  const [n] = [...e], o = f == null ? void 0 : f.find((r) => r.id === n);
-                  o && ye(o);
-                },
-                children: (e) => /* @__PURE__ */ s(
-                  ra,
+      /* @__PURE__ */ t(
+        je,
+        {
+          className: "date-range-picker-popover",
+          placement: "bottom start",
+          UNSTABLE_portalContainer: ke,
+          children: /* @__PURE__ */ s(qe, { className: "date-range-picker-dialog", children: [
+            /* @__PURE__ */ s("div", { className: "date-range-picker-body", children: [
+              Pe && /* @__PURE__ */ s("div", { className: "date-range-picker-presets", children: [
+                /* @__PURE__ */ t(le, { className: "date-range-picker-section-title", children: U }),
+                /* @__PURE__ */ t(
+                  sa,
                   {
-                    id: e.id,
-                    textValue: e.label,
-                    className: "date-range-picker-preset-item",
+                    "aria-label": U,
+                    className: "date-range-picker-presets-list",
+                    selectionMode: "single",
+                    selectedKeys: g.preset ? [g.preset.id] : [],
+                    items: f,
+                    onSelectionChange: (e) => {
+                      const [n] = [...e], o = f == null ? void 0 : f.find((r) => r.id === n);
+                      o && Le(o);
+                    },
+                    children: (e) => /* @__PURE__ */ s(
+                      ia,
+                      {
+                        id: e.id,
+                        textValue: e.label,
+                        className: "date-range-picker-preset-item",
+                        children: [
+                          /* @__PURE__ */ t("span", { children: e.label }),
+                          /* @__PURE__ */ t(
+                            Xe,
+                            {
+                              "aria-hidden": "true",
+                              className: "date-range-picker-preset-check"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { className: "date-range-picker-absolute", children: [
+                /* @__PURE__ */ t(le, { className: "date-range-picker-section-title", children: Z }),
+                /* @__PURE__ */ s("div", { className: "date-range-picker-fields", children: [
+                  /* @__PURE__ */ s(
+                    te,
+                    {
+                      className: "date-range-picker-datefield",
+                      granularity: M,
+                      value: Q,
+                      minValue: E,
+                      maxValue: W ?? F,
+                      onChange: we,
+                      children: [
+                        /* @__PURE__ */ t(ne, { className: "date-range-picker-field-label", children: Te }),
+                        /* @__PURE__ */ s(re, { className: "date-range-picker-input", children: [
+                          /* @__PURE__ */ t(se, { children: (e) => /* @__PURE__ */ t(ie, { segment: e }) }),
+                          /* @__PURE__ */ t(G, { "aria-hidden": "true" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    te,
+                    {
+                      className: "date-range-picker-datefield",
+                      granularity: M,
+                      value: W,
+                      minValue: Q ?? E,
+                      maxValue: F,
+                      onChange: Be,
+                      children: [
+                        /* @__PURE__ */ t(ne, { className: "date-range-picker-field-label", children: be }),
+                        /* @__PURE__ */ s(re, { className: "date-range-picker-input", children: [
+                          /* @__PURE__ */ t(se, { children: (e) => /* @__PURE__ */ t(ie, { segment: e }) }),
+                          /* @__PURE__ */ t(G, { "aria-hidden": "true" })
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ s(
+                  He,
+                  {
+                    className: "date-range-picker-calendar",
+                    "aria-label": Z,
+                    value: g.range,
+                    minValue: E,
+                    maxValue: F,
+                    onChange: xe,
                     children: [
-                      /* @__PURE__ */ t("span", { children: e.label }),
-                      /* @__PURE__ */ t(
-                        Xe,
+                      /* @__PURE__ */ t(la, { onAnchorChange: Se }),
+                      /* @__PURE__ */ s("header", { className: "date-range-picker-calendar-header", children: [
+                        /* @__PURE__ */ t(
+                          $,
+                          {
+                            slot: "previous",
+                            className: "date-range-picker-calendar-nav",
+                            children: /* @__PURE__ */ t(Ye, { "aria-hidden": "true" })
+                          }
+                        ),
+                        /* @__PURE__ */ t(Ke, { className: "date-range-picker-calendar-heading" }),
+                        /* @__PURE__ */ t(
+                          $,
+                          {
+                            slot: "next",
+                            className: "date-range-picker-calendar-nav",
+                            children: /* @__PURE__ */ t(ea, { "aria-hidden": "true" })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ t(Ue, { className: "date-range-picker-calendar-grid", children: (e) => /* @__PURE__ */ t(
+                        Ze,
                         {
-                          "aria-hidden": "true",
-                          className: "date-range-picker-preset-check"
+                          date: e,
+                          className: "date-range-picker-calendar-cell"
                         }
-                      )
+                      ) })
                     ]
                   }
                 )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ s("div", { className: "date-range-picker-absolute", children: [
-            /* @__PURE__ */ t(le, { className: "date-range-picker-section-title", children: J }),
-            /* @__PURE__ */ s("div", { className: "date-range-picker-fields", children: [
-              /* @__PURE__ */ s(
-                te,
-                {
-                  className: "date-range-picker-datefield",
-                  granularity: U,
-                  value: W,
-                  minValue: F,
-                  maxValue: X ?? R,
-                  onChange: xe,
-                  children: [
-                    /* @__PURE__ */ t(ne, { className: "date-range-picker-field-label", children: Ne }),
-                    /* @__PURE__ */ s(re, { className: "date-range-picker-input", children: [
-                      /* @__PURE__ */ t(se, { children: (e) => /* @__PURE__ */ t(ie, { segment: e }) }),
-                      /* @__PURE__ */ t(G, { "aria-hidden": "true" })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ s(
-                te,
-                {
-                  className: "date-range-picker-datefield",
-                  granularity: U,
-                  value: X,
-                  minValue: W ?? F,
-                  maxValue: R,
-                  onChange: we,
-                  children: [
-                    /* @__PURE__ */ t(ne, { className: "date-range-picker-field-label", children: Te }),
-                    /* @__PURE__ */ s(re, { className: "date-range-picker-input", children: [
-                      /* @__PURE__ */ t(se, { children: (e) => /* @__PURE__ */ t(ie, { segment: e }) }),
-                      /* @__PURE__ */ t(G, { "aria-hidden": "true" })
-                    ] })
-                  ]
-                }
-              )
+              ] })
             ] }),
-            /* @__PURE__ */ s(
-              qe,
-              {
-                className: "date-range-picker-calendar",
-                "aria-label": J,
-                value: g.range,
-                minValue: F,
-                maxValue: R,
-                onChange: Se,
-                children: [
-                  /* @__PURE__ */ t(sa, { onAnchorChange: Le }),
-                  /* @__PURE__ */ s("header", { className: "date-range-picker-calendar-header", children: [
-                    /* @__PURE__ */ t(
-                      $,
-                      {
-                        slot: "previous",
-                        className: "date-range-picker-calendar-nav",
-                        children: /* @__PURE__ */ t(Ye, { "aria-hidden": "true" })
-                      }
-                    ),
-                    /* @__PURE__ */ t(He, { className: "date-range-picker-calendar-heading" }),
-                    /* @__PURE__ */ t(
-                      $,
-                      {
-                        slot: "next",
-                        className: "date-range-picker-calendar-nav",
-                        children: /* @__PURE__ */ t(_e, { "aria-hidden": "true" })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ t(Ke, { className: "date-range-picker-calendar-grid", children: (e) => /* @__PURE__ */ t(
-                    Ze,
-                    {
-                      date: e,
-                      className: "date-range-picker-calendar-cell"
-                    }
-                  ) })
-                ]
-              }
-            )
+            Fe && /* @__PURE__ */ s("div", { className: "date-range-picker-actions", children: [
+              O && /* @__PURE__ */ t(ce, { variant: "neutral", size: "small", onPress: Ee, children: O }),
+              z && /* @__PURE__ */ t(ce, { variant: "primary", size: "small", onPress: Ie, children: z })
+            ] })
           ] })
-        ] }),
-        Fe && /* @__PURE__ */ s("div", { className: "date-range-picker-actions", children: [
-          A && /* @__PURE__ */ t(ce, { variant: "neutral", size: "small", onPress: Ie, children: A }),
-          O && /* @__PURE__ */ t(ce, { variant: "primary", size: "small", onPress: Be, children: O })
-        ] })
-      ] }) })
+        }
+      )
     ] }),
-    H && /* @__PURE__ */ t(ta, { children: H }),
+    H && /* @__PURE__ */ t(ra, { children: H }),
     x && /* @__PURE__ */ t(We, { className: "date-range-picker-error", elementType: "span", children: x })
   ] });
-  return l ? /* @__PURE__ */ t(Je, { locale: l, children: Y }) : Y;
+  return l ? /* @__PURE__ */ t(_e, { locale: l, children: X }) : X;
 }
 export {
-  ya as DateRangePicker
+  xa as DateRangePicker
 };
 //# sourceMappingURL=DateRangePicker.js.map