@cognite/aura 0.3.1 → 0.3.3

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

@@ -1,99 +1,64 @@
-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,
-  onChange: d,
-  format: p = "DD/MM/YYYY",
-  placeholder: c,
-  displayWeekNumber: h = !1,
-  shortcuts: n,
-  defaultDate: m,
-  className: s
-}) => {
-  const {
-    isOpen: a,
-    step: o,
-    displayedMonth: v,
-    tempStart: r,
-    tempEnd: l,
-    hoverDate: f,
-    handleTogglePopover: g,
-    handleCancel: C,
-    handleDateClick: D,
-    handleMonthChange: u,
-    handleDateHover: k,
-    handleSetStep: P,
-    handleApplyShortcut: R,
-    inputRef: x,
-    popoverRef: S
-  } = O({ value: t, 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
-                    }
-                  ) })
-                ] })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  F as DateRangePicker
+import { cn as e } from "../../../../../lib/utils.js";
+import { Popover as t, PopoverContent as n, PopoverTrigger as r } from "../../popover/popover.js";
+import { Calendar as i } from "../shared/calendar/calendar.js";
+import { DateTimeInput as a } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as o } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { useDateRangePicker as s } from "./use-date-range-picker.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.tsx
+var u = ({ value: u, onChange: d, format: f = "DD/MM/YYYY", placeholder: p, displayWeekNumber: m = !1, shortcuts: h, defaultDate: g, className: _ }) => {
+	let { isOpen: v, step: y, displayedMonth: b, tempStart: x, tempEnd: S, hoverDate: C, handleOpenChange: w, handleDateClick: T, handleMonthChange: E, handleDateHover: D, handleSetStep: O, handleApplyShortcut: k, inputRef: A, popoverRef: j } = s({
+		value: u,
+		onChange: d,
+		defaultDate: g
+	});
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "date-range-picker",
+		className: e("relative w-full", _),
+		children: /* @__PURE__ */ l(t, {
+			open: v,
+			onOpenChange: w,
+			children: [/* @__PURE__ */ c(r, {
+				render: /* @__PURE__ */ c("div", {
+					ref: A,
+					className: "w-full"
+				}),
+				children: /* @__PURE__ */ c(a, {
+					value: v ? [x, S] : u,
+					format: f,
+					placeholder: p,
+					isOpen: v,
+					variant: "date",
+					activeRangePart: v ? y : void 0,
+					onRangePartClick: v ? O : void 0
+				})
+			}), /* @__PURE__ */ c(n, {
+				ref: j,
+				className: "rounded-xl w-auto p-0",
+				side: "bottom",
+				align: "start",
+				children: /* @__PURE__ */ l("div", {
+					"data-slot": "date-range-picker-content",
+					className: "flex flex-row",
+					children: [h && h.length > 0 && /* @__PURE__ */ c(o, {
+						shortcuts: h,
+						onShortcutClick: k
+					}), /* @__PURE__ */ c("div", {
+						className: "p-3",
+						children: /* @__PURE__ */ c(i, {
+							displayedMonth: b,
+							selectedRange: [x, S],
+							hoverDate: y === "end" ? C : null,
+							displayWeekNumber: m,
+							onDateClick: T,
+							onMonthChange: E,
+							onDateHover: D
+						})
+					})]
+				})
+			})]
+		})
+	});
 };
+//#endregion
+export { u 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,61 @@
-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 = ({
-  value: r,
-  onChange: t,
-  defaultDate: D = b()
-}) => {
-  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({
-    value: r,
-    defaultDate: D,
-    onEndDateSelected: s(
-      (e, p) => {
-        t([e, p]), a(!1), n();
-      },
-      [t, a, n]
-    )
-  }), {
-    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);
-    },
-    handleDateClick: (e) => {
-      T(e, o), o === "start" && h();
-    },
-    handleMonthChange: O,
-    handleDateHover: x,
-    handleSetStep: (e) => {
-      e === "start" ? c() : h();
-    },
-    handleApplyShortcut: (e) => {
-      const p = Array.isArray(e) ? e : [e, e];
-      t(p), a(!1), n();
-    },
-    inputRef: v,
-    popoverRef: R
-  };
-};
-export {
-  U as useDateRangePicker
+import { usePopoverState as e } from "../shared/hooks/use-popover-state.js";
+import { useRangeDateState as t } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as n } from "../shared/hooks/use-range-step-manager.js";
+import { useCallback as r, useEffect as i, useRef as a } from "react";
+import o from "dayjs";
+//#region libs/aura/src/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.ts
+var s = ({ value: s, onChange: c, defaultDate: l = o() }) => {
+	let u = a(() => {}), { isOpen: d, setIsOpen: f, popoverRef: p, inputRef: m } = e({ onBackspace: r(() => u.current(), []) }), { step: h, handleBack: g, handleNext: _, resetStep: v } = n(), { tempStart: y, tempEnd: b, displayedMonth: x, hoverDate: S, handleDateClick: C, handleDateHover: w, handleMonthChange: T, clearActiveSegment: E, resetDates: D } = t({
+		value: s,
+		defaultDate: l,
+		onEndDateSelected: r((e, t) => {
+			c([e, t]), f(!1), v();
+		}, [
+			c,
+			f,
+			v
+		])
+	}), O = r(() => {
+		D(s), v();
+	}, [
+		D,
+		v,
+		s
+	]), k = r(() => {
+		let e = E(h);
+		e === null ? g() : e[0] === null && e[1] === null && c(e);
+	}, [
+		E,
+		h,
+		g,
+		c
+	]);
+	return i(() => {
+		u.current = k;
+	}, [k]), {
+		isOpen: d,
+		step: h,
+		displayedMonth: x,
+		tempStart: y,
+		tempEnd: b,
+		hoverDate: S,
+		handleOpenChange: (e) => {
+			O(), f(e);
+		},
+		handleDateClick: (e) => {
+			C(e, h), h === "start" && _();
+		},
+		handleMonthChange: T,
+		handleDateHover: w,
+		handleSetStep: (e) => {
+			e === "start" ? g() : _();
+		},
+		handleApplyShortcut: (e) => {
+			c(Array.isArray(e) ? e : [e, e]), f(!1), v();
+		},
+		inputRef: m,
+		popoverRef: p
+	};
 };
+//#endregion
+export { s as useDateRangePicker };

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

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