@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

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

@@ -1,124 +1,132 @@
-import { jsxs as d, Fragment as a, jsx as n } from "react/jsx-runtime";
+import { jsxs as s, Fragment as f, jsx as o } from "react/jsx-runtime";
 import { Portal as j } from "@chakra-ui/react";
-import { flexRender as A } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as L, useCallback as D, useMemo as p } from "react";
-import { useTableContext as R } from "./table-context.js";
-import { translations as U } from "./translations.js";
-import { Icon as S } from "../icon/icon.js";
-import { Icons as l } from "../icon/types.js";
-import { MenuItem as t } from "../menu/menu-item.js";
-import { Text as r } from "../text/text.js";
-import { MenuDivider as k } from "../menu/menu-divider.js";
-import { Switch as X } from "../switch/switch.js";
-import { Menu as v } from "../menu/menu.js";
-import { MenuBoxButton as $ } from "../menu/menu-box-button.js";
-import { MenuList as q } from "../menu/menu-list.js";
-import { ThemeIconSizeVariable as F, ThemeColorVariable as w, ThemeSpaceVariable as J, ThemeFontSizeVariable as z } from "../../theme/theme-types.js";
-const K = ({
-  header: o,
-  breakingContentState: m,
-  onBreakingContentChange: h,
-  setBreakingContentState: C,
+import { flexRender as L } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { memo as U, useCallback as M, useMemo as a } from "react";
+import { useTableContext as X } from "./table-context.js";
+import { translations as A } from "./translations.js";
+import { SortDescIcon as k } from "../icon/icons/sort-desc-icon.js";
+import { SortAscIcon as D } from "../icon/icons/sort-asc-icon.js";
+import { MenuItem as l } from "../menu/menu-item.js";
+import { Text as c } from "../text/text.js";
+import { FilterIcon as R } from "../icon/icons/filter-icon.js";
+import { MenuDivider as F } from "../menu/menu-divider.js";
+import { HideIcon as $ } from "../icon/icons/hide-icon.js";
+import { ThumbtackIcon as q } from "../icon/icons/thumbtack-icon.js";
+import { Switch as J } from "../switch/switch.js";
+import { Menu as K } from "../menu/menu.js";
+import { MenuBoxButton as N } from "../menu/menu-box-button.js";
+import { MenuList as Q } from "../menu/menu-list.js";
+import { ThemeIconSizeVariable as S, ThemeColorVariable as v, ThemeSpaceVariable as W, ThemeFontSizeVariable as w } from "../../theme/theme-types.js";
+const Y = ({
+  header: n,
+  breakingContentState: r,
+  onBreakingContentChange: p,
+  setBreakingContentState: h,
   headerGroup: g,
-  sorting: u,
-  setSorting: f,
-  localeString: V,
-  portalContainerRef: y
+  sorting: d,
+  setSorting: u,
+  localeString: z,
+  portalContainerRef: V,
+  dragRef: y
 }) => {
-  const e = U[V], H = R(), { getTableFilterMethods: s } = H, T = D(
-    (i) => {
-      const c = {
-        ...m,
-        [o.column.id]: i.target.checked
+  const i = A[z], H = X(), { getTableFilterMethods: m } = H, C = M(
+    (e) => {
+      const t = {
+        ...r,
+        [n.column.id]: e.target.checked
       };
-      C(c), h?.(c);
+      h(t), p?.(t);
     },
-    [m, o.column.id, h, C]
-  ), b = D(
-    (i) => {
-      const c = i.getIndex();
+    [r, n.column.id, p, h]
+  ), b = M(
+    (e) => {
+      const t = e.getIndex();
       g.forEach((E) => {
-        E.headers.forEach((O, I) => {
-          const { column: M } = O;
-          i.getIsPinned() ? I >= c && M.pin(!1) : I <= c && M.pin("left");
+        E.headers.forEach((O, x) => {
+          const { column: I } = O;
+          e.getIsPinned() ? x >= t && I.pin(!1) : x <= t && I.pin("left");
         });
       });
     },
     [g]
-  ), P = p(() => /* @__PURE__ */ d(a, { children: [
-    u.find((i) => i.id === o.column.id) && (u.find((i) => i.desc) ? /* @__PURE__ */ n(S, { icon: l.SortDesc, size: F.XSmall }) : /* @__PURE__ */ n(S, { icon: l.SortAsc, size: F.XSmall })),
-    o.column.columnDef.header
-  ] }), [o.column.columnDef.header, o.column.id, u]), x = p(() => s()?.canFilterOnColumn(o.column.id) ?? !1, [o.column.id, s]), B = p(() => /* @__PURE__ */ d(a, { children: [
-    /* @__PURE__ */ n(
-      t,
+  ), P = a(() => /* @__PURE__ */ s(f, { children: [
+    d.find((e) => e.id === n.column.id) && (d.find((e) => e.desc) ? /* @__PURE__ */ o(k, { size: S.XSmall }) : /* @__PURE__ */ o(D, { size: S.XSmall })),
+    n.column.columnDef.header
+  ] }), [n.column.columnDef.header, n.column.id, d]), T = a(() => m()?.canFilterOnColumn(n.column.id) ?? !1, [n.column.id, m]), B = a(() => /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ o(
+      l,
       {
-        onClick: () => f([{ desc: !1, id: o.column.id }]),
-        leftIcon: l.SortAsc,
-        children: /* @__PURE__ */ n(r, { children: e.sortUp })
+        onClick: () => u([{ desc: !1, id: n.column.id }]),
+        leftIcon: D,
+        value: "sort-asc",
+        children: /* @__PURE__ */ o(c, { children: i.sortUp })
       }
     ),
-    /* @__PURE__ */ n(
-      t,
+    /* @__PURE__ */ o(
+      l,
       {
-        onClick: () => f([{ desc: !0, id: o.column.id }]),
-        leftIcon: l.SortDesc,
-        children: /* @__PURE__ */ n(r, { children: e.sortDown })
+        onClick: () => u([{ desc: !0, id: n.column.id }]),
+        leftIcon: k,
+        value: "sort-desc",
+        children: /* @__PURE__ */ o(c, { children: i.sortDown })
       }
     ),
-    x && /* @__PURE__ */ n(
-      t,
+    T && /* @__PURE__ */ o(
+      l,
       {
         onClick: () => {
-          const i = s();
-          i?.onToggleFilterVisibility && i.onToggleFilterVisibility(o.column.id);
+          const e = m();
+          e?.onToggleFilterVisibility && e.onToggleFilterVisibility(n.column.id);
         },
-        leftIcon: l.Filter,
-        children: /* @__PURE__ */ n(r, { children: e.filter })
+        leftIcon: R,
+        value: "filter",
+        children: /* @__PURE__ */ o(c, { children: i.filter })
       }
     ),
-    /* @__PURE__ */ n(k, {}),
-    o.column.getCanHide() && /* @__PURE__ */ n(t, { onClick: o.column.getToggleVisibilityHandler(), leftIcon: l.Hide, children: /* @__PURE__ */ n(r, { children: e.hideColumn }) }),
-    /* @__PURE__ */ n(t, { onClick: () => b(o.column), leftIcon: l.Thumbtack, children: /* @__PURE__ */ n(r, { children: o.column.getIsPinned() ? e.stopPinningColumn : e.pinUpToColumn }) }),
-    /* @__PURE__ */ n(k, {}),
-    /* @__PURE__ */ d(t, { itemType: "switch", children: [
-      e.breakingContent,
-      /* @__PURE__ */ n(
-        X,
+    /* @__PURE__ */ o(F, {}),
+    n.column.getCanHide() && /* @__PURE__ */ o(l, { onClick: n.column.getToggleVisibilityHandler(), leftIcon: $, value: "hide", children: /* @__PURE__ */ o(c, { children: i.hideColumn }) }),
+    /* @__PURE__ */ o(l, { onClick: () => b(n.column), leftIcon: q, value: "pin", children: /* @__PURE__ */ o(c, { children: n.column.getIsPinned() ? i.stopPinningColumn : i.pinUpToColumn }) }),
+    /* @__PURE__ */ o(F, {}),
+    /* @__PURE__ */ s(l, { itemType: "switch", value: "breaking-content", children: [
+      i.breakingContent,
+      /* @__PURE__ */ o(
+        J,
         {
-          onChange: T,
-          isChecked: m[o.column.id]
+          onChange: C,
+          isChecked: r[n.column.id]
         }
       )
     ] })
   ] }), [
+    r,
+    T,
     m,
-    x,
-    s,
     b,
-    o.column,
-    T,
-    f,
-    e
+    n.column,
+    C,
+    u,
+    i
   ]);
-  return /* @__PURE__ */ n(v, { isLazy: !0, children: ({ isOpen: i }) => /* @__PURE__ */ d(a, { children: [
-    /* @__PURE__ */ n(
-      $,
+  return /* @__PURE__ */ o(K, { isLazy: !0, children: ({ isOpen: e }) => /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ o(
+      N,
       {
-        color: w.OnBackgroundSubdued,
+        ref: y,
+        color: v.OnBackgroundSubdued,
         textTransform: "none",
-        fontSize: z.Small,
+        fontSize: w.Small,
         h: "40px",
         display: "flex",
         alignItems: "center",
-        padding: `0px 0px 0px ${J.Small}`,
-        backgroundColor: i ? w.BackgroundDisabled : "unset",
+        padding: `0px 0px 0px ${W.Small}`,
+        backgroundColor: e ? v.BackgroundDisabled : "unset",
         w: "100%",
-        children: A(P, o.getContext())
+        children: L(P, n.getContext())
       }
     ),
-    /* @__PURE__ */ n(j, { containerRef: y, children: /* @__PURE__ */ n(q, { fontSize: z.Medium, children: B }) })
+    /* @__PURE__ */ o(j, { container: V, children: /* @__PURE__ */ o(Q, { fontSize: w.Medium, children: B }) })
   ] }) });
-}, un = L(K);
+}, bo = U(Y);
 export {
-  un as TableHeaderDropdown
+  bo as TableHeaderDropdown
 };

package/dist/components/table/table-header-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AA0B/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CAkD3F,CAAC;AA0TF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAK/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CAiD3F,CAAC;AA4OF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}

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

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

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

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const tableRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=table-recipe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-recipe.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,WAAW,EAAE,oBAUxB,CAAC"}