@cognite/aura 0.3.2 → 0.3.4

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/constants.d.ts

@@ -1,20 +1,15 @@
-/**
- * Shared numeric constants for date/time picker components.
- * Colors and typography are applied via Tailwind utility classes — no CSS
- * variable strings are exported from here.
- */
+import { AmPm } from '../utils/format-utils';
 export declare const HOURS_IN_DAY = 24;
 export declare const HOURS_IN_12H = 12;
 export declare const MINUTES_IN_HOUR = 60;
 export declare const MINUTE_INCREMENT = 1;
-export declare const DAYS_IN_WEEK = 7;
 export declare const DEFAULT_START_HOUR = 9;
 export declare const DEFAULT_END_HOUR = 17;
 export declare const DEFAULT_MINUTE = 0;
 export declare const START_OF_DAY_HOUR = 0;
 export declare const END_OF_DAY_HOUR = 23;
 export declare const END_OF_DAY_MINUTE = 59;
-export declare const DEFAULT_START_AMPM: 'AM' | 'PM';
-export declare const DEFAULT_END_AMPM: 'AM' | 'PM';
+export declare const DEFAULT_START_AMPM: AmPm;
+export declare const DEFAULT_END_AMPM: AmPm;
 export declare const NOON_HOUR = 12;
 export declare const MIDNIGHT_HOUR = 0;

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

@@ -1,99 +1,65 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { IconCalendarClock as A, IconClock as I, IconCalendar as y } from "@tabler/icons-react";
-import { cn as a } from "../../../../../../lib/utils.js";
-import { Input as D } from "../../../input/input.js";
-import { RangeInputDisplay as R } from "./range-input-display.js";
-const v = "Date picker", C = () => {
-}, p = {
-  date: /* @__PURE__ */ r(y, { "aria-label": "date-icon", className: "size-4" }),
-  time: /* @__PURE__ */ r(I, { "aria-label": "time-icon", className: "size-4" }),
-  datetime: /* @__PURE__ */ r(A, { "aria-label": "datetime-icon", className: "size-4" })
-}, g = (e, o) => a(
-  "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none",
-  "flex items-center justify-center",
-  "transition-colors duration-150",
-  o || e ? "text-foreground" : "text-muted-foreground",
-  "group-hover:text-foreground"
-), _ = ({
-  value: e,
-  format: o,
-  placeholder: b,
-  onClick: n,
-  isOpen: t,
-  className: i,
-  ariaLabel: l = v,
-  variant: s = "date",
-  activeRangePart: f,
-  onRangePartClick: x,
-  popoverId: c
-}) => {
-  if (Array.isArray(e)) {
-    const N = e[0] !== null || e[1] !== null;
-    return /* @__PURE__ */ u(
-      "div",
-      {
-        "data-slot": "date-time-input",
-        className: a(
-          "relative flex items-center cursor-pointer w-full group",
-          i
-        ),
-        role: "combobox",
-        "aria-label": l,
-        "aria-expanded": t,
-        "aria-controls": c,
-        onClick: n,
-        children: [
-          /* @__PURE__ */ r(
-            R,
-            {
-              startDate: e[0],
-              endDate: e[1],
-              format: o,
-              activeRangePart: f,
-              onRangePartClick: x,
-              isOpen: t
-            }
-          ),
-          /* @__PURE__ */ r("div", { className: g(t, N), children: p[s] })
-        ]
-      }
-    );
-  }
-  const d = e?.format(o) ?? "", m = d.length > 0, h = b ?? o;
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      "data-slot": "date-time-input",
-      className: a(
-        "relative flex items-center cursor-pointer w-full group",
-        i
-      ),
-      onClick: n,
-      children: [
-        /* @__PURE__ */ r(
-          D,
-          {
-            value: d,
-            placeholder: h,
-            onChange: C,
-            "aria-label": l,
-            "aria-expanded": t,
-            "aria-controls": c,
-            role: "combobox",
-            className: a(
-              "border-transparent bg-muted-background cursor-pointer caret-transparent pr-9",
-              m ? "text-foreground" : "text-muted-foreground",
-              "hover:border-border-emphasized",
-              t && "!bg-background !text-foreground !border-border"
-            )
-          }
-        ),
-        /* @__PURE__ */ r("div", { className: g(t, m), children: p[s] })
-      ]
-    }
-  );
-};
-export {
-  v as DEFAULT_ARIA_LABEL,
-  _ as DateTimeInput
+import { cn as e } from "../../../../../../lib/utils.js";
+import { Input as t } from "../../../input/input.js";
+import { RangeInputDisplay as n } from "./range-input-display.js";
+import { IconCalendar as r, IconCalendarClock as i, IconClock as a } from "@tabler/icons-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.tsx
+var c = "Date picker", l = () => void 0, u = {
+	date: /* @__PURE__ */ o(r, {
+		"aria-label": "date-icon",
+		className: "size-4"
+	}),
+	time: /* @__PURE__ */ o(a, {
+		"aria-label": "time-icon",
+		className: "size-4"
+	}),
+	datetime: /* @__PURE__ */ o(i, {
+		"aria-label": "datetime-icon",
+		className: "size-4"
+	})
+}, d = (t, n) => e("absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", "flex items-center justify-center", "transition-colors duration-150", n || t ? "text-foreground" : "text-muted-foreground", "group-hover:text-foreground"), f = ({ value: r, format: i, placeholder: a, onClick: f, isOpen: p, className: m, ariaLabel: h = c, variant: g = "date", activeRangePart: _, onRangePartClick: v, popoverId: y }) => {
+	if (Array.isArray(r)) {
+		let t = r[0] !== null || r[1] !== null;
+		return /* @__PURE__ */ s("div", {
+			"data-slot": "date-time-input",
+			className: e("relative flex items-center cursor-pointer w-full group", m),
+			role: "combobox",
+			"aria-label": h,
+			"aria-expanded": p,
+			"aria-controls": y,
+			onClick: f,
+			children: [/* @__PURE__ */ o(n, {
+				startDate: r[0],
+				endDate: r[1],
+				format: i,
+				activeRangePart: _,
+				onRangePartClick: v,
+				isOpen: p
+			}), /* @__PURE__ */ o("div", {
+				className: d(p, t),
+				children: u[g]
+			})]
+		});
+	}
+	let b = r?.format(i) ?? "", x = b.length > 0, S = a ?? i;
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "date-time-input",
+		className: e("relative flex items-center cursor-pointer w-full group", m),
+		onClick: f,
+		children: [/* @__PURE__ */ o(t, {
+			value: b,
+			placeholder: S,
+			onChange: l,
+			"aria-label": h,
+			"aria-expanded": p,
+			"aria-controls": y,
+			role: "combobox",
+			className: e("border-transparent bg-muted-background cursor-pointer caret-transparent pr-9", x ? "text-foreground" : "text-muted-foreground", "hover:border-border-emphasized", p && "!bg-background !text-foreground !border-border")
+		}), /* @__PURE__ */ o("div", {
+			className: d(p, x),
+			children: u[g]
+		})]
+	});
 };
+//#endregion
+export { c as DEFAULT_ARIA_LABEL, f as DateTimeInput };

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js

@@ -1,68 +1,39 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { cn as n } from "../../../../../../lib/utils.js";
-const a = "px-1 py-0.5 rounded-sm transition-colors duration-150", i = "text-muted-foreground group-hover:text-foreground transition-colors duration-150", x = ({
-  startDate: d,
-  endDate: t,
-  format: e,
-  activeRangePart: s,
-  onRangePartClick: r,
-  isOpen: l
-}) => {
-  const u = d !== null || t !== null, c = (b) => (g) => {
-    r && (g.stopPropagation(), r(b));
-  };
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      className: n(
-        "flex items-center w-full py-1 px-3 pr-9 border rounded-lg",
-        "text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden",
-        "transition-[background,border-color,color,box-shadow] duration-150",
-        l ? "bg-background text-foreground border-border shadow-focus-ring" : [
-          "bg-muted-background border-transparent",
-          "hover:bg-accent-background hover:text-foreground hover:border-border-emphasized",
-          u ? "text-foreground" : "text-muted-foreground"
-        ]
-      ),
-      children: [
-        /* @__PURE__ */ o(
-          "span",
-          {
-            className: n(
-              a,
-              r ? "cursor-pointer" : "cursor-default",
-              s === "start" ? "bg-active-muted-background" : r && "hover:bg-active-muted-background-hover"
-            ),
-            onClick: c("start"),
-            children: d ? d.format(e) : /* @__PURE__ */ o("span", { className: i, children: e })
-          }
-        ),
-        /* @__PURE__ */ o(
-          "span",
-          {
-            className: n(
-              "select-none transition-colors duration-150",
-              u ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
-            ),
-            children: " – "
-          }
-        ),
-        /* @__PURE__ */ o(
-          "span",
-          {
-            className: n(
-              a,
-              r ? "cursor-pointer" : "cursor-default",
-              s === "end" ? "bg-active-muted-background" : r && "hover:bg-active-muted-background-hover"
-            ),
-            onClick: c("end"),
-            children: t ? t.format(e) : /* @__PURE__ */ o("span", { className: i, children: e })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  x as RangeInputDisplay
+import { cn as e } from "../../../../../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.tsx
+var r = "px-1 py-0.5 rounded-sm transition-colors duration-150", i = "text-muted-foreground group-hover:text-foreground transition-colors duration-150", a = ({ startDate: a, endDate: o, format: s, activeRangePart: c, onRangePartClick: l, isOpen: u }) => {
+	let d = a !== null || o !== null, f = (e) => (t) => {
+		l && (t.stopPropagation(), l(e));
+	};
+	return /* @__PURE__ */ n("div", {
+		className: e("flex items-center w-full py-1 px-3 pr-9 border rounded-lg", "text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden", "transition-[background,border-color,color,box-shadow] duration-150", u ? "bg-background text-foreground border-border shadow-focus-ring" : [
+			"bg-muted-background border-transparent",
+			"hover:bg-accent-background hover:text-foreground hover:border-border-emphasized",
+			d ? "text-foreground" : "text-muted-foreground"
+		]),
+		children: [
+			/* @__PURE__ */ t("span", {
+				className: e(r, l ? "cursor-pointer" : "cursor-default", c === "start" ? "bg-active-muted-background" : l && "hover:bg-active-muted-background-hover"),
+				onClick: f("start"),
+				children: a ? a.format(s) : /* @__PURE__ */ t("span", {
+					className: i,
+					children: s
+				})
+			}),
+			/* @__PURE__ */ t("span", {
+				className: e("select-none transition-colors duration-150", d ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"),
+				children: " – "
+			}),
+			/* @__PURE__ */ t("span", {
+				className: e(r, l ? "cursor-pointer" : "cursor-default", c === "end" ? "bg-active-muted-background" : l && "hover:bg-active-muted-background-hover"),
+				onClick: f("end"),
+				children: o ? o.format(s) : /* @__PURE__ */ t("span", {
+					className: i,
+					children: s
+				})
+			})
+		]
+	});
 };
+//#endregion
+export { a as RangeInputDisplay };

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js

@@ -1,24 +1,24 @@
-import { useState as f, useRef as c, useEffect as p } from "react";
-const m = (r = {}) => {
-  const { onBackspace: t } = r, [n, a] = f(!1), u = c(null), i = c(null);
-  return p(() => {
-    if (!n) return;
-    const s = (o) => {
-      if (o.key === "Backspace" && t) {
-        const { target: e } = o;
-        e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable || (o.preventDefault(), t());
-      }
-    };
-    return document.addEventListener("keydown", s), () => {
-      document.removeEventListener("keydown", s);
-    };
-  }, [n, t]), {
-    isOpen: n,
-    setIsOpen: a,
-    popoverRef: u,
-    inputRef: i
-  };
-};
-export {
-  m as usePopoverState
+import { useEffect as e, useRef as t, useState as n } from "react";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.ts
+var r = (r = {}) => {
+	let { onBackspace: i } = r, [a, o] = n(!1), s = t(null), c = t(null);
+	return e(() => {
+		if (!a) return;
+		let e = (e) => {
+			if (e.key === "Backspace" && i) {
+				let { target: t } = e;
+				t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLElement && t.isContentEditable || (e.preventDefault(), i());
+			}
+		};
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [a, i]), {
+		isOpen: a,
+		setIsOpen: o,
+		popoverRef: s,
+		inputRef: c
+	};
 };
+//#endregion
+export { r as usePopoverState };

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.js

@@ -1,63 +1,53 @@
-import { useCallback as e, useState as u, useRef as b } from "react";
-const A = ({
-  value: c,
-  defaultDate: p,
-  mapDate: a,
-  onEndDateSelected: S
-}) => {
-  const o = e(
-    (t, m) => a ? a(t, m) : t,
-    [a]
-  ), [E, f] = u(c[0]), [y, M] = u(c[1]), [g, i] = u(
-    () => c[0] ?? p
-  ), [C, l] = u(null), n = b({
-    tempStart: c[0],
-    tempEnd: c[1]
-  }), s = e((t) => {
-    n.current.tempStart = t, f(t);
-  }, []), r = e((t) => {
-    n.current.tempEnd = t, M(t);
-  }, []), R = e(
-    (t, m) => {
-      if (m === "start") {
-        s(o(t, "start")), r(null), l(null);
-        return;
-      }
-      const d = n.current.tempStart;
-      if (d && t.isBefore(d, "day")) {
-        s(o(t, "start")), r(null), l(null);
-        return;
-      }
-      const h = o(t, "end");
-      r(h), l(null), S?.(n.current.tempStart, h);
-    },
-    [o, s, r, S]
-  ), k = e((t) => {
-    l(t);
-  }, []), D = e((t) => {
-    i(t);
-  }, []), H = e(
-    (t) => t === "start" ? (s(null), [null, n.current.tempEnd]) : n.current.tempEnd === null ? null : (r(null), [n.current.tempStart, null]),
-    [s, r]
-  ), T = e(
-    (t) => {
-      s(t[0]), r(t[1]), l(null), i(t[0] ?? p);
-    },
-    [s, r, p]
-  );
-  return {
-    tempStart: E,
-    tempEnd: y,
-    displayedMonth: g,
-    hoverDate: C,
-    stateRef: n,
-    handleDateClick: R,
-    handleDateHover: k,
-    handleMonthChange: D,
-    clearActiveSegment: H,
-    resetDates: T
-  };
-};
-export {
-  A as useRangeDateState
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.ts
+var r = ({ value: r, defaultDate: i, mapDate: a, onEndDateSelected: o }) => {
+	let s = e((e, t) => a ? a(e, t) : e, [a]), [c, l] = n(r[0]), [u, d] = n(r[1]), [f, p] = n(() => r[0] ?? i), [m, h] = n(null), g = t({
+		tempStart: r[0],
+		tempEnd: r[1]
+	}), _ = e((e) => {
+		g.current.tempStart = e, l(e);
+	}, []), v = e((e) => {
+		g.current.tempEnd = e, d(e);
+	}, []);
+	return {
+		tempStart: c,
+		tempEnd: u,
+		displayedMonth: f,
+		hoverDate: m,
+		stateRef: g,
+		handleDateClick: e((e, t) => {
+			if (t === "start") {
+				_(s(e, "start")), v(null), h(null);
+				return;
+			}
+			let n = g.current.tempStart;
+			if (n && e.isBefore(n, "day")) {
+				_(s(e, "start")), v(null), h(null);
+				return;
+			}
+			let r = s(e, "end");
+			v(r), h(null), o?.(g.current.tempStart, r);
+		}, [
+			s,
+			_,
+			v,
+			o
+		]),
+		handleDateHover: e((e) => {
+			h(e);
+		}, []),
+		handleMonthChange: e((e) => {
+			p(e);
+		}, []),
+		clearActiveSegment: e((e) => e === "start" ? (_(null), [null, g.current.tempEnd]) : g.current.tempEnd === null ? null : (v(null), [g.current.tempStart, null]), [_, v]),
+		resetDates: e((e) => {
+			_(e[0]), v(e[1]), h(null), p(e[0] ?? i);
+		}, [
+			_,
+			v,
+			i
+		])
+	};
 };
+//#endregion
+export { r as useRangeDateState };

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.js

@@ -1,19 +1,19 @@
-import { useState as o, useCallback as e } from "react";
-const p = () => {
-  const [s, t] = o("start"), a = e(() => {
-    t("end");
-  }, []), n = e(() => {
-    t("start");
-  }, []), r = e(() => {
-    t("start");
-  }, []);
-  return {
-    step: s,
-    handleNext: a,
-    handleBack: n,
-    resetStep: r
-  };
-};
-export {
-  p as useRangeStepManager
+import { useCallback as e, useState as t } from "react";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.ts
+var n = () => {
+	let [n, r] = t("start");
+	return {
+		step: n,
+		handleNext: e(() => {
+			r("end");
+		}, []),
+		handleBack: e(() => {
+			r("start");
+		}, []),
+		resetStep: e(() => {
+			r("start");
+		}, [])
+	};
 };
+//#endregion
+export { n as useRangeStepManager };