@cognite/aura 0.2.0 → 0.3.1

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

@@ -0,0 +1,161 @@
+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);
+}
+function Ae(t) {
+  return t.hour(D).minute(T);
+}
+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
+};

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

@@ -0,0 +1,8 @@
+export { DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+export { DateRangePicker } from './date-range-picker';
+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';

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

@@ -0,0 +1,8 @@
+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
+};

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

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

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

@@ -0,0 +1,57 @@
+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
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export interface CalendarProps {
+    displayedMonth: Dayjs;
+    selectedRange: [Dayjs | null, Dayjs | null];
+    hoverDate: Dayjs | null;
+    displayWeekNumber?: boolean;
+    onDateClick: (date: Dayjs) => void;
+    onMonthChange: (month: Dayjs) => void;
+    onDateHover?: (date: Dayjs | null) => void;
+    className?: string;
+}
+export declare const Calendar: FC<CalendarProps>;

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

@@ -0,0 +1,119 @@
+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"
+  );
+}
+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
+};

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export interface CalendarHeaderProps {
+    displayedMonth: Dayjs;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+    onMonthChange: (month: Dayjs) => void;
+    className?: string;
+}
+export declare const CalendarHeader: FC<CalendarHeaderProps>;

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

@@ -0,0 +1,93 @@
+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
+};

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

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+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 NOON_HOUR = 12;
+export declare const MIDNIGHT_HOUR = 0;

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

@@ -0,0 +1,14 @@
+const _ = 24, N = 12, U = 60, o = 1, t = 7, E = 9, T = 0, c = 0, n = 23, s = 59, I = 0;
+export {
+  t as DAYS_IN_WEEK,
+  T as DEFAULT_MINUTE,
+  E as DEFAULT_START_HOUR,
+  n as END_OF_DAY_HOUR,
+  s as END_OF_DAY_MINUTE,
+  N as HOURS_IN_12H,
+  _ as HOURS_IN_DAY,
+  I as MIDNIGHT_HOUR,
+  U as MINUTES_IN_HOUR,
+  o as MINUTE_INCREMENT,
+  c as START_OF_DAY_HOUR
+};

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export declare const DEFAULT_ARIA_LABEL = "Date picker";
+export type DateTimeInputVariant = 'date' | 'time' | 'datetime';
+export type RangePart = 'start' | 'end';
+export interface DateTimeInputProps {
+    value: [Dayjs | null, Dayjs | null] | Dayjs | null;
+    format: string;
+    placeholder?: string;
+    onClick: () => void;
+    isOpen: boolean;
+    className?: string;
+    ariaLabel?: string;
+    variant?: DateTimeInputVariant;
+    activeRangePart?: RangePart;
+    onRangePartClick?: (part: RangePart) => void;
+    popoverId?: string;
+}
+export declare const DateTimeInput: FC<DateTimeInputProps>;

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

@@ -0,0 +1,99 @@
+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
+        ),
+        onClick: n,
+        role: "combobox",
+        "aria-label": l,
+        "aria-expanded": t,
+        "aria-controls": c,
+        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
+};

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+import { RangePart } from './date-time-input';
+export interface RangeInputDisplayProps {
+    startDate: Dayjs | null;
+    endDate: Dayjs | null;
+    format: string;
+    activeRangePart?: RangePart;
+    onRangePartClick?: (part: RangePart) => void;
+    isOpen?: boolean;
+}
+export declare const RangeInputDisplay: FC<RangeInputDisplayProps>;