@caspeco/casper-ui-library 7.10.1 → 7.11.0

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

@@ -43,8 +43,12 @@ export interface TableContentProps<TData extends TableData = TableData> {
      * Enables virtualization for the table rows to improve performance with large datasets.
      */
     virtualization?: VirtualizationOptions;
+    /**
+     * Anchor portals to a referenced layer. Defaults to document body.
+     */
+    portalContainerRef?: React.RefObject<HTMLElement | null>;
 }
-declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, virtualization, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, virtualization, portalContainerRef, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableContent: typeof TableContentInner;
 export {};
 //# sourceMappingURL=table-content.d.ts.map

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;CACvC;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,2HAQjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAsJ5C,CAAC;AAEF,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,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,+IASjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAuJ5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

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

@@ -1,20 +1,21 @@
 import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import { Table as j, Thead as E, Box as M, Tbody as y } from "@chakra-ui/react";
-import { useVirtualizer as $ } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { memo as D, useRef as L, useMemo as u } from "react";
-import { useTableContext as O } from "./table-context.js";
-import { TableHeaderRow as Y } from "./table-header-row.js";
+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 k = ({
+const q = ({
   onClickRow: m,
   onRowClickIndication: b,
   hideTableHeaderDropdown: w,
   showRowHoverStyle: g = !0,
   stickyHeaders: h,
   virtualization: a,
-  ...R
+  portalContainerRef: R,
+  ...z
 }) => {
-  const t = O(), i = L(null), z = u(() => h ? {
+  const t = Y(), i = O(null), B = u(() => h ? {
     position: "sticky",
     top: 0,
     zIndex: 1
@@ -29,7 +30,7 @@ const k = ({
       t.sorting,
       t.data
     ]
-  ), p = c.length, l = !!a, f = a?.estimateRowHeight ?? 40, x = a?.overscan ?? 5, B = a?.height ?? "600px", H = u(
+  ), p = c.length, l = !!a, f = a?.estimateRowHeight ?? 40, x = a?.overscan ?? 5, H = a?.height ?? "600px", I = u(
     () => ({
       count: p,
       getScrollElement: () => i.current,
@@ -41,7 +42,7 @@ const k = ({
       }
     }),
     [l, f, x, p]
-  ), C = $(H), n = l ? C.getVirtualItems() : [], I = () => {
+  ), C = D(I), n = l ? C.getVirtualItems() : [], _ = () => {
     if (!l)
       return /* @__PURE__ */ e(y, { children: c.map((s) => {
         const r = s.getVisibleCells();
@@ -63,12 +64,12 @@ const k = ({
       n.map((s) => {
         const r = c[s.index];
         if (!r) return null;
-        const _ = r.getVisibleCells();
+        const j = r.getVisibleCells();
         return /* @__PURE__ */ e(
           v,
           {
             row: r,
-            visibleCells: _,
+            visibleCells: j,
             onClickRow: m,
             onRowClickIndication: b,
             showRowHoverStyle: g
@@ -78,23 +79,24 @@ const k = ({
       }),
       d > 0 && /* @__PURE__ */ e("tr", { style: { height: `${d}px` }, "aria-hidden": "true", children: /* @__PURE__ */ e("td", { colSpan: V }) })
     ] });
-  }, T = /* @__PURE__ */ S(j, { ...R, id: t.id, children: [
-    /* @__PURE__ */ e(E, { style: z, children: t.table.getHeaderGroups().map((o) => /* @__PURE__ */ e(
-      Y,
+  }, 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
+        hideTableHeaderDropdown: w,
+        portalContainerRef: R
       },
       o.id
     )) }),
-    I()
+    _()
   ] });
   return l ? /* @__PURE__ */ e(
-    M,
+    $,
     {
       ref: i,
       overflowY: "auto",
-      height: B,
+      height: H,
       position: "relative",
       tabIndex: -1,
       outline: "none",
@@ -103,7 +105,7 @@ const k = ({
       children: T
     }
   ) : T;
-}, P = D(k);
+}, Q = L(q);
 export {
-  P as TableContent
+  Q as TableContent
 };

package/dist/components/table/table-header-dropdown.d.ts

@@ -12,7 +12,9 @@ type TableHeaderDropdownProps<TData extends TableData> = {
     columnVisibility: VisibilityState;
     localeString: Locales;
 };
-declare const TableHeaderDropdownComponent: <TData extends TableData>({ header, breakingContentState, onBreakingContentChange, setBreakingContentState, headerGroup, sorting, setSorting, localeString, }: TableHeaderDropdownProps<TData>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderDropdownComponent: <TData extends TableData>({ header, breakingContentState, onBreakingContentChange, setBreakingContentState, headerGroup, sorting, setSorting, localeString, portalContainerRef, }: TableHeaderDropdownProps<TData> & {
+    portalContainerRef?: React.RefObject<HTMLElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHeaderDropdown: typeof TableHeaderDropdownComponent;
 export {};
 //# sourceMappingURL=table-header-dropdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-header-dropdown.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,EAGN,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,wBAAwB,CAAC,KAAK,SAAS,SAAS,IAAI;IACxD,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClF,uBAAuB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACxF,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IAC5C,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,gBAAgB,EAAE,eAAe,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAAI,KAAK,SAAS,SAAS,EAAE,qIAS5D,wBAAwB,CAAC,KAAK,CAAC,4CA0IjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAyC,OAAO,4BAA4B,CAAC"}
+{"version":3,"file":"table-header-dropdown.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,EAGN,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,wBAAwB,CAAC,KAAK,SAAS,SAAS,IAAI;IACxD,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClF,uBAAuB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACxF,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IAC5C,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,gBAAgB,EAAE,eAAe,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAAI,KAAK,SAAS,SAAS,EAAE,yJAU5D,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CA0IhG,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAyC,OAAO,4BAA4B,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsxs as d, Fragment as a, jsx as n } from "react/jsx-runtime";
-import { Portal as O } from "@chakra-ui/react";
-import { flexRender as j } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as A, useCallback as D, useMemo as p } from "react";
-import { useTableContext as L } from "./table-context.js";
+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";
@@ -11,10 +11,10 @@ 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 R } from "../menu/menu-box-button.js";
-import { MenuList as $ } from "../menu/menu-list.js";
-import { ThemeIconSizeVariable as F, ThemeColorVariable as w, ThemeSpaceVariable as q, ThemeFontSizeVariable as z } from "../../theme/theme-types.js";
-const J = ({
+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,
@@ -22,9 +22,10 @@ const J = ({
   headerGroup: g,
   sorting: u,
   setSorting: f,
-  localeString: V
+  localeString: V,
+  portalContainerRef: y
 }) => {
-  const e = U[V], y = L(), { getTableFilterMethods: s } = y, T = D(
+  const e = U[V], H = R(), { getTableFilterMethods: s } = H, T = D(
     (i) => {
       const c = {
         ...m,
@@ -36,18 +37,18 @@ const J = ({
   ), b = D(
     (i) => {
       const c = i.getIndex();
-      g.forEach((B) => {
-        B.headers.forEach((E, I) => {
-          const { column: M } = E;
+      g.forEach((E) => {
+        E.headers.forEach((O, I) => {
+          const { column: M } = O;
           i.getIsPinned() ? I >= c && M.pin(!1) : I <= c && M.pin("left");
         });
       });
     },
     [g]
-  ), H = p(() => /* @__PURE__ */ d(a, { children: [
+  ), 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]), P = p(() => /* @__PURE__ */ d(a, { children: [
+  ] }), [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,
       {
@@ -101,7 +102,7 @@ const J = ({
   ]);
   return /* @__PURE__ */ n(v, { isLazy: !0, children: ({ isOpen: i }) => /* @__PURE__ */ d(a, { children: [
     /* @__PURE__ */ n(
-      R,
+      $,
       {
         color: w.OnBackgroundSubdued,
         textTransform: "none",
@@ -109,15 +110,15 @@ const J = ({
         h: "40px",
         display: "flex",
         alignItems: "center",
-        padding: `0px 0px 0px ${q.Small}`,
+        padding: `0px 0px 0px ${J.Small}`,
         backgroundColor: i ? w.BackgroundDisabled : "unset",
         w: "100%",
-        children: j(H, o.getContext())
+        children: A(P, o.getContext())
       }
     ),
-    /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n($, { fontSize: z.Medium, children: P }) })
+    /* @__PURE__ */ n(j, { containerRef: y, children: /* @__PURE__ */ n(q, { fontSize: z.Medium, children: B }) })
   ] }) });
-}, dn = A(J);
+}, un = L(K);
 export {
-  dn as TableHeaderDropdown
+  un as TableHeaderDropdown
 };

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

@@ -4,7 +4,9 @@ type TableHeaderRowProps<TData extends TableData> = {
     headerGroup: HeaderGroup<TableRow<TData>>;
     hideTableHeaderDropdown: boolean | undefined;
 };
-declare const TableHeaderRowComponent: <TData extends TableData>({ headerGroup, hideTableHeaderDropdown, }: TableHeaderRowProps<TData>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderRowComponent: <TData extends TableData>({ headerGroup, hideTableHeaderDropdown, portalContainerRef, }: TableHeaderRowProps<TData> & {
+    portalContainerRef?: React.RefObject<HTMLElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHeaderRow: typeof TableHeaderRowComponent;
 export {};
 //# sourceMappingURL=table-header-row.d.ts.map

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,2CAGvD,mBAAmB,CAAC,KAAK,CAAC,4CA0F5B,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,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"}

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

@@ -1,16 +1,16 @@
-import { jsx as e, Fragment as h, jsxs as S } from "react/jsx-runtime";
-import { Tr as B, Th as C, useMediaQuery as v, Portal as M } from "@chakra-ui/react";
+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 w, useMemo as A } from "react";
-import { useTableContext as u } from "./table-context.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 k } from "./translations.js";
+import { translations as x } from "./translations.js";
 import { Box as g } from "../box/box.js";
-import { Flex as f } from "../flex/flex.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 x } from "../icon/types.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";
@@ -19,21 +19,22 @@ 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: l
+  hideTableHeaderDropdown: r,
+  portalContainerRef: a
 }) => {
-  const n = u(), a = !!n.getRowActions, s = w((r) => {
-    const t = r.getIsPinned();
+  const n = p(), s = !!n.getRowActions, i = C((t) => {
+    const l = t.getIsPinned();
     return {
-      position: t ? "sticky" : "relative",
-      left: t ? `${r.getStart("left")}px` : void 0,
-      backgroundColor: t ? d.Background : void 0,
-      zIndex: t ? 1 : 0,
-      width: r.getSize(),
-      maxWidth: r.getSize()
+      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()
     };
-  }, []), i = (n.selectedRowIds?.length ?? 0) > 0 && (n.selectionActions?.length ?? 0) > 0;
-  return /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(B, { children: i ? /* @__PURE__ */ e(
-    C,
+  }, []), c = (n.selectedRowIds?.length ?? 0) > 0 && (n.selectionActions?.length ?? 0) > 0;
+  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(B, { children: c ? /* @__PURE__ */ e(
+    b,
     {
       colSpan: o.headers.length,
       sx: {
@@ -48,27 +49,27 @@ const W = ({
       zIndex: 1,
       style: {
         borderBottom: `1px solid ${d.OnBackgroundBorder}`,
-        paddingLeft: a ? "24px" : void 0
+        paddingLeft: s ? "24px" : void 0
       },
-      children: /* @__PURE__ */ e(b, { showSelectAll: !0, children: /* @__PURE__ */ e(Q, {}) })
+      children: /* @__PURE__ */ e(I, { showSelectAll: !0, children: /* @__PURE__ */ e(Q, {}) })
     }
-  ) : /* @__PURE__ */ e(h, { children: o.headers.map((r) => {
-    const { column: t } = r, c = t.getIndex() === 0;
+  ) : /* @__PURE__ */ e(u, { children: o.headers.map((t) => {
+    const { column: l } = t, h = l.getIndex() === 0;
     return /* @__PURE__ */ e(
-      C,
+      b,
       {
         className: "tableHeaderCell",
-        isNumeric: t.columnDef.meta?.isNumeric,
-        zIndex: t.getIsPinned() ? 2 : 1,
+        isNumeric: l.columnDef.meta?.isNumeric,
+        zIndex: l.getIsPinned() ? 2 : 1,
         style: {
-          ...s(t),
+          ...i(l),
           borderBottom: `1px solid ${d.OnBackgroundBorder}`,
-          paddingLeft: c && a ? "24px" : void 0
+          paddingLeft: h && s ? "24px" : void 0
         },
-        children: /* @__PURE__ */ e(b, { showSelectAll: n.canSelectRows && c, children: /* @__PURE__ */ e(h, { children: l ? /* @__PURE__ */ e(g, { paddingLeft: m.Small, children: T(r.column.columnDef.header, r.getContext()) }) : /* @__PURE__ */ e(
+        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: r,
+            header: t,
             breakingContentState: n.breakingContentState,
             columnVisibility: n.columnVisibility,
             headerGroup: n.table.getHeaderGroups(),
@@ -76,42 +77,43 @@ const W = ({
             setBreakingContentState: n.setBreakingContentState,
             setSorting: n.setSorting,
             sorting: n.sorting,
-            onBreakingContentChange: n.onBreakingContentChange
+            onBreakingContentChange: n.onBreakingContentChange,
+            portalContainerRef: a
           }
         ) }) })
       },
-      r.id
+      t.id
     );
   }) }) }, o.id) });
-}, b = ({ showSelectAll: o, children: l }) => o ? /* @__PURE__ */ S(f, { w: "100%", align: "center", children: [
+}, 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, {}) }),
-  l
-] }) : /* @__PURE__ */ e(h, { children: l }), E = () => {
-  const o = u(), l = w(
+  r
+] }) : /* @__PURE__ */ e(u, { children: r }), E = () => {
+  const o = p(), r = C(
     (s) => {
-      const i = s.target.checked, r = o.getSelectableRowIds();
-      i ? o.setSelectedRowIds((t) => [.../* @__PURE__ */ new Set([...t, ...r])]) : o.setSelectedRowIds((t) => t.filter((c) => !r.includes(c)));
+      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)));
     },
     [o]
-  ), { allIsSelected: n, shouldShowIndeterminateState: a } = A(() => {
-    const i = o.table.getRowModel().flatRows, r = new Set(o.selectedRowIds), t = o.getSelectableRowIds(), c = t.length > 0 && t.every((p) => r.has(p)), R = i.some((p) => r.has(p.id));
+  ), { 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));
     return {
-      allIsSelected: c,
-      shouldShowIndeterminateState: R && !c
+      allIsSelected: l,
+      shouldShowIndeterminateState: h && !l
     };
   }, [o]);
   return /* @__PURE__ */ e(
     P,
     {
-      isChecked: n,
-      isIndeterminate: a,
-      onChange: l
+      isChecked: a,
+      isIndeterminate: n,
+      onChange: r
     }
   );
 }, Q = () => {
-  const { localeString: o, selectedRowIds: l = [], selectionActions: n = [] } = u(), a = k[o], [s] = v("(min-width: 48em)"), i = n.length > 3 || !s, r = l.length === 1 ? a.selectedSingular.replace("{count}", "1") : a.selected.replace("{count}", l.length.toString());
-  return /* @__PURE__ */ S(
-    f,
+  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,
     {
       gap: m.Medium,
       align: "center",
@@ -127,30 +129,30 @@ const W = ({
             fontSize: j.Medium,
             whiteSpace: "nowrap",
             style: { fontVariantNumeric: "normal" },
-            children: r
+            children: c
           }
         ),
         /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(z, { orientation: "vertical", height: "20px" }) }),
-        /* @__PURE__ */ e(f, { gap: m.Small, align: "center", children: i ? /* @__PURE__ */ S(D, { children: [
-          /* @__PURE__ */ e(F, { variant: "ghost", rightIcon: x.TreeViewCollapse, children: a.action }),
-          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(H, { children: n.map((t) => /* @__PURE__ */ e(I, { isMenuItem: !0, action: t }, t.name)) }) })
-        ] }) : n.map((t) => /* @__PURE__ */ e(I, { isMenuItem: !1, action: t }, t.name)) })
+        /* @__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)) })
       ]
     }
   );
-}, I = ({ isMenuItem: o, action: l }) => {
-  const { selectedRowIds: n, localeString: a } = u(), s = k[a], i = w(() => {
-    l.onClick(n || []);
-  }, [l, n]);
-  return o ? /* @__PURE__ */ e(L, { onClick: i, children: l.variant === "delete" ? /* @__PURE__ */ e(g, { as: "span", color: d.Error, children: l.name }) : l.name }) : l.variant === "delete" ? /* @__PURE__ */ e(
+}, 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,
     {
       onClick: i,
-      icon: x.Delete,
+      icon: R.Delete,
       "aria-label": s.deleteSelectedRows,
       variant: "ghost"
     }
-  ) : /* @__PURE__ */ e(O, { onClick: i, variant: "ghost", children: l.name });
+  ) : /* @__PURE__ */ e(O, { onClick: i, variant: "ghost", children: r.name });
 }, de = y(W);
 export {
   de as TableHeaderRow

package/package.json

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