@cognite/aura 0.3.1 → 0.3.2

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

@@ -21,7 +21,7 @@ export interface UseDateTimeRangePickerReturn {
     tempEndMinute: number;
     startAmPm: 'AM' | 'PM';
     endAmPm: 'AM' | 'PM';
-    handleTogglePopover: () => void;
+    handleOpenChange: (open: boolean) => void;
     handleSetStep: (step: RangeSelectionStep) => void;
     handleDateClick: (date: Dayjs) => void;
     handleMonthChange: (month: Dayjs) => void;
@@ -34,7 +34,6 @@ export interface UseDateTimeRangePickerReturn {
     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>;

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

@@ -1,161 +1,148 @@
-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 { useRef as mt, useCallback as n, useEffect as ut } from "react";
+import ht from "dayjs";
+import { DEFAULT_MINUTE as f, START_OF_DAY_HOUR as S, END_OF_DAY_MINUTE as A, END_OF_DAY_HOUR as D } from "../shared/constants.js";
+import { usePopoverState as ct } from "../shared/hooks/use-popover-state.js";
+import { useRangeDateState as dt } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as lt } from "../shared/hooks/use-range-step-manager.js";
+import { useTimeState as _ } from "../shared/hooks/use-time-state.js";
+function pt(e) {
+  return e.hour(S).minute(f);
 }
-function Ae(t) {
-  return t.hour(D).minute(T);
+function ft(e) {
+  return e.hour(D).minute(A);
 }
-const Re = ({
-  value: t,
+const gt = ({
+  value: e,
   onChange: r,
   timeFormat: M = "24h",
-  defaultDate: Y = le()
+  defaultDate: y = ht()
 }) => {
-  const C = U(() => {
-  }), E = U(() => {
-  }), {
-    isOpen: h,
-    setIsOpen: o,
-    popoverRef: w,
-    inputRef: x,
-    handleTogglePopover: H
-  } = pe({
-    onClose: n(() => C.current(), []),
+  const E = mt(() => {
+  }), { isOpen: B, setIsOpen: s, popoverRef: N, inputRef: U } = ct({
     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)
+  }), F = lt(), { step: i, handleNext: h, handleBack: a, resetStep: H } = F, I = dt({
+    value: e,
+    defaultDate: y,
+    mapDate: (t, o) => o === "start" ? pt(t) : ft(t)
   }), {
-    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,
+    tempStart: Y,
+    tempEnd: w,
+    displayedMonth: x,
+    hoverDate: b,
+    stateRef: m,
+    handleDateClick: T,
+    handleDateHover: j,
+    handleMonthChange: L,
+    clearActiveSegment: g,
+    resetDates: u
+  } = I, q = _({
+    initialHour: e[0]?.hour() ?? S,
+    initialMinute: e[0]?.minute() ?? f,
     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,
+    hour: z,
+    minute: c,
+    amPm: G,
+    hour24: C,
+    handleHourChange: J,
+    handleMinuteChange: K,
+    handleAmPmChange: Q,
+    resetTime: O
+  } = q, W = _({
+    initialHour: e[1]?.hour() ?? D,
+    initialMinute: e[1]?.minute() ?? A,
     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
+    hour: X,
+    minute: d,
+    amPm: Z,
+    hour24: k,
+    handleHourChange: $,
+    handleMinuteChange: V,
+    handleAmPmChange: v,
+    resetTime: R
+  } = W, tt = n(() => {
+    u(e), H(), O(
+      e[0]?.hour() ?? S,
+      e[0]?.minute() ?? f
+    ), R(
+      e[1]?.hour() ?? D,
+      e[1]?.minute() ?? A
     );
-  }, [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();
+  }, [e, u, H, O, R]), P = n(() => {
+    const t = g(i);
+    t === null ? a() : t[0] === null && t[1] === null && r(t);
+  }, [g, i, a, r]);
+  ut(() => {
+    E.current = P;
+  }, [P]);
+  const et = (t) => {
+    tt(), s(t);
+  }, nt = n(
+    (t) => {
+      t === "start" ? a() : h();
     },
-    [a, d]
-  ), ie = n(
-    (e) => {
-      R(e, m);
+    [a, h]
+  ), rt = n(
+    (t) => {
+      T(t, i);
     },
-    [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);
+    [T, i]
+  ), at = n(() => {
+    const { tempStart: t, tempEnd: o } = m.current;
+    if (t && o) {
+      const l = t.hour(C).minute(c).startOf("minute"), p = o.hour(k).minute(d).endOf("minute"), it = l.isAfter(p) ? [p, l] : [l, p];
+      r(it), s(!1);
     }
   }, [
-    u,
-    O,
-    l,
-    y,
-    p,
+    m,
+    C,
+    c,
+    k,
+    d,
     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);
+    s
+  ]), ot = n(() => {
+    a(), u([m.current.tempStart, null]);
+  }, [a, u, m]), st = n(
+    (t) => {
+      const o = Array.isArray(t) ? t : [t, t];
+      r(o), s(!1);
     },
-    [r, o]
+    [r, s]
   );
   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
+    isOpen: B,
+    step: i,
+    displayedMonth: x,
+    tempStart: Y,
+    tempEnd: w,
+    hoverDate: b,
+    tempStartHour: z,
+    tempStartMinute: c,
+    tempEndHour: X,
+    tempEndMinute: d,
+    startAmPm: G,
+    endAmPm: Z,
+    handleOpenChange: et,
+    handleSetStep: nt,
+    handleDateClick: rt,
+    handleMonthChange: L,
+    handleDateHover: j,
+    handleStartHourChange: J,
+    handleStartMinuteChange: K,
+    handleEndHourChange: $,
+    handleEndMinuteChange: V,
+    handleStartAmPmChange: Q,
+    handleEndAmPmChange: v,
+    handleNext: h,
+    handleApply: at,
+    handleBack: ot,
+    handleApplyShortcut: st,
+    popoverRef: N,
+    inputRef: U
   };
 };
 export {
-  Re as useDateTimeRangePicker
+  gt 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,10 @@
 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";
+import { DateRangePicker as i } from "./date-range-picker/date-range-picker.js";
+import { DateTimeRangePicker as a } from "./date-time-range-picker/date-time-range-picker.js";
+import { TimePicker as f } from "./time-picker/time-picker.js";
 export {
   o as DatePicker,
-  a as DateRangePicker,
-  m as DateTimeRangePicker
+  i as DateRangePicker,
+  a as DateTimeRangePicker,
+  f as TimePicker
 };

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

@@ -1,10 +1,10 @@
 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 { getCalendarDays as E, getWeekdayNames as O, getWeekNumbers as T, isDateInRange as v, isSameDay as f, isToday as B, isOutsideMonth as K } from "../../utils/calendar-utils.js";
+import { CalendarHeader as P } from "../calendar-header/calendar-header.js";
 import { DAYS_IN_WEEK as p } from "../constants.js";
-function P({
+function _({
   isOutsideMonth: r,
   isSelected: t,
   isToday: s,
@@ -42,14 +42,14 @@ const W = ({
   onDateHover: i,
   className: N
 }) => {
-  const [n, m] = t, h = _(r), M = E(), k = o ? O(h) : [], Y = () => {
+  const [n, m] = t, h = E(r), M = O(), k = o ? T(h) : [], Y = () => {
     a(r.subtract(1, "month"));
   }, D = () => {
     a(r.add(1, "month"));
   }, w = (e) => {
     const d = {
-      isOutsideMonth: B(e, r),
-      isToday: T(e),
+      isOutsideMonth: K(e, r),
+      isToday: B(e),
       isSelected: f(e, n) || f(e, m),
       isRangeStart: f(e, n),
       isRangeEnd: f(e, m),
@@ -64,7 +64,7 @@ const W = ({
   };
   return /* @__PURE__ */ x("div", { "data-slot": "calendar", className: b("flex flex-col gap-4", N), children: [
     /* @__PURE__ */ l(
-      K,
+      P,
       {
         displayedMonth: r,
         onPrevMonth: Y,
@@ -96,7 +96,7 @@ const W = ({
               /* @__PURE__ */ l(
                 "div",
                 {
-                  className: P(u),
+                  className: _(u),
                   onClick: () => c(e),
                   onMouseEnter: () => i?.(e),
                   onMouseLeave: () => i?.(null),

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

@@ -7,7 +7,7 @@ export interface DateTimeInputProps {
     value: [Dayjs | null, Dayjs | null] | Dayjs | null;
     format: string;
     placeholder?: string;
-    onClick: () => void;
+    onClick?: () => void;
     isOpen: boolean;
     className?: string;
     ariaLabel?: string;

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

@@ -37,11 +37,11 @@ const v = "Date picker", C = () => {
           "relative flex items-center cursor-pointer w-full group",
           i
         ),
-        onClick: n,
         role: "combobox",
         "aria-label": l,
         "aria-expanded": t,
         "aria-controls": c,
+        onClick: n,
         children: [
           /* @__PURE__ */ r(
             R,

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

@@ -1,5 +1,4 @@
 export interface UsePopoverStateOptions {
-    onClose?: () => void;
     onBackspace?: () => void;
 }
 export interface UsePopoverStateReturn {
@@ -7,6 +6,5 @@ export interface UsePopoverStateReturn {
     setIsOpen: (isOpen: boolean) => void;
     popoverRef: React.RefObject<HTMLDivElement>;
     inputRef: React.RefObject<HTMLDivElement>;
-    handleTogglePopover: () => void;
 }
 export declare const usePopoverState: (options?: UsePopoverStateOptions) => UsePopoverStateReturn;

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

@@ -1,40 +1,24 @@
-import { useState as I, useRef as f, useCallback as L, useEffect as T } from "react";
-const g = (p = {}) => {
-  const { onClose: s, onBackspace: c } = p, [a, n] = I(!1), i = f(null), r = f(null), m = L(() => {
-    n((o) => !o);
-  }, []);
-  return T(() => {
-    if (!a) return;
-    const o = (t) => {
-      const e = t.target;
-      if (!(e instanceof Node)) return;
-      const l = i.current?.contains(e) ?? !1, k = r.current?.contains(e) ?? !1, v = t.composedPath().some(
-        (d) => d instanceof HTMLElement && d.hasAttribute("data-picker-overlay")
-      );
-      !l && !k && !v && (n(!1), s?.());
-    }, u = (t) => {
-      if (t.key === "Escape") {
-        n(!1), s?.();
-        return;
+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());
       }
-      if (t.key === "Backspace" && c) {
-        const { target: e } = t;
-        e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable || (t.preventDefault(), c());
-      }
-    }, E = setTimeout(() => {
-      document.addEventListener("mousedown", o);
-    }, 0);
-    return document.addEventListener("keydown", u), () => {
-      clearTimeout(E), document.removeEventListener("mousedown", o), document.removeEventListener("keydown", u);
     };
-  }, [a, s, c]), {
-    isOpen: a,
-    setIsOpen: n,
-    popoverRef: i,
-    inputRef: r,
-    handleTogglePopover: m
+    return document.addEventListener("keydown", s), () => {
+      document.removeEventListener("keydown", s);
+    };
+  }, [n, t]), {
+    isOpen: n,
+    setIsOpen: a,
+    popoverRef: u,
+    inputRef: i
   };
 };
 export {
-  g as usePopoverState
+  m as usePopoverState
 };

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

@@ -0,0 +1,2 @@
+export { TimePickerPanel } from './time-picker-panel';
+export type { TimePickerPanelProps } from './time-picker-panel';

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+type TimePickerPanelBaseProps = {
+    hour: number;
+    minute: number;
+    onHourChange: (hour: number) => void;
+    onMinuteChange: (minute: number) => void;
+    className?: string;
+};
+export type TimePickerPanelProps = TimePickerPanelBaseProps & ({
+    timeFormat: '12h';
+    amPm: 'AM' | 'PM';
+    onAmPmChange: (amPm: 'AM' | 'PM') => void;
+} | {
+    timeFormat?: '24h';
+    amPm?: undefined;
+    onAmPmChange?: undefined;
+});
+export declare const TimePickerPanel: FC<TimePickerPanelProps>;
+export {};

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

@@ -0,0 +1,41 @@
+import { jsxs as r, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { cn as h } from "../../../../../../lib/utils.js";
+import { AmPmScroll as d } from "../am-pm-scroll/am-pm-scroll.js";
+import { TimePickerScroll as a } from "../time-picker-scroll/time-picker-scroll.js";
+const f = (m) => {
+  const { hour: t, minute: i, onHourChange: n, onMinuteChange: l, className: o } = m, s = m.timeFormat ?? "24h";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "time-picker-panel",
+      className: h("flex items-stretch", o),
+      children: [
+        /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
+          a,
+          {
+            value: t,
+            onChange: n,
+            type: "hour",
+            timeFormat: s
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+        /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
+          a,
+          {
+            value: i,
+            onChange: l,
+            type: "minute"
+          }
+        ) }),
+        m.timeFormat === "12h" && /* @__PURE__ */ r(c, { children: [
+          /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(d, { value: m.amPm, onChange: m.onAmPmChange }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  f as TimePickerPanel
+};

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

@@ -0,0 +1,3 @@
+export { TimePicker } from './time-picker';
+export type { TimePickerProps, ShortcutItem } from './time-picker';
+export type { UseTimePickerProps, UseTimePickerReturn } from './types';

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
+import { TimeFormat } from '../utils/format-utils';
+export type { ShortcutItem };
+export interface TimePickerProps {
+    value: Dayjs | null;
+    onChange: (time: Dayjs | null) => void;
+    timeFormat?: TimeFormat;
+    format?: string;
+    placeholder?: string;
+    shortcuts?: ShortcutItem[];
+    defaultDate?: Dayjs;
+    className?: string;
+}
+export declare const TimePicker: FC<TimePickerProps>;