@cognite/aura 0.3.2 → 0.3.3

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

@@ -1,93 +1,63 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { IconChevronLeft as h, IconChevronRight as u, IconChevronDown as p } from "@tabler/icons-react";
-import i from "dayjs";
-import { cn as N } from "../../../../../../lib/utils.js";
-import { Button as l } from "../../../button/button.js";
-import { DropdownMenu as g, DropdownMenuTrigger as v, DropdownMenuContent as x, DropdownMenuItem as w } from "../../../dropdown-menu/dropdown-menu.js";
-const M = Array.from(
-  { length: 12 },
-  (r, a) => i().month(a).format("MMMM")
-), c = i().year() - 50, b = i().year() + 10, z = Array.from(
-  { length: b - c + 1 },
-  (r, a) => c + a
-), d = ({
-  label: r,
-  items: a,
-  onSelect: s
-}) => /* @__PURE__ */ t(g, { modal: !1, children: [
-  /* @__PURE__ */ e(
-    v,
-    {
-      render: /* @__PURE__ */ t(
-        l,
-        {
-          variant: "ghost",
-          size: "sm",
-          className: "h-7 px-2 gap-1 text-sm font-medium text-secondary-foreground",
-          children: [
-            r,
-            /* @__PURE__ */ e(p, { className: "size-4" })
-          ]
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ e(x, { className: "max-h-60 overflow-y-auto", children: a.map(({ value: n, label: m }) => /* @__PURE__ */ e(w, { onClick: () => s(n), children: m }, n)) })
-] }), E = ({
-  displayedMonth: r,
-  onPrevMonth: a,
-  onNextMonth: s,
-  onMonthChange: n,
-  className: m
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    "data-slot": "calendar-header",
-    className: N("flex items-center justify-between pt-1 w-full", m),
-    children: [
-      /* @__PURE__ */ e(
-        l,
-        {
-          variant: "ghost",
-          size: "icon-sm",
-          className: "size-7 rounded-md text-secondary-foreground",
-          onClick: a,
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ e(h, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ e(
-          d,
-          {
-            label: r.format("MMMM"),
-            items: M.map((o, f) => ({ value: f, label: o })),
-            onSelect: (o) => n(r.date(1).month(o))
-          }
-        ),
-        /* @__PURE__ */ e(
-          d,
-          {
-            label: r.format("YYYY"),
-            items: z.map((o) => ({ value: o, label: String(o) })),
-            onSelect: (o) => n(r.date(1).year(o))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(
-        l,
-        {
-          variant: "ghost",
-          size: "icon-sm",
-          className: "size-7 rounded-md text-secondary-foreground",
-          onClick: s,
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ e(u, { className: "size-4" })
-        }
-      )
-    ]
-  }
-);
-export {
-  E as CalendarHeader
-};
+import { cn as e } from "../../../../../../lib/utils.js";
+import { Button as t } from "../../../button/button.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuItem as i, DropdownMenuTrigger as a } from "../../../dropdown-menu/dropdown-menu.js";
+import { IconChevronDown as o, IconChevronLeft as s, IconChevronRight as c } from "@tabler/icons-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "dayjs";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.tsx
+var f = Array.from({ length: 12 }, (e, t) => d().month(t).format("MMMM")), p = d().year() - 50, m = d().year() + 10, h = Array.from({ length: m - p + 1 }, (e, t) => p + t), g = ({ label: e, items: s, onSelect: c }) => /* @__PURE__ */ u(n, {
+	modal: !1,
+	children: [/* @__PURE__ */ l(a, { render: /* @__PURE__ */ u(t, {
+		variant: "ghost",
+		size: "sm",
+		className: "h-7 px-2 gap-1 text-sm font-medium text-secondary-foreground",
+		children: [e, /* @__PURE__ */ l(o, { className: "size-4" })]
+	}) }), /* @__PURE__ */ l(r, {
+		className: "max-h-60 overflow-y-auto",
+		children: s.map(({ value: e, label: t }) => /* @__PURE__ */ l(i, {
+			onClick: () => c(e),
+			children: t
+		}, e))
+	})]
+}), _ = ({ displayedMonth: n, onPrevMonth: r, onNextMonth: i, onMonthChange: a, className: o }) => /* @__PURE__ */ u("div", {
+	"data-slot": "calendar-header",
+	className: e("flex items-center justify-between pt-1 w-full", o),
+	children: [
+		/* @__PURE__ */ l(t, {
+			variant: "ghost",
+			size: "icon-sm",
+			className: "size-7 rounded-md text-secondary-foreground",
+			onClick: r,
+			"aria-label": "Previous month",
+			children: /* @__PURE__ */ l(s, { className: "size-4" })
+		}),
+		/* @__PURE__ */ u("div", {
+			className: "flex items-center gap-0.5",
+			children: [/* @__PURE__ */ l(g, {
+				label: n.format("MMMM"),
+				items: f.map((e, t) => ({
+					value: t,
+					label: e
+				})),
+				onSelect: (e) => a(n.date(1).month(e))
+			}), /* @__PURE__ */ l(g, {
+				label: n.format("YYYY"),
+				items: h.map((e) => ({
+					value: e,
+					label: String(e)
+				})),
+				onSelect: (e) => a(n.date(1).year(e))
+			})]
+		}),
+		/* @__PURE__ */ l(t, {
+			variant: "ghost",
+			size: "icon-sm",
+			className: "size-7 rounded-md text-secondary-foreground",
+			onClick: i,
+			"aria-label": "Next month",
+			children: /* @__PURE__ */ l(c, { className: "size-4" })
+		})
+	]
+});
+//#endregion
+export { _ as CalendarHeader };

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 };