@caspeco/casper-ui-library 9.8.0 → 9.9.0

package/dist/components/table/helper.d.ts

@@ -1,2 +1,3 @@
 export declare function arrayMove<T>(array: T[], fromIndex: number, toIndex: number): T[];
+export declare function getColumnLabel(header: unknown, columnId: string): string;
 //# sourceMappingURL=helper.d.ts.map

package/dist/components/table/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../lib/components/table/helper.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,EAAE,CAShF"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../lib/components/table/helper.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,EAAE,CAShF;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAExE"}

package/dist/components/table/helper.js

@@ -1,7 +1,11 @@
-function c(r, n, t) {
-  const e = [...r], [o] = e.splice(n, 1);
-  return o !== void 0 && e.splice(t, 0, o), e;
+function i(n, t, r) {
+  const o = [...n], [e] = o.splice(t, 1);
+  return e !== void 0 && o.splice(r, 0, e), o;
+}
+function c(n, t) {
+  return typeof n == "string" || typeof n == "number" ? String(n) : t;
 }
 export {
-  c as arrayMove
+  i as arrayMove,
+  c as getColumnLabel
 };

package/dist/components/table/table-toolbar-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-toolbar-settings.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-settings.tsx"],"names":[],"mappings":"AAaA,KAAK,yBAAyB,GAAG;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAiGF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,uEApGkC,yBAAyB,6CAoGzB,CAAC"}
+{"version":3,"file":"table-toolbar-settings.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-settings.tsx"],"names":[],"mappings":"AAqBA,KAAK,yBAAyB,GAAG;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AA6OF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,uEAxNkC,yBAAyB,6CAwNzB,CAAC"}

package/dist/components/table/table-toolbar-settings.js

@@ -1,86 +1,202 @@
-import { jsx as t, jsxs as o, Fragment as u } from "react/jsx-runtime";
-import { Flex as S, Portal as k, Box as T } from "@chakra-ui/react";
-import { memo as x, useCallback as h } from "react";
-import { useTableContext as I } from "./table-context.js";
-import { DEFAULT_PAGE_SIZE_OPTIONS as v } from "./table.constants.js";
-import { translations as B } from "./translations.js";
-import { Menu as M } from "../menu/menu.js";
-import { MenuButton as w } from "../menu/menu-button.js";
-import { SlidersIcon as y } from "../icon/icons/sliders-icon.js";
-import { MenuList as O } from "../menu/menu-list.js";
-import { Text as d } from "../text/text.js";
-import { MenuItem as i } from "../menu/menu-item.js";
-import { GripMoreIcon as V } from "../icon/icons/grip-more-icon.js";
-import { Checkbox as A } from "../checkbox/checkbox.js";
-import { MenuDivider as b } from "../menu/menu-divider.js";
-import { RadioGroup as F } from "../radio/radio-group.js";
-import { Radio as G } from "../radio/radio.js";
-import { Switch as P } from "../switch/switch.js";
-import { ThemeIconSizeVariable as j, ThemeSpaceVariable as a, ThemeColorVariable as g } from "../../theme/theme-types.js";
-const D = ({ pageSize: m, onPageSizeChange: s }) => {
-  const r = I(), l = B[r.localeString], p = !!s && Number.isInteger(m), C = h(() => r.table.getAllColumns().length === Object.keys(r.breakingContentState).length && !Object.values(r.breakingContentState).includes(!1), [r.breakingContentState, r.table]), f = h(
+import { jsx as t, jsxs as c, Fragment as h } from "react/jsx-runtime";
+import { Flex as y, Portal as w, Box as I } from "@chakra-ui/react";
+import { closestCenter as P } from "../../node_modules/@dnd-kit/collision/dist/index.js";
+import { isSortableOperation as E, SortableKeyboardPlugin as L } from "../../node_modules/@dnd-kit/dom/sortable.js";
+import { DragDropProvider as A } from "../../node_modules/@dnd-kit/react/index.js";
+import { useSortable as G } from "../../node_modules/@dnd-kit/react/sortable.js";
+import { memo as R, useState as F, useCallback as x } from "react";
+import { flushSync as Y } from "react-dom";
+import { getColumnLabel as O } from "./helper.js";
+import { useTableContext as j } from "./table-context.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS as N } from "./table.constants.js";
+import { translations as _ } from "./translations.js";
+import { Menu as z } from "../menu/menu.js";
+import { MenuButton as H } from "../menu/menu-button.js";
+import { SlidersIcon as U } from "../icon/icons/sliders-icon.js";
+import { MenuList as K } from "../menu/menu-list.js";
+import { Text as C } from "../text/text.js";
+import { MenuDivider as k } from "../menu/menu-divider.js";
+import { MenuItem as b } from "../menu/menu-item.js";
+import { Checkbox as D } from "../checkbox/checkbox.js";
+import { RadioGroup as X } from "../radio/radio-group.js";
+import { Radio as Z } from "../radio/radio.js";
+import { Switch as q } from "../switch/switch.js";
+import { GripMoreIcon as J } from "../icon/icons/grip-more-icon.js";
+import { ThemeIconSizeVariable as B, ThemeSpaceVariable as u, ThemeColorVariable as f, ThemeShadowVariable as Q } from "../../theme/theme-types.js";
+const W = (i, l, r, o) => {
+  if (!o || o.sourceId === i) return "none";
+  const s = r.findIndex((a) => a.id === o.sourceId), d = r.findIndex((a) => a.id === o.targetId);
+  return s < 0 || d < 0 || s === d ? "none" : s < d && l > s && l <= d ? "translateY(-100%)" : s > d && l >= d && l < s ? "translateY(100%)" : "none";
+}, v = (i) => {
+  if (!E(i)) return null;
+  const { source: l, target: r } = i;
+  return l && r ? { source: l, target: r } : null;
+}, $ = ({ pageSize: i, onPageSizeChange: l }) => {
+  const r = j(), o = _[r.localeString], s = !!l && Number.isInteger(i), [d, a] = F(null), g = r.table.getAllLeafColumns().filter((e) => e.getCanHide()), p = g.filter((e) => e.getIsVisible()), T = g.filter((e) => !e.getIsVisible()).sort((e, n) => {
+    const m = O(e.columnDef.header, e.id), S = O(n.columnDef.header, n.id);
+    return m.localeCompare(S, r.localeString, { sensitivity: "base" });
+  }), M = x(() => r.table.getAllColumns().length === Object.keys(r.breakingContentState).length && !Object.values(r.breakingContentState).includes(!1), [r.breakingContentState, r.table]), V = x(
     ({ checked: e }) => {
       const n = {};
-      r.table.getAllColumns().forEach((c) => {
-        n[c.id] = e;
+      r.table.getAllColumns().forEach((m) => {
+        n[m.id] = e;
       }), r.setBreakingContentState(n), r.onBreakingContentChange?.(n);
     },
     [r]
   );
-  return /* @__PURE__ */ t(S, { children: /* @__PURE__ */ o(M, { closeOnSelect: !1, isLazy: !0, children: [
-    /* @__PURE__ */ t(w, { "aria-label": l.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ t(y, { size: j.Medium }) }),
-    /* @__PURE__ */ t(k, { children: /* @__PURE__ */ o(O, { children: [
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ c(z, { closeOnSelect: !1, isLazy: !0, children: [
+    /* @__PURE__ */ t(H, { "aria-label": o.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ t(U, { size: B.Medium }) }),
+    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ c(K, { children: [
       /* @__PURE__ */ t(
-        d,
+        C,
         {
-          color: g.OnSurfaceSubdued,
-          py: a.Small,
-          px: a.Medium,
-          children: l.showColumns
+          color: f.OnSurfaceSubdued,
+          py: u.Small,
+          px: u.Medium,
+          children: o.shownInTable
         }
       ),
-      /* @__PURE__ */ t(T, { maxHeight: "320px", overflowY: "auto", children: r.table.getAllLeafColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ o(i, { itemType: "checkbox", leftIcon: V, value: e.id, children: [
-        /* @__PURE__ */ t(u, { children: e.columnDef.header }),
+      /* @__PURE__ */ c(I, { maxHeight: "400px", overflowY: "auto", children: [
         /* @__PURE__ */ t(
           A,
           {
-            isChecked: e.getIsVisible(),
-            onCheckedChange: ({ checked: n }) => e.toggleVisibility(!!n)
+            onDragOver: (e) => {
+              const n = v(e.operation);
+              n && a({
+                sourceId: String(n.source.id),
+                targetId: String(n.target.id)
+              });
+            },
+            onDragEnd: (e) => {
+              const n = v(e.operation);
+              Y(() => {
+                a(null), n && r.handleDragEnd(String(n.source.id), String(n.target.id));
+              });
+            },
+            children: p.map((e, n) => /* @__PURE__ */ t(
+              re,
+              {
+                column: e,
+                index: n,
+                isDisabled: p.length === 1,
+                translateY: W(e.id, n, p, d)
+              },
+              e.id
+            ))
           }
-        )
-      ] }, e.id)) }),
-      /* @__PURE__ */ t(b, {}),
-      p && /* @__PURE__ */ o(u, { children: [
+        ),
+        T.length > 0 && /* @__PURE__ */ c(h, { children: [
+          /* @__PURE__ */ t(k, {}),
+          /* @__PURE__ */ t(
+            C,
+            {
+              color: f.OnSurfaceSubdued,
+              py: u.Small,
+              px: u.Medium,
+              children: o.hiddenInTable
+            }
+          ),
+          T.map((e) => /* @__PURE__ */ c(b, { itemType: "checkbox", value: e.id, children: [
+            /* @__PURE__ */ t(h, { children: e.columnDef.header }),
+            /* @__PURE__ */ t(
+              D,
+              {
+                isChecked: e.getIsVisible(),
+                onCheckedChange: ({ checked: n }) => {
+                  if (e.toggleVisibility(!!n), n) {
+                    const m = r.columnOrder.filter((S) => S !== e.id);
+                    m.push(e.id), r.setColumnOrder(m);
+                  }
+                }
+              }
+            )
+          ] }, e.id))
+        ] })
+      ] }),
+      /* @__PURE__ */ t(k, {}),
+      s && /* @__PURE__ */ c(h, { children: [
         /* @__PURE__ */ t(
-          d,
+          C,
           {
-            color: g.OnSurfaceSubdued,
-            py: a.Small,
-            px: a.Medium,
-            children: l.rowsPerPage
+            color: f.OnSurfaceSubdued,
+            py: u.Small,
+            px: u.Medium,
+            children: o.rowsPerPage
           }
         ),
         /* @__PURE__ */ t(
-          F,
+          X,
           {
             gap: "unset",
-            value: String(m),
-            onValueChange: (e) => s?.(Number(e.value)),
-            children: v.map((e) => /* @__PURE__ */ o(i, { itemType: "radio", value: String(e), children: [
-              l.numberOfRows.replace("{count}", String(e)),
-              /* @__PURE__ */ t(G, { value: String(e) })
+            value: String(i),
+            onValueChange: (e) => l?.(Number(e.value)),
+            children: N.map((e) => /* @__PURE__ */ c(b, { itemType: "radio", value: String(e), children: [
+              o.numberOfRows.replace("{count}", String(e)),
+              /* @__PURE__ */ t(Z, { value: String(e) })
             ] }, e))
           }
         ),
-        /* @__PURE__ */ t(b, {})
+        /* @__PURE__ */ t(k, {})
       ] }),
-      /* @__PURE__ */ o(i, { itemType: "switch", value: "breakingContent", children: [
-        l.breakingContent,
-        /* @__PURE__ */ t(P, { onCheckedChange: f, isChecked: C() })
+      /* @__PURE__ */ c(b, { itemType: "switch", value: "breakingContent", children: [
+        o.breakingContent,
+        /* @__PURE__ */ t(q, { onCheckedChange: V, isChecked: M() })
       ] })
     ] }) })
   ] }) });
-}, re = x(D);
+}, ee = [L], re = ({
+  column: i,
+  index: l,
+  isDisabled: r,
+  translateY: o
+}) => {
+  const {
+    ref: s,
+    handleRef: d,
+    isDragging: a
+  } = G({
+    id: i.id,
+    index: l,
+    collisionDetector: P,
+    plugins: ee
+  });
+  return /* @__PURE__ */ t(
+    I,
+    {
+      ref: s,
+      role: "none",
+      opacity: a ? 0.95 : 1,
+      backgroundColor: f.Background,
+      transform: o,
+      transition: a ? void 0 : "transform 200ms ease",
+      boxShadow: a ? Q.Medium : void 0,
+      children: /* @__PURE__ */ c(b, { itemType: "checkbox", value: i.id, children: [
+        /* @__PURE__ */ c(y, { alignItems: "center", gap: u.XSmall, children: [
+          /* @__PURE__ */ t(
+            I,
+            {
+              ref: d,
+              cursor: a ? "grabbing" : "grab",
+              display: "inline-flex",
+              alignItems: "center",
+              flexShrink: 0,
+              children: /* @__PURE__ */ t(J, { size: B.Medium })
+            }
+          ),
+          /* @__PURE__ */ t(h, { children: i.columnDef.header })
+        ] }),
+        !a && /* @__PURE__ */ t(
+          D,
+          {
+            isDisabled: r,
+            isChecked: i.getIsVisible(),
+            onCheckedChange: ({ checked: g }) => i.toggleVisibility(!!g)
+          }
+        )
+      ] })
+    }
+  );
+}, De = R($);
 export {
-  re as TableToolbarSettings
+  De as TableToolbarSettings
 };

package/dist/components/table/translations.d.ts

@@ -31,6 +31,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
     "en-US": {
         sortUp: string;
@@ -60,6 +62,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
     "en-GB": {
         sortUp: string;
@@ -89,6 +93,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
     "nb-NO": {
         sortUp: string;
@@ -118,6 +124,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
     "da-DK": {
         sortUp: string;
@@ -147,6 +155,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
     "fr-FR": {
         sortUp: string;
@@ -176,6 +186,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
     "nl-BE": {
         sortUp: string;
@@ -205,6 +217,8 @@ export declare const translations: {
         selectedWithTotal: string;
         action: string;
         deleteSelectedRows: string;
+        shownInTable: string;
+        hiddenInTable: string;
     };
 };
 //# sourceMappingURL=translations.d.ts.map

package/dist/components/table/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/table/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1F,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,UAE1F;AAgCD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/table/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1F,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,UAE1F;AAkCD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JxB,CAAC"}

package/dist/components/table/translations.js

@@ -1,5 +1,5 @@
-function l(t, n) {
-  return t.replace(/{(\w+)}/g, (r, o) => String(n[o] ?? ""));
+function r(n, t) {
+  return n.replace(/{(\w+)}/g, (l, o) => String(t[o] ?? ""));
 }
 const e = {
   sortUp: "Sort up",
@@ -28,7 +28,9 @@ const e = {
   numberOfRows: "{count} rows",
   selectedWithTotal: "{count} of {total} selected",
   action: "Action",
-  deleteSelectedRows: "Delete selected rows"
+  deleteSelectedRows: "Delete selected rows",
+  shownInTable: "Shown in table",
+  hiddenInTable: "Hidden in table"
 }, s = {
   "sv-SE": {
     sortUp: "Sortera stigande",
@@ -57,7 +59,9 @@ const e = {
     numberOfRows: "{count} rader",
     selectedWithTotal: "{count} av {total} valda",
     action: "Åtgärd",
-    deleteSelectedRows: "Ta bort valda rader"
+    deleteSelectedRows: "Ta bort valda rader",
+    shownInTable: "Visas i tabellen",
+    hiddenInTable: "Dold i tabellen"
   },
   "en-US": e,
   "en-GB": e,
@@ -88,7 +92,9 @@ const e = {
     numberOfRows: "{count} rader",
     selectedWithTotal: "{count} av {total} valgt",
     action: "Handling",
-    deleteSelectedRows: "Fjern valgte rader"
+    deleteSelectedRows: "Fjern valgte rader",
+    shownInTable: "Vises i tabellen",
+    hiddenInTable: "Dold i tabellen"
   },
   "da-DK": {
     sortUp: "Sorter stigende",
@@ -117,7 +123,9 @@ const e = {
     numberOfRows: "{count} rækker",
     selectedWithTotal: "{count} af {total} valgt",
     action: "Handling",
-    deleteSelectedRows: "Fjern valgte rækker"
+    deleteSelectedRows: "Fjern valgte rækker",
+    shownInTable: "Vises i tabellen",
+    hiddenInTable: "Dold i tabellen"
   },
   "fr-FR": {
     sortUp: "Trier par ordre croissant",
@@ -146,7 +154,9 @@ const e = {
     numberOfRows: "{count} lignes",
     selectedWithTotal: "{count} sur {total} sélectionnés",
     action: "Action",
-    deleteSelectedRows: "Supprimer les lignes sélectionnées"
+    deleteSelectedRows: "Supprimer les lignes sélectionnées",
+    shownInTable: "Affiché dans le tableau",
+    hiddenInTable: "Masqué dans le tableau"
   },
   "nl-BE": {
     sortUp: "Oplopend sorteren",
@@ -175,10 +185,12 @@ const e = {
     numberOfRows: "{count} rijen",
     selectedWithTotal: "{count} van {total} geselecteerd",
     action: "Actie",
-    deleteSelectedRows: "Verwijder geselecteerde rijen"
+    deleteSelectedRows: "Verwijder geselecteerde rijen",
+    shownInTable: "Getoond in tabel",
+    hiddenInTable: "Verborgen in tabel"
   }
 };
 export {
-  l as interpolate,
+  r as interpolate,
   s as translations
 };

package/dist/node_modules/@dnd-kit/dom/index.js

@@ -1,5 +1,5 @@
-import { Plugin as he, DragDropManager as xr, resolveCustomizable as it, Sensor as ze, ActivationController as kr, CorePlugin as St, descriptor as Ar, Droppable as Dr, Draggable as Or, configurator as Ce, ActivationConstraint as wn } from "../abstract/index.js";
-import { getRoot as Ne, generateUniqueId as ct, isSafari as Cr, scheduler as je, Listeners as Sn, isElement as le, isHTMLElement as En, getFrameTransform as Xe, getEventCoordinates as ce, getDocuments as Pr, getDocument as Et, scrollIntoViewIfNeeded as Tr, DOMRectangle as V, canScroll as $r, detectScrollIntent as Ir, isKeyboardEvent as xt, isInteractiveElement as Mr, isTextInput as Rr, ScrollDirection as F, getScrollableAncestors as an, PositionObserver as Lr, isDocument as Wr, isShadowRoot as Fr, getComputedStyles as xn, parseTransform as zr, parseTranslate as kn, getFixedPositionOffset as An, Styles as Nr, supportsPopover as ln, showPopover as ae, getWindow as Dn, prefersReducedMotion as On, getElementFromPoint as jr, isPointerEvent as Xr, getFrameElement as cn, cloneElement as Kr, supportsStyle as dn, getFinalKeyframe as Ur, animateTransform as Yr, ProxiedElements as un } from "./utilities.js";
+import { DragDropManager as xr, resolveCustomizable as it, Plugin as he, Sensor as ze, ActivationController as kr, CorePlugin as St, descriptor as Ar, Droppable as Dr, Draggable as Or, configurator as Ce, ActivationConstraint as wn } from "../abstract/index.js";
+import { generateUniqueId as ct, isSafari as Cr, scheduler as Ne, Listeners as Sn, isElement as le, isHTMLElement as En, getFrameTransform as je, getEventCoordinates as ce, getDocuments as Pr, getDocument as Et, scrollIntoViewIfNeeded as Tr, DOMRectangle as V, getRoot as Xe, canScroll as $r, detectScrollIntent as Ir, isKeyboardEvent as xt, isInteractiveElement as Mr, isTextInput as Rr, ScrollDirection as F, getScrollableAncestors as an, PositionObserver as Lr, isDocument as Wr, isShadowRoot as Fr, getComputedStyles as xn, parseTransform as zr, parseTranslate as kn, getFixedPositionOffset as An, Styles as Nr, supportsPopover as ln, showPopover as ae, getWindow as Dn, prefersReducedMotion as On, getElementFromPoint as jr, isPointerEvent as Xr, getFrameElement as cn, cloneElement as Kr, supportsStyle as dn, getFinalKeyframe as Ur, animateTransform as Yr, ProxiedElements as un } from "./utilities.js";
 import { computed as hn, deepEqual as Br, effects as Vr, reactive as j, derived as st } from "../state/dist/index.js";
 import { Axes as Cn, Point as Hr, Rectangle as kt, exceedsDistance as dt } from "../geometry/dist/index.js";
 import { defaultCollisionDetection as qr } from "../collision/dist/index.js";
@@ -84,7 +84,7 @@ var di = ["dragover", "dragmove"], ui = class extends he {
     let u, l, h, v;
     const g = (y = v) => {
       !h || !y || h?.nodeValue !== y && (h.nodeValue = y);
-    }, w = () => je.schedule(g), D = hi(
+    }, w = () => Ne.schedule(g), D = hi(
       w,
       o
     ), x = Object.entries(s).map(
@@ -134,7 +134,7 @@ var di = ["dragover", "dragmove"], ui = class extends he {
           );
         }
       }
-      m.size > 0 && je.schedule(p);
+      m.size > 0 && Ne.schedule(p);
     }), this.destroy = () => {
       super.destroy(), u?.remove(), l?.remove(), x.forEach((y) => y());
     };
@@ -181,12 +181,12 @@ var Ue = /* @__PURE__ */ new Map(), Ln, Wn, Fn, zn, ht, Ee, N, Ct, de, Nn, jn, X
   get sourceRoot() {
     var t;
     const { source: n } = this.manager.dragOperation;
-    return Ne((t = n?.element) != null ? t : null);
+    return Xe((t = n?.element) != null ? t : null);
   }
   get targetRoot() {
     var t;
     const { target: n } = this.manager.dragOperation;
-    return Ne((t = n?.element) != null ? t : null);
+    return Xe((t = n?.element) != null ? t : null);
   }
   get roots() {
     const { status: t } = this.manager.dragOperation;
@@ -585,7 +585,7 @@ Fe = /* @__PURE__ */ new WeakSet();
 Bn = function(e) {
   const { overlay: t } = this;
   if (!t || !e) return;
-  const n = Ne(t);
+  const n = Xe(t);
   if (n)
     return e.addRoot(n);
 };
@@ -600,7 +600,7 @@ Vn = function() {
   const { element: g } = h, w = h.pluginConfig(ue), D = (t = (e = w?.feedback) != null ? e : c?.feedback) != null ? t : "default", x = typeof D == "function" ? D(h, d) : D;
   if (!g || x === "none" || !v.initialized || v.initializing)
     return;
-  const { initial: f } = o, m = (n = this.overlay) != null ? n : g, p = Xe(m), y = Xe(g), C = !Un(g, m), E = new V(g, {
+  const { initial: f } = o, m = (n = this.overlay) != null ? n : g, p = je(m), y = je(g), C = !Un(g, m), E = new V(g, {
     frameTransform: C ? y : null,
     ignoreTransforms: !C
   }), L = {
@@ -908,7 +908,7 @@ var Qn, mt, Oe, It, K, gt, qe = class extends (mt = St, Qn = [j], mt) {
                     x: p,
                     y
                   }
-                }), je.schedule(_(this, gt)), !0;
+                }), Ne.schedule(_(this, gt)), !0;
               }
             }
           }
@@ -922,7 +922,7 @@ var Qn, mt, Oe, It, K, gt, qe = class extends (mt = St, Qn = [j], mt) {
       if (!s)
         return null;
       const o = jr(
-        Ne(a?.element),
+        Xe(a?.element),
         s.current
       );
       return o && (t = o), o ?? t;
@@ -1312,7 +1312,7 @@ var bt = Object.freeze({
     const { preventActivation: i = bt.preventActivation } = r ?? {};
     if (i?.(t, n))
       return;
-    const { target: s } = t, a = En(s) && s.draggable && s.getAttribute("draggable") === "true", o = Xe(n.element), { x: d, y: c } = ce(t);
+    const { target: s } = t, a = En(s) && s.draggable && s.getAttribute("draggable") === "true", o = je(n.element), { x: d, y: c } = ce(t);
     this.initialCoordinates = {
       x: d * o.scaleX + o.x,
       y: c * o.scaleY + o.y
@@ -1360,8 +1360,8 @@ var bt = Object.freeze({
       return;
     }
     if (this.manager.dragOperation.status.dragging) {
-      const s = ce(t), a = Xe(n.element);
-      s.x = s.x * a.scaleX + a.x, s.y = s.y * a.scaleY + a.y, t.preventDefault(), t.stopPropagation(), this.latest.event = t, this.latest.coordinates = s, je.schedule(this.handleMove);
+      const s = ce(t), a = je(n.element);
+      s.x = s.x * a.scaleX + a.x, s.y = s.y * a.scaleY + a.y, t.preventDefault(), t.stopPropagation(), this.latest.event = t, this.latest.coordinates = s, Ne.schedule(this.handleMove);
     }
   }
   handlePointerUp(t) {

package/dist/node_modules/@dnd-kit/dom/sortable.js

@@ -2,7 +2,7 @@ import { WeakStore as Pe, reactive as te } from "../state/dist/index.js";
 import { Plugin as he, resolveCustomizable as re } from "../abstract/index.js";
 import { closestCorners as Se, defaultCollisionDetection as De } from "../collision/dist/index.js";
 import { Droppable as Ee, Draggable as Ge, Scroller as ke, Feedback as Te } from "./index.js";
-import { isKeyboardEvent as ne, DOMRectangle as ie, getVisibleBoundingRectangle as je, scrollIntoViewIfNeeded as Ce, getComputedStyles as Me, computeTranslate as se, prefersReducedMotion as Ae, getWindow as Re, animateTransform as ze, ProxiedElements as We } from "./utilities.js";
+import { isKeyboardEvent as ne, DOMRectangle as ie, getVisibleBoundingRectangle as je, scrollIntoViewIfNeeded as Ce, ProxiedElements as Me, getComputedStyles as Ae, computeTranslate as se, prefersReducedMotion as Re, getWindow as ze, animateTransform as We } from "./utilities.js";
 import { Rectangle as oe } from "../geometry/dist/index.js";
 import { effect as $e, batch as m, untracked as ae } from "../../@preact/signals-core/dist/signals-core.module.js";
 var Be = Object.create, be = Object.defineProperty, Le = Object.defineProperties, Ne = Object.getOwnPropertyDescriptor, Ve = Object.getOwnPropertyDescriptors, J = Object.getOwnPropertySymbols, ve = Object.prototype.hasOwnProperty, _e = Object.prototype.propertyIsEnumerable, qe = (e, t) => (t = Symbol[e]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + e), N = (e) => {
@@ -32,20 +32,23 @@ var Be = Object.create, be = Object.defineProperty, Le = Object.defineProperties
   for (var n, s, _, b, h, g = t & 7, a = !1, c = !1, f = e.length + 1, v = xe[g + 5], y = e[f - 1] = [], w = e[f] || (e[f] = []), I = (o = o.prototype, Ne({ get [r]() {
     return $(this, p);
   }, set [r](d) {
-    return G(this, p, d);
+    return k(this, p, d);
   } }, r)), P = i.length - 1; P >= 0; P--)
     b = He(g, r, _ = {}, e[3], w), b.static = a, b.private = c, h = b.access = { has: (d) => r in d }, h.get = (d) => d[r], h.set = (d, l) => d[r] = l, s = (0, i[P])({ get: I.get, set: I.set }, b), _._ = 1, s === void 0 ? W(s) && (I[v] = s) : typeof s != "object" || s === null ? N("Object expected") : (W(n = s.get) && (I.get = n), W(n = s.set) && (I.set = n), W(n = s.init) && y.unshift(n));
   return I && be(o, r, I), o;
-}, Ie = (e, t, r) => t.has(e) || N("Cannot " + r), $ = (e, t, r) => (Ie(e, t, "read from private field"), t.get(e)), z = (e, t, r) => t.has(e) ? N("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), G = (e, t, r, i) => (Ie(e, t, "write to private field"), t.set(e, r), r);
-function k(e) {
+}, Ie = (e, t, r) => t.has(e) || N("Cannot " + r), $ = (e, t, r) => (Ie(e, t, "read from private field"), t.get(e)), z = (e, t, r) => t.has(e) ? N("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), k = (e, t, r, i) => (Ie(e, t, "write to private field"), t.set(e, r), r);
+function D(e) {
   return e instanceof ee || e instanceof we;
 }
+function ht(e) {
+  return D(e.source) && D(e.target);
+}
 var F = 10, Qe = class extends he {
   constructor(e) {
     super(e);
     const t = $e(() => {
       const { dragOperation: i } = e;
-      if (ne(i.activatorEvent) && k(i.source) && i.status.initialized) {
+      if (ne(i.activatorEvent) && D(i.source) && i.status.initialized) {
         const o = e.registry.plugins.get(ke);
         if (o)
           return o.disable(), () => o.enable();
@@ -57,7 +60,7 @@ var F = 10, Qe = class extends he {
           if (this.disabled || i.defaultPrevented || !i.nativeEvent)
             return;
           const { dragOperation: p } = o;
-          if (!ne(i.nativeEvent) || !k(p.source) || !p.shape)
+          if (!ne(i.nativeEvent) || !D(p.source) || !p.shape)
             return;
           const { actions: n, collisionObserver: s, registry: _ } = o, { by: b } = i;
           if (!b)
@@ -66,7 +69,7 @@ var F = 10, Qe = class extends he {
           m(() => {
             for (const l of _.droppables) {
               const { id: u } = l;
-              if (!l.accepts(g) || u === a?.id && k(l) || !l.element)
+              if (!l.accepts(g) || u === a?.id && D(l) || !l.element)
                 continue;
               let x = l.shape;
               const O = new ie(l.element, {
@@ -86,13 +89,13 @@ var F = 10, Qe = class extends he {
           const { id: I } = w, { index: P, group: d } = g.sortable;
           n.setDropTarget(I).then(() => {
             const { source: l, target: u, shape: x } = p;
-            if (!l || !k(l) || !x)
+            if (!l || !D(l) || !x)
               return;
             const {
               index: O,
               group: M,
-              target: D
-            } = l.sortable, S = P !== O || d !== M, A = S ? D : u?.element;
+              target: E
+            } = l.sortable, S = P !== O || d !== M, A = S ? E : u?.element;
             if (!A) return;
             Ce(A);
             const V = new ie(A);
@@ -267,17 +270,17 @@ var pe = "__default__", st = class extends he {
         if (this.disabled)
           return;
         const { dragOperation: p } = o, { source: n, target: s } = p;
-        if (!k(n) || !k(s) || n.sortable === s.sortable)
+        if (!D(n) || !D(s) || n.sortable === s.sortable)
           return;
         const _ = t(), b = n.sortable.group === s.sortable.group, h = _.get(n.sortable.group), g = b ? h : _.get(s.sortable.group);
         !h || !g || queueMicrotask(() => {
           i.defaultPrevented || o.renderer.rendering.then(() => {
             var a, c, f;
             const v = t();
-            for (const [D, S] of _.entries()) {
+            for (const [E, S] of _.entries()) {
               const A = Array.from(S).entries();
               for (const [V, R] of A)
-                if (R.index !== V || R.group !== D || !((a = v.get(D)) != null && a.has(R)))
+                if (R.index !== V || R.group !== E || !((a = v.get(E)) != null && a.has(R)))
                   return;
             }
             const y = n.sortable.element, w = s.sortable.element;
@@ -290,11 +293,11 @@ var pe = "__default__", st = class extends he {
             if (u === x) return;
             const O = x[l].indexOf(n.sortable), M = x[l].indexOf(s.sortable);
             o.collisionObserver.disable(), ge(y, O, w, M), m(() => {
-              for (const [D, S] of x[d].entries())
-                S.index = D;
+              for (const [E, S] of x[d].entries())
+                S.index = E;
               if (!b)
-                for (const [D, S] of x[l].entries())
-                  S.group = s.sortable.group, S.index = D;
+                for (const [E, S] of x[l].entries())
+                  S.group = s.sortable.group, S.index = E;
             }), o.actions.setDropTarget(n.id).then(() => o.collisionObserver.enable());
           });
         });
@@ -303,7 +306,7 @@ var pe = "__default__", st = class extends he {
         if (!i.canceled)
           return;
         const { dragOperation: p } = o, { source: n } = p;
-        k(n) && (n.sortable.initialIndex === n.sortable.index && n.sortable.initialGroup === n.sortable.group || queueMicrotask(() => {
+        D(n) && (n.sortable.initialIndex === n.sortable.index && n.sortable.initialGroup === n.sortable.group || queueMicrotask(() => {
           const s = t(), _ = s.get(
             n.sortable.initialGroup
           );
@@ -349,11 +352,11 @@ var fe = [
   duration: 250,
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   idle: !1
-}, H = new Pe(), Oe, me, E, X, B, L, Y, C;
+}, H = new Pe(), Oe, me, G, X, B, L, Y, C;
 me = [te], Oe = [te];
 var Z = class {
   constructor(e, t) {
-    z(this, X, q(E, 8, this)), q(E, 11, this), z(this, B), z(this, L), z(this, Y, q(E, 12, this)), q(E, 15, this), z(this, C), this.register = () => (m(() => {
+    z(this, X, q(G, 8, this)), q(G, 11, this), z(this, B), z(this, L), z(this, Y, q(G, 12, this)), q(G, 15, this), z(this, C), this.register = () => (m(() => {
       var a, c;
       (a = this.manager) == null || a.registry.register(this.droppable), (c = this.manager) == null || c.registry.register(this.draggable);
     }), () => this.unregister()), this.unregister = () => {
@@ -402,7 +405,7 @@ var Z = class {
           },
           () => {
             const { index: a, group: c, manager: f } = this, v = $(this, L), y = $(this, B);
-            (a !== v || c !== y) && (G(this, L, a), G(this, B, c), this.animate());
+            (a !== v || c !== y) && (k(this, L, a), k(this, B, c), this.animate());
           },
           () => {
             var a, c;
@@ -416,7 +419,7 @@ var Z = class {
       }),
       t,
       this
-    ), G(this, C, h.element), this.manager = t, this.index = p, G(this, L, p), this.group = o, G(this, B, o), this.type = s, this.transition = _;
+    ), k(this, C, h.element), this.manager = t, this.index = p, k(this, L, p), this.group = o, k(this, B, o), this.type = s, this.transition = _;
   }
   get initialIndex() {
     var e, t;
@@ -443,10 +446,10 @@ var Z = class {
         const n = {
           x: r.boundingRectangle.left - p.boundingRectangle.left,
           y: r.boundingRectangle.top - p.boundingRectangle.top
-        }, { translate: s } = Me(o), _ = se(o, s, !1), b = se(o, s);
+        }, { translate: s } = Ae(o), _ = se(o, s, !1), b = se(o, s);
         if (n.x || n.y) {
-          const h = Ae(Re(o)) ? de(le({}, t), { duration: 0 }) : t;
-          ze({
+          const h = Re(ze(o)) ? de(le({}, t), { duration: 0 }) : t;
+          We({
             element: o,
             keyframes: {
               translate: [
@@ -473,14 +476,14 @@ var Z = class {
   set element(e) {
     m(() => {
       const t = $(this, C), r = this.droppable.element, i = this.draggable.element;
-      (!r || r === t) && (this.droppable.element = e), (!i || i === t) && (this.draggable.element = e), G(this, C, e);
+      (!r || r === t) && (this.droppable.element = e), (!i || i === t) && (this.draggable.element = e), k(this, C, e);
     });
   }
   get element() {
     var e, t;
     const r = $(this, C);
     if (r)
-      return (t = (e = We.get(r)) != null ? e : r) != null ? t : this.droppable.element;
+      return (t = (e = Me.get(r)) != null ? e : r) != null ? t : this.droppable.element;
   }
   set target(e) {
     this.droppable.element = e;
@@ -582,15 +585,15 @@ var Z = class {
     return this.droppable.accepts(e);
   }
 };
-E = Ke();
+G = Ke();
 X = /* @__PURE__ */ new WeakMap();
 B = /* @__PURE__ */ new WeakMap();
 L = /* @__PURE__ */ new WeakMap();
 Y = /* @__PURE__ */ new WeakMap();
 C = /* @__PURE__ */ new WeakMap();
-ye(E, 4, "index", me, Z, X);
-ye(E, 4, "group", Oe, Z, Y);
-Je(E, Z);
+ye(G, 4, "index", me, Z, X);
+ye(G, 4, "group", Oe, Z, Y);
+Je(G, Z);
 var we = class extends Ge {
   constructor(e, t, r) {
     super(e, t), this.sortable = r;
@@ -625,5 +628,6 @@ export {
   ee as SortableDroppable,
   Qe as SortableKeyboardPlugin,
   at as defaultSortableTransition,
-  k as isSortable
+  D as isSortable,
+  ht as isSortableOperation
 };

package/dist/node_modules/@dnd-kit/react/sortable.js

@@ -1,7 +1,7 @@
 import { useCallback as d } from "react";
 import { deepEqual as p } from "../state/dist/index.js";
 import { defaultSortableTransition as x, Sortable as R } from "../dom/sortable.js";
-import { isSortable as rr } from "../dom/sortable.js";
+import { isSortable as rr, isSortableOperation as er } from "../dom/sortable.js";
 import { useInstance as T } from "./index.js";
 import { useDeepSignal as V, useOnValueChange as i, useIsomorphicLayoutEffect as q, useImmediateEffect as L, useOnElementChange as f } from "./hooks.js";
 import { currentValue as m } from "./utilities.js";
@@ -24,10 +24,10 @@ function Y(o) {
     element: O,
     handle: h,
     index: c,
-    group: y,
-    disabled: D,
-    modifiers: P,
-    sensors: S,
+    group: S,
+    disabled: y,
+    modifiers: D,
+    sensors: P,
     target: w,
     type: C,
     plugins: E
@@ -43,9 +43,9 @@ function Y(o) {
   )), u = V(r, G);
   return i(b, () => r.id = b), q(() => {
     N(() => {
-      r.group = y, r.index = c;
+      r.group = S, r.index = c;
     });
-  }, [r, y, c]), i(C, () => r.type = C), i(
+  }, [r, S, c]), i(C, () => r.type = C), i(
     t,
     () => r.accept = t,
     void 0,
@@ -57,7 +57,7 @@ function Y(o) {
       (e = r.manager) != null && e.dragOperation.status.idle && l?.idle && r.refreshShape();
     },
     L
-  ), f(h, (e) => r.handle = e), f(O, (e) => r.element = e), f(w, (e) => r.target = e), i(D, () => r.disabled = D === !0), i(S, () => r.sensors = S), i(
+  ), f(h, (e) => r.handle = e), f(O, (e) => r.element = e), f(w, (e) => r.target = e), i(y, () => r.disabled = y === !0), i(P, () => r.sensors = P), i(
     a,
     () => r.collisionDetector = a
   ), i(
@@ -69,8 +69,8 @@ function Y(o) {
     void 0,
     p
   ), i(
-    P,
-    () => r.modifiers = P,
+    D,
+    () => r.modifiers = D,
     void 0,
     p
   ), i(
@@ -124,5 +124,6 @@ function G(o, t, a) {
 }
 export {
   rr as isSortable,
+  er as isSortableOperation,
   Y as useSortable
 };

package/dist/node_modules/@dnd-kit/state/dist/index.js

@@ -1,4 +1,4 @@
-import { computed as U, effect as le, untracked as x, batch as X, signal as fe } from "../../../@preact/signals-core/dist/signals-core.module.js";
+import { effect as le, computed as U, untracked as x, batch as X, signal as fe } from "../../../@preact/signals-core/dist/signals-core.module.js";
 import { Signal as Ie } from "../../../@preact/signals-core/dist/signals-core.module.js";
 var _e = Object.create, G = Object.defineProperty, he = Object.defineProperties, pe = Object.getOwnPropertyDescriptor, ve = Object.getOwnPropertyDescriptors, Y = Object.getOwnPropertySymbols, de = Object.prototype.hasOwnProperty, ge = Object.prototype.propertyIsEnumerable, Oe = (e, t) => (t = Symbol[e]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + e), O = (e) => {
   throw TypeError(e);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "9.8.0",
+	"version": "9.9.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,
@@ -46,7 +46,8 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@vitejs/plugin-react-swc": "^4.3.0",
-		"@vitest/browser-playwright": "^4.1.5",
+		"@vitest/browser-playwright": "^4.1.8",
+		"playwright": "1.60.0",
 		"@vitest/ui": "^4.1.5",
 		"eslint": "^9.39.2",
 		"eslint-plugin-react-hooks": "^7.1.1",