@epilot/zenith-react 0.1.0-next.1 → 0.2.0-next.0

package/dist/components/date-range-picker/date-range-picker.js

@@ -1,16 +1,16 @@
-import { jsxs as S, jsx as s } from "react/jsx-runtime";
-import * as r from "react";
-import { createElement as ae } from "react";
-import { SLOT_ATTR as c, mergeClasses as z, shorthands as l } from "@epilot/zenith-runtime/v1";
-import { Field as re, FieldLabel as se, FieldInputGroup as de, FieldGroupAddon as ie, FieldError as oe } from "../field/field.js";
-import { Button as pe } from "../button/button.js";
-import { Pill as le } from "../pill/pill.js";
-import { Popover as ce, PopoverTrigger as ge, PopoverContent as he } from "../popover/popover.js";
-import { makeZenithStyles as ue } from "../../styles/make-styles.js";
-import { gray6 as me, gray9 as Te, leadingSm as G, textSm as H, grayA8 as fe, grayA12 as Ce, spacingElement1 as qe, spacingGroup1 as ye, spacingElement2 as Se } from "../../tokens/index.js";
-import { RangeCalendar as ke } from "./range-calendar.js";
-import { formatDateTimeDisplay as d, parseDateTimeInput as b } from "../date-time-picker/date-time-picker-utils.js";
-const xe = (k) => /* @__PURE__ */ s(
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import * as a from "react";
+import { createElement as ie } from "react";
+import { SLOT_ATTR as c, mergeClasses as W, shorthands as p } from "@epilot/zenith-runtime/v1";
+import { Field as oe, FieldLabel as le, FieldInputGroup as pe, FieldGroupAddon as ce, FieldError as ue } from "../field/field.js";
+import { Button as ge } from "../button/button.js";
+import { Pill as he } from "../pill/pill.js";
+import { Popover as me, PopoverTrigger as fe, PopoverContent as Te } from "../popover/popover.js";
+import { makeZenithStyles as ye } from "../../styles/make-styles.js";
+import { gray6 as Ce, gray9 as qe, leadingSm as j, textSm as U, grayA8 as Se, grayA12 as be, spacingElement1 as ke, spacingGroup1 as Ie, spacingElement2 as xe } from "../../tokens/index.js";
+import { RangeCalendar as we } from "./range-calendar.js";
+import { formatDateTimeDisplay as d, parseDateTimeInput as E } from "../date-time-picker/date-time-picker-utils.js";
+const ve = (I) => /* @__PURE__ */ s(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -18,10 +18,10 @@ const xe = (k) => /* @__PURE__ */ s(
     viewBox: "0 -960 960 960",
     width: "18px",
     fill: "currentColor",
-    ...k,
+    ...I,
     children: /* @__PURE__ */ s("path", { d: "M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" })
   }
-), we = "dd/MM/yyyy", B = ue({
+), Re = "dd/MM/yyyy", J = ye({
   root: {
     width: "100%"
   },
@@ -46,7 +46,7 @@ const xe = (k) => /* @__PURE__ */ s(
   triggerRoot: {
     display: "flex",
     alignItems: "center",
-    ...l.gap(Se),
+    ...p.gap(xe),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
@@ -56,91 +56,96 @@ const xe = (k) => /* @__PURE__ */ s(
   input: {
     width: "5.5rem",
     outlineStyle: "none",
-    fontSize: H,
-    lineHeight: G,
-    color: Ce,
+    fontSize: U,
+    lineHeight: j,
+    color: be,
     backgroundColor: "transparent",
     textAlign: "center",
-    ...l.border("0"),
-    ...l.padding("0"),
+    ...p.border("0"),
+    ...p.padding("0"),
     "::placeholder": {
-      color: fe
+      color: Se
     },
     ":disabled": {
       cursor: "not-allowed"
     }
   },
   separator: {
-    fontSize: H,
-    lineHeight: G,
-    color: Te,
+    fontSize: U,
+    lineHeight: j,
+    color: qe,
     flexShrink: 0,
     userSelect: "none",
-    ...l.padding("0", "0.125rem")
+    ...p.padding("0", "0.125rem")
     // v1 px-0.5
   },
   popoverContent: {
-    ...l.overflow("hidden")
+    ...p.overflow("hidden")
   },
   content: {
     display: "flex",
     flexDirection: "row",
-    ...l.gap(ye),
-    ...l.padding("0.75rem")
+    ...p.gap(Ie),
+    ...p.padding("0.75rem")
     // v1 p-3 (0.75rem)
   },
   presets: {
     display: "flex",
     flexDirection: "column",
-    ...l.gap(qe),
+    ...p.gap(ke),
     width: "8rem",
     // v1 w-32
     borderLeftWidth: "1px",
     borderLeftStyle: "solid",
-    borderLeftColor: me,
+    borderLeftColor: Ce,
     paddingLeft: "0.75rem"
     // v1 pl-3 (0.75rem)
   },
   presetPill: {
     alignSelf: "flex-start"
   }
-}), be = r.forwardRef((k, t) => {
+}), Ee = a.forwardRef((I, t) => {
   const {
     startValue: o,
     endValue: i,
     startPlaceholder: x,
-    endPlaceholder: R,
-    disabled: f,
-    onStartChange: C,
-    onEndChange: I,
-    onStartBlur: v,
+    endPlaceholder: N,
+    disabled: g,
+    onStartChange: q,
+    onEndChange: P,
+    onStartBlur: V,
     onEndBlur: n,
     testId: e,
-    inputAriaLabel: E,
-    className: N,
-    "data-slot": O,
-    ...P
-  } = k, h = B();
-  return /* @__PURE__ */ S(
+    inputAriaLabel: Z,
+    startId: w,
+    endId: v,
+    labelId: h,
+    className: M,
+    "data-slot": H,
+    ...A
+  } = I, m = J();
+  return /* @__PURE__ */ k(
     "div",
     {
       ref: t,
-      ...P,
-      className: z(h.triggerRoot, N),
+      ...A,
+      className: W(m.triggerRoot, M),
       "data-slot": "date-range-input",
       [c]: "date-range-input",
       children: [
         /* @__PURE__ */ s(
           "input",
           {
-            "aria-label": E || "Start date",
-            className: h.input,
+            "aria-label": Z || "Start date",
+            id: w,
+            "aria-labelledby": h ? `${h} ${w}` : void 0,
+            className: m.input,
             "data-slot": "date-range-start-input",
             [c]: "date-range-start-input",
             "data-testid": e ? `${e}-start` : void 0,
-            disabled: f,
-            onBlur: v,
-            onChange: C,
+            disabled: g,
+            onBlur: V,
+            onChange: q,
             placeholder: x,
             value: o
           }
@@ -148,7 +153,7 @@ const xe = (k) => /* @__PURE__ */ s(
         /* @__PURE__ */ s(
           "span",
           {
-            className: h.separator,
+            className: m.separator,
             "data-slot": "date-range-separator",
             [c]: "date-range-separator",
             children: "–"
@@ -158,215 +163,227 @@ const xe = (k) => /* @__PURE__ */ s(
           "input",
           {
             "aria-label": "End date",
-            className: h.input,
+            id: v,
+            "aria-labelledby": h ? `${h} ${v}` : void 0,
+            className: m.input,
             "data-slot": "date-range-end-input",
             [c]: "date-range-end-input",
             "data-testid": e ? `${e}-end` : void 0,
-            disabled: f,
+            disabled: g,
             onBlur: n,
-            onChange: I,
-            placeholder: R,
+            onChange: P,
+            placeholder: N,
             value: i
           }
         )
       ]
     }
   );
-}), Le = r.forwardRef(function({
+}), $e = a.forwardRef(function({
   value: t,
   onChange: o,
   onBlur: i,
   disabled: x = !1,
-  disablePast: R = !1,
-  label: f,
-  error: C,
-  startPlaceholder: I = "dd/MM/yyyy",
-  endPlaceholder: v = "dd/MM/yyyy",
-  format: n = we,
+  disablePast: N = !1,
+  label: g,
+  error: q,
+  startPlaceholder: P = "dd/MM/yyyy",
+  endPlaceholder: V = "dd/MM/yyyy",
+  format: n = Re,
   locale: e = "de",
-  className: E,
-  keyboardIcon: N,
-  inputAriaLabel: O,
-  openPickerAriaLabel: P = "Open date picker",
-  previousMonthLabel: h = "Previous month",
-  nextMonthLabel: _ = "Next month",
-  testId: j,
-  currentTimeInTimezone: $,
-  showWeekNumbers: U = !1,
-  presets: V
-}, W) {
-  const p = B(), [Z, M] = r.useState(!1), [A, u] = r.useState(
+  className: Z,
+  keyboardIcon: w,
+  inputAriaLabel: v,
+  openPickerAriaLabel: h = "Open date picker",
+  previousMonthLabel: M = "Previous month",
+  nextMonthLabel: H = "Next month",
+  testId: A,
+  currentTimeInTimezone: m,
+  showWeekNumbers: K = !1,
+  presets: D
+}, Q) {
+  const l = J(), [F, L] = a.useState(!1), [O, f] = a.useState(
     () => t.start ? d(t.start, n, e) : ""
-  ), [D, m] = r.useState(
+  ), [G, T] = a.useState(
     () => t.end ? d(t.end, n, e) : ""
-  ), [w, q] = r.useState(t), T = r.useRef(t);
-  r.useEffect(() => {
-    u(
+  ), [R, S] = a.useState(t), y = a.useRef(t), C = a.useRef(
+    void 0
+  );
+  a.useEffect(
+    () => () => {
+      C.current !== void 0 && clearTimeout(C.current);
+    },
+    []
+  ), a.useEffect(() => {
+    f(
       t.start ? d(t.start, n, e) : ""
-    ), m(
+    ), T(
       t.end ? d(t.end, n, e) : ""
-    ), q(t);
-  }, [t, n, e]), r.useEffect(() => {
-    Z && (T.current = t, q(t));
-  }, [Z, t]);
-  const J = r.useCallback(
-    (a) => {
-      const g = a.target.value;
-      u(g);
-      const y = b(g, n, e);
-      if (y) {
-        const L = { ...t, start: y };
-        o(L);
+    ), S(t);
+  }, [t, n, e]), a.useEffect(() => {
+    F && (y.current = t, S(t));
+  }, [F, t]);
+  const X = a.useCallback(
+    (r) => {
+      const u = r.target.value;
+      f(u);
+      const b = E(u, n, e);
+      if (b) {
+        const $ = { ...t, start: b };
+        o($);
       }
     },
     [o, t, n, e]
-  ), K = r.useCallback(
-    (a) => {
-      const g = a.target.value;
-      m(g);
-      const y = b(g, n, e);
-      if (y) {
-        const L = { ...t, end: y };
-        o(L);
+  ), Y = a.useCallback(
+    (r) => {
+      const u = r.target.value;
+      T(u);
+      const b = E(u, n, e);
+      if (b) {
+        const $ = { ...t, end: b };
+        o($);
       }
     },
     [o, t, n, e]
-  ), Q = r.useCallback(() => {
-    b(A, n, e) || u(
+  ), ee = a.useCallback(() => {
+    E(O, n, e) || f(
       t.start ? d(t.start, n, e) : ""
     ), i == null || i();
-  }, [A, t.start, n, e, i]), X = r.useCallback(() => {
-    b(D, n, e) || m(
+  }, [O, t.start, n, e, i]), te = a.useCallback(() => {
+    E(G, n, e) || T(
       t.end ? d(t.end, n, e) : ""
     ), i == null || i();
-  }, [D, t.end, n, e, i]), Y = r.useCallback(
-    (a) => {
-      q(a), u(
-        a.start ? d(a.start, n, e) : ""
-      ), m(
-        a.end ? d(a.end, n, e) : ""
+  }, [G, t.end, n, e, i]), ne = a.useCallback(
+    (r) => {
+      S(r), f(
+        r.start ? d(r.start, n, e) : ""
+      ), T(
+        r.end ? d(r.end, n, e) : ""
       );
     },
     [n, e]
-  ), F = r.useCallback(
-    (a) => {
-      o(a), q(a), u(
-        a.start ? d(a.start, n, e) : ""
-      ), m(
-        a.end ? d(a.end, n, e) : ""
-      ), setTimeout(() => {
-        M(!1);
+  ), z = a.useCallback(
+    (r) => {
+      o(r), S(r), f(
+        r.start ? d(r.start, n, e) : ""
+      ), T(
+        r.end ? d(r.end, n, e) : ""
+      ), C.current !== void 0 && clearTimeout(C.current), C.current = setTimeout(() => {
+        C.current = void 0, L(!1);
       }, 150);
     },
     [o, n, e]
-  ), ee = r.useCallback(
-    (a) => {
-      a || (!w.start || !w.end) && (q(T.current), u(
-        T.current.start ? d(
-          T.current.start,
+  ), re = a.useCallback(
+    (r) => {
+      r || (!R.start || !R.end) && (S(y.current), f(
+        y.current.start ? d(
+          y.current.start,
           n,
           e
         ) : ""
-      ), m(
-        T.current.end ? d(
-          T.current.end,
+      ), T(
+        y.current.end ? d(
+          y.current.end,
           n,
           e
         ) : ""
-      )), M(a);
+      )), L(r);
     },
-    [w, n, e]
-  ), te = N || /* @__PURE__ */ s(xe, {}), ne = C ? "destructive" : "highlight";
-  return /* @__PURE__ */ S(
-    re,
+    [R, n, e]
+  ), ae = w || /* @__PURE__ */ s(ve, {}), se = q ? "destructive" : "highlight", B = a.useId(), _ = a.useId(), de = a.useId();
+  return /* @__PURE__ */ k(
+    oe,
     {
-      className: z(p.root, E),
+      className: W(l.root, Z),
       "data-slot": "daterangepicker",
       [c]: "daterangepicker",
-      ref: W,
-      variant: ne,
+      ref: Q,
+      variant: se,
       children: [
-        f && /* @__PURE__ */ s(se, { children: f }),
-        /* @__PURE__ */ S(ce, { modal: !0, onOpenChange: ee, open: Z, children: [
-          /* @__PURE__ */ S(de, { className: p.inputGroup, children: [
-            /* @__PURE__ */ s(ge, { asChild: !0, className: p.popoverTrigger, children: /* @__PURE__ */ s(
-              be,
+        g && /* @__PURE__ */ s(le, { id: B, htmlFor: _, children: g }),
+        /* @__PURE__ */ k(me, { modal: !0, onOpenChange: re, open: F, children: [
+          /* @__PURE__ */ k(pe, { className: l.inputGroup, children: [
+            /* @__PURE__ */ s(fe, { asChild: !0, className: l.popoverTrigger, children: /* @__PURE__ */ s(
+              Ee,
               {
                 disabled: x,
-                endPlaceholder: v,
-                endValue: D,
-                inputAriaLabel: O,
-                onEndBlur: X,
-                onEndChange: K,
-                onStartBlur: Q,
-                onStartChange: J,
-                startPlaceholder: I,
-                startValue: A,
-                testId: j
+                endPlaceholder: V,
+                endValue: G,
+                inputAriaLabel: v,
+                startId: _,
+                endId: de,
+                labelId: g ? B : void 0,
+                onEndBlur: te,
+                onEndChange: Y,
+                onStartBlur: ee,
+                onStartChange: X,
+                startPlaceholder: P,
+                startValue: O,
+                testId: A
               }
             ) }),
-            /* @__PURE__ */ s(ie, { align: "end", children: /* @__PURE__ */ s(
-              pe,
+            /* @__PURE__ */ s(ce, { align: "end", children: /* @__PURE__ */ s(
+              ge,
               {
-                "aria-label": P,
+                "aria-label": h,
                 disabled: x,
-                onClick: () => M(!0),
-                className: p.addonButton,
+                onClick: () => L(!0),
+                className: l.addonButton,
                 size: "icon-sm",
                 variant: "tertiary",
-                children: te
+                children: ae
               }
             ) })
           ] }),
           /* @__PURE__ */ s(
-            he,
+            Te,
             {
               align: "start",
-              className: p.popoverContent,
+              className: l.popoverContent,
               flush: !0,
               side: "bottom",
               sideOffset: 4,
-              children: /* @__PURE__ */ S(
+              children: /* @__PURE__ */ k(
                 "div",
                 {
-                  className: p.content,
+                  className: l.content,
                   "data-slot": "daterangepicker-content",
                   [c]: "daterangepicker-content",
                   children: [
                     /* @__PURE__ */ s(
-                      ke,
+                      we,
                       {
-                        currentTimeInTimezone: $,
-                        disablePast: R,
+                        currentTimeInTimezone: m,
+                        disablePast: N,
                         locale: e,
-                        nextMonthLabel: _,
-                        onChange: Y,
-                        onRangeComplete: F,
-                        previousMonthLabel: h,
-                        showWeekNumbers: U,
-                        value: w
+                        nextMonthLabel: H,
+                        onChange: ne,
+                        onRangeComplete: z,
+                        previousMonthLabel: M,
+                        showWeekNumbers: K,
+                        value: R
                       }
                     ),
-                    V && V.length > 0 && /* @__PURE__ */ s(
+                    D && D.length > 0 && /* @__PURE__ */ s(
                       "aside",
                       {
-                        className: p.presets,
+                        className: l.presets,
                         "data-slot": "daterangepicker-presets",
                         [c]: "daterangepicker-presets",
-                        children: V.map((a) => /* @__PURE__ */ ae(
-                          le,
+                        children: D.map((r) => /* @__PURE__ */ ie(
+                          he,
                           {
-                            className: p.presetPill,
+                            className: l.presetPill,
                             "data-slot": "daterangepicker-preset",
                             [c]: "daterangepicker-preset",
-                            key: a.label,
+                            key: r.label,
                             onClick: () => {
-                              const g = a.getValue();
-                              F(g);
+                              const u = r.getValue();
+                              z(u);
                             },
                             variant: "surface"
                           },
-                          a.label
+                          r.label
                         ))
                       }
                     )
@@ -376,13 +393,13 @@ const xe = (k) => /* @__PURE__ */ s(
             }
           )
         ] }),
-        C && /* @__PURE__ */ s(oe, { children: C })
+        q && /* @__PURE__ */ s(ue, { children: q })
       ]
     }
   );
 });
 export {
-  Le as DateRangePicker,
-  ke as RangeCalendar
+  $e as DateRangePicker,
+  we as RangeCalendar
 };
 //# sourceMappingURL=date-range-picker.js.map