@caspeco/casper-ui-library 8.2.0 → 8.2.2

package/dist/components/combobox/combobox-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-menu.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-menu.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACX,kBAAkB,EAIlB,MAAM,SAAS,CAAC;AA2CjB,wBAAgB,qBAAqB,CAAC,EACrC,cAAc,EACd,SAAS,GACT,EAAE;IACF,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;CACnB,2CAEA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,2CAiGrD"}
+{"version":3,"file":"combobox-menu.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-menu.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACX,kBAAkB,EAIlB,MAAM,SAAS,CAAC;AA2CjB,wBAAgB,qBAAqB,CAAC,EACrC,cAAc,EACd,SAAS,GACT,EAAE;IACF,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;CACnB,2CAEA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,2CAkGrD"}

package/dist/components/combobox/combobox-menu.js

@@ -130,6 +130,7 @@ function pe(o) {
             backgroundColor: d.Surface,
             padding: `${c.Small} ${c.Medium}`,
             borderTop: `${N.XSmall} ${d.OnSurfaceBorder}`,
+            tabIndex: -1,
             children: l
           }
         )
@@ -179,9 +180,9 @@ const A = ({
       p.stopPropagation(), p.preventDefault(), s(r);
     };
     i.length > 0 && (i[i.length - 1] -= 1);
-    const m = P++, B = r.children && r.children.length > 0, I = !B || r.isSelectableParent;
+    const m = P++, I = r.children && r.children.length > 0, B = !I || r.isSelectableParent;
     let $ = e.some((p) => p.id === r.id);
-    return a && B && !r.isSelectableParent && w(r, e) && ($ = !0), /* @__PURE__ */ g(T, { children: [
+    return a && I && !r.isSelectableParent && w(r, e) && ($ = !0), /* @__PURE__ */ g(T, { children: [
       /* @__PURE__ */ g(
         A,
         {
@@ -227,7 +228,7 @@ const A = ({
               }),
               /* @__PURE__ */ n(H, { item: r, asPlainText: !0, highlightQuery: x })
             ] }),
-            I ? /* @__PURE__ */ n(X, { isSingleSelect: k, isChecked: $ }) : a && !k && /* @__PURE__ */ n(W, { isIndeterminate: S(r), isChecked: $ })
+            B ? /* @__PURE__ */ n(X, { isSingleSelect: k, isChecked: $ }) : a && !k && /* @__PURE__ */ n(W, { isIndeterminate: S(r), isChecked: $ })
           ]
         }
       ),
@@ -253,7 +254,7 @@ const A = ({
     e.stopPropagation(), e.preventDefault(), s(i);
   };
   return o.map((e, i) => {
-    const r = t.some((f) => f.id === e.id), v = e.children?.length, m = e.id === "_back", B = x.opened[x.opened.length - 1], I = e.id === B?.id, $ = m ? /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", children: [
+    const r = t.some((f) => f.id === e.id), v = e.children?.length, m = e.id === "_back", I = x.opened[x.opened.length - 1], B = e.id === I?.id, $ = m ? /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", children: [
       /* @__PURE__ */ n(z, { icon: D.Back, size: F.Small }),
       e.label
     ] }) : /* @__PURE__ */ g(_, { children: [
@@ -264,7 +265,7 @@ const A = ({
         ] }, f)),
         /* @__PURE__ */ n(H, { item: e, asPlainText: w })
       ] }),
-      P ? void 0 : v && !I && !S ? /* @__PURE__ */ n(
+      P ? void 0 : v && !B && !S ? /* @__PURE__ */ n(
         z,
         {
           icon: D.Forward,
@@ -272,7 +273,7 @@ const A = ({
           color: d.OnBackgroundSubdued
         }
       ) : /* @__PURE__ */ n(X, { isSingleSelect: b, isChecked: r })
-    ] }), p = u.length > 0 && u.length - 1 === i && u.length < o.length, M = !P && !S && (p || (m || I));
+    ] }), p = u.length > 0 && u.length - 1 === i && u.length < o.length, M = !P && !S && (p || (m || B));
     return /* @__PURE__ */ g(T, { children: [
       /* @__PURE__ */ n(
         A,

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

@@ -48,7 +48,8 @@ export interface TableContentProps<TData extends TableData = TableData> {
      */
     portalContainerRef?: React.RefObject<HTMLElement | null>;
 }
-declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, virtualization, portalContainerRef, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+type TableContentInnerProps<TData extends TableData> = TableContentProps<TData> & ThemeStyleProps;
+declare const TableContentInner: <TData extends TableData>({ virtualization, ...props }: TableContentInnerProps<TData>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders table rows and columns with support for row interactions, nested data, and virtualization.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,+IASjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAuJ5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,KAAK,sBAAsB,CAAC,KAAK,SAAS,SAAS,IAAI,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC;AAElG,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,8BAGjD,sBAAsB,CAAC,KAAK,CAAC,4CAM/B,CAAC;AAuLF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

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

@@ -1,25 +1,21 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import { Table as E, Thead as M, Box as $, Tbody as y } from "@chakra-ui/react";
-import { useVirtualizer as D } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { memo as L, useRef as O, useMemo as u } from "react";
-import { useTableContext as Y } from "./table-context.js";
-import { TableHeaderRow as k } from "./table-header-row.js";
-import { TableRow as v } from "./table-row.js";
-const q = ({
-  onClickRow: m,
-  onRowClickIndication: b,
-  hideTableHeaderDropdown: w,
-  showRowHoverStyle: g = !0,
-  stickyHeaders: h,
-  virtualization: a,
-  portalContainerRef: R,
-  ...z
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { Tbody as w, Box as y, Table as v, Thead as H } from "@chakra-ui/react";
+import { useVirtualizer as B } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { memo as I, useMemo as h, useRef as k } from "react";
+import { useTableContext as g } from "./table-context.js";
+import { TableHeaderRow as D } from "./table-header-row.js";
+import { TableRow as x } from "./table-row.js";
+const M = ({
+  virtualization: l,
+  ...i
+}) => l ? /* @__PURE__ */ e(_, { ...i, virtualization: l }) : /* @__PURE__ */ e(j, { ...i }), _ = ({
+  onClickRow: l,
+  onRowClickIndication: i,
+  showRowHoverStyle: d = !0,
+  virtualization: r,
+  ...o
 }) => {
-  const t = Y(), i = O(null), B = u(() => h ? {
-    position: "sticky",
-    top: 0,
-    zIndex: 1
-  } : {}, [h]), c = u(
+  const t = g(), n = k(null), s = h(
     () => t.table.getRowModel().rows,
     // The dependencies are needed to ensure that the rows are recalculated when any of these change
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -30,82 +26,108 @@ const q = ({
       t.sorting,
       t.data
     ]
-  ), p = c.length, l = !!a, f = a?.estimateRowHeight ?? 40, x = a?.overscan ?? 5, H = a?.height ?? "600px", I = u(
-    () => ({
-      count: p,
-      getScrollElement: () => i.current,
-      estimateSize: () => f,
-      overscan: x,
-      enabled: l,
-      onChange: (o, d) => {
-        d && i.current && document.activeElement !== i.current && i.current.focus();
+  ), R = h(() => {
+    const u = r.estimateRowHeight ?? 40, b = r.overscan ?? 5;
+    return {
+      count: s.length,
+      getScrollElement: () => n.current,
+      estimateSize: () => u,
+      overscan: b,
+      enabled: !0,
+      onChange: (f, c) => {
+        c && n.current && document.activeElement !== n.current && n.current.focus();
       }
-    }),
-    [l, f, x, p]
-  ), C = D(I), n = l ? C.getVirtualItems() : [], _ = () => {
-    if (!l)
-      return /* @__PURE__ */ e(y, { children: c.map((s) => {
-        const r = s.getVisibleCells();
+    };
+  }, [r.estimateRowHeight, r.overscan, s]), p = B(R), a = p.getVirtualItems(), V = () => {
+    const u = a.length > 0 ? a[0]?.start ?? 0 : 0, b = a.length > 0 ? p.getTotalSize() - (a[a.length - 1]?.end ?? 0) : 0, m = s[0]?.getVisibleCells().length ?? t.table.getVisibleLeafColumns().length;
+    return /* @__PURE__ */ C(w, { children: [
+      u > 0 && /* @__PURE__ */ e("tr", { style: { height: `${u}px` }, "aria-hidden": "true", children: /* @__PURE__ */ e("td", { colSpan: m }) }),
+      a.map((f) => {
+        const c = s[f.index];
+        if (!c) return null;
+        const S = c.getVisibleCells();
         return /* @__PURE__ */ e(
-          v,
+          x,
           {
-            row: s,
-            visibleCells: r,
-            onClickRow: m,
-            onRowClickIndication: b,
-            showRowHoverStyle: g
+            row: c,
+            visibleCells: S,
+            onClickRow: l,
+            onRowClickIndication: i,
+            showRowHoverStyle: d
           },
-          s.id
-        );
-      }) });
-    const o = n.length > 0 ? n[0]?.start ?? 0 : 0, d = n.length > 0 ? C.getTotalSize() - (n[n.length - 1]?.end ?? 0) : 0, V = c[0]?.getVisibleCells().length ?? t.table.getVisibleLeafColumns().length;
-    return /* @__PURE__ */ S(y, { children: [
-      o > 0 && /* @__PURE__ */ e("tr", { style: { height: `${o}px` }, "aria-hidden": "true", children: /* @__PURE__ */ e("td", { colSpan: V }) }),
-      n.map((s) => {
-        const r = c[s.index];
-        if (!r) return null;
-        const j = r.getVisibleCells();
-        return /* @__PURE__ */ e(
-          v,
-          {
-            row: r,
-            visibleCells: j,
-            onClickRow: m,
-            onRowClickIndication: b,
-            showRowHoverStyle: g
-          },
-          r.id
+          c.id
         );
       }),
-      d > 0 && /* @__PURE__ */ e("tr", { style: { height: `${d}px` }, "aria-hidden": "true", children: /* @__PURE__ */ e("td", { colSpan: V }) })
+      b > 0 && /* @__PURE__ */ e("tr", { style: { height: `${b}px` }, "aria-hidden": "true", children: /* @__PURE__ */ e("td", { colSpan: m }) })
     ] });
-  }, T = /* @__PURE__ */ S(E, { ...z, id: t.id, children: [
-    /* @__PURE__ */ e(M, { style: B, children: t.table.getHeaderGroups().map((o) => /* @__PURE__ */ e(
-      k,
-      {
-        headerGroup: o,
-        hideTableHeaderDropdown: w,
-        portalContainerRef: R
-      },
-      o.id
-    )) }),
-    _()
-  ] });
-  return l ? /* @__PURE__ */ e(
-    $,
+  };
+  return /* @__PURE__ */ e(
+    y,
     {
-      ref: i,
+      ref: n,
       overflowY: "auto",
-      height: H,
+      height: r.height ?? "600px",
       position: "relative",
       tabIndex: -1,
       outline: "none",
       _focus: { outline: "none", boxShadow: "none" },
       _focusVisible: { outline: "none", boxShadow: "none" },
-      children: T
+      children: /* @__PURE__ */ e(T, { ...o, children: V() })
     }
-  ) : T;
-}, Q = L(q);
+  );
+}, j = ({
+  onClickRow: l,
+  onRowClickIndication: i,
+  showRowHoverStyle: d = !0,
+  ...r
+}) => {
+  const o = g(), t = h(
+    () => o.table.getRowModel().rows,
+    // The dependencies are needed to ensure that the rows are recalculated when any of these change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      o.expanded,
+      o.breakingContentState,
+      o.columnVisibility,
+      o.sorting,
+      o.data
+    ]
+  );
+  return /* @__PURE__ */ e(T, { ...r, children: /* @__PURE__ */ e(w, { children: t.map((n) => {
+    const s = n.getVisibleCells();
+    return /* @__PURE__ */ e(
+      x,
+      {
+        row: n,
+        visibleCells: s,
+        onClickRow: l,
+        onRowClickIndication: i,
+        showRowHoverStyle: d
+      },
+      n.id
+    );
+  }) }) });
+}, T = ({
+  hideTableHeaderDropdown: l,
+  stickyHeaders: i,
+  portalContainerRef: d,
+  children: r,
+  ...o
+}) => {
+  const t = g();
+  return /* @__PURE__ */ C(v, { ...o, id: t.id, children: [
+    /* @__PURE__ */ e(H, { "data-sticky-headers": i, children: t.table.getHeaderGroups().map((n) => /* @__PURE__ */ e(
+      D,
+      {
+        headerGroup: n,
+        hideTableHeaderDropdown: l,
+        portalContainerRef: d
+      },
+      n.id
+    )) }),
+    r
+  ] });
+}, q = I(M);
 export {
-  Q as TableContent
+  q as TableContent
 };

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":"AAGA,OAAO,EAA2B,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAYlF,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,4CA2F3F,CAAC;AAuJF,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":"AAGA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAoB/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;AAuPF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,KAAK,aAAa,CAAC,KAAK,SAAS,SAAS,IAAI;IAC7C,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IACnD,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,KAAK,SAAS,SAAS,EAAE,6EAM7C,aAAa,CAAC,KAAK,CAAC,4CAmFtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAA0B,OAAO,aAAa,CAAC"}
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,KAAK,aAAa,CAAC,KAAK,SAAS,SAAS,IAAI;IAC7C,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IACnD,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,KAAK,SAAS,SAAS,EAAE,6EAM7C,aAAa,CAAC,KAAK,CAAC,4CA0EtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAA0B,OAAO,aAAa,CAAC"}

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

@@ -1,60 +1,59 @@
-import { jsx as c } from "react/jsx-runtime";
-import { Tr as f } from "@chakra-ui/react";
-import { memo as x, useMemo as d, useCallback as u } from "react";
-import { TableCell as T } from "./table-cell.js";
-import { useTableContext as A } from "./table-context.js";
-import { ThemeColorVariable as r } from "../../theme/theme-types.js";
+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 { TableCell as x } from "./table-cell.js";
+import { useTableContext as S } from "./table-context.js";
 const I = ({
-  row: t,
-  visibleCells: a,
+  row: e,
+  visibleCells: o,
   onClickRow: n,
-  showRowHoverStyle: i,
-  onRowClickIndication: s
+  showRowHoverStyle: l,
+  onRowClickIndication: i
 }) => {
-  const o = A(), g = d(() => ({ backgroundColor: i ? r.AccentHoverAlpha : "unset", ".action-menu-button": { opacity: 1 } }), [i]), m = u(
-    (e) => {
-      n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n(t.original, e));
+  const a = S(), c = d(
+    (t) => {
+      n && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(e.original, t));
     },
-    [n, t.original]
-  ), p = u(
-    (e) => {
-      e.stopPropagation(), t.getToggleSelectedHandler(), n && n(t.original, e), s && o.setRowHighlight({ [e.currentTarget.id]: !0 });
+    [n, e.original]
+  ), g = d(
+    (t) => {
+      t.stopPropagation(), e.getToggleSelectedHandler(), n && n(e.original, t), i && a.setRowHighlight({ [t.currentTarget.id]: !0 });
     },
-    [t, n, s, o]
-  ), b = d(() => t.getIsSelected() || o.selectedRowIds?.includes(t.id) ? r.AccentHoverAlpha : "unset", [t, o.rowHighlight, o.selectedRowIds]), h = o.getRowActions?.(t.original), S = (e) => o.disableSelectionCheckbox?.(e) ?? !1;
-  return /* @__PURE__ */ c(
-    f,
+    [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;
+  return /* @__PURE__ */ s(
+    p,
     {
-      id: t.id,
+      id: e.id,
       tabIndex: n ? 0 : void 0,
-      onClick: p,
-      onKeyDown: m,
-      borderTop: t.depth > 0 ? "none" : `1px solid ${r.OnBackgroundBorder}`,
+      onClick: g,
+      onKeyDown: c,
       cursor: n ? "pointer" : void 0,
-      backgroundColor: b,
-      _hover: g,
-      children: a.map((e) => {
-        const l = e.column.getIndex() === 0;
-        return /* @__PURE__ */ c(
-          T,
+      "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;
+        return /* @__PURE__ */ s(
+          x,
           {
-            cell: e,
-            visibleCells: a,
-            row: t,
-            rowIsExpanded: t.getIsExpanded(),
-            breakingContentState: o.breakingContentState,
-            localeString: o.localeString,
-            actionMenu: l ? h : void 0,
-            canSelectRows: o.canSelectRows && l,
-            isCheckboxDisabled: S(t)
+            cell: t,
+            visibleCells: o,
+            row: e,
+            rowIsExpanded: e.getIsExpanded(),
+            breakingContentState: a.breakingContentState,
+            localeString: a.localeString,
+            actionMenu: r ? m : void 0,
+            canSelectRows: a.canSelectRows && r,
+            isCheckboxDisabled: b(e)
           },
-          e.id
+          t.id
         );
       })
     },
-    t.id
+    e.id
   );
-}, M = x(I);
+}, M = h(I);
 export {
   M as TableRow
 };

package/dist/test-utils/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './setup-mock-resize-observer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/test-utils/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/test-utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/dist/test-utils/hooks/setup-mock-resize-observer.d.ts

@@ -0,0 +1,2 @@
+export declare const setupMockResizeObserver: () => void;
+//# sourceMappingURL=setup-mock-resize-observer.d.ts.map

package/dist/test-utils/hooks/setup-mock-resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-mock-resize-observer.d.ts","sourceRoot":"","sources":["../../../lib/test-utils/hooks/setup-mock-resize-observer.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,YAYnC,CAAC"}

package/dist/theme/theme-config/components/table-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/table-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,yBAAyB,EAA8C,MAAM,kBAAkB,CAAC;AAqF9G,eAAO,MAAM,WAAW,EAAE,yBAExB,CAAC"}
+{"version":3,"file":"table-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/table-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,yBAAyB,EAA8C,MAAM,kBAAkB,CAAC;AA0G9G,eAAO,MAAM,WAAW,EAAE,yBAExB,CAAC"}

package/dist/theme/theme-config/components/table-theme.js

@@ -1,15 +1,22 @@
 import { createMultiStyleConfigHelpers as a, defineStyle as e } from "@chakra-ui/react";
-import { ThemeColorVariable as o, ThemeSpaceVariable as r, ThemeFontVariable as n } from "../../theme-types.js";
-import { ThemeFontSizeToken as t } from "../theme-tokens.js";
-import { tableAnatomy as l } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
-const { definePartsStyle: d, defineMultiStyleConfig: i } = a(l.keys), p = e({
+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({
   position: "relative",
   fontFamily: n.Body,
-  fontSize: t.Small,
+  fontSize: r.Small,
+  thead: {
+    '&[data-sticky-headers="true"]': {
+      position: "sticky",
+      top: 0,
+      zIndex: 5
+    }
+  },
   th: {
     padding: "0px",
     position: "relative",
-    fontSize: t.Small,
+    fontSize: r.Small,
     height: "40px",
     color: o.OnBackgroundSubdued,
     fontWeight: 400,
@@ -22,10 +29,10 @@ const { definePartsStyle: d, defineMultiStyleConfig: i } = a(l.keys), p = e({
   },
   td: {
     color: o.OnBackground,
-    padding: `0px 0px 0px ${r.Small}`,
+    padding: `0px 0px 0px ${t.Small}`,
     borderRight: `1px solid ${o.OnBackgroundBorder}`,
     height: "40px",
-    gap: r.XSmall,
+    gap: t.XSmall,
     _last: {
       borderRight: "none"
     },
@@ -37,7 +44,7 @@ const { definePartsStyle: d, defineMultiStyleConfig: i } = a(l.keys), p = e({
   tr: {
     borderColor: o.OnBackgroundBorder
   }
-}), b = e({
+}), p = e({
   cursor: "pointer",
   backgroundColor: o.Surface,
   div: {
@@ -48,29 +55,42 @@ const { definePartsStyle: d, defineMultiStyleConfig: i } = a(l.keys), p = e({
   }
 }), s = e({
   color: o.OnBackground
-}), c = e({
-  borderTop: "1px solid",
+}), b = e({
+  borderTop: "none",
   _first: {
     borderTop: "none"
   },
   _last: {
     borderBottom: "1px solid",
     borderColor: o.OnBackgroundBorder
+  },
+  '&[data-row-selected="true"]': {
+    backgroundColor: o.AccentHoverAlpha
+  },
+  _hover: {
+    // Show action menu button on row hover
+    ".action-menu-button": { opacity: 1 },
+    '&[data-allow-hovered="true"]': {
+      backgroundColor: o.AccentHoverAlpha
+    }
+  },
+  '&[data-is-root-level="true"]:not(:first-of-type)': {
+    borderTop: `1px solid ${o.OnBackgroundBorder}`
   }
-}), g = e({
+}), u = e({
   tr: {
     zIndex: 10,
     backgroundColor: o.OnBackgroundSubdued
   }
-}), u = d({
-  table: p,
+}), g = l({
+  table: c,
   tfoot: s,
-  th: b,
-  tr: c,
-  thead: g
-}), x = i({
-  baseStyle: u
+  th: p,
+  tr: b,
+  thead: u
+}), k = i({
+  baseStyle: g
 });
 export {
-  x as tableConfig
+  k as tableConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "8.2.0",
+	"version": "8.2.2",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,