@cognite/aura 0.3.0 → 0.3.2

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
 };

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

@@ -21,7 +21,7 @@ export interface UseDateTimeRangePickerReturn {
     tempEndMinute: number;
     startAmPm: 'AM' | 'PM';
     endAmPm: 'AM' | 'PM';
-    handleTogglePopover: () => void;
+    handleOpenChange: (open: boolean) => void;
     handleSetStep: (step: RangeSelectionStep) => void;
     handleDateClick: (date: Dayjs) => void;
     handleMonthChange: (month: Dayjs) => void;
@@ -34,7 +34,6 @@ export interface UseDateTimeRangePickerReturn {
     handleEndAmPmChange: (value: 'AM' | 'PM') => void;
     handleNext: () => void;
     handleApply: () => void;
-    handleCancel: () => void;
     handleBack: () => void;
     handleApplyShortcut: (range: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
     popoverRef: React.RefObject<HTMLDivElement>;

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

@@ -1,161 +1,148 @@
-import { useRef as U, useCallback as n, useEffect as F } from "react";
-import le from "dayjs";
-import { DEFAULT_MINUTE as g, START_OF_DAY_HOUR as A, END_OF_DAY_MINUTE as T, END_OF_DAY_HOUR as D } from "../shared/constants.js";
-import { usePopoverState as pe } from "../shared/hooks/use-popover-state.js";
-import { useRangeDateState as fe } from "../shared/hooks/use-range-date-state.js";
-import { useRangeStepManager as Se } from "../shared/hooks/use-range-step-manager.js";
-import { useTimeState as I } from "../shared/hooks/use-time-state.js";
-function ge(t) {
-  return t.hour(A).minute(g);
+import { useRef as mt, useCallback as n, useEffect as ut } from "react";
+import ht from "dayjs";
+import { DEFAULT_MINUTE as f, START_OF_DAY_HOUR as S, END_OF_DAY_MINUTE as A, END_OF_DAY_HOUR as D } from "../shared/constants.js";
+import { usePopoverState as ct } from "../shared/hooks/use-popover-state.js";
+import { useRangeDateState as dt } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as lt } from "../shared/hooks/use-range-step-manager.js";
+import { useTimeState as _ } from "../shared/hooks/use-time-state.js";
+function pt(e) {
+  return e.hour(S).minute(f);
 }
-function Ae(t) {
-  return t.hour(D).minute(T);
+function ft(e) {
+  return e.hour(D).minute(A);
 }
-const Re = ({
-  value: t,
+const gt = ({
+  value: e,
   onChange: r,
   timeFormat: M = "24h",
-  defaultDate: Y = le()
+  defaultDate: y = ht()
 }) => {
-  const C = U(() => {
-  }), E = U(() => {
-  }), {
-    isOpen: h,
-    setIsOpen: o,
-    popoverRef: w,
-    inputRef: x,
-    handleTogglePopover: H
-  } = pe({
-    onClose: n(() => C.current(), []),
+  const E = mt(() => {
+  }), { isOpen: B, setIsOpen: s, popoverRef: N, inputRef: U } = ct({
     onBackspace: n(() => E.current(), [])
-  }), b = Se(), { step: m, handleNext: d, handleBack: a, resetStep: P } = b, j = fe({
-    value: t,
-    defaultDate: Y,
-    mapDate: (e, i) => i === "start" ? ge(e) : Ae(e)
+  }), F = lt(), { step: i, handleNext: h, handleBack: a, resetStep: H } = F, I = dt({
+    value: e,
+    defaultDate: y,
+    mapDate: (t, o) => o === "start" ? pt(t) : ft(t)
   }), {
-    tempStart: L,
-    tempEnd: q,
-    displayedMonth: z,
-    hoverDate: G,
-    stateRef: u,
-    handleDateClick: R,
-    handleDateHover: J,
-    handleMonthChange: K,
-    clearActiveSegment: k,
-    resetDates: c
-  } = j, Q = I({
-    initialHour: t[0]?.hour() ?? A,
-    initialMinute: t[0]?.minute() ?? g,
+    tempStart: Y,
+    tempEnd: w,
+    displayedMonth: x,
+    hoverDate: b,
+    stateRef: m,
+    handleDateClick: T,
+    handleDateHover: j,
+    handleMonthChange: L,
+    clearActiveSegment: g,
+    resetDates: u
+  } = I, q = _({
+    initialHour: e[0]?.hour() ?? S,
+    initialMinute: e[0]?.minute() ?? f,
     timeFormat: M
   }), {
-    hour: W,
-    minute: l,
-    amPm: X,
-    hour24: O,
-    handleHourChange: Z,
-    handleMinuteChange: $,
-    handleAmPmChange: v,
-    resetTime: _
-  } = Q, V = I({
-    initialHour: t[1]?.hour() ?? D,
-    initialMinute: t[1]?.minute() ?? T,
+    hour: z,
+    minute: c,
+    amPm: G,
+    hour24: C,
+    handleHourChange: J,
+    handleMinuteChange: K,
+    handleAmPmChange: Q,
+    resetTime: O
+  } = q, W = _({
+    initialHour: e[1]?.hour() ?? D,
+    initialMinute: e[1]?.minute() ?? A,
     timeFormat: M
   }), {
-    hour: ee,
-    minute: p,
-    amPm: te,
-    hour24: y,
-    handleHourChange: ne,
-    handleMinuteChange: re,
-    handleAmPmChange: oe,
-    resetTime: B
-  } = V, s = n(() => {
-    c(t), P(), _(
-      t[0]?.hour() ?? A,
-      t[0]?.minute() ?? g
-    ), B(
-      t[1]?.hour() ?? D,
-      t[1]?.minute() ?? T
+    hour: X,
+    minute: d,
+    amPm: Z,
+    hour24: k,
+    handleHourChange: $,
+    handleMinuteChange: V,
+    handleAmPmChange: v,
+    resetTime: R
+  } = W, tt = n(() => {
+    u(e), H(), O(
+      e[0]?.hour() ?? S,
+      e[0]?.minute() ?? f
+    ), R(
+      e[1]?.hour() ?? D,
+      e[1]?.minute() ?? A
     );
-  }, [t, c, P, _, B]), N = n(() => {
-    const e = k(m);
-    e === null ? a() : e[0] === null && e[1] === null && r(e);
-  }, [k, m, a, r]);
-  F(() => {
-    C.current = s;
-  }, [s]), F(() => {
-    E.current = N;
-  }, [N]);
-  const ae = n(() => {
-    h || s(), H();
-  }, [h, H, s]), se = n(
-    (e) => {
-      e === "start" ? a() : d();
+  }, [e, u, H, O, R]), P = n(() => {
+    const t = g(i);
+    t === null ? a() : t[0] === null && t[1] === null && r(t);
+  }, [g, i, a, r]);
+  ut(() => {
+    E.current = P;
+  }, [P]);
+  const et = (t) => {
+    tt(), s(t);
+  }, nt = n(
+    (t) => {
+      t === "start" ? a() : h();
     },
-    [a, d]
-  ), ie = n(
-    (e) => {
-      R(e, m);
+    [a, h]
+  ), rt = n(
+    (t) => {
+      T(t, i);
     },
-    [R, m]
-  ), me = n(() => {
-    const { tempStart: e, tempEnd: i } = u.current;
-    if (e && i) {
-      const f = e.hour(O).minute(l).startOf("minute"), S = i.hour(y).minute(p).endOf("minute"), de = f.isAfter(S) ? [S, f] : [f, S];
-      r(de), o(!1);
+    [T, i]
+  ), at = n(() => {
+    const { tempStart: t, tempEnd: o } = m.current;
+    if (t && o) {
+      const l = t.hour(C).minute(c).startOf("minute"), p = o.hour(k).minute(d).endOf("minute"), it = l.isAfter(p) ? [p, l] : [l, p];
+      r(it), s(!1);
     }
   }, [
-    u,
-    O,
-    l,
-    y,
-    p,
+    m,
+    C,
+    c,
+    k,
+    d,
     r,
-    o
-  ]), ue = n(() => {
-    s(), o(!1);
-  }, [s, o]), ce = n(() => {
-    a(), c([u.current.tempStart, null]);
-  }, [a, c, u]), he = n(
-    (e) => {
-      const i = Array.isArray(e) ? e : [e, e];
-      r(i), o(!1);
+    s
+  ]), ot = n(() => {
+    a(), u([m.current.tempStart, null]);
+  }, [a, u, m]), st = n(
+    (t) => {
+      const o = Array.isArray(t) ? t : [t, t];
+      r(o), s(!1);
     },
-    [r, o]
+    [r, s]
   );
   return {
-    isOpen: h,
-    step: m,
-    displayedMonth: z,
-    tempStart: L,
-    tempEnd: q,
-    hoverDate: G,
-    tempStartHour: W,
-    tempStartMinute: l,
-    tempEndHour: ee,
-    tempEndMinute: p,
-    startAmPm: X,
-    endAmPm: te,
-    handleTogglePopover: ae,
-    handleSetStep: se,
-    handleDateClick: ie,
-    handleMonthChange: K,
-    handleDateHover: J,
-    handleStartHourChange: Z,
-    handleStartMinuteChange: $,
-    handleEndHourChange: ne,
-    handleEndMinuteChange: re,
-    handleStartAmPmChange: v,
-    handleEndAmPmChange: oe,
-    handleNext: d,
-    handleApply: me,
-    handleCancel: ue,
-    handleBack: ce,
-    handleApplyShortcut: he,
-    popoverRef: w,
-    inputRef: x
+    isOpen: B,
+    step: i,
+    displayedMonth: x,
+    tempStart: Y,
+    tempEnd: w,
+    hoverDate: b,
+    tempStartHour: z,
+    tempStartMinute: c,
+    tempEndHour: X,
+    tempEndMinute: d,
+    startAmPm: G,
+    endAmPm: Z,
+    handleOpenChange: et,
+    handleSetStep: nt,
+    handleDateClick: rt,
+    handleMonthChange: L,
+    handleDateHover: j,
+    handleStartHourChange: J,
+    handleStartMinuteChange: K,
+    handleEndHourChange: $,
+    handleEndMinuteChange: V,
+    handleStartAmPmChange: Q,
+    handleEndAmPmChange: v,
+    handleNext: h,
+    handleApply: at,
+    handleBack: ot,
+    handleApplyShortcut: st,
+    popoverRef: N,
+    inputRef: U
   };
 };
 export {
-  Re as useDateTimeRangePicker
+  gt as useDateTimeRangePicker
 };

package/dist/components/ui/core/date-time-pickers/index.d.ts

@@ -1,3 +1,7 @@
+export { DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+export { TimePicker } from './time-picker';
+export type { TimePickerProps } from './time-picker';
 export { DateRangePicker } from './date-range-picker';
 export type { DateRangePickerProps } from './date-range-picker';
 export { DateTimeRangePicker } from './date-time-range-picker';