@cognite/aura 0.1.7 → 0.3.0

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

@@ -0,0 +1,190 @@
+import { jsx as e, jsxs as t, Fragment as te } from "react/jsx-runtime";
+import { useMemo as re } from "react";
+import { cn as ae } from "../../../../../lib/utils.js";
+import { Button as v } from "../../button/button.js";
+import { Popover as oe, PopoverTrigger as le, PopoverContent as ie } from "../../popover/popover.js";
+import { AmPmScroll as de } from "../shared/am-pm-scroll/am-pm-scroll.js";
+import { Calendar as ce } from "../shared/calendar/calendar.js";
+import { DateTimeInput as se } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as he } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { TimePickerScroll as f } from "../shared/time-picker-scroll/time-picker-scroll.js";
+import { convert12HourTo24Hour as C } from "../utils/time-utils.js";
+import { useDateTimeRangePicker as me } from "./use-date-time-range-picker.js";
+const He = ({
+  value: x,
+  onChange: P,
+  format: k = "DD/MM/YYYY HH:mm",
+  placeholder: b,
+  displayWeekNumber: N = !1,
+  shortcuts: c,
+  timeFormat: r = "24h",
+  defaultDate: S,
+  className: H
+}) => {
+  const {
+    isOpen: l,
+    step: n,
+    displayedMonth: M,
+    tempStart: a,
+    tempEnd: o,
+    hoverDate: A,
+    tempStartHour: i,
+    tempStartMinute: s,
+    tempEndHour: d,
+    tempEndMinute: h,
+    startAmPm: m,
+    endAmPm: p,
+    handleTogglePopover: D,
+    handleSetStep: y,
+    handleDateClick: T,
+    handleMonthChange: w,
+    handleDateHover: R,
+    handleStartHourChange: E,
+    handleStartMinuteChange: Y,
+    handleEndHourChange: j,
+    handleEndMinuteChange: B,
+    handleStartAmPmChange: O,
+    handleEndAmPmChange: W,
+    handleNext: I,
+    handleApply: L,
+    handleCancel: g,
+    handleBack: V,
+    handleApplyShortcut: q,
+    popoverRef: z,
+    inputRef: G
+  } = me({
+    value: x,
+    onChange: P,
+    timeFormat: r,
+    defaultDate: S
+  }), J = n === "start" ? a !== null : o !== null, K = n === "start" ? "Next" : "Apply", Q = n === "start" ? I : L, U = n === "start" ? i : d, X = n === "start" ? s : h, Z = n === "start" ? m : p, _ = n === "start" ? E : j, $ = n === "start" ? Y : B, F = n === "start" ? O : W, ee = re(() => {
+    const u = a ? a.hour(
+      r === "12h" ? C(i, m) : i
+    ).minute(s) : null, ne = o ? o.hour(
+      r === "12h" ? C(d, p) : d
+    ).minute(h) : null;
+    return [u, ne];
+  }, [
+    a,
+    o,
+    i,
+    s,
+    d,
+    h,
+    m,
+    p,
+    r
+  ]);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "date-time-range-picker",
+      className: ae("relative w-full", H),
+      children: /* @__PURE__ */ t(
+        oe,
+        {
+          open: l,
+          onOpenChange: (u) => {
+            u || g();
+          },
+          children: [
+            /* @__PURE__ */ e(le, { render: /* @__PURE__ */ e("div", { ref: G, className: "w-full" }), children: /* @__PURE__ */ e(
+              se,
+              {
+                value: ee,
+                format: k,
+                placeholder: b,
+                onClick: D,
+                isOpen: l,
+                variant: "datetime",
+                activeRangePart: l ? n : void 0,
+                onRangePartClick: l ? y : void 0
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              ie,
+              {
+                ref: z,
+                className: "rounded-xl w-auto p-0",
+                side: "bottom",
+                align: "start",
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    "data-slot": "date-time-range-picker-content",
+                    className: "flex flex-col",
+                    children: [
+                      /* @__PURE__ */ t("div", { className: "flex flex-row", children: [
+                        c && c.length > 0 && /* @__PURE__ */ e(
+                          he,
+                          {
+                            shortcuts: c,
+                            onShortcutClick: q
+                          }
+                        ),
+                        /* @__PURE__ */ e("div", { className: "p-3 border-r border-border", children: /* @__PURE__ */ e(
+                          ce,
+                          {
+                            displayedMonth: M,
+                            selectedRange: [a, o],
+                            hoverDate: n === "end" ? A : null,
+                            displayWeekNumber: N,
+                            onDateClick: T,
+                            onMonthChange: w,
+                            onDateHover: R
+                          }
+                        ) }),
+                        /* @__PURE__ */ t("div", { className: "flex items-stretch", children: [
+                          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
+                            f,
+                            {
+                              value: U,
+                              onChange: _,
+                              type: "hour",
+                              timeFormat: r
+                            }
+                          ) }),
+                          /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+                          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
+                            f,
+                            {
+                              value: X,
+                              onChange: $,
+                              type: "minute"
+                            }
+                          ) }),
+                          r === "12h" && /* @__PURE__ */ t(te, { children: [
+                            /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+                            /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(de, { value: Z, onChange: F }) })
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ t("div", { className: "flex p-2 justify-between items-center self-stretch border-t border-border", children: [
+                        /* @__PURE__ */ e(v, { variant: "ghost", onClick: g, children: "Cancel" }),
+                        /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+                          n === "end" && /* @__PURE__ */ e(v, { variant: "ghost", onClick: V, children: "Back" }),
+                          /* @__PURE__ */ e(
+                            v,
+                            {
+                              variant: "secondary",
+                              onClick: Q,
+                              disabled: !J,
+                              children: K
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  He as DateTimeRangePicker
+};

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

@@ -0,0 +1,3 @@
+export { DateTimeRangePicker } from './date-time-range-picker';
+export type { DateTimeRangePickerProps } from './date-time-range-picker';
+export type { ShortcutItem } from './date-time-range-picker';

package/dist/components/ui/core/date-time-pickers/date-time-range-picker/types.d.ts

@@ -0,0 +1,42 @@
+import { Dayjs } from 'dayjs';
+import { RangeSelectionStep } from '../shared/hooks/use-range-step-manager';
+import { TimeFormat } from '../utils/format-utils';
+export type { RangeSelectionStep };
+export interface UseDateTimeRangePickerProps {
+    value: [Dayjs | null, Dayjs | null];
+    onChange: (range: [Dayjs | null, Dayjs | null]) => void;
+    timeFormat?: TimeFormat;
+    defaultDate?: Dayjs;
+}
+export interface UseDateTimeRangePickerReturn {
+    isOpen: boolean;
+    step: RangeSelectionStep;
+    displayedMonth: Dayjs;
+    tempStart: Dayjs | null;
+    tempEnd: Dayjs | null;
+    hoverDate: Dayjs | null;
+    tempStartHour: number;
+    tempStartMinute: number;
+    tempEndHour: number;
+    tempEndMinute: number;
+    startAmPm: 'AM' | 'PM';
+    endAmPm: 'AM' | 'PM';
+    handleTogglePopover: () => void;
+    handleSetStep: (step: RangeSelectionStep) => void;
+    handleDateClick: (date: Dayjs) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    handleDateHover: (date: Dayjs | null) => void;
+    handleStartHourChange: (hour: number) => void;
+    handleStartMinuteChange: (minute: number) => void;
+    handleEndHourChange: (hour: number) => void;
+    handleEndMinuteChange: (minute: number) => void;
+    handleStartAmPmChange: (value: 'AM' | 'PM') => void;
+    handleEndAmPmChange: (value: 'AM' | 'PM') => void;
+    handleNext: () => void;
+    handleApply: () => void;
+    handleCancel: () => void;
+    handleBack: () => void;
+    handleApplyShortcut: (range: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => 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.d.ts

@@ -0,0 +1,3 @@
+import { RangeSelectionStep, UseDateTimeRangePickerProps, UseDateTimeRangePickerReturn } from './types';
+export type { RangeSelectionStep, UseDateTimeRangePickerProps, UseDateTimeRangePickerReturn, };
+export declare const useDateTimeRangePicker: ({ value, onChange, timeFormat, defaultDate, }: UseDateTimeRangePickerProps) => UseDateTimeRangePickerReturn;

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,6 @@
+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/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>;