@caspeco/casper-ui-library 8.3.0 → 8.4.0

package/dist/components/table/table-header-row.js

@@ -1,187 +1,236 @@
-import { jsx as e, Fragment as b, jsxs as C } from "react/jsx-runtime";
-import { Tr as A, Th as B, useMediaQuery as z, Portal as D } from "@chakra-ui/react";
+import { jsx as t, Fragment as I, jsxs as x } from "react/jsx-runtime";
+import { Tr as A, Th as k, useMediaQuery as H, Portal as P } from "@chakra-ui/react";
 import { flexRender as V } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as H, useRef as L, useCallback as R, useLayoutEffect as P, useMemo as F } from "react";
-import { useTableContext as f } from "./table-context.js";
-import { TableHeaderDropdown as O } from "./table-header-dropdown.js";
-import { translations as v } from "./translations.js";
-import { Flex as I } from "../flex/flex.js";
-import { Box as S } from "../box/box.js";
-import { Divider as N } from "../divider/divider.js";
-import { Menu as j } from "../menu/menu.js";
-import { MenuButton as E } from "../menu/menu-button.js";
-import { Icons as y } from "../icon/types.js";
-import { MenuList as $ } from "../menu/menu-list.js";
-import { Checkbox as W } from "../checkbox/checkbox.js";
-import { MenuItem as Q } from "../menu/menu-item.js";
-import { IconButton as X } from "../icon-button/icon-button.js";
-import { Button as q } from "../button/button.js";
-import { ThemeColorVariable as g, ThemeSpaceVariable as p, ThemeFontSizeVariable as G, ThemeFontVariable as J } from "../../theme/theme-types.js";
-const K = ({
-  headerGroup: t,
+import { memo as L, useRef as N, useCallback as B, useLayoutEffect as O, forwardRef as F, useMemo as $ } from "react";
+import { closestCenter as j } from "../../node_modules/@dnd-kit/collision/dist/index.js";
+import { SortableKeyboardPlugin as E } from "../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as W } from "../../node_modules/@dnd-kit/react/sortable.js";
+import { useTableContext as C } from "./table-context.js";
+import { TableHeaderDropdown as K } from "./table-header-dropdown.js";
+import { translations as T } from "./translations.js";
+import { Flex as R } from "../flex/flex.js";
+import { Box as b } from "../box/box.js";
+import { Divider as Q } from "../divider/divider.js";
+import { Menu as X } from "../menu/menu.js";
+import { MenuButton as q } from "../menu/menu-button.js";
+import { Icons as M } from "../icon/types.js";
+import { MenuList as G } from "../menu/menu-list.js";
+import { Checkbox as J } from "../checkbox/checkbox.js";
+import { MenuItem as U } from "../menu/menu-item.js";
+import { IconButton as Y } from "../icon-button/icon-button.js";
+import { Button as Z } from "../button/button.js";
+import { ThemeColorVariable as u, ThemeSpaceVariable as S, ThemeFontSizeVariable as _, ThemeFontVariable as ee } from "../../theme/theme-types.js";
+const te = ({
+  headerGroup: n,
   hideTableHeaderDropdown: o,
   portalContainerRef: s
 }) => {
-  const i = f(), c = !!i.getRowActions, l = (i.selectedRowIds?.length ?? 0) > 0 && (i.selectionActions?.length ?? 0) > 0;
-  return /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(A, { children: l ? /* @__PURE__ */ e(
-    B,
+  const i = C(), a = !!i.getRowActions, c = (i.selectedRowIds?.length ?? 0) > 0 && (i.selectionActions?.length ?? 0) > 0;
+  return /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(A, { children: c ? /* @__PURE__ */ t(
+    k,
     {
-      colSpan: t.headers.length,
+      colSpan: n.headers.length,
       sx: {
         cursor: "default",
         "& div:hover": {
           backgroundColor: "transparent !important"
         },
         "div span": {
-          color: g.OnBackground
+          color: u.OnBackground
         }
       },
       zIndex: 1,
       style: {
-        borderBottom: `1px solid ${g.OnBackgroundBorder}`,
-        paddingLeft: c ? "24px" : void 0
+        borderBottom: `1px solid ${u.OnBackgroundBorder}`,
+        paddingLeft: a ? "24px" : void 0
       },
-      children: /* @__PURE__ */ e(M, { showSelectAll: !0, children: /* @__PURE__ */ e(Z, {}) })
+      children: /* @__PURE__ */ t(z, { showSelectAll: !0, children: /* @__PURE__ */ t(le, {}) })
     }
-  ) : /* @__PURE__ */ e(b, { children: t.headers.map((n) => /* @__PURE__ */ e(
-    U,
+  ) : /* @__PURE__ */ t(I, { children: n.headers.map((r, e) => /* @__PURE__ */ t(
+    ne,
     {
-      header: n,
+      header: r,
       hideTableHeaderDropdown: o,
-      applyActionMenuPadding: c,
+      applyActionMenuPadding: a,
       portalContainerRef: s,
-      isFirstColumn: n.column.getIndex() === 0
+      isFirstColumn: !r.isPlaceholder && e === 0,
+      enableColumnReorder: i.enableColumnReorder
     },
-    n.id
-  )) }) }, t.id) });
-}, U = ({
-  header: t,
+    r.id
+  )) }) }, n.id) });
+}, ne = ({
+  header: n,
   hideTableHeaderDropdown: o,
   applyActionMenuPadding: s,
   portalContainerRef: i,
-  isFirstColumn: c = !1
+  isFirstColumn: a = !1,
+  enableColumnReorder: c = !1
 }) => {
-  const l = L(null), n = f(), { column: r } = t, m = R((d) => {
-    const a = d.getIsPinned(), u = d.getSize();
+  const r = N(null), e = C(), { column: l } = n, g = B((d) => {
+    const h = d.getIsPinned(), p = d.getSize();
     return {
-      position: a ? "sticky" : "relative",
-      left: a ? `${d.getStart("left")}px` : void 0,
-      backgroundColor: a ? g.Background : void 0,
-      zIndex: a ? 1 : 0,
-      width: u,
-      maxWidth: u
+      position: h ? "sticky" : "relative",
+      left: h ? `${d.getStart("left")}px` : void 0,
+      backgroundColor: h ? u.Background : void 0,
+      zIndex: h ? 1 : 0,
+      width: p,
+      maxWidth: p
     };
   }, []);
-  return P(() => {
-    const d = l.current;
+  O(() => {
+    const d = r.current;
     if (!d) return;
-    const a = r.id, u = (h) => {
-      h > 0 && n.table.getState().columnSizing[a] !== h && n.table.setColumnSizing((w) => ({ ...w, [a]: h }));
-    }, k = new ResizeObserver((h) => {
-      const w = h[0];
+    const h = l.id, p = (f) => {
+      f > 0 && e.table.getState().columnSizing[h] !== f && e.table.setColumnSizing((w) => ({ ...w, [h]: f }));
+    }, v = new ResizeObserver((f) => {
+      const w = f[0];
       if (!w) return;
-      const T = w.borderBoxSize?.[0]?.inlineSize ?? d.getBoundingClientRect().width;
-      u(T);
+      const D = w.borderBoxSize?.[0]?.inlineSize ?? d.getBoundingClientRect().width;
+      p(D);
     });
-    return k.observe(d), u(d.getBoundingClientRect().width), () => k.disconnect();
-  }, []), /* @__PURE__ */ e(
-    B,
+    return v.observe(d), p(d.getBoundingClientRect().width), () => v.disconnect();
+  }, []);
+  const m = /* @__PURE__ */ t(z, { showSelectAll: e.canSelectRows && a, children: /* @__PURE__ */ t(I, { children: o ? /* @__PURE__ */ t(b, { paddingLeft: S.Small, children: V(n.column.columnDef.header, n.getContext()) }) : /* @__PURE__ */ t(
+    K,
+    {
+      header: n,
+      breakingContentState: e.breakingContentState,
+      columnVisibility: e.columnVisibility,
+      headerGroup: e.table.getHeaderGroups(),
+      localeString: e.localeString,
+      setBreakingContentState: e.setBreakingContentState,
+      setSorting: e.setSorting,
+      sorting: e.sorting,
+      onBreakingContentChange: e.onBreakingContentChange,
+      portalContainerRef: i
+    }
+  ) }) });
+  return c ? /* @__PURE__ */ t(
+    oe,
+    {
+      ref: r,
+      columnId: l.id,
+      columnIndex: l.getIndex(),
+      disableColumnReorder: l.columnDef.meta?.disableColumnReorder,
+      isNumeric: l.columnDef.meta?.isNumeric,
+      zIndex: l.getIsPinned() ? 2 : 1,
+      style: {
+        ...g(l),
+        borderBottom: `1px solid ${u.OnBackgroundBorder}`,
+        paddingLeft: a && s ? "24px" : void 0
+      },
+      children: m
+    }
+  ) : /* @__PURE__ */ t(
+    k,
     {
-      ref: l,
+      ref: r,
       className: "tableHeaderCell",
-      isNumeric: r.columnDef.meta?.isNumeric,
-      zIndex: r.getIsPinned() ? 2 : 1,
+      isNumeric: l.columnDef.meta?.isNumeric,
+      zIndex: l.getIsPinned() ? 2 : 1,
       style: {
-        ...m(r),
-        borderBottom: `1px solid ${g.OnBackgroundBorder}`,
-        paddingLeft: c && s ? "24px" : void 0
+        ...g(l),
+        borderBottom: `1px solid ${u.OnBackgroundBorder}`,
+        paddingLeft: a && s ? "24px" : void 0
       },
-      children: /* @__PURE__ */ e(M, { showSelectAll: n.canSelectRows && c, children: /* @__PURE__ */ e(b, { children: o ? /* @__PURE__ */ e(S, { paddingLeft: p.Small, children: V(t.column.columnDef.header, t.getContext()) }) : /* @__PURE__ */ e(
-        O,
-        {
-          header: t,
-          breakingContentState: n.breakingContentState,
-          columnVisibility: n.columnVisibility,
-          headerGroup: n.table.getHeaderGroups(),
-          localeString: n.localeString,
-          setBreakingContentState: n.setBreakingContentState,
-          setSorting: n.setSorting,
-          sorting: n.sorting,
-          onBreakingContentChange: n.onBreakingContentChange,
-          portalContainerRef: i
-        }
-      ) }) })
+      children: m
+    }
+  );
+}, oe = F(({ columnId: n, columnIndex: o, isNumeric: s, disableColumnReorder: i, zIndex: a, style: c, children: r }, e) => {
+  const { ref: l, isDragging: g, isDropTarget: m } = W({
+    id: n,
+    index: o,
+    disabled: i,
+    collisionDetector: j,
+    plugins: [E]
+  });
+  return /* @__PURE__ */ t(
+    k,
+    {
+      ref: (d) => {
+        l(d), typeof e == "function" ? e(d) : e && (e.current = d);
+      },
+      className: "tableHeaderCell",
+      isNumeric: s,
+      zIndex: a,
+      style: {
+        ...c,
+        cursor: g ? "grabbing" : "pointer",
+        opacity: g ? 0.5 : 1,
+        backgroundColor: m ? u.Background : void 0
+      },
+      children: r
     }
   );
-}, M = ({ showSelectAll: t, children: o }) => t ? /* @__PURE__ */ C(I, { w: "100%", align: "center", children: [
-  /* @__PURE__ */ e(S, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(Y, {}) }),
+}), z = ({ showSelectAll: n, children: o }) => n ? /* @__PURE__ */ x(R, { w: "100%", align: "center", children: [
+  /* @__PURE__ */ t(b, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ t(re, {}) }),
   o
-] }) : /* @__PURE__ */ e(b, { children: o }), Y = () => {
-  const t = f(), o = R(
-    (c) => {
-      const l = c.target.checked, n = t.getSelectableRowIds();
-      l ? t.setSelectedRowIds((r) => [.../* @__PURE__ */ new Set([...r, ...n])]) : t.setSelectedRowIds((r) => r.filter((m) => !n.includes(m)));
+] }) : /* @__PURE__ */ t(I, { children: o }), re = () => {
+  const n = C(), o = B(
+    (a) => {
+      const c = a.target.checked, r = n.getSelectableRowIds();
+      c ? n.setSelectedRowIds((e) => [.../* @__PURE__ */ new Set([...e, ...r])]) : n.setSelectedRowIds((e) => e.filter((l) => !r.includes(l)));
     },
-    [t]
-  ), { allIsSelected: s, shouldShowIndeterminateState: i } = F(() => {
-    const l = t.table.getRowModel().flatRows, n = new Set(t.selectedRowIds), r = t.getSelectableRowIds(), m = r.length > 0 && r.every((a) => n.has(a)), d = l.some((a) => n.has(a.id));
+    [n]
+  ), { allIsSelected: s, shouldShowIndeterminateState: i } = $(() => {
+    const c = n.table.getRowModel().flatRows, r = new Set(n.selectedRowIds), e = n.getSelectableRowIds(), l = e.length > 0 && e.every((m) => r.has(m)), g = c.some((m) => r.has(m.id));
     return {
-      allIsSelected: m,
-      shouldShowIndeterminateState: d && !m
+      allIsSelected: l,
+      shouldShowIndeterminateState: g && !l
     };
-  }, [t]);
-  return /* @__PURE__ */ e(
-    W,
+  }, [n]);
+  return /* @__PURE__ */ t(
+    J,
     {
       isChecked: s,
       isIndeterminate: i,
       onChange: o
     }
   );
-}, Z = () => {
-  const { localeString: t, selectedRowIds: o = [], selectionActions: s = [] } = f(), i = v[t], [c] = z("(min-width: 48em)"), l = s.length > 3 || !c, n = o.length === 1 ? i.selectedSingular.replace("{count}", "1") : i.selected.replace("{count}", o.length.toString());
-  return /* @__PURE__ */ C(
-    I,
+}, le = () => {
+  const { localeString: n, selectedRowIds: o = [], selectionActions: s = [] } = C(), i = T[n], [a] = H("(min-width: 48em)"), c = s.length > 3 || !a, r = o.length === 1 ? i.selectedSingular.replace("{count}", "1") : i.selected.replace("{count}", o.length.toString());
+  return /* @__PURE__ */ x(
+    R,
     {
-      gap: p.Medium,
+      gap: S.Medium,
       align: "center",
       alignContent: "center",
-      marginBottom: p.XSmall,
+      marginBottom: S.XSmall,
       children: [
-        /* @__PURE__ */ e(
-          S,
+        /* @__PURE__ */ t(
+          b,
           {
-            pl: p.Small,
-            color: g.OnBackground,
-            fontFamily: J.Body,
-            fontSize: G.Medium,
+            pl: S.Small,
+            color: u.OnBackground,
+            fontFamily: ee.Body,
+            fontSize: _.Medium,
             whiteSpace: "nowrap",
             style: { fontVariantNumeric: "normal" },
-            children: n
+            children: r
           }
         ),
-        /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(N, { orientation: "vertical", height: "20px" }) }),
-        /* @__PURE__ */ e(I, { gap: p.Small, align: "center", children: l ? /* @__PURE__ */ C(j, { children: [
-          /* @__PURE__ */ e(E, { variant: "ghost", rightIcon: y.TreeViewCollapse, children: i.action }),
-          /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e($, { children: s.map((r) => /* @__PURE__ */ e(x, { isMenuItem: !0, action: r }, r.name)) }) })
-        ] }) : s.map((r) => /* @__PURE__ */ e(x, { isMenuItem: !1, action: r }, r.name)) })
+        /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t(Q, { orientation: "vertical", height: "20px" }) }),
+        /* @__PURE__ */ t(R, { gap: S.Small, align: "center", children: c ? /* @__PURE__ */ x(X, { children: [
+          /* @__PURE__ */ t(q, { variant: "ghost", rightIcon: M.TreeViewCollapse, children: i.action }),
+          /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(G, { children: s.map((e) => /* @__PURE__ */ t(y, { isMenuItem: !0, action: e }, e.name)) }) })
+        ] }) : s.map((e) => /* @__PURE__ */ t(y, { isMenuItem: !1, action: e }, e.name)) })
       ]
     }
   );
-}, x = ({ isMenuItem: t, action: o }) => {
-  const { selectedRowIds: s, localeString: i } = f(), c = v[i], l = R(() => {
+}, y = ({ isMenuItem: n, action: o }) => {
+  const { selectedRowIds: s, localeString: i } = C(), a = T[i], c = B(() => {
     o.onClick(s || []);
   }, [o, s]);
-  return t ? /* @__PURE__ */ e(Q, { onClick: l, children: o.variant === "delete" ? /* @__PURE__ */ e(S, { as: "span", color: g.Error, children: o.name }) : o.name }) : o.variant === "delete" ? /* @__PURE__ */ e(
-    X,
+  return n ? /* @__PURE__ */ t(U, { onClick: c, children: o.variant === "delete" ? /* @__PURE__ */ t(b, { as: "span", color: u.Error, children: o.name }) : o.name }) : o.variant === "delete" ? /* @__PURE__ */ t(
+    Y,
     {
-      onClick: l,
-      icon: y.Delete,
-      "aria-label": c.deleteSelectedRows,
+      onClick: c,
+      icon: M.Delete,
+      "aria-label": a.deleteSelectedRows,
       variant: "ghost"
     }
-  ) : /* @__PURE__ */ e(q, { onClick: l, variant: "ghost", children: o.name });
-}, we = H(K);
+  ) : /* @__PURE__ */ t(Z, { onClick: c, variant: "ghost", children: o.name });
+}, Te = L(te);
 export {
-  we as TableHeaderRow
+  Te as TableHeaderRow
 };

package/dist/components/table/table-row.js

@@ -1,16 +1,16 @@
 import { jsx as s } from "react/jsx-runtime";
-import { Tr as p } from "@chakra-ui/react";
-import { memo as h, useCallback as d, useMemo as f } from "react";
+import { Tr as h } from "@chakra-ui/react";
+import { memo as f, useCallback as d, useMemo as S } from "react";
 import { TableCell as x } from "./table-cell.js";
-import { useTableContext as S } from "./table-context.js";
-const I = ({
+import { useTableContext as I } from "./table-context.js";
+const T = ({
   row: e,
   visibleCells: o,
   onClickRow: n,
   showRowHoverStyle: l,
   onRowClickIndication: i
 }) => {
-  const a = S(), c = d(
+  const a = I(), c = d(
     (t) => {
       n && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(e.original, t));
     },
@@ -20,9 +20,9 @@ const I = ({
       t.stopPropagation(), e.getToggleSelectedHandler(), n && n(e.original, t), i && a.setRowHighlight({ [t.currentTarget.id]: !0 });
     },
     [e, n, i, a]
-  ), u = f(() => e.getIsSelected() || a.selectedRowIds?.includes(e.id), [e, a.rowHighlight, a.selectedRowIds]), m = a.getRowActions?.(e.original), b = (t) => a.disableSelectionCheckbox?.(t) ?? !1;
+  ), u = S(() => e.getIsSelected() || a.selectedRowIds?.includes(e.id), [e, a.rowHighlight, a.selectedRowIds]), m = a.getRowActions?.(e.original), b = (t) => a.disableSelectionCheckbox?.(t) ?? !1;
   return /* @__PURE__ */ s(
-    p,
+    h,
     {
       id: e.id,
       tabIndex: n ? 0 : void 0,
@@ -32,8 +32,8 @@ const I = ({
       "data-row-selected": u,
       "data-allow-hovered": l,
       "data-is-root-level": e.depth === 0,
-      children: o.map((t) => {
-        const r = t.column.getIndex() === 0;
+      children: o.map((t, p) => {
+        const r = p === 0;
         return /* @__PURE__ */ s(
           x,
           {
@@ -53,7 +53,7 @@ const I = ({
     },
     e.id
   );
-}, M = h(I);
+}, k = f(T);
 export {
-  M as TableRow
+  k as TableRow
 };

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

@@ -4,5 +4,5 @@ import { TableData, TableProps } from './types.js';
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/table
  */
-export declare function Table<TData extends TableData>({ columns, data, localeString, expandedState, initialExpandedState, initialBreakingContentState, initialColumnVisibilityState, columnVisibilityState, onColumnVisibilityChange, onExpandedChange, onBreakingContentChange, getRowId, getRowActions, id, customRowIndication, onSortingChange, initialSortingState, sortingState, onSelectionChange, initialSelectionState, selectionState, selectionActions, disableSelectionCheckbox, children, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends TableData>({ columns, data, localeString, expandedState, initialExpandedState, initialBreakingContentState, initialColumnVisibilityState, columnVisibilityState, onColumnVisibilityChange, onExpandedChange, onBreakingContentChange, getRowId, getRowActions, id, customRowIndication, onSortingChange, initialSortingState, sortingState, onSelectionChange, initialSelectionState, selectionState, selectionActions, disableSelectionCheckbox, enableColumnReorder, columnOrderState, initialColumnOrder, onColumnOrderChange, children, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,SAAS,SAAS,EAAE,EAC9C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,oBAAyB,EACzB,2BAAgC,EAChC,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,QAAQ,EACR,aAAa,EACb,EAAE,EACF,mBAAmB,EACnB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,GACR,EAAE,UAAU,CAAC,KAAK,CAAC,2CA8BnB"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,SAAS,SAAS,EAAE,EAC9C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,oBAAyB,EACzB,2BAAgC,EAChC,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,QAAQ,EACR,aAAa,EACb,EAAE,EACF,mBAAmB,EACnB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,QAAQ,GACR,EAAE,UAAU,CAAC,KAAK,CAAC,2CAkCnB"}

package/dist/components/table/table.js

@@ -1,6 +1,6 @@
-import { jsx as q } from "react/jsx-runtime";
-import { TableProvider as w } from "./table-context-provider.js";
-function A({
+import { jsx as A } from "react/jsx-runtime";
+import { TableProvider as B } from "./table-context-provider.js";
+function E({
   columns: r,
   data: o,
   localeString: e,
@@ -24,10 +24,14 @@ function A({
   selectionState: P,
   selectionActions: g,
   disableSelectionCheckbox: h,
-  children: k
+  enableColumnReorder: k,
+  columnOrderState: q,
+  initialColumnOrder: w,
+  onColumnOrderChange: y,
+  children: z
 }) {
-  return /* @__PURE__ */ q(
-    w,
+  return /* @__PURE__ */ A(
+    B,
     {
       columns: r,
       data: o,
@@ -52,10 +56,14 @@ function A({
       selectionState: P,
       selectionActions: g,
       disableSelectionCheckbox: h,
-      children: k
+      enableColumnReorder: k,
+      columnOrderState: q,
+      initialColumnOrder: w,
+      onColumnOrderChange: y,
+      children: z
     }
   );
 }
 export {
-  A as Table
+  E as Table
 };

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

@@ -1,2 +1 @@
-export {};
 //# sourceMappingURL=table.spec.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.spec.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"table.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,+CAA+C,CAAC"}

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

@@ -114,6 +114,26 @@ interface BaseTableProps<TData extends TableData> {
      * disableSelectionCheckbox: (row) => row.original.locked === true
      */
     disableSelectionCheckbox?: (row: Row<TableRow<TData>>) => boolean;
+    /**
+     * Enable drag-and-drop column reordering. When enabled, users can drag column headers
+     * to rearrange the order of columns.
+     */
+    enableColumnReorder?: boolean;
+    /**
+     * The current column order as an array of column IDs.
+     * If provided, the column order will be "controlled", meaning that you have to listen
+     * to onColumnOrderChange and change this state yourself.
+     */
+    columnOrderState?: string[];
+    /**
+     * Initial column order as an array of column IDs.
+     * Use together with onColumnOrderChange if you want to store the column order state.
+     */
+    initialColumnOrder?: string[];
+    /**
+     * Called when the column order changes, with the new column order.
+     */
+    onColumnOrderChange?: (columnOrder: string[]) => void;
 }
 export type TableProps<TData extends TableData = TableData> = PropsWithChildren<BaseTableProps<TData>>;
 export type SelectionAction = {
@@ -128,6 +148,7 @@ export type SelectionAction = {
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {
         isNumeric?: boolean;
+        disableColumnReorder?: boolean;
         _dummyTData?: TData;
         _dummyTValue?: TValue;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/table/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,GAAG,EACH,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,YAAY,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,GAAG,EACH,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,0BAA0B,EAC1B,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,GACf,CAAC;AAEF,UAAU,OAAO,CAAC,KAAK,SAAS,SAAS;IACxC,OAAO,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAE/B;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAEnF,UAAU,cAAc,CAAC,KAAK,SAAS,SAAS;IAC/C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;IAExB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IAEtC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAElD;;OAEG;IACH,oBAAoB,CAAC,EAAE,aAAa,CAAC;IAErC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAE5D;;;OAGG;IACH,4BAA4B,CAAC,EAAE,eAAe,CAAC;IAE/C;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAMlF,qBAAqB,CAAC,EAAE,eAAe,CAAC;IAExC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,MAAM,CAAC;IAElG;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CACf,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,KAChB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,OAAO,QAAQ,CAAC,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IAE3G;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEtD,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IAExC,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAEhD,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,YAAY,CAAC;IAEnC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAEvD,8HAA8H;IAC9H,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IAErC;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,OAAO,CAAC;IAElE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS,IAAI,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvG,MAAM,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEF;;;GAGG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IACtC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QACjD,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAE/B,WAAW,CAAC,EAAE,KAAK,CAAC;QAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACtB;IACD,UAAU,SAAS,CAAC,KAAK,SAAS,OAAO;QACxC,KAAK,CAAC,EAAE,KAAK,CAAC;KACd;CACD"}

package/dist/components/toggle-button/toggle-button.spec.d.ts

@@ -1,2 +1 @@
-export {};
 //# sourceMappingURL=toggle-button.spec.d.ts.map

package/dist/components/toggle-button/toggle-button.spec.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/toggle-button.spec.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"toggle-button.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/toggle-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,+CAA+C,CAAC"}