@cognite/aura 0.3.2 → 0.3.4

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 "../../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

@@ -1,6 +1,7 @@
 import { Dayjs } from 'dayjs';
 import { RangeSelectionStep } from '../shared/hooks/use-range-step-manager';
-import { TimeFormat } from '../utils/format-utils';
+import { ShortcutValueDayjs } from '../shared/shortcuts-panel/shortcuts-panel';
+import { AmPm, TimeFormat } from '../utils/format-utils';
 export type { RangeSelectionStep };
 export interface UseDateTimeRangePickerProps {
     value: [Dayjs | null, Dayjs | null];
@@ -19,8 +20,8 @@ export interface UseDateTimeRangePickerReturn {
     tempStartMinute: number;
     tempEndHour: number;
     tempEndMinute: number;
-    startAmPm: 'AM' | 'PM';
-    endAmPm: 'AM' | 'PM';
+    startAmPm: AmPm;
+    endAmPm: AmPm;
     handleOpenChange: (open: boolean) => void;
     handleSetStep: (step: RangeSelectionStep) => void;
     handleDateClick: (date: Dayjs) => void;
@@ -30,12 +31,12 @@ export interface UseDateTimeRangePickerReturn {
     handleStartMinuteChange: (minute: number) => void;
     handleEndHourChange: (hour: number) => void;
     handleEndMinuteChange: (minute: number) => void;
-    handleStartAmPmChange: (value: 'AM' | 'PM') => void;
-    handleEndAmPmChange: (value: 'AM' | 'PM') => void;
+    handleStartAmPmChange: (value: AmPm) => void;
+    handleEndAmPmChange: (value: AmPm) => void;
     handleNext: () => void;
     handleApply: () => void;
     handleBack: () => void;
-    handleApplyShortcut: (range: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
+    handleApplyShortcut: (range: ShortcutValueDayjs) => void;
     popoverRef: React.RefObject<HTMLDivElement>;
     inputRef: React.RefObject<HTMLDivElement>;
 }

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

@@ -1,148 +1,107 @@
-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);
+import { usePopoverState as e } from "../shared/hooks/use-popover-state.js";
+import { useTimeState as t } from "../shared/hooks/use-time-state.js";
+import { useRangeDateState as n } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as r } from "../shared/hooks/use-range-step-manager.js";
+import { useCallback as i, useEffect as a, useRef as o } from "react";
+import s from "dayjs";
+//#region libs/aura/src/components/ui/core/date-time-pickers/date-time-range-picker/use-date-time-range-picker.ts
+function c(e) {
+	return e.hour(0).minute(0);
 }
-function ft(e) {
-  return e.hour(D).minute(A);
+function l(e) {
+	return e.hour(23).minute(59);
 }
-const gt = ({
-  value: e,
-  onChange: r,
-  timeFormat: M = "24h",
-  defaultDate: y = ht()
-}) => {
-  const E = mt(() => {
-  }), { isOpen: B, setIsOpen: s, popoverRef: N, inputRef: U } = ct({
-    onBackspace: n(() => E.current(), [])
-  }), 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: 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: 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: 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
-    );
-  }, [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, h]
-  ), rt = n(
-    (t) => {
-      T(t, i);
-    },
-    [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);
-    }
-  }, [
-    m,
-    C,
-    c,
-    k,
-    d,
-    r,
-    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, s]
-  );
-  return {
-    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 {
-  gt as useDateTimeRangePicker
+var u = ({ value: u, onChange: d, timeFormat: f = "24h", defaultDate: p = s() }) => {
+	let m = o(() => {}), { isOpen: h, setIsOpen: g, popoverRef: _, inputRef: v } = e({ onBackspace: i(() => m.current(), []) }), { step: y, handleNext: b, handleBack: x, resetStep: S } = r(), { tempStart: C, tempEnd: w, displayedMonth: T, hoverDate: E, stateRef: D, handleDateClick: O, handleDateHover: k, handleMonthChange: A, clearActiveSegment: j, resetDates: M } = n({
+		value: u,
+		defaultDate: p,
+		mapDate: (e, t) => t === "start" ? c(e) : l(e)
+	}), { hour: N, minute: P, amPm: F, hour24: I, handleHourChange: L, handleMinuteChange: R, handleAmPmChange: z, resetTime: B } = t({
+		initialHour: u[0]?.hour() ?? 0,
+		initialMinute: u[0]?.minute() ?? 0,
+		timeFormat: f
+	}), { hour: V, minute: H, amPm: U, hour24: W, handleHourChange: G, handleMinuteChange: K, handleAmPmChange: q, resetTime: J } = t({
+		initialHour: u[1]?.hour() ?? 23,
+		initialMinute: u[1]?.minute() ?? 59,
+		timeFormat: f
+	}), Y = i(() => {
+		M(u), S(), B(u[0]?.hour() ?? 0, u[0]?.minute() ?? 0), J(u[1]?.hour() ?? 23, u[1]?.minute() ?? 59);
+	}, [
+		u,
+		M,
+		S,
+		B,
+		J
+	]), X = i(() => {
+		let e = j(y);
+		e === null ? x() : e[0] === null && e[1] === null && d(e);
+	}, [
+		j,
+		y,
+		x,
+		d
+	]);
+	return a(() => {
+		m.current = X;
+	}, [X]), {
+		isOpen: h,
+		step: y,
+		displayedMonth: T,
+		tempStart: C,
+		tempEnd: w,
+		hoverDate: E,
+		tempStartHour: N,
+		tempStartMinute: P,
+		tempEndHour: V,
+		tempEndMinute: H,
+		startAmPm: F,
+		endAmPm: U,
+		handleOpenChange: (e) => {
+			Y(), g(e);
+		},
+		handleSetStep: i((e) => {
+			e === "start" ? x() : b();
+		}, [x, b]),
+		handleDateClick: i((e) => {
+			O(e, y);
+		}, [O, y]),
+		handleMonthChange: A,
+		handleDateHover: k,
+		handleStartHourChange: L,
+		handleStartMinuteChange: R,
+		handleEndHourChange: G,
+		handleEndMinuteChange: K,
+		handleStartAmPmChange: z,
+		handleEndAmPmChange: q,
+		handleNext: b,
+		handleApply: i(() => {
+			let { tempStart: e, tempEnd: t } = D.current;
+			if (e && t) {
+				let n = e.hour(I).minute(P).startOf("minute"), r = t.hour(W).minute(H).endOf("minute");
+				d(n.isAfter(r) ? [r, n] : [n, r]), g(!1);
+			}
+		}, [
+			D,
+			I,
+			P,
+			W,
+			H,
+			d,
+			g
+		]),
+		handleBack: i(() => {
+			x(), M([D.current.tempStart, null]);
+		}, [
+			x,
+			M,
+			D
+		]),
+		handleApplyShortcut: i((e) => {
+			d(Array.isArray(e) ? e : [e, e]), g(!1);
+		}, [d, g]),
+		popoverRef: _,
+		inputRef: v
+	};
 };
+//#endregion
+export { u as useDateTimeRangePicker };

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

@@ -7,4 +7,6 @@ export type { DateRangePickerProps } from './date-range-picker';
 export { DateTimeRangePicker } from './date-time-range-picker';
 export type { DateTimeRangePickerProps } from './date-time-range-picker';
 export type { ShortcutItem } from './date-time-range-picker';
-export type { TimeFormat } from './utils/format-utils';
+export type { AmPm, TimeFormat } from './utils/format-utils';
+export { Calendar } from '../calendar/calendar';
+export type { CalendarProps } from '../calendar/calendar';

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

@@ -1,10 +1,6 @@
-import { DatePicker as o } from "./date-picker/date-picker.js";
-import { DateRangePicker as i } from "./date-range-picker/date-range-picker.js";
-import { DateTimeRangePicker as a } from "./date-time-range-picker/date-time-range-picker.js";
-import { TimePicker as f } from "./time-picker/time-picker.js";
-export {
-  o as DatePicker,
-  i as DateRangePicker,
-  a as DateTimeRangePicker,
-  f as TimePicker
-};
+import { Calendar as e } from "../calendar/calendar.js";
+import { DatePicker as t } from "./date-picker/date-picker.js";
+import { TimePicker as n } from "./time-picker/time-picker.js";
+import { DateRangePicker as r } from "./date-range-picker/date-range-picker.js";
+import { DateTimeRangePicker as i } from "./date-time-range-picker/date-time-range-picker.js";
+export { e as Calendar, t as DatePicker, r as DateRangePicker, i as DateTimeRangePicker, n as TimePicker };

package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
+import { AmPm } from '../../utils/format-utils';
 export type AmPmScrollProps = {
-    value: 'AM' | 'PM' | null;
-    onChange: (value: 'AM' | 'PM') => void;
+    value: AmPm | null;
+    onChange: (value: AmPm) => void;
     className?: string;
 };
 export declare const AmPmScroll: FC<AmPmScrollProps>;