@caspeco/casper-ui-library 8.4.1 → 9.0.0-alpha.1

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

@@ -1,222 +1,185 @@
-import { jsx as e, Fragment as b, jsxs as C } from "react/jsx-runtime";
-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 F } from "./table-header-dropdown.js";
+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 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 { 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 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 { 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 m, ThemeSpaceVariable as h, ThemeFontSizeVariable as G, ThemeFontVariable as J } from "../../theme/theme-types.js";
-const U = ({
-  headerGroup: o,
-  hideTableHeaderDropdown: n,
-  portalContainerRef: a
+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 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,
+  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: o.headers.length,
-      sx: {
-        cursor: "default",
-        "& div:hover": {
+      colSpan: t.headers.length,
+      cursor: "default",
+      css: {
+        "& div:not(label *):hover": {
           backgroundColor: "transparent !important"
         },
-        "div span": {
-          color: m.OnBackground
-        }
+        "& div span": {
+          color: d.OnBackground
+        },
+        borderBottom: `1px solid ${d.OnBackgroundBorder}`,
+        paddingLeft: a ? "24px" : void 0
       },
+      scope: "col",
       zIndex: 1,
-      style: {
-        borderBottom: `1px solid ${m.OnBackgroundBorder}`,
-        paddingLeft: s ? "24px" : void 0
-      },
-      children: /* @__PURE__ */ e(y, { showSelectAll: !0, children: /* @__PURE__ */ e(ee, {}) })
+      children: /* @__PURE__ */ e(v, { showSelectAll: !0, children: /* @__PURE__ */ e(_, {}) })
     }
-  ) : /* @__PURE__ */ e(b, { children: o.headers.map((l, t) => /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ e(f, { children: t.headers.map((o, n) => /* @__PURE__ */ e(
     Y,
     {
-      header: l,
-      hideTableHeaderDropdown: n,
-      applyActionMenuPadding: s,
-      portalContainerRef: a,
-      isFirstColumn: !l.isPlaceholder && t === 0,
-      enableColumnReorder: r.enableColumnReorder
+      header: o,
+      hideTableHeaderDropdown: r,
+      applyActionMenuPadding: a,
+      portalContainerRef: s,
+      isFirstColumn: !o.isPlaceholder && n === 0,
+      enableColumnReorder: l.enableColumnReorder
     },
-    l.id
-  )) }) }, o.id) });
+    o.id
+  )) }) }, t.id) });
 }, Y = ({
-  header: o,
-  hideTableHeaderDropdown: n,
-  applyActionMenuPadding: a,
-  portalContainerRef: r,
-  isFirstColumn: s = !1,
-  enableColumnReorder: c = !1
+  header: t,
+  hideTableHeaderDropdown: r,
+  applyActionMenuPadding: s,
+  portalContainerRef: l,
+  isFirstColumn: a = !1,
+  enableColumnReorder: i = !1
 }) => {
-  const l = P(null), t = f(), { column: i } = o, g = k((u) => {
-    const S = u.getIsPinned(), x = u.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: 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
+      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
     };
-  }, []), 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: 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
-    }
-  );
-}, 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,
+    C.ColumnHeader,
     {
-      ref: (u) => {
-        i(u), typeof t == "function" ? t(u) : t && (t.current = u);
-      },
       className: "tableHeaderCell",
-      isNumeric: a,
-      zIndex: s,
+      textAlign: n.columnDef.meta?.isNumeric ? "end" : "start",
+      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: {
-        ...c,
-        cursor: g ? "grabbing" : "pointer",
-        opacity: g ? 0.5 : 1,
-        backgroundColor: d ? m.Background : void 0
+        ...y(n),
+        borderBottom: `1px solid ${d.OnBackgroundBorder}`,
+        paddingLeft: a && s ? "24px" : void 0
       },
-      children: l
+      children: /* @__PURE__ */ e(v, { 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
+        }
+      ) }) })
     }
   );
-}), 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)));
+}, v = ({ 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)));
     },
-    [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));
+    [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: i,
-      shouldShowIndeterminateState: g && !i
+      allIsSelected: c,
+      shouldShowIndeterminateState: S && !c
     };
-  }, [o]);
+  }, [t]);
   return /* @__PURE__ */ e(
-    K,
-    {
-      isChecked: a,
-      isIndeterminate: r,
-      onChange: n
-    }
-  );
-}, 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(
-    w,
+    E,
     {
-      gap: h.Medium,
-      align: "center",
-      alignContent: "center",
-      marginBottom: h.XSmall,
-      children: [
-        /* @__PURE__ */ e(
-          p,
-          {
-            pl: h.Small,
-            color: m.OnBackground,
-            fontFamily: J.Body,
-            fontSize: G.Medium,
-            whiteSpace: "nowrap",
-            style: { fontVariantNumeric: "normal" },
-            children: l
-          }
-        ),
-        /* @__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)) })
-      ]
+      isChecked: s,
+      isIndeterminate: l,
+      onCheckedChange: r
     }
   );
-}, 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,
+}, _ = () => {
+  const { localeString: t, selectedRowIds: r = [], selectionActions: s = [] } = u(), l = B[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 = B[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: v.Delete,
-      "aria-label": s.deleteSelectedRows,
+      onClick: i,
+      icon: Q,
+      "aria-label": a.deleteSelectedRows,
+      size: "sm",
       variant: "ghost"
     }
-  ) : /* @__PURE__ */ e(q, { onClick: c, variant: "ghost", children: n.name });
-}, xe = H(U);
+  ) : /* @__PURE__ */ e(q, { onClick: i, size: "sm", variant: "ghost", children: r.name });
+}, Re = V(X);
 export {
-  xe 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"}

package/dist/{theme/theme-config/components/table-theme.js → components/table/table-recipe.js}

@@ -1,38 +1,38 @@
-import { createMultiStyleConfigHelpers as a, defineStyle as e } from "@chakra-ui/react";
-import { ThemeColorVariable as o, ThemeSpaceVariable as t, ThemeFontVariable as n } from "../../theme-types.js";
-import { ThemeFontSizeToken as r } from "../theme-tokens.js";
-import { tableAnatomy as d } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
-const { definePartsStyle: l, defineMultiStyleConfig: i } = a(d.keys), c = e({
+import { ThemeFontSizeToken as e } from "../../theme/theme-tokens.js";
+import { ThemeColorVariable as o, ThemeSpaceVariable as r, ThemeFontVariable as t } from "../../theme/theme-types.js";
+import { defineSlotRecipe as a, defineStyle as n } from "@chakra-ui/react";
+const d = {
   position: "relative",
-  fontFamily: n.Body,
-  fontSize: r.Small,
-  thead: {
+  fontFamily: t.Body,
+  fontSize: e.Small,
+  width: "100%",
+  "& thead": {
     '&[data-sticky-headers="true"]': {
       position: "sticky",
       top: 0,
       zIndex: 5
     }
   },
-  th: {
+  "& th": {
     padding: "0px",
     position: "relative",
-    fontSize: r.Small,
+    fontSize: e.Small,
     height: "40px",
     color: o.OnBackgroundSubdued,
     fontWeight: 400,
     textTransform: "none",
-    div: {
+    "& button": {
       _hover: {
         backgroundColor: o.BackgroundDisabled
       }
     }
   },
-  td: {
+  "& td": {
     color: o.OnBackground,
-    padding: `0px 0px 0px ${t.Small}`,
+    padding: `0px 0px 0px ${r.Small}`,
     borderRight: `1px solid ${o.OnBackgroundBorder}`,
     height: "40px",
-    gap: t.XSmall,
+    gap: r.XSmall,
     _last: {
       borderRight: "none"
     },
@@ -41,21 +41,17 @@ const { definePartsStyle: l, defineMultiStyleConfig: i } = a(d.keys), c = e({
     },
     "&:has(textarea)": { padding: "0px !important" }
   },
-  tr: {
+  "& tr": {
     borderColor: o.OnBackgroundBorder
   }
-}), p = e({
+}, l = {
   cursor: "pointer",
   backgroundColor: o.Surface,
-  div: {
-    span: {
-      color: o.OnBackgroundSubdued,
-      fontWeight: 400
-    }
-  }
-}), s = e({
+  color: o.OnBackgroundSubdued,
+  fontWeight: 400
+}, i = {
   color: o.OnBackground
-}), b = e({
+}, c = n({
   borderTop: "none",
   _first: {
     borderTop: "none"
@@ -69,7 +65,7 @@ const { definePartsStyle: l, defineMultiStyleConfig: i } = a(d.keys), c = e({
   },
   _hover: {
     // Show action menu button on row hover
-    ".action-menu-button": { opacity: 1 },
+    "& .action-menu-button": { opacity: 1 },
     '&[data-allow-hovered="true"]': {
       backgroundColor: o.AccentHoverAlpha
     }
@@ -77,20 +73,22 @@ const { definePartsStyle: l, defineMultiStyleConfig: i } = a(d.keys), c = e({
   '&[data-is-root-level="true"]:not(:first-of-type)': {
     borderTop: `1px solid ${o.OnBackgroundBorder}`
   }
-}), u = e({
-  tr: {
+}), p = {
+  "& tr": {
     zIndex: 10,
     backgroundColor: o.OnBackgroundSubdued
   }
-}), g = l({
-  table: c,
-  tfoot: s,
-  th: p,
-  tr: b,
-  thead: u
-}), k = i({
-  baseStyle: g
+}, h = a({
+  className: "table",
+  slots: ["root", "header", "body", "row", "columnHeader", "cell", "footer"],
+  base: {
+    root: d,
+    footer: i,
+    columnHeader: l,
+    row: c,
+    header: p
+  }
 });
 export {
-  k as tableConfig
+  h as tableRecipe
 };

package/dist/components/table/table-row-expand-toggle-button.js

@@ -1,32 +1,33 @@
-import { jsx as m } from "react/jsx-runtime";
-import { memo as c } from "react";
-import { translations as d } from "./translations.js";
-import { IconButton as x } from "../icon-button/icon-button.js";
-import { Icons as r } from "../icon/types.js";
-import { ThemeSpaceVariable as g } from "../../theme/theme-types.js";
-const w = c(
-  ({ row: o, localeString: i, rowIsExpanded: a, hidden: e }) => {
-    const n = d[i], l = o.getToggleExpandedHandler(), p = (t) => {
-      t.stopPropagation(), l();
-    }, s = () => a ? `${n.collapseRow} ${o.index + 1}` : `${n.expandRow} ${o.index + 1}`;
-    return /* @__PURE__ */ m(
-      x,
+import { jsx as p } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { translations as c } from "./translations.js";
+import { IconButton as d } from "../icon-button/icon-button.js";
+import { TreeViewCollapseIcon as x } from "../icon/icons/tree-view-collapse-icon.js";
+import { TreeViewExpandIcon as g } from "../icon/icons/tree-view-expand-icon.js";
+import { ThemeSpaceVariable as f } from "../../theme/theme-types.js";
+const V = s(
+  ({ row: o, localeString: a, rowIsExpanded: n, hidden: t }) => {
+    const r = c[a], i = o.getToggleExpandedHandler(), l = (e) => {
+      e.stopPropagation(), i();
+    }, m = () => n ? `${r.collapseRow} ${o.index + 1}` : `${r.expandRow} ${o.index + 1}`;
+    return /* @__PURE__ */ p(
+      d,
       {
         size: "xs",
-        mr: g.XSmall,
+        mr: f.XSmall,
         variant: "ghost",
-        "aria-label": s(),
-        icon: a ? r.TreeViewCollapse : r.TreeViewExpand,
-        onClick: p,
-        onKeyDown: (t) => t.stopPropagation(),
-        visibility: e ? "hidden" : "initial",
-        "aria-hidden": e,
-        tabIndex: e ? -1 : 0,
+        "aria-label": m(),
+        icon: n ? x : g,
+        onClick: l,
+        onKeyDown: (e) => e.stopPropagation(),
+        visibility: t ? "hidden" : "initial",
+        "aria-hidden": t,
+        tabIndex: t ? -1 : 0,
         borderRadius: "0"
       }
     );
   }
 );
 export {
-  w as TableRowExpandToggleButton
+  V as TableRowExpandToggleButton
 };

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

@@ -1,51 +1,51 @@
-import { jsx as s } from "react/jsx-runtime";
-import { Tr as h } from "@chakra-ui/react";
-import { memo as f, useCallback as d, useMemo as S } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { Table as h } from "@chakra-ui/react";
+import { memo as f, useCallback as r, useMemo as S } from "react";
 import { TableCell as x } from "./table-cell.js";
 import { useTableContext as I } from "./table-context.js";
 const T = ({
   row: e,
-  visibleCells: o,
-  onClickRow: n,
-  showRowHoverStyle: l,
+  visibleCells: n,
+  onClickRow: o,
+  showRowHoverStyle: d,
   onRowClickIndication: i
 }) => {
-  const a = I(), c = d(
+  const a = I(), c = r(
     (t) => {
-      n && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(e.original, t));
+      o && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o(e.original, t));
     },
-    [n, e.original]
-  ), g = d(
+    [o, e.original]
+  ), g = r(
     (t) => {
-      t.stopPropagation(), e.getToggleSelectedHandler(), n && n(e.original, t), i && a.setRowHighlight({ [t.currentTarget.id]: !0 });
+      t.stopPropagation(), e.getToggleSelectedHandler(), o && o(e.original, t), i && a.setRowHighlight({ [t.currentTarget.id]: !0 });
     },
-    [e, n, i, a]
-  ), 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(
-    h,
+    [e, o, i, a]
+  ), u = S(() => e.getIsSelected() || a.selectedRowIds?.includes(e.id), [e, a.rowHighlight, a.selectedRowIds]), b = a.getRowActions?.(e.original), m = (t) => a.disableSelectionCheckbox?.(t) ?? !1;
+  return /* @__PURE__ */ l(
+    h.Row,
     {
       id: e.id,
-      tabIndex: n ? 0 : void 0,
+      tabIndex: o ? 0 : void 0,
       onClick: g,
       onKeyDown: c,
-      cursor: n ? "pointer" : void 0,
+      cursor: o ? "pointer" : void 0,
       "data-row-selected": u,
-      "data-allow-hovered": l,
+      "data-allow-hovered": d,
       "data-is-root-level": e.depth === 0,
-      children: o.map((t, p) => {
-        const r = p === 0;
-        return /* @__PURE__ */ s(
+      children: n.map((t, p) => {
+        const s = p === 0;
+        return /* @__PURE__ */ l(
           x,
           {
             cell: t,
-            visibleCells: o,
+            visibleCells: n,
             row: e,
             rowIsExpanded: e.getIsExpanded(),
             breakingContentState: a.breakingContentState,
             localeString: a.localeString,
-            actionMenu: r ? m : void 0,
-            canSelectRows: a.canSelectRows && r,
-            isCheckboxDisabled: b(e)
+            actionMenu: s ? b : void 0,
+            canSelectRows: a.canSelectRows && s,
+            isCheckboxDisabled: m(e)
           },
           t.id
         );
@@ -53,7 +53,7 @@ const T = ({
     },
     e.id
   );
-}, k = f(T);
+}, R = f(T);
 export {
-  k as TableRow
+  R as TableRow
 };