@cognite/aura 0.3.1 → 0.3.2

package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.js

@@ -1,99 +1,88 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { cn as N } from "../../../../../lib/utils.js";
-import { Popover as w, PopoverTrigger as Y, PopoverContent as T } from "../../popover/popover.js";
-import { Calendar as j } from "../shared/calendar/calendar.js";
-import { DateTimeInput as y } from "../shared/date-time-input/date-time-input.js";
-import { ShortcutsPanel as H } from "../shared/shortcuts-panel/shortcuts-panel.js";
-import { useDateRangePicker as O } from "./use-date-range-picker.js";
-const F = ({
-  value: t,
+import { cn as S } from "../../../../../lib/utils.js";
+import { Popover as M, PopoverTrigger as N, PopoverContent as w } from "../../popover/popover.js";
+import { Calendar as Y } from "../shared/calendar/calendar.js";
+import { DateTimeInput as O } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as j } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { useDateRangePicker as y } from "./use-date-range-picker.js";
+const z = ({
+  value: n,
   onChange: d,
   format: p = "DD/MM/YYYY",
   placeholder: c,
   displayWeekNumber: h = !1,
-  shortcuts: n,
+  shortcuts: t,
   defaultDate: m,
   className: s
 }) => {
   const {
     isOpen: a,
-    step: o,
+    step: r,
     displayedMonth: v,
-    tempStart: r,
+    tempStart: o,
     tempEnd: l,
     hoverDate: f,
-    handleTogglePopover: g,
-    handleCancel: C,
+    handleOpenChange: g,
     handleDateClick: D,
     handleMonthChange: u,
-    handleDateHover: k,
-    handleSetStep: P,
-    handleApplyShortcut: R,
-    inputRef: x,
-    popoverRef: S
-  } = O({ value: t, onChange: d, defaultDate: m });
+    handleDateHover: C,
+    handleSetStep: k,
+    handleApplyShortcut: P,
+    inputRef: R,
+    popoverRef: x
+  } = y({ value: n, onChange: d, defaultDate: m });
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "date-range-picker",
-      className: N("relative w-full", s),
-      children: /* @__PURE__ */ i(
-        w,
-        {
-          open: a,
-          onOpenChange: (M) => {
-            M || C();
-          },
-          children: [
-            /* @__PURE__ */ e(Y, { render: /* @__PURE__ */ e("div", { ref: x, className: "w-full" }), children: /* @__PURE__ */ e(
-              y,
-              {
-                value: a ? [r, l] : t,
-                format: p,
-                placeholder: c,
-                onClick: g,
-                isOpen: a,
-                variant: "date",
-                activeRangePart: a ? o : void 0,
-                onRangePartClick: a ? P : void 0
-              }
-            ) }),
-            /* @__PURE__ */ e(
-              T,
-              {
-                ref: S,
-                className: "rounded-xl w-auto p-0",
-                side: "bottom",
-                align: "start",
-                children: /* @__PURE__ */ i("div", { "data-slot": "date-range-picker-content", className: "flex flex-row", children: [
-                  n && n.length > 0 && /* @__PURE__ */ e(
-                    H,
-                    {
-                      shortcuts: n,
-                      onShortcutClick: R
-                    }
-                  ),
-                  /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(
-                    j,
-                    {
-                      displayedMonth: v,
-                      selectedRange: [r, l],
-                      hoverDate: o === "end" ? f : null,
-                      displayWeekNumber: h,
-                      onDateClick: D,
-                      onMonthChange: u,
-                      onDateHover: k
-                    }
-                  ) })
-                ] })
-              }
-            )
-          ]
-        }
-      )
+      className: S("relative w-full", s),
+      children: /* @__PURE__ */ i(M, { open: a, onOpenChange: g, children: [
+        /* @__PURE__ */ e(N, { render: /* @__PURE__ */ e("div", { ref: R, className: "w-full" }), children: /* @__PURE__ */ e(
+          O,
+          {
+            value: a ? [o, l] : n,
+            format: p,
+            placeholder: c,
+            isOpen: a,
+            variant: "date",
+            activeRangePart: a ? r : void 0,
+            onRangePartClick: a ? k : void 0
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            ref: x,
+            className: "rounded-xl w-auto p-0",
+            side: "bottom",
+            align: "start",
+            children: /* @__PURE__ */ i("div", { "data-slot": "date-range-picker-content", className: "flex flex-row", children: [
+              t && t.length > 0 && /* @__PURE__ */ e(
+                j,
+                {
+                  shortcuts: t,
+                  onShortcutClick: P
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(
+                Y,
+                {
+                  displayedMonth: v,
+                  selectedRange: [o, l],
+                  hoverDate: r === "end" ? f : null,
+                  displayWeekNumber: h,
+                  onDateClick: D,
+                  onMonthChange: u,
+                  onDateHover: C
+                }
+              ) })
+            ] })
+          }
+        )
+      ] })
     }
   );
 };
 export {
-  F as DateRangePicker
+  z as DateRangePicker
 };

package/dist/components/ui/core/date-time-pickers/date-range-picker/types.d.ts

@@ -13,8 +13,7 @@ export interface UseDateRangePickerReturn {
     tempStart: Dayjs | null;
     tempEnd: Dayjs | null;
     hoverDate: Dayjs | null;
-    handleTogglePopover: () => void;
-    handleCancel: () => void;
+    handleOpenChange: (open: boolean) => void;
     handleDateClick: (date: Dayjs) => void;
     handleMonthChange: (month: Dayjs) => void;
     handleDateHover: (date: Dayjs | null) => void;

package/dist/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.js

@@ -1,82 +1,69 @@
-import { useRef as k, useCallback as s, useEffect as g } from "react";
-import b from "dayjs";
-import { usePopoverState as j } from "../shared/hooks/use-popover-state.js";
-import { useRangeDateState as H } from "../shared/hooks/use-range-date-state.js";
-import { useRangeStepManager as I } from "../shared/hooks/use-range-step-manager.js";
-const U = ({
+import { useRef as E, useCallback as c, useEffect as x } from "react";
+import P from "dayjs";
+import { usePopoverState as b } from "../shared/hooks/use-popover-state.js";
+import { useRangeDateState as j } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as H } from "../shared/hooks/use-range-step-manager.js";
+const L = ({
   value: r,
   onChange: t,
-  defaultDate: D = b()
+  defaultDate: S = P()
 }) => {
-  const d = k(() => {
-  }), f = k(() => {
-  }), {
-    isOpen: i,
-    setIsOpen: a,
-    popoverRef: R,
-    inputRef: v,
-    handleTogglePopover: y
-  } = j({
-    onClose: s(() => d.current(), []),
-    onBackspace: s(() => f.current(), [])
-  }), A = I(), { step: o, handleBack: c, handleNext: h, resetStep: n } = A, C = H({
+  const p = E(() => {
+  }), { isOpen: m, setIsOpen: s, popoverRef: u, inputRef: k } = b({
+    onBackspace: c(() => p.current(), [])
+  }), D = H(), { step: n, handleBack: o, handleNext: d, resetStep: a } = D, R = j({
     value: r,
-    defaultDate: D,
-    onEndDateSelected: s(
-      (e, p) => {
-        t([e, p]), a(!1), n();
+    defaultDate: S,
+    onEndDateSelected: c(
+      (e, l) => {
+        t([e, l]), s(!1), a();
       },
-      [t, a, n]
+      [t, s, a]
     )
   }), {
-    tempStart: P,
-    tempEnd: B,
-    displayedMonth: M,
-    hoverDate: E,
-    handleDateClick: T,
-    handleDateHover: x,
-    handleMonthChange: O,
-    clearActiveSegment: u,
-    resetDates: S
-  } = C, l = s(() => {
-    S(r), n();
-  }, [S, n, r]), m = s(() => {
-    const e = u(o);
-    e === null ? c() : e[0] === null && e[1] === null && t(e);
-  }, [u, o, c, t]);
-  return g(() => {
-    d.current = l;
-  }, [l]), g(() => {
-    f.current = m;
-  }, [m]), {
-    isOpen: i,
-    step: o,
-    displayedMonth: M,
-    tempStart: P,
-    tempEnd: B,
-    hoverDate: E,
-    handleTogglePopover: () => {
-      i || l(), y();
-    },
-    handleCancel: () => {
-      l(), a(!1);
+    tempStart: y,
+    tempEnd: A,
+    displayedMonth: B,
+    hoverDate: C,
+    handleDateClick: M,
+    handleDateHover: O,
+    handleMonthChange: g,
+    clearActiveSegment: i,
+    resetDates: h
+  } = R, v = c(() => {
+    h(r), a();
+  }, [h, a, r]), f = c(() => {
+    const e = i(n);
+    e === null ? o() : e[0] === null && e[1] === null && t(e);
+  }, [i, n, o, t]);
+  return x(() => {
+    p.current = f;
+  }, [f]), {
+    isOpen: m,
+    step: n,
+    displayedMonth: B,
+    tempStart: y,
+    tempEnd: A,
+    hoverDate: C,
+    handleOpenChange: (e) => {
+      v(), s(e);
     },
     handleDateClick: (e) => {
-      T(e, o), o === "start" && h();
+      M(e, n), n === "start" && d();
     },
-    handleMonthChange: O,
-    handleDateHover: x,
+    handleMonthChange: g,
+    handleDateHover: O,
     handleSetStep: (e) => {
-      e === "start" ? c() : h();
+      e === "start" ? o() : d();
     },
     handleApplyShortcut: (e) => {
-      const p = Array.isArray(e) ? e : [e, e];
-      t(p), a(!1), n();
+      const l = Array.isArray(e) ? e : [e, e];
+      t(l), s(!1), a();
     },
-    inputRef: v,
-    popoverRef: R
+    inputRef: k,
+    popoverRef: u
   };
 };
 export {
-  U as useDateRangePicker
+  L as useDateRangePicker
 };

package/dist/components/ui/core/date-time-pickers/date-time-range-picker/date-time-range-picker.js

@@ -1,190 +1,175 @@
-import { jsx as e, jsxs as t, Fragment as te } from "react/jsx-runtime";
-import { useMemo as re } from "react";
-import { cn as ae } from "../../../../../lib/utils.js";
-import { Button as v } from "../../button/button.js";
-import { Popover as oe, PopoverTrigger as le, PopoverContent as ie } from "../../popover/popover.js";
-import { AmPmScroll as de } from "../shared/am-pm-scroll/am-pm-scroll.js";
-import { Calendar as ce } from "../shared/calendar/calendar.js";
-import { DateTimeInput as se } from "../shared/date-time-input/date-time-input.js";
-import { ShortcutsPanel as he } from "../shared/shortcuts-panel/shortcuts-panel.js";
-import { TimePickerScroll as f } from "../shared/time-picker-scroll/time-picker-scroll.js";
-import { convert12HourTo24Hour as C } from "../utils/time-utils.js";
-import { useDateTimeRangePicker as me } from "./use-date-time-range-picker.js";
-const He = ({
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useMemo as te } from "react";
+import { cn as ne } from "../../../../../lib/utils.js";
+import { Button as p } from "../../button/button.js";
+import { Popover as re, PopoverTrigger as ae, PopoverContent as oe } from "../../popover/popover.js";
+import { Calendar as le } from "../shared/calendar/calendar.js";
+import { DateTimeInput as ie } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as de } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { TimePickerPanel as k } from "../shared/time-picker-panel/time-picker-panel.js";
+import { convert12HourTo24Hour as b } from "../utils/time-utils.js";
+import { useDateTimeRangePicker as ce } from "./use-date-time-range-picker.js";
+const be = ({
   value: x,
-  onChange: P,
-  format: k = "DD/MM/YYYY HH:mm",
-  placeholder: b,
-  displayWeekNumber: N = !1,
+  onChange: H,
+  format: M = "DD/MM/YYYY HH:mm",
+  placeholder: D,
+  displayWeekNumber: S = !1,
   shortcuts: c,
-  timeFormat: r = "24h",
-  defaultDate: S,
-  className: H
+  timeFormat: n = "24h",
+  defaultDate: A,
+  className: N
 }) => {
   const {
     isOpen: l,
-    step: n,
-    displayedMonth: M,
-    tempStart: a,
-    tempEnd: o,
-    hoverDate: A,
+    step: t,
+    displayedMonth: T,
+    tempStart: r,
+    tempEnd: a,
+    hoverDate: y,
     tempStartHour: i,
-    tempStartMinute: s,
+    tempStartMinute: m,
     tempEndHour: d,
     tempEndMinute: h,
-    startAmPm: m,
-    endAmPm: p,
-    handleTogglePopover: D,
-    handleSetStep: y,
-    handleDateClick: T,
+    startAmPm: s,
+    endAmPm: u,
+    handleOpenChange: f,
+    handleSetStep: R,
+    handleDateClick: E,
     handleMonthChange: w,
-    handleDateHover: R,
-    handleStartHourChange: E,
-    handleStartMinuteChange: Y,
-    handleEndHourChange: j,
-    handleEndMinuteChange: B,
-    handleStartAmPmChange: O,
-    handleEndAmPmChange: W,
-    handleNext: I,
-    handleApply: L,
-    handleCancel: g,
-    handleBack: V,
-    handleApplyShortcut: q,
-    popoverRef: z,
-    inputRef: G
-  } = me({
+    handleDateHover: Y,
+    handleStartHourChange: j,
+    handleStartMinuteChange: B,
+    handleEndHourChange: O,
+    handleEndMinuteChange: W,
+    handleStartAmPmChange: I,
+    handleEndAmPmChange: L,
+    handleNext: V,
+    handleApply: q,
+    handleBack: z,
+    handleApplyShortcut: G,
+    popoverRef: J,
+    inputRef: K
+  } = ce({
     value: x,
-    onChange: P,
-    timeFormat: r,
-    defaultDate: S
-  }), J = n === "start" ? a !== null : o !== null, K = n === "start" ? "Next" : "Apply", Q = n === "start" ? I : L, U = n === "start" ? i : d, X = n === "start" ? s : h, Z = n === "start" ? m : p, _ = n === "start" ? E : j, $ = n === "start" ? Y : B, F = n === "start" ? O : W, ee = re(() => {
-    const u = a ? a.hour(
-      r === "12h" ? C(i, m) : i
-    ).minute(s) : null, ne = o ? o.hour(
-      r === "12h" ? C(d, p) : d
+    onChange: H,
+    timeFormat: n,
+    defaultDate: A
+  }), Q = t === "start" ? r !== null : a !== null, U = t === "start" ? "Next" : "Apply", X = t === "start" ? V : q, g = t === "start" ? i : d, v = t === "start" ? m : h, Z = t === "start" ? s : u, C = t === "start" ? j : O, P = t === "start" ? B : W, _ = t === "start" ? I : L, $ = te(() => {
+    const F = r ? r.hour(
+      n === "12h" ? b(i, s) : i
+    ).minute(m) : null, ee = a ? a.hour(
+      n === "12h" ? b(d, u) : d
     ).minute(h) : null;
-    return [u, ne];
+    return [F, ee];
   }, [
+    r,
     a,
-    o,
     i,
-    s,
+    m,
     d,
     h,
-    m,
-    p,
-    r
+    s,
+    u,
+    n
   ]);
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "date-time-range-picker",
-      className: ae("relative w-full", H),
-      children: /* @__PURE__ */ t(
-        oe,
-        {
-          open: l,
-          onOpenChange: (u) => {
-            u || g();
-          },
-          children: [
-            /* @__PURE__ */ e(le, { render: /* @__PURE__ */ e("div", { ref: G, className: "w-full" }), children: /* @__PURE__ */ e(
-              se,
-              {
-                value: ee,
-                format: k,
-                placeholder: b,
-                onClick: D,
-                isOpen: l,
-                variant: "datetime",
-                activeRangePart: l ? n : void 0,
-                onRangePartClick: l ? y : void 0
-              }
-            ) }),
-            /* @__PURE__ */ e(
-              ie,
+      className: ne("relative w-full", N),
+      children: /* @__PURE__ */ o(re, { open: l, onOpenChange: f, children: [
+        /* @__PURE__ */ e(ae, { render: /* @__PURE__ */ e("div", { ref: K, className: "w-full" }), children: /* @__PURE__ */ e(
+          ie,
+          {
+            value: $,
+            format: M,
+            placeholder: D,
+            isOpen: l,
+            variant: "datetime",
+            activeRangePart: l ? t : void 0,
+            onRangePartClick: l ? R : void 0
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          oe,
+          {
+            ref: J,
+            className: "rounded-xl w-auto p-0",
+            side: "bottom",
+            align: "start",
+            children: /* @__PURE__ */ o(
+              "div",
               {
-                ref: z,
-                className: "rounded-xl w-auto p-0",
-                side: "bottom",
-                align: "start",
-                children: /* @__PURE__ */ t(
-                  "div",
-                  {
-                    "data-slot": "date-time-range-picker-content",
-                    className: "flex flex-col",
-                    children: [
-                      /* @__PURE__ */ t("div", { className: "flex flex-row", children: [
-                        c && c.length > 0 && /* @__PURE__ */ e(
-                          he,
-                          {
-                            shortcuts: c,
-                            onShortcutClick: q
-                          }
-                        ),
-                        /* @__PURE__ */ e("div", { className: "p-3 border-r border-border", children: /* @__PURE__ */ e(
-                          ce,
-                          {
-                            displayedMonth: M,
-                            selectedRange: [a, o],
-                            hoverDate: n === "end" ? A : null,
-                            displayWeekNumber: N,
-                            onDateClick: T,
-                            onMonthChange: w,
-                            onDateHover: R
-                          }
-                        ) }),
-                        /* @__PURE__ */ t("div", { className: "flex items-stretch", children: [
-                          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
-                            f,
-                            {
-                              value: U,
-                              onChange: _,
-                              type: "hour",
-                              timeFormat: r
-                            }
-                          ) }),
-                          /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
-                          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
-                            f,
-                            {
-                              value: X,
-                              onChange: $,
-                              type: "minute"
-                            }
-                          ) }),
-                          r === "12h" && /* @__PURE__ */ t(te, { children: [
-                            /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
-                            /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(de, { value: Z, onChange: F }) })
-                          ] })
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ t("div", { className: "flex p-2 justify-between items-center self-stretch border-t border-border", children: [
-                        /* @__PURE__ */ e(v, { variant: "ghost", onClick: g, children: "Cancel" }),
-                        /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
-                          n === "end" && /* @__PURE__ */ e(v, { variant: "ghost", onClick: V, children: "Back" }),
-                          /* @__PURE__ */ e(
-                            v,
-                            {
-                              variant: "secondary",
-                              onClick: Q,
-                              disabled: !J,
-                              children: K
-                            }
-                          )
-                        ] })
-                      ] })
-                    ]
-                  }
-                )
+                "data-slot": "date-time-range-picker-content",
+                className: "flex flex-col",
+                children: [
+                  /* @__PURE__ */ o("div", { className: "flex flex-row", children: [
+                    c && c.length > 0 && /* @__PURE__ */ e(
+                      de,
+                      {
+                        shortcuts: c,
+                        onShortcutClick: G
+                      }
+                    ),
+                    /* @__PURE__ */ e("div", { className: "p-3 border-r border-border", children: /* @__PURE__ */ e(
+                      le,
+                      {
+                        displayedMonth: T,
+                        selectedRange: [r, a],
+                        hoverDate: t === "end" ? y : null,
+                        displayWeekNumber: S,
+                        onDateClick: E,
+                        onMonthChange: w,
+                        onDateHover: Y
+                      }
+                    ) }),
+                    n === "12h" ? /* @__PURE__ */ e(
+                      k,
+                      {
+                        hour: g,
+                        minute: v,
+                        amPm: Z,
+                        timeFormat: "12h",
+                        onHourChange: C,
+                        onMinuteChange: P,
+                        onAmPmChange: _
+                      }
+                    ) : /* @__PURE__ */ e(
+                      k,
+                      {
+                        hour: g,
+                        minute: v,
+                        timeFormat: "24h",
+                        onHourChange: C,
+                        onMinuteChange: P
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ o("div", { className: "flex p-2 justify-between items-center self-stretch border-t border-border", children: [
+                    /* @__PURE__ */ e(p, { variant: "ghost", onClick: () => f(!1), children: "Cancel" }),
+                    /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+                      t === "end" && /* @__PURE__ */ e(p, { variant: "ghost", onClick: z, children: "Back" }),
+                      /* @__PURE__ */ e(
+                        p,
+                        {
+                          variant: "secondary",
+                          onClick: X,
+                          disabled: !Q,
+                          children: U
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
               }
             )
-          ]
-        }
-      )
+          }
+        )
+      ] })
     }
   );
 };
 export {
-  He as DateTimeRangePicker
+  be as DateTimeRangePicker
 };