@cognite/aura 0.3.0 → 0.3.2

package/dist/components/ui/core/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import { forwardRef as r } from "react";
 import { Checkbox as i } from "@base-ui/react/checkbox";
 import { IconCheck as l, IconMinus as b } from "@tabler/icons-react";
 import { cva as m } from "class-variance-authority";
-import { cn as d, invalidState as h, focusState as k, selectionItemDescription as u, selectionItemLabel as x, selectionItemBase as p, selectionItemCard as g, selectionItemDefault as f } from "../../../../lib/utils.js";
+import { cn as d, selectionItemBase as h, selectionItemCard as k, selectionItemDefault as u, invalidState as x, focusState as p, selectionItemLabel as g, selectionItemDescription as f } from "../../../../lib/utils.js";
 const I = r(
   ({ className: a, orientation: e = "vertical", role: t = "group", ...c }, n) => /* @__PURE__ */ o(
     "div",
@@ -21,11 +21,11 @@ const I = r(
   )
 );
 I.displayName = "CheckboxGroup";
-const C = m(d("group/checkbox-item", p), {
+const C = m(d("group/checkbox-item", h), {
   variants: {
     variant: {
-      default: f,
-      card: g
+      default: u,
+      card: k
     }
   },
   defaultVariants: {
@@ -55,8 +55,8 @@ const N = r(({ className: a, ...e }, t) => /* @__PURE__ */ o(
       "data-unchecked:not-data-disabled:hover:border-secondary-foreground group-hover/checkbox-item:data-unchecked:not-data-disabled:border-secondary-foreground",
       "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-disabled-background data-disabled:text-disabled-foreground data-disabled:data-unchecked:border-border",
       "[&[data-checked]_[data-slot=checkbox-check]]:block [&[data-indeterminate]_[data-slot=checkbox-dash]]:block",
-      k,
-      h,
+      p,
+      x,
       a
     ),
     ...e,
@@ -97,7 +97,7 @@ const y = r(
       ref: t,
       "data-slot": "checkbox-item-label",
       className: d(
-        x,
+        g,
         "group-has-[[data-checked]]/checkbox-item:text-foreground",
         "group-has-[[data-indeterminate]]/checkbox-item:text-foreground",
         "group-has-[[data-disabled]]/checkbox-item:text-disabled-foreground",
@@ -115,7 +115,7 @@ const z = r(
       ref: t,
       "data-slot": "checkbox-item-description",
       className: d(
-        u,
+        f,
         "group-has-[[data-disabled]]/checkbox-item:text-disabled-foreground",
         a
       ),

package/dist/components/ui/core/code-block/code-block.js

@@ -1,9 +1,9 @@
 import { jsxs as L, jsx as r } from "react/jsx-runtime";
-import { forwardRef as w, useState as x, useMemo as D, useEffect as F, useContext as H, createContext as O } from "react";
-import { IconSelector as K, IconCheck as V, IconCopy as $, IconDownload as q } from "@tabler/icons-react";
+import { createContext as F, forwardRef as w, useState as x, useMemo as D, useEffect as O, useContext as H } from "react";
+import { IconCheck as K, IconCopy as V, IconSelector as $, IconDownload as q } from "@tabler/icons-react";
 import { isStorybookTestEnv as v, highlightCode as M, cn as f } from "../../../../lib/utils.js";
 import { Button as S } from "../button/button.js";
-const I = O({
+const I = F({
   code: "",
   copyText: "",
   isCollapsed: !1,
@@ -48,7 +48,7 @@ const ee = "min(60vh, 32rem)", oe = "dark:hidden [&>pre]:m-0 [&>pre]:min-h-10 [&
       () => v ? `<pre><code>${P(s)}</code></pre>` : "",
       [s]
     );
-    F(() => {
+    O(() => {
       if (v) return;
       let g = !1;
       const B = (u) => {
@@ -183,7 +183,7 @@ const re = w(
           c instanceof Error ? c : new Error("Clipboard write failed")
         );
       }
-    }, p = C ? V : $;
+    }, p = C ? K : V;
     return /* @__PURE__ */ r(
       S,
       {
@@ -213,7 +213,7 @@ const le = w(
         size: "icon-sm",
         variant: "secondary",
         ...n,
-        children: e ?? /* @__PURE__ */ r(K, { size: 14 })
+        children: e ?? /* @__PURE__ */ r($, { size: 14 })
       }
     );
   }

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
+export type { ShortcutItem };
+export interface DatePickerProps {
+    value: Dayjs | null;
+    onChange: (date: Dayjs | null) => void;
+    format?: string;
+    placeholder?: string;
+    displayWeekNumber?: boolean;
+    shortcuts?: ShortcutItem[];
+    defaultDate?: Dayjs;
+    className?: string;
+}
+export declare const DatePicker: FC<DatePickerProps>;

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

@@ -0,0 +1,73 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as k } from "../../../../../lib/utils.js";
+import { Popover as x, PopoverTrigger as P, PopoverContent as M } from "../../popover/popover.js";
+import { Calendar as N } from "../shared/calendar/calendar.js";
+import { DateTimeInput as w } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as R } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { useDatePicker as S } from "./use-date-picker.js";
+const Y = (n) => n ? [n, n] : [null, null], V = ({
+  value: n,
+  onChange: r,
+  format: i = "DD/MM/YYYY",
+  placeholder: p,
+  displayWeekNumber: c = !1,
+  shortcuts: t,
+  defaultDate: d,
+  className: s
+}) => {
+  const {
+    isOpen: o,
+    displayedMonth: m,
+    tempDate: a,
+    handleOpenChange: h,
+    handleDateClick: f,
+    handleMonthChange: u,
+    handleApplyShortcut: v,
+    inputRef: g,
+    popoverRef: C
+  } = S({ value: n, onChange: r, defaultDate: d }), D = o ? a : n;
+  return /* @__PURE__ */ e("div", { "data-slot": "date-picker", className: k("relative w-full", s), children: /* @__PURE__ */ l(x, { open: o, onOpenChange: h, children: [
+    /* @__PURE__ */ e(P, { render: /* @__PURE__ */ e("div", { ref: g, className: "w-full" }), children: /* @__PURE__ */ e(
+      w,
+      {
+        value: D,
+        format: i,
+        placeholder: p,
+        isOpen: o,
+        variant: "date"
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        ref: C,
+        className: "rounded-xl w-auto p-0",
+        side: "bottom",
+        align: "start",
+        children: /* @__PURE__ */ l("div", { "data-slot": "date-picker-content", className: "flex flex-row", children: [
+          t && t.length > 0 && /* @__PURE__ */ e(
+            R,
+            {
+              shortcuts: t,
+              onShortcutClick: v
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(
+            N,
+            {
+              displayedMonth: m,
+              selectedRange: Y(a),
+              hoverDate: null,
+              displayWeekNumber: c,
+              onDateClick: f,
+              onMonthChange: u
+            }
+          ) })
+        ] })
+      }
+    )
+  ] }) });
+};
+export {
+  V as DatePicker
+};

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

@@ -0,0 +1,3 @@
+export { DatePicker } from './date-picker';
+export type { DatePickerProps, ShortcutItem } from './date-picker';
+export type { UseDatePickerProps, UseDatePickerReturn } from './types';

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

@@ -0,0 +1,17 @@
+import { Dayjs } from 'dayjs';
+export interface UseDatePickerProps {
+    value: Dayjs | null;
+    onChange: (date: Dayjs | null) => void;
+    defaultDate?: Dayjs;
+}
+export interface UseDatePickerReturn {
+    isOpen: boolean;
+    displayedMonth: Dayjs;
+    tempDate: Dayjs | null;
+    handleOpenChange: (open: boolean) => void;
+    handleDateClick: (date: Dayjs) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    handleApplyShortcut: (shortcutValue: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
+    inputRef: React.RefObject<HTMLDivElement>;
+    popoverRef: React.RefObject<HTMLDivElement>;
+}

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

@@ -0,0 +1,3 @@
+import { UseDatePickerProps, UseDatePickerReturn } from './types';
+export type { UseDatePickerProps, UseDatePickerReturn };
+export declare const useDatePicker: ({ value, onChange, defaultDate, }: UseDatePickerProps) => UseDatePickerReturn;

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

@@ -0,0 +1,52 @@
+import { useRef as y, useCallback as A, useEffect as O } from "react";
+import R from "dayjs";
+import { usePopoverState as B } from "../shared/hooks/use-popover-state.js";
+import { useSingleDateState as C } from "../shared/hooks/use-single-date-state.js";
+const x = ({
+  value: n,
+  onChange: t,
+  defaultDate: o = R()
+}) => {
+  const s = y(() => {
+  }), { isOpen: r, setIsOpen: a, popoverRef: c, inputRef: p } = B({
+    onBackspace: A(() => s.current(), [])
+  }), l = C({
+    value: n,
+    defaultDate: o,
+    onDateSelected: (e) => {
+      t(e), a(!1);
+    }
+  }), {
+    tempDate: d,
+    displayedMonth: f,
+    handleDateClick: i,
+    handleMonthChange: h,
+    clearDate: m,
+    resetDate: u
+  } = l, D = () => {
+    u(n);
+  }, S = () => {
+    m() && t(null);
+  };
+  return O(() => {
+    s.current = S;
+  }), {
+    isOpen: r,
+    displayedMonth: f,
+    tempDate: d,
+    handleOpenChange: (e) => {
+      D(), a(e);
+    },
+    handleDateClick: i,
+    handleMonthChange: h,
+    handleApplyShortcut: (e) => {
+      const k = Array.isArray(e) ? e[0] : e;
+      t(k), a(!1);
+    },
+    inputRef: p,
+    popoverRef: c
+  };
+};
+export {
+  x as useDatePicker
+};

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

@@ -1,99 +1,88 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { cn as N } from "../../../../../lib/utils.js";
-import { Popover as w, PopoverTrigger as Y, PopoverContent as T } from "../../popover/popover.js";
-import { Calendar as j } from "../shared/calendar/calendar.js";
-import { DateTimeInput as y } from "../shared/date-time-input/date-time-input.js";
-import { ShortcutsPanel as H } from "../shared/shortcuts-panel/shortcuts-panel.js";
-import { useDateRangePicker as O } from "./use-date-range-picker.js";
-const F = ({
-  value: t,
+import { cn as S } from "../../../../../lib/utils.js";
+import { Popover as M, PopoverTrigger as N, PopoverContent as w } from "../../popover/popover.js";
+import { Calendar as Y } from "../shared/calendar/calendar.js";
+import { DateTimeInput as O } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as j } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { useDateRangePicker as y } from "./use-date-range-picker.js";
+const z = ({
+  value: n,
   onChange: d,
   format: p = "DD/MM/YYYY",
   placeholder: c,
   displayWeekNumber: h = !1,
-  shortcuts: n,
+  shortcuts: t,
   defaultDate: m,
   className: s
 }) => {
   const {
     isOpen: a,
-    step: o,
+    step: r,
     displayedMonth: v,
-    tempStart: r,
+    tempStart: o,
     tempEnd: l,
     hoverDate: f,
-    handleTogglePopover: g,
-    handleCancel: C,
+    handleOpenChange: g,
     handleDateClick: D,
     handleMonthChange: u,
-    handleDateHover: k,
-    handleSetStep: P,
-    handleApplyShortcut: R,
-    inputRef: x,
-    popoverRef: S
-  } = O({ value: t, onChange: d, defaultDate: m });
+    handleDateHover: C,
+    handleSetStep: k,
+    handleApplyShortcut: P,
+    inputRef: R,
+    popoverRef: x
+  } = y({ value: n, onChange: d, defaultDate: m });
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "date-range-picker",
-      className: N("relative w-full", s),
-      children: /* @__PURE__ */ i(
-        w,
-        {
-          open: a,
-          onOpenChange: (M) => {
-            M || C();
-          },
-          children: [
-            /* @__PURE__ */ e(Y, { render: /* @__PURE__ */ e("div", { ref: x, className: "w-full" }), children: /* @__PURE__ */ e(
-              y,
-              {
-                value: a ? [r, l] : t,
-                format: p,
-                placeholder: c,
-                onClick: g,
-                isOpen: a,
-                variant: "date",
-                activeRangePart: a ? o : void 0,
-                onRangePartClick: a ? P : void 0
-              }
-            ) }),
-            /* @__PURE__ */ e(
-              T,
-              {
-                ref: S,
-                className: "rounded-xl w-auto p-0",
-                side: "bottom",
-                align: "start",
-                children: /* @__PURE__ */ i("div", { "data-slot": "date-range-picker-content", className: "flex flex-row", children: [
-                  n && n.length > 0 && /* @__PURE__ */ e(
-                    H,
-                    {
-                      shortcuts: n,
-                      onShortcutClick: R
-                    }
-                  ),
-                  /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(
-                    j,
-                    {
-                      displayedMonth: v,
-                      selectedRange: [r, l],
-                      hoverDate: o === "end" ? f : null,
-                      displayWeekNumber: h,
-                      onDateClick: D,
-                      onMonthChange: u,
-                      onDateHover: k
-                    }
-                  ) })
-                ] })
-              }
-            )
-          ]
-        }
-      )
+      className: S("relative w-full", s),
+      children: /* @__PURE__ */ i(M, { open: a, onOpenChange: g, children: [
+        /* @__PURE__ */ e(N, { render: /* @__PURE__ */ e("div", { ref: R, className: "w-full" }), children: /* @__PURE__ */ e(
+          O,
+          {
+            value: a ? [o, l] : n,
+            format: p,
+            placeholder: c,
+            isOpen: a,
+            variant: "date",
+            activeRangePart: a ? r : void 0,
+            onRangePartClick: a ? k : void 0
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            ref: x,
+            className: "rounded-xl w-auto p-0",
+            side: "bottom",
+            align: "start",
+            children: /* @__PURE__ */ i("div", { "data-slot": "date-range-picker-content", className: "flex flex-row", children: [
+              t && t.length > 0 && /* @__PURE__ */ e(
+                j,
+                {
+                  shortcuts: t,
+                  onShortcutClick: P
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(
+                Y,
+                {
+                  displayedMonth: v,
+                  selectedRange: [o, l],
+                  hoverDate: r === "end" ? f : null,
+                  displayWeekNumber: h,
+                  onDateClick: D,
+                  onMonthChange: u,
+                  onDateHover: C
+                }
+              ) })
+            ] })
+          }
+        )
+      ] })
     }
   );
 };
 export {
-  F as DateRangePicker
+  z as DateRangePicker
 };

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

@@ -13,8 +13,7 @@ export interface UseDateRangePickerReturn {
     tempStart: Dayjs | null;
     tempEnd: Dayjs | null;
     hoverDate: Dayjs | null;
-    handleTogglePopover: () => void;
-    handleCancel: () => void;
+    handleOpenChange: (open: boolean) => void;
     handleDateClick: (date: Dayjs) => void;
     handleMonthChange: (month: Dayjs) => void;
     handleDateHover: (date: Dayjs | null) => void;

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

@@ -1,82 +1,69 @@
-import { useRef as k, useCallback as s, useEffect as g } from "react";
-import b from "dayjs";
-import { usePopoverState as j } from "../shared/hooks/use-popover-state.js";
-import { useRangeDateState as H } from "../shared/hooks/use-range-date-state.js";
-import { useRangeStepManager as I } from "../shared/hooks/use-range-step-manager.js";
-const U = ({
+import { useRef as E, useCallback as c, useEffect as x } from "react";
+import P from "dayjs";
+import { usePopoverState as b } from "../shared/hooks/use-popover-state.js";
+import { useRangeDateState as j } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as H } from "../shared/hooks/use-range-step-manager.js";
+const L = ({
   value: r,
   onChange: t,
-  defaultDate: D = b()
+  defaultDate: S = P()
 }) => {
-  const d = k(() => {
-  }), f = k(() => {
-  }), {
-    isOpen: i,
-    setIsOpen: a,
-    popoverRef: R,
-    inputRef: v,
-    handleTogglePopover: y
-  } = j({
-    onClose: s(() => d.current(), []),
-    onBackspace: s(() => f.current(), [])
-  }), A = I(), { step: o, handleBack: c, handleNext: h, resetStep: n } = A, C = H({
+  const p = E(() => {
+  }), { isOpen: m, setIsOpen: s, popoverRef: u, inputRef: k } = b({
+    onBackspace: c(() => p.current(), [])
+  }), D = H(), { step: n, handleBack: o, handleNext: d, resetStep: a } = D, R = j({
     value: r,
-    defaultDate: D,
-    onEndDateSelected: s(
-      (e, p) => {
-        t([e, p]), a(!1), n();
+    defaultDate: S,
+    onEndDateSelected: c(
+      (e, l) => {
+        t([e, l]), s(!1), a();
       },
-      [t, a, n]
+      [t, s, a]
     )
   }), {
-    tempStart: P,
-    tempEnd: B,
-    displayedMonth: M,
-    hoverDate: E,
-    handleDateClick: T,
-    handleDateHover: x,
-    handleMonthChange: O,
-    clearActiveSegment: u,
-    resetDates: S
-  } = C, l = s(() => {
-    S(r), n();
-  }, [S, n, r]), m = s(() => {
-    const e = u(o);
-    e === null ? c() : e[0] === null && e[1] === null && t(e);
-  }, [u, o, c, t]);
-  return g(() => {
-    d.current = l;
-  }, [l]), g(() => {
-    f.current = m;
-  }, [m]), {
-    isOpen: i,
-    step: o,
-    displayedMonth: M,
-    tempStart: P,
-    tempEnd: B,
-    hoverDate: E,
-    handleTogglePopover: () => {
-      i || l(), y();
-    },
-    handleCancel: () => {
-      l(), a(!1);
+    tempStart: y,
+    tempEnd: A,
+    displayedMonth: B,
+    hoverDate: C,
+    handleDateClick: M,
+    handleDateHover: O,
+    handleMonthChange: g,
+    clearActiveSegment: i,
+    resetDates: h
+  } = R, v = c(() => {
+    h(r), a();
+  }, [h, a, r]), f = c(() => {
+    const e = i(n);
+    e === null ? o() : e[0] === null && e[1] === null && t(e);
+  }, [i, n, o, t]);
+  return x(() => {
+    p.current = f;
+  }, [f]), {
+    isOpen: m,
+    step: n,
+    displayedMonth: B,
+    tempStart: y,
+    tempEnd: A,
+    hoverDate: C,
+    handleOpenChange: (e) => {
+      v(), s(e);
     },
     handleDateClick: (e) => {
-      T(e, o), o === "start" && h();
+      M(e, n), n === "start" && d();
     },
-    handleMonthChange: O,
-    handleDateHover: x,
+    handleMonthChange: g,
+    handleDateHover: O,
     handleSetStep: (e) => {
-      e === "start" ? c() : h();
+      e === "start" ? o() : d();
     },
     handleApplyShortcut: (e) => {
-      const p = Array.isArray(e) ? e : [e, e];
-      t(p), a(!1), n();
+      const l = Array.isArray(e) ? e : [e, e];
+      t(l), s(!1), a();
     },
-    inputRef: v,
-    popoverRef: R
+    inputRef: k,
+    popoverRef: u
   };
 };
 export {
-  U as useDateRangePicker
+  L as useDateRangePicker
 };