@caspeco/casper-ui-library 8.3.0 → 8.4.1

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

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

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"}