@cognite/aura 0.3.1 → 0.3.3

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

@@ -1,161 +1,107 @@
-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 { 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 Ae(t) {
-  return t.hour(D).minute(T);
+function l(e) {
+	return e.hour(23).minute(59);
 }
-const Re = ({
-  value: t,
-  onChange: r,
-  timeFormat: M = "24h",
-  defaultDate: Y = le()
-}) => {
-  const C = U(() => {
-  }), E = U(() => {
-  }), {
-    isOpen: h,
-    setIsOpen: o,
-    popoverRef: w,
-    inputRef: x,
-    handleTogglePopover: H
-  } = pe({
-    onClose: n(() => C.current(), []),
-    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)
-  }), {
-    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,
-    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,
-    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
-    );
-  }, [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();
-    },
-    [a, d]
-  ), ie = n(
-    (e) => {
-      R(e, m);
-    },
-    [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);
-    }
-  }, [
-    u,
-    O,
-    l,
-    y,
-    p,
-    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);
-    },
-    [r, o]
-  );
-  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
-  };
-};
-export {
-  Re 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

@@ -1,5 +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';

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

@@ -1,8 +1,5 @@
-import { DatePicker as o } from "./date-picker/date-picker.js";
-import { DateRangePicker as a } from "./date-range-picker/date-range-picker.js";
-import { DateTimeRangePicker as m } from "./date-time-range-picker/date-time-range-picker.js";
-export {
-  o as DatePicker,
-  a as DateRangePicker,
-  m as DateTimeRangePicker
-};
+import { DatePicker as e } from "./date-picker/date-picker.js";
+import { TimePicker as t } from "./time-picker/time-picker.js";
+import { DateRangePicker as n } from "./date-range-picker/date-range-picker.js";
+import { DateTimeRangePicker as r } from "./date-time-range-picker/date-time-range-picker.js";
+export { e as DatePicker, n as DateRangePicker, r as DateTimeRangePicker, t as TimePicker };

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

@@ -1,57 +1,43 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as s, useEffect as L } from "react";
-import { cn as l } from "../../../../../../lib/utils.js";
-import { SCROLL_ITEM_SELECTED_CLASSES as _, SCROLL_ITEM_UNSELECTED_CLASSES as C, SCROLL_ITEM_BASE_CLASSES as a, SCROLL_CONTAINER_CLASSES as d } from "../scroll-cell-classes.js";
-const A = ["AM", "PM"], p = ({
-  value: e,
-  onChange: c,
-  className: S
-}) => {
-  const r = s(null), n = s(null);
-  L(() => {
-    if (e !== null && n.current && r.current) {
-      const o = r.current, t = n.current;
-      o.scrollTo({
-        top: t.offsetTop - o.offsetHeight / 2 + t.offsetHeight / 2,
-        behavior: "smooth"
-      });
-    }
-  }, [e]);
-  const f = (o, t) => {
-    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), c(t));
-  };
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      "data-slot": "am-pm-scroll",
-      ref: r,
-      role: "listbox",
-      "aria-label": "AM/PM",
-      "aria-orientation": "vertical",
-      className: l(d, S),
-      children: A.map((o) => {
-        const t = e !== null && o === e;
-        return /* @__PURE__ */ i(
-          "div",
-          {
-            ref: t ? n : void 0,
-            tabIndex: 0,
-            className: l(
-              a,
-              t ? _ : C
-            ),
-            onClick: () => c(o),
-            onKeyDown: (E) => f(E, o),
-            role: "option",
-            "aria-selected": t,
-            children: o
-          },
-          o
-        );
-      })
-    }
-  );
-};
-export {
-  p as AmPmScroll
+import { cn as e } from "../../../../../../lib/utils.js";
+import { SCROLL_CONTAINER_CLASSES as t, SCROLL_ITEM_BASE_CLASSES as n, SCROLL_ITEM_SELECTED_CLASSES as r, SCROLL_ITEM_UNSELECTED_CLASSES as i } from "../scroll-cell-classes.js";
+import { useEffect as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.tsx
+var c = ["AM", "PM"], l = ({ value: l, onChange: u, className: d }) => {
+	let f = o(null), p = o(null);
+	a(() => {
+		if (l !== null && p.current && f.current) {
+			let e = f.current, t = p.current;
+			e.scrollTo({
+				top: t.offsetTop - e.offsetHeight / 2 + t.offsetHeight / 2,
+				behavior: "smooth"
+			});
+		}
+	}, [l]);
+	let m = (e, t) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u(t));
+	};
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "am-pm-scroll",
+		ref: f,
+		role: "listbox",
+		"aria-label": "AM/PM",
+		"aria-orientation": "vertical",
+		className: e(t, d),
+		children: c.map((t) => {
+			let a = l !== null && t === l;
+			return /* @__PURE__ */ s("div", {
+				ref: a ? p : void 0,
+				tabIndex: 0,
+				className: e(n, a ? r : i),
+				onClick: () => u(t),
+				onKeyDown: (e) => m(e, t),
+				role: "option",
+				"aria-selected": a,
+				children: t
+			}, t);
+		})
+	});
 };
+//#endregion
+export { l as AmPmScroll };

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

@@ -1,119 +1,68 @@
-import { jsxs as x, jsx as l } from "react/jsx-runtime";
-import C from "react";
-import { cn as b } from "../../../../../../lib/utils.js";
-import { getCalendarDays as _, getWeekdayNames as E, getWeekNumbers as O, isDateInRange as v, isSameDay as f, isToday as T, isOutsideMonth as B } from "../../utils/calendar-utils.js";
-import { CalendarHeader as K } from "../calendar-header/calendar-header.js";
-import { DAYS_IN_WEEK as p } from "../constants.js";
-function P({
-  isOutsideMonth: r,
-  isSelected: t,
-  isToday: s,
-  isRangeStart: o,
-  isRangeEnd: c,
-  isInRange: a,
-  isInHoverRange: i
-}) {
-  return b(
-    "w-9 h-9 flex items-center justify-center text-sm font-medium cursor-pointer select-none relative transition-colors",
-    "focus-visible:ring-2 focus-visible:ring-border focus-visible:outline-none",
-    // border-radius for range endpoints
-    o && c && "rounded-lg",
-    o && !c && "rounded-l-lg",
-    c && !o && "rounded-r-lg",
-    // selected day
-    t && "bg-primary-background text-foreground-on-primary hover:bg-primary-background",
-    // unselected text
-    !t && r && "text-muted-foreground/50",
-    !t && !r && (a || i) ? "text-foreground" : !t && !r && "text-secondary-foreground",
-    // range highlight
-    !t && (a || i) && "bg-accent-background",
-    !t && "hover:bg-accent-background hover:rounded-lg hover:text-foreground",
-    // today outline
-    s && !t && "border border-border rounded-lg"
-  );
+import { cn as e } from "../../../../../../lib/utils.js";
+import { getCalendarDays as t, getWeekNumbers as n, getWeekdayNames as r, isDateInRange as i, isOutsideMonth as a, isSameDay as o, isToday as s } from "../../utils/calendar-utils.js";
+import { CalendarHeader as c } from "../calendar-header/calendar-header.js";
+import l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/calendar/calendar.tsx
+function f({ isOutsideMonth: t, isSelected: n, isToday: r, isRangeStart: i, isRangeEnd: a, isInRange: o, isInHoverRange: s }) {
+	return e("w-9 h-9 flex items-center justify-center text-sm font-medium cursor-pointer select-none relative transition-colors", "focus-visible:ring-2 focus-visible:ring-border focus-visible:outline-none", i && a && "rounded-lg", i && !a && "rounded-l-lg", a && !i && "rounded-r-lg", n && "bg-primary-background text-foreground-on-primary hover:bg-primary-background", !n && t && "text-muted-foreground/50", !n && !t && (o || s) ? "text-foreground" : !n && !t && "text-secondary-foreground", !n && (o || s) && "bg-accent-background", !n && "hover:bg-accent-background hover:rounded-lg hover:text-foreground", r && !n && "border border-border rounded-lg");
 }
-const W = ({
-  displayedMonth: r,
-  selectedRange: t,
-  hoverDate: s,
-  displayWeekNumber: o = !1,
-  onDateClick: c,
-  onMonthChange: a,
-  onDateHover: i,
-  className: N
-}) => {
-  const [n, m] = t, h = _(r), M = E(), k = o ? O(h) : [], Y = () => {
-    a(r.subtract(1, "month"));
-  }, D = () => {
-    a(r.add(1, "month"));
-  }, w = (e) => {
-    const d = {
-      isOutsideMonth: B(e, r),
-      isToday: T(e),
-      isSelected: f(e, n) || f(e, m),
-      isRangeStart: f(e, n),
-      isRangeEnd: f(e, m),
-      isInRange: v(e, n, m),
-      isInHoverRange: !1
-    };
-    if (s && n && !m) {
-      const u = n.isBefore(s) ? n : s, g = n.isBefore(s) ? s : n;
-      d.isInHoverRange = v(e, u, g);
-    }
-    return d;
-  };
-  return /* @__PURE__ */ x("div", { "data-slot": "calendar", className: b("flex flex-col gap-4", N), children: [
-    /* @__PURE__ */ l(
-      K,
-      {
-        displayedMonth: r,
-        onPrevMonth: Y,
-        onNextMonth: D,
-        onMonthChange: a
-      }
-    ),
-    /* @__PURE__ */ x(
-      "div",
-      {
-        className: b(
-          "grid gap-0",
-          o ? "grid-cols-calendar-weeks" : "grid-cols-calendar"
-        ),
-        children: [
-          o && /* @__PURE__ */ l("div", { className: "text-xs font-semibold text-muted-foreground text-center py-2 px-1", children: "#" }),
-          M.map((e) => /* @__PURE__ */ l(
-            "div",
-            {
-              className: "text-xs font-medium text-muted-foreground text-center py-2 px-1 tracking-tighter",
-              children: e
-            },
-            e
-          )),
-          h.map((e, d) => {
-            const u = w(e), g = Math.floor(d / p), I = o && d % p === 0, j = `day-${e.format("YYYY-MM-DD")}`;
-            return /* @__PURE__ */ x(C.Fragment, { children: [
-              I && /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground text-center flex items-center justify-center h-9", children: k[g] }),
-              /* @__PURE__ */ l(
-                "div",
-                {
-                  className: P(u),
-                  onClick: () => c(e),
-                  onMouseEnter: () => i?.(e),
-                  onMouseLeave: () => i?.(null),
-                  role: "gridcell",
-                  tabIndex: 0,
-                  "aria-label": e.format("DD MMMM YYYY"),
-                  "aria-selected": u.isSelected,
-                  children: e.date()
-                }
-              )
-            ] }, j);
-          })
-        ]
-      }
-    )
-  ] });
-};
-export {
-  W as Calendar
+var p = ({ displayedMonth: p, selectedRange: m, hoverDate: h, displayWeekNumber: g = !1, onDateClick: _, onMonthChange: v, onDateHover: y, className: b }) => {
+	let [x, S] = m, C = t(p), w = r(), T = g ? n(C) : [], E = () => {
+		v(p.subtract(1, "month"));
+	}, D = () => {
+		v(p.add(1, "month"));
+	}, O = (e) => {
+		let t = {
+			isOutsideMonth: a(e, p),
+			isToday: s(e),
+			isSelected: o(e, x) || o(e, S),
+			isRangeStart: o(e, x),
+			isRangeEnd: o(e, S),
+			isInRange: i(e, x, S),
+			isInHoverRange: !1
+		};
+		return h && x && !S && (t.isInHoverRange = i(e, x.isBefore(h) ? x : h, x.isBefore(h) ? h : x)), t;
+	};
+	return /* @__PURE__ */ d("div", {
+		"data-slot": "calendar",
+		className: e("flex flex-col gap-4", b),
+		children: [/* @__PURE__ */ u(c, {
+			displayedMonth: p,
+			onPrevMonth: E,
+			onNextMonth: D,
+			onMonthChange: v
+		}), /* @__PURE__ */ d("div", {
+			className: e("grid gap-0", g ? "grid-cols-calendar-weeks" : "grid-cols-calendar"),
+			children: [
+				g && /* @__PURE__ */ u("div", {
+					className: "text-xs font-semibold text-muted-foreground text-center py-2 px-1",
+					children: "#"
+				}),
+				w.map((e) => /* @__PURE__ */ u("div", {
+					className: "text-xs font-medium text-muted-foreground text-center py-2 px-1 tracking-tighter",
+					children: e
+				}, e)),
+				C.map((e, t) => {
+					let n = O(e), r = Math.floor(t / 7), i = g && t % 7 == 0, a = `day-${e.format("YYYY-MM-DD")}`;
+					return /* @__PURE__ */ d(l.Fragment, { children: [i && /* @__PURE__ */ u("div", {
+						className: "text-xs text-muted-foreground text-center flex items-center justify-center h-9",
+						children: T[r]
+					}), /* @__PURE__ */ u("div", {
+						className: f(n),
+						onClick: () => _(e),
+						onMouseEnter: () => y?.(e),
+						onMouseLeave: () => y?.(null),
+						role: "gridcell",
+						tabIndex: 0,
+						"aria-label": e.format("DD MMMM YYYY"),
+						"aria-selected": n.isSelected,
+						children: e.date()
+					})] }, a);
+				})
+			]
+		})]
+	});
 };
+//#endregion
+export { p as Calendar };