@cognite/aura 0.3.2 → 0.3.3

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

@@ -1,88 +1,64 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-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: t,
-  defaultDate: m,
-  className: s
-}) => {
-  const {
-    isOpen: a,
-    step: r,
-    displayedMonth: v,
-    tempStart: o,
-    tempEnd: l,
-    hoverDate: f,
-    handleOpenChange: g,
-    handleDateClick: D,
-    handleMonthChange: u,
-    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: 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 {
-  z 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/use-date-range-picker.js

@@ -1,69 +1,61 @@
-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: S = P()
-}) => {
-  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: S,
-    onEndDateSelected: c(
-      (e, l) => {
-        t([e, l]), s(!1), a();
-      },
-      [t, s, a]
-    )
-  }), {
-    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) => {
-      M(e, n), n === "start" && d();
-    },
-    handleMonthChange: g,
-    handleDateHover: O,
-    handleSetStep: (e) => {
-      e === "start" ? o() : d();
-    },
-    handleApplyShortcut: (e) => {
-      const l = Array.isArray(e) ? e : [e, e];
-      t(l), s(!1), a();
-    },
-    inputRef: k,
-    popoverRef: u
-  };
-};
-export {
-  L 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,175 +1,119 @@
-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: H,
-  format: M = "DD/MM/YYYY HH:mm",
-  placeholder: D,
-  displayWeekNumber: S = !1,
-  shortcuts: c,
-  timeFormat: n = "24h",
-  defaultDate: A,
-  className: N
-}) => {
-  const {
-    isOpen: l,
-    step: t,
-    displayedMonth: T,
-    tempStart: r,
-    tempEnd: a,
-    hoverDate: y,
-    tempStartHour: i,
-    tempStartMinute: m,
-    tempEndHour: d,
-    tempEndMinute: h,
-    startAmPm: s,
-    endAmPm: u,
-    handleOpenChange: f,
-    handleSetStep: R,
-    handleDateClick: E,
-    handleMonthChange: w,
-    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: 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 [F, ee];
-  }, [
-    r,
-    a,
-    i,
-    m,
-    d,
-    h,
-    s,
-    u,
-    n
-  ]);
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      "data-slot": "date-time-range-picker",
-      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",
-              {
-                "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 {
-  be 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 };