@trackunit/react-table 1.13.37-alpha-3fb17ca5f15.0 → 1.13.38

package/index.cjs.js

@@ -45,6 +45,10 @@ var defaultTranslations = {
 	"table.rowDensity.spacious": "Spacious",
 	"table.search.placeholder": "Search...",
 	"table.searchPlaceholder": "Search...",
+	"table.selectAll.allSelected": "<strong>{{totalCount}} items</strong> are selected.",
+	"table.selectAll.clearSelection": "Clear selection",
+	"table.selectAll.pageSelected": "<strong>{{count}} items</strong> on this page are selected.",
+	"table.selectAll.selectAll": "Select all items",
 	"table.selection.label": "Selection",
 	"table.sorting.ascending": "Ascending",
 	"table.sorting.descending": "Descending",
@@ -90,6 +94,10 @@ const translations = {
  *  Local useTranslation for this specific library
  */
 const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
+/**
+ * Trans for this specific library.
+ */
+const Trans = (props) => (jsxRuntime.jsx(i18nLibraryTranslation.NamespaceTrans, { ...props, namespace: namespace }));
 /**
  * Registers the translations for this library
  */
@@ -359,7 +367,7 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "da
 const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
     const [t] = useTranslation();
     return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", "data-testid": "XButton", 
-                // eslint-disable-next-line local-rules/prefer-event-specific-callback-naming
+                // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                 onClick: resetSelection, prefix: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsxRuntime.jsx(reactComponents.Spacer, { border: true, className: cvaDivider() }), jsxRuntime.jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
                 actions,
                 dropdownActions,
@@ -572,6 +580,56 @@ const Sorting = ({ columns, }) => {
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUp", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * A generic banner displayed inside a table's `subHeaderActions` slot when all
+ * rows on the current page are selected. It offers the user two actions:
+ *
+ * 1. **Select all** across every page (when `areAllSelected` is `false`).
+ * 2. **Clear selection** (when `areAllSelected` is `true`).
+ *
+ * Domain-specific data-fetching and state management are left to the consumer
+ * via the `onClickSelectAll` / `onClickClearSelection` callbacks.
+ *
+ * ### When to use
+ *
+ * - The table is **paginated** and users need to select items beyond the
+ *   visible page (e.g. bulk assign, bulk delete).
+ * - The full set of matching IDs is fetched lazily via a separate lightweight
+ *   query when the user explicitly clicks "Select all".
+ * - The table supports **filters** and the selection should respect the
+ *   currently applied filter set. Use the `selectAllLabel` prop to communicate
+ *   that only matching items will be selected (e.g. "Select all matching assets
+ *   in Service Plans").
+ *
+ * ### When **not** to use
+ *
+ * - The table loads **all data at once** (no pagination). In that case the
+ *   built-in header checkbox from `useTableSelection` already selects every
+ *   row — there is nothing extra to select.
+ * - The dataset is small enough that all rows fit on a single page.
+ * - Selection is limited to a single row (e.g. a details panel use-case).
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   subHeaderActions={
+ *     allPageRowsSelected ? (
+ *       <SelectAllBanner
+ *         areAllSelected={selectedIds.length >= totalCount}
+ *         selectedCount={selectedIds.length}
+ *         onClickSelectAll={handleSelectAll}
+ *         onClickClearSelection={handleClearSelection}
+ *       />
+ *     ) : undefined
+ *   }
+ * />
+ * ```
+ */
+const SelectAllBanner = ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, }) => {
+    const [t] = useTranslation();
+    return (jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center gap-1 border-y border-neutral-200 bg-neutral-100 px-4 py-2 text-xs", "data-testid": "select-all-banner", children: areAllSelected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-neutral-600", children: jsxRuntime.jsx(Trans, { components: { strong: jsxRuntime.jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.allSelected", values: { totalCount: selectedCount } }) }), jsxRuntime.jsx(reactComponents.Button, { onClick: onClickClearSelection, size: "small", variant: "ghost", children: t("table.selectAll.clearSelection") })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-neutral-600", children: jsxRuntime.jsx(Trans, { components: { strong: jsxRuntime.jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.pageSelected", values: { count: selectedCount } }) }), jsxRuntime.jsx(reactComponents.Button, { onClick: onClickSelectAll, size: "small", variant: "ghost", children: selectAllLabel ?? t("table.selectAll.selectAll") })] })) }));
+};
+
 /**
  * This component is used to display a text with a tooltip.
  * The tooltip is displayed if the text is truncated with ellipsis.
@@ -1127,7 +1185,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", props.headerLeftActions || props.headerRightActions ? "border-t" : ""), ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", !props.subHeaderActions && (props.headerLeftActions || props.headerRightActions) ? "border-t" : ""), ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -1443,6 +1501,15 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     }, [table]);
 };
 
+const buildSelectionFromIds = (ids) => {
+    if (!ids) {
+        return {};
+    }
+    return ids.reduce((selection, id) => {
+        selection[String(id)] = true;
+        return selection;
+    }, {});
+};
 /**
  * `useTableSelection` provides row selection state management for the Table component.
  * It returns a selection checkbox column definition, row selection state, and props to spread onto `useTable`.
@@ -1476,21 +1543,18 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
  */
 const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection = true, }) => {
     const [t] = useTranslation();
-    const [rowSelection, setRowSelection] = react.useState({});
-    react.useEffect(() => {
-        if (!defaultSelectedIds) {
-            return;
+    const [rowSelection, setRowSelection] = react.useState(() => buildSelectionFromIds(defaultSelectedIds));
+    const defaultIdsKey = defaultSelectedIds?.slice().sort().join(",") ?? "";
+    const [prevDefaultIdsKey, setPrevDefaultIdsKey] = react.useState(defaultIdsKey);
+    if (defaultIdsKey !== prevDefaultIdsKey) {
+        setPrevDefaultIdsKey(defaultIdsKey);
+        const initialSelection = buildSelectionFromIds(defaultSelectedIds);
+        const hasChanged = sharedUtils.objectKeys(rowSelection).length !== sharedUtils.objectKeys(initialSelection).length ||
+            sharedUtils.objectEntries(initialSelection).some(([key, value]) => rowSelection[key] !== value);
+        if (hasChanged) {
+            setRowSelection(initialSelection);
         }
-        const initialSelection = defaultSelectedIds.reduce((selection, id) => {
-            selection[String(id)] = true;
-            return selection;
-        }, {});
-        setRowSelection(prev => {
-            const hasChanged = sharedUtils.objectKeys(prev).length !== sharedUtils.objectKeys(initialSelection).length ||
-                sharedUtils.objectEntries(initialSelection).some(([key, value]) => prev[key] !== value);
-            return hasChanged ? { ...initialSelection } : prev;
-        });
-    }, [defaultSelectedIds]);
+    }
     const toggleRowSelectionState = react.useCallback((id) => {
         setRowSelection(prevRowSelection => {
             const stringId = String(id);
@@ -1598,6 +1662,7 @@ Object.defineProperty(exports, "createColumnHelper", {
 });
 exports.ActionSheet = ActionSheet;
 exports.ColumnFilter = ColumnFilter;
+exports.SelectAllBanner = SelectAllBanner;
 exports.Sorting = Sorting;
 exports.Table = Table;
 exports.fromTUSortToTanStack = fromTUSortToTanStack;

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
+import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { MenuItem, Icon, Button, Tooltip, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Popover, PopoverTrigger, IconButton, PopoverContent, useInfiniteScroll, noPagination, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback, createElement } from 'react';
@@ -44,6 +44,10 @@ var defaultTranslations = {
 	"table.rowDensity.spacious": "Spacious",
 	"table.search.placeholder": "Search...",
 	"table.searchPlaceholder": "Search...",
+	"table.selectAll.allSelected": "<strong>{{totalCount}} items</strong> are selected.",
+	"table.selectAll.clearSelection": "Clear selection",
+	"table.selectAll.pageSelected": "<strong>{{count}} items</strong> on this page are selected.",
+	"table.selectAll.selectAll": "Select all items",
 	"table.selection.label": "Selection",
 	"table.sorting.ascending": "Ascending",
 	"table.sorting.descending": "Descending",
@@ -89,6 +93,10 @@ const translations = {
  *  Local useTranslation for this specific library
  */
 const useTranslation = () => useNamespaceTranslation(namespace);
+/**
+ * Trans for this specific library.
+ */
+const Trans = (props) => (jsx(NamespaceTrans, { ...props, namespace: namespace }));
 /**
  * Registers the translations for this library
  */
@@ -358,7 +366,7 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "da
 const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
     const [t] = useTranslation();
     return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", "data-testid": "XButton", 
-                // eslint-disable-next-line local-rules/prefer-event-specific-callback-naming
+                // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                 onClick: resetSelection, prefix: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsx(Spacer, { border: true, className: cvaDivider() }), jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
                 actions,
                 dropdownActions,
@@ -571,6 +579,56 @@ const Sorting = ({ columns, }) => {
     return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUp", size: "small" })) : (jsx(Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsx(RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * A generic banner displayed inside a table's `subHeaderActions` slot when all
+ * rows on the current page are selected. It offers the user two actions:
+ *
+ * 1. **Select all** across every page (when `areAllSelected` is `false`).
+ * 2. **Clear selection** (when `areAllSelected` is `true`).
+ *
+ * Domain-specific data-fetching and state management are left to the consumer
+ * via the `onClickSelectAll` / `onClickClearSelection` callbacks.
+ *
+ * ### When to use
+ *
+ * - The table is **paginated** and users need to select items beyond the
+ *   visible page (e.g. bulk assign, bulk delete).
+ * - The full set of matching IDs is fetched lazily via a separate lightweight
+ *   query when the user explicitly clicks "Select all".
+ * - The table supports **filters** and the selection should respect the
+ *   currently applied filter set. Use the `selectAllLabel` prop to communicate
+ *   that only matching items will be selected (e.g. "Select all matching assets
+ *   in Service Plans").
+ *
+ * ### When **not** to use
+ *
+ * - The table loads **all data at once** (no pagination). In that case the
+ *   built-in header checkbox from `useTableSelection` already selects every
+ *   row — there is nothing extra to select.
+ * - The dataset is small enough that all rows fit on a single page.
+ * - Selection is limited to a single row (e.g. a details panel use-case).
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   subHeaderActions={
+ *     allPageRowsSelected ? (
+ *       <SelectAllBanner
+ *         areAllSelected={selectedIds.length >= totalCount}
+ *         selectedCount={selectedIds.length}
+ *         onClickSelectAll={handleSelectAll}
+ *         onClickClearSelection={handleClearSelection}
+ *       />
+ *     ) : undefined
+ *   }
+ * />
+ * ```
+ */
+const SelectAllBanner = ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, }) => {
+    const [t] = useTranslation();
+    return (jsx("div", { className: "flex w-full items-center justify-center gap-1 border-y border-neutral-200 bg-neutral-100 px-4 py-2 text-xs", "data-testid": "select-all-banner", children: areAllSelected ? (jsxs(Fragment, { children: [jsx("span", { className: "text-neutral-600", children: jsx(Trans, { components: { strong: jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.allSelected", values: { totalCount: selectedCount } }) }), jsx(Button, { onClick: onClickClearSelection, size: "small", variant: "ghost", children: t("table.selectAll.clearSelection") })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "text-neutral-600", children: jsx(Trans, { components: { strong: jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.pageSelected", values: { count: selectedCount } }) }), jsx(Button, { onClick: onClickSelectAll, size: "small", variant: "ghost", children: selectAllLabel ?? t("table.selectAll.selectAll") })] })) }));
+};
+
 /**
  * This component is used to display a text with a tooltip.
  * The tooltip is displayed if the text is truncated with ellipsis.
@@ -1126,7 +1184,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", props.headerLeftActions || props.headerRightActions ? "border-t" : ""), ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsx("div", { className: twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", !props.subHeaderActions && (props.headerLeftActions || props.headerRightActions) ? "border-t" : ""), ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -1442,6 +1500,15 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     }, [table]);
 };
 
+const buildSelectionFromIds = (ids) => {
+    if (!ids) {
+        return {};
+    }
+    return ids.reduce((selection, id) => {
+        selection[String(id)] = true;
+        return selection;
+    }, {});
+};
 /**
  * `useTableSelection` provides row selection state management for the Table component.
  * It returns a selection checkbox column definition, row selection state, and props to spread onto `useTable`.
@@ -1475,21 +1542,18 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
  */
 const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection = true, }) => {
     const [t] = useTranslation();
-    const [rowSelection, setRowSelection] = useState({});
-    useEffect(() => {
-        if (!defaultSelectedIds) {
-            return;
+    const [rowSelection, setRowSelection] = useState(() => buildSelectionFromIds(defaultSelectedIds));
+    const defaultIdsKey = defaultSelectedIds?.slice().sort().join(",") ?? "";
+    const [prevDefaultIdsKey, setPrevDefaultIdsKey] = useState(defaultIdsKey);
+    if (defaultIdsKey !== prevDefaultIdsKey) {
+        setPrevDefaultIdsKey(defaultIdsKey);
+        const initialSelection = buildSelectionFromIds(defaultSelectedIds);
+        const hasChanged = objectKeys(rowSelection).length !== objectKeys(initialSelection).length ||
+            objectEntries(initialSelection).some(([key, value]) => rowSelection[key] !== value);
+        if (hasChanged) {
+            setRowSelection(initialSelection);
         }
-        const initialSelection = defaultSelectedIds.reduce((selection, id) => {
-            selection[String(id)] = true;
-            return selection;
-        }, {});
-        setRowSelection(prev => {
-            const hasChanged = objectKeys(prev).length !== objectKeys(initialSelection).length ||
-                objectEntries(initialSelection).some(([key, value]) => prev[key] !== value);
-            return hasChanged ? { ...initialSelection } : prev;
-        });
-    }, [defaultSelectedIds]);
+    }
     const toggleRowSelectionState = useCallback((id) => {
         setRowSelection(prevRowSelection => {
             const stringId = String(id);
@@ -1591,4 +1655,4 @@ const fromTanStackToTUSort = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useColumnHelper, useTable, useTableSelection };
+export { ActionSheet, ColumnFilter, SelectAllBanner, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useColumnHelper, useTable, useTableSelection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.13.37-alpha-3fb17ca5f15.0",
+  "version": "1.13.38",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,14 +14,14 @@
     "react-dnd-html5-backend": "16.0.1",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.17.33-alpha-3fb17ca5f15.0",
-    "@trackunit/shared-utils": "1.13.49-alpha-3fb17ca5f15.0",
-    "@trackunit/css-class-variance-utilities": "1.11.49-alpha-3fb17ca5f15.0",
-    "@trackunit/ui-icons": "1.11.48-alpha-3fb17ca5f15.0",
-    "@trackunit/react-table-base-components": "1.13.36-alpha-3fb17ca5f15.0",
-    "@trackunit/react-form-components": "1.14.36-alpha-3fb17ca5f15.0",
-    "@trackunit/i18n-library-translation": "1.12.35-alpha-3fb17ca5f15.0",
-    "@trackunit/iris-app-runtime-core-api": "1.12.30-alpha-3fb17ca5f15.0",
+    "@trackunit/react-components": "1.17.34",
+    "@trackunit/shared-utils": "1.13.49",
+    "@trackunit/css-class-variance-utilities": "1.11.49",
+    "@trackunit/ui-icons": "1.11.48",
+    "@trackunit/react-table-base-components": "1.13.37",
+    "@trackunit/react-form-components": "1.14.37",
+    "@trackunit/i18n-library-translation": "1.12.35",
+    "@trackunit/iris-app-runtime-core-api": "1.12.30",
     "graphql": "^16.10.0"
   },
   "module": "./index.esm.js",

package/src/SelectAllBanner.d.ts

@@ -0,0 +1,59 @@
+import type { MouseEventHandler, ReactElement } from "react";
+export interface SelectAllBannerProps {
+    /** Whether all items across all pages are currently selected */
+    readonly areAllSelected: boolean;
+    /** Number of items currently selected (on this page or total) */
+    readonly selectedCount: number;
+    /** Called when user clicks "Select all" to select all items across pages */
+    readonly onClickSelectAll: MouseEventHandler<HTMLButtonElement>;
+    /** Called when user clicks "Clear selection" */
+    readonly onClickClearSelection: MouseEventHandler<HTMLButtonElement>;
+    /** Optional label override for the "Select all" button */
+    readonly selectAllLabel?: string;
+}
+/**
+ * A generic banner displayed inside a table's `subHeaderActions` slot when all
+ * rows on the current page are selected. It offers the user two actions:
+ *
+ * 1. **Select all** across every page (when `areAllSelected` is `false`).
+ * 2. **Clear selection** (when `areAllSelected` is `true`).
+ *
+ * Domain-specific data-fetching and state management are left to the consumer
+ * via the `onClickSelectAll` / `onClickClearSelection` callbacks.
+ *
+ * ### When to use
+ *
+ * - The table is **paginated** and users need to select items beyond the
+ *   visible page (e.g. bulk assign, bulk delete).
+ * - The full set of matching IDs is fetched lazily via a separate lightweight
+ *   query when the user explicitly clicks "Select all".
+ * - The table supports **filters** and the selection should respect the
+ *   currently applied filter set. Use the `selectAllLabel` prop to communicate
+ *   that only matching items will be selected (e.g. "Select all matching assets
+ *   in Service Plans").
+ *
+ * ### When **not** to use
+ *
+ * - The table loads **all data at once** (no pagination). In that case the
+ *   built-in header checkbox from `useTableSelection` already selects every
+ *   row — there is nothing extra to select.
+ * - The dataset is small enough that all rows fit on a single page.
+ * - Selection is limited to a single row (e.g. a details panel use-case).
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   subHeaderActions={
+ *     allPageRowsSelected ? (
+ *       <SelectAllBanner
+ *         areAllSelected={selectedIds.length >= totalCount}
+ *         selectedCount={selectedIds.length}
+ *         onClickSelectAll={handleSelectAll}
+ *         onClickClearSelection={handleClearSelection}
+ *       />
+ *     ) : undefined
+ *   }
+ * />
+ * ```
+ */
+export declare const SelectAllBanner: ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, }: SelectAllBannerProps) => ReactElement;

package/src/Table.d.ts

@@ -18,6 +18,11 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
      * Commonly used for primary actions for the table.
      */
     headerRightActions?: ReactNode;
+    /**
+     * ReactNode rendered below the header actions row and above the column headers.
+     * Useful for contextual banners like bulk selection indicators. See SelectAllBanner component for an example.
+     */
+    subHeaderActions?: ReactNode;
     /**
      * ReactNode rendered on the right side of the table footer.
      * Commonly used for export actions.

package/src/index.d.ts

@@ -3,6 +3,7 @@ export * from "./ActionSheet/Actions";
 export * from "./ActionSheet/ActionSheet";
 export * from "./menus/ColumnFilter";
 export * from "./menus/Sorting";
+export * from "./SelectAllBanner";
 export * from "./Table";
 export * from "./types";
 export * from "./useColumnHelper";

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnActions.clearSorting" | "table.columnActions.hideColumn" | "table.columnActions.pinColumn" | "table.columnActions.sortAscending" | "table.columnActions.sortDescending" | "table.columnActions.unPinColumn" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnActions.clearSorting" | "table.columnActions.hideColumn" | "table.columnActions.pinColumn" | "table.columnActions.sortAscending" | "table.columnActions.sortDescending" | "table.columnActions.unPinColumn" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">;
+export declare const useTranslation: () => [TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnActions.clearSorting" | "table.columnActions.hideColumn" | "table.columnActions.pinColumn" | "table.columnActions.sortAscending" | "table.columnActions.sortDescending" | "table.columnActions.unPinColumn" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selectAll.allSelected" | "table.selectAll.clearSelection" | "table.selectAll.pageSelected" | "table.selectAll.selectAll" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnActions.clearSorting" | "table.columnActions.hideColumn" | "table.columnActions.pinColumn" | "table.columnActions.sortAscending" | "table.columnActions.sortDescending" | "table.columnActions.unPinColumn" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selectAll.allSelected" | "table.selectAll.clearSelection" | "table.selectAll.pageSelected" | "table.selectAll.selectAll" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };