@worknice/whiteboard 0.53.0 → 0.55.0

package/dist/controls/MenuButton.js

@@ -258,6 +258,7 @@ const MenuButton = ({ autoFocus = false, ariaLabel, disabled = false, id, size =
                     [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].iconOnly]: void 0 === children
                 }),
                 tabIndex: 0,
+                title: ariaLabel,
                 type: "button",
                 ref: floatingUiRefs.setReference,
                 ...getReferenceProps({

package/dist/presentation/CustomizableTable/CustomizableTable.d.ts

@@ -31,6 +31,7 @@ type Props<Type> = {
         globalFiltering?: boolean;
         size?: number;
         enableSorting?: boolean;
+        sortingFn?: SortingColumnDef<Type>["sortingFn"];
         sortUndefined?: SortingColumnDef<Type>["sortUndefined"];
     } & ({
         type?: "accessor";
@@ -54,6 +55,19 @@ type Props<Type> = {
     isLoading?: boolean;
     estimatedRowSize?: number;
     emptyState?: ReactNode;
+    bulkActions?: BulkAction<Type>[];
+    secondaryBulkActions?: BulkAction<Type>[];
 };
-declare const CustomizableTable: <Type>({ data, columns, csvFilename, getRowId, availableColumnGroups, view, onViewChange, isLoading, estimatedRowSize, emptyState, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
+type BulkAction<Type> = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    render: (props: {
+        rows: Array<Type>;
+        resetRowSelection: () => void;
+        onClose: () => void;
+    }) => ReactNode;
+    predicate?: (row: Type) => boolean;
+};
+declare const CustomizableTable: <Type>({ data, columns, csvFilename, getRowId, availableColumnGroups, view, onViewChange, isLoading, estimatedRowSize, emptyState, bulkActions, secondaryBulkActions, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
 export default CustomizableTable;

package/dist/presentation/CustomizableTable/CustomizableTable.js

@@ -3,6 +3,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/j
 import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__ from "@dnd-kit/core";
 import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__ from "@dnd-kit/sortable";
 import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__ from "@dnd-kit/utilities";
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__ from "@floating-ui/react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__ from "@react-hook/throttle";
 import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__ from "@tanstack/react-table";
 import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__ from "@tanstack/react-virtual";
@@ -11,18 +12,28 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../../controls/Button.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__ from "../../controls/Disclosure.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__ from "../../controls/FilterModal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__ from "../../controls/MenuButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__ from "../../inputs/CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_39dae7d5__ from "../../inputs/StringInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_tables_js_ad146866__ from "../../utils/tables.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_a2cbb2b8__ from "../Badge.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_2e00482a__ from "../Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_bacbf899__ from "../CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_5c2eb952__ from "../HStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__ from "../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__ from "../Table.module.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ConfigureColumnsModal_js_cdac33d6__ from "./ConfigureColumnsModal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__ from "./CustomizableTable.module.js";
+const selectColumnId = "_selectColumn";
 function asFilter(filter) {
     return filter;
 }
 const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>{
+    const isFixedWidth = header.column.columnDef.meta?.fixedWidth === true;
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.useSortable)({
-        id: header.column.id
+        id: header.column.id,
+        disabled: isFixedWidth
     });
     const style = {
         transform: __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__.CSS.Transform.toString(transform),
@@ -30,7 +41,8 @@ const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>
         opacity: isDragging ? 0.5 : 1,
         ...getColumnStyle(header.column),
         flexGrow: 0,
-        position: "relative"
+        position: "relative",
+        cursor: isFixedWidth ? "default" : void 0
     };
     const headerContent = header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
@@ -61,12 +73,12 @@ const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("th", {
         ref: setNodeRef,
         style: style,
-        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableCell, __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableHeader, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cell, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerCell),
-        ...attributes,
-        ...listeners,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableCell, __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableHeader, header.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].selectionCell : void 0, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cell, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerCell),
+        ...isFixedWidth ? {} : attributes,
+        ...isFixedWidth ? {} : listeners,
         children: [
             headerContent,
-            showResizer ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            showResizer && !isFixedWidth ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 onPointerDown: (e)=>e.stopPropagation(),
                 onMouseDown: (e)=>{
                     e.stopPropagation();
@@ -81,14 +93,30 @@ const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>
         ]
     });
 };
-const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColumnGroups, view, onViewChange, isLoading = false, estimatedRowSize = 100, emptyState = "No results" })=>{
+const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColumnGroups, view, onViewChange, isLoading = false, estimatedRowSize = 100, emptyState = "No results", bulkActions = [], secondaryBulkActions = [] })=>{
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
     const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const [activeId, setActiveId] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
     const mountedRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(false);
     const resizeEmitTimeoutRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const lastSelectedRow = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
+    const { refs, x: bulkSelectionModalXCoordinate } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.useFloating)({
+        placement: "bottom",
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.autoUpdate
+    });
     const scrollRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const [scrollContainerWidth, setScrollContainerWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    const enableRowSelection = bulkActions.length + secondaryBulkActions.length > 0;
+    const isRowSelectable = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((row)=>{
+        const allBulkActions = [
+            ...bulkActions,
+            ...secondaryBulkActions
+        ];
+        return allBulkActions.some((bulkAction)=>!bulkAction.predicate || bulkAction.predicate(row.original));
+    }, [
+        bulkActions,
+        secondaryBulkActions
+    ]);
     const sensors = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensors)((0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.MouseSensor, {
         activationConstraint: {
             distance: 10
@@ -102,13 +130,14 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
     const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
         const result = columns.map((column)=>{
-            const { filter, header, id, cell, globalFiltering, type, size, enableSorting, sortUndefined } = column;
+            const { filter, header, id, cell, globalFiltering, type, size, enableSorting, sortingFn, sortUndefined } = column;
             const columnSize = view.columns?.find((col)=>col.id === id)?.size ?? size ?? 150;
             const tableFilter = filter ? asFilter(filter) : void 0;
             if ("accessor" === type || void 0 === type) return columnHelper.accessor((row)=>column.value(row), {
                 cell: cell ? (props)=>cell(props.row.original) : void 0,
                 enableGlobalFilter: false !== globalFiltering,
                 enableSorting: enableSorting ?? true,
+                sortingFn: sortingFn ?? "auto",
                 filterFn: tableFilter ? (row, _, filterValue)=>{
                     const f = tableFilter;
                     if (f.isMulti && Array.isArray(filterValue)) {
@@ -142,9 +171,56 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                 }
             });
         });
-        return result;
+        const rowSelectionColumn = enableRowSelection ? columnHelper.display({
+            id: selectColumnId,
+            header: ({ table })=>{
+                const selectableRows = table.getRowModel().rows.filter((row)=>row.getCanSelect());
+                const allRowsSelected = table.getIsAllRowsSelected();
+                return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__["default"], {
+                    disabled: 0 === selectableRows.length,
+                    value: allRowsSelected,
+                    onChange: ()=>{
+                        table.toggleAllRowsSelected(!(allRowsSelected || table.getIsSomeRowsSelected()));
+                    },
+                    indeterminate: table.getIsSomeRowsSelected()
+                });
+            },
+            cell: ({ table, row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__["default"], {
+                    disabled: !row.getCanSelect(),
+                    value: row.getIsSelected(),
+                    onClick: (event)=>{
+                        if (event.shiftKey && lastSelectedRow.current) {
+                            const visibleRows = table.getRowModel().rows;
+                            const visibleIndex = visibleRows.findIndex((r)=>r.id === row.id);
+                            const lastIndex = visibleRows.findIndex((r)=>r.id === lastSelectedRow.current?.id);
+                            const startIndex = Math.min(lastIndex, visibleIndex);
+                            const endIndex = Math.max(lastIndex, visibleIndex);
+                            const rowsToSelect = visibleRows.slice(startIndex, endIndex + 1).filter((r)=>0 === r.subRows.length && r.getCanSelect());
+                            rowsToSelect.forEach((rowToSelect)=>rowToSelect.toggleSelected(!row.getIsSelected()));
+                        }
+                        lastSelectedRow.current = row;
+                    },
+                    onChange: (value)=>{
+                        row.toggleSelected(value);
+                    }
+                }),
+            size: 45,
+            minSize: 45,
+            enableSorting: false,
+            enableHiding: false,
+            enableResizing: false,
+            enableColumnFilter: false,
+            meta: {
+                fixedWidth: true
+            }
+        }) : void 0;
+        return [
+            rowSelectionColumn,
+            ...result
+        ].filter((column)=>void 0 !== column);
     }, [
         columns,
+        enableRowSelection,
         view.columns
     ]);
     const filterableColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>columns.filter((column)=>void 0 !== column.filter && column.filter.options.length > 0), [
@@ -179,16 +255,29 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
             columnFilters: columnFiltersInitialState,
             sorting: view.sorting,
             grouping: [],
-            columnVisibility: Object.fromEntries(columns.map((col)=>[
+            columnVisibility: Object.fromEntries([
+                ...enableRowSelection ? [
+                    {
+                        id: selectColumnId
+                    }
+                ] : [],
+                ...columns.map((col)=>({
+                        id: col.id
+                    }))
+            ].map((col)=>[
                     col.id,
-                    view.columns.some((c)=>c.id === col.id)
+                    col.id === selectColumnId || view.columns.some((viewColumn)=>viewColumn.id === col.id)
                 ])),
             columnOrder: [
+                ...enableRowSelection ? [
+                    selectColumnId
+                ] : [],
                 ...view.columns.map((col)=>col.id)
             ],
             globalFilter: ""
         }), [
         columns,
+        enableRowSelection,
         view,
         columnFiltersInitialState
     ]);
@@ -214,15 +303,28 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
         getColumnCanGlobalFilter,
         columnResizeMode: "onChange",
         enableColumnResizing: true,
+        enableRowSelection: enableRowSelection ? isRowSelectable : false,
         initialState: mountedRef.current ? {
             expanded: true,
             columnFilters: columnFiltersInitialState,
             sorting: view.sorting,
-            columnVisibility: Object.fromEntries(columns.map((col)=>[
+            columnVisibility: Object.fromEntries([
+                ...enableRowSelection ? [
+                    {
+                        id: selectColumnId
+                    }
+                ] : [],
+                ...columns.map((col)=>({
+                        id: col.id
+                    }))
+            ].map((col)=>[
                     col.id,
-                    view.columns.some((c)=>c.id === col.id)
+                    col.id === selectColumnId || view.columns.some((viewColumn)=>viewColumn.id === col.id)
                 ])),
             columnOrder: [
+                ...enableRowSelection ? [
+                    selectColumnId
+                ] : [],
                 ...view.columns.map((col)=>col.id)
             ],
             globalFilter: ""
@@ -233,7 +335,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
             enableGlobalFilter: false,
             enableSorting: false,
             size: 150,
-            minSize: 50
+            minSize: 100
         }
     });
     const tableState = reactTable.getState();
@@ -303,7 +405,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
     }, []);
     const emitView = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
         onViewChange({
-            columns: Object.entries(reactTable.getState().columnVisibility).filter(([, visible])=>visible).map(([id])=>({
+            columns: Object.entries(reactTable.getState().columnVisibility).filter(([id, visible])=>visible && id !== selectColumnId).map(([id])=>({
                     id: id,
                     size: reactTable.getColumn(id)?.getSize() ?? 150
                 })).sort((a, b)=>{
@@ -312,6 +414,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                 return aIndex - bIndex;
             }),
             filters: reactTable.getState().columnFilters.filter((filter)=>{
+                if (filter.id === selectColumnId) return false;
                 const column = reactTable.getColumn(filter.id);
                 return column?.getIsVisible();
             }).map((filter)=>({
@@ -365,6 +468,18 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
         reactTable
     ]);
     const hasFilterableColumns = filterableColumnsForModal.length > 0;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!enableRowSelection) return;
+        if (columnOrder[0] === selectColumnId) return;
+        reactTable.setColumnOrder([
+            selectColumnId,
+            ...columnOrder.filter((id)=>id !== selectColumnId)
+        ]);
+    }, [
+        columnOrder,
+        enableRowSelection,
+        reactTable
+    ]);
     const applyColumnSelection = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((selected)=>{
         if (0 === availableColumnGroups.length) return;
         const availableIds = new Set(availableColumnGroups.flatMap((group)=>group.columns.map((c)=>c.id)));
@@ -397,6 +512,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
     const handleDragEnd = (event)=>{
         const { active, over } = event;
         setActiveId(null);
+        if (active.id === selectColumnId || over?.id === selectColumnId) return;
         if (over && active.id !== over.id) {
             const order = reactTable.getState().columnOrder;
             const oldIndex = order.indexOf(active.id);
@@ -405,6 +521,14 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
         }
     };
     const getColumnStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((column)=>{
+        if (column.columnDef.meta?.fixedWidth === true) {
+            const size = column.getSize();
+            return {
+                width: `${size}px`,
+                minWidth: `${size}px`,
+                maxWidth: `${size}px`
+            };
+        }
         if (!mountedRef.current) return {
             width: `${column.getSize()}px`,
             minWidth: "50px"
@@ -432,9 +556,129 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
     ]);
     const showTableFilterBar = 0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== availableColumnGroups.length;
     const tableLayoutWidthPx = reactTable.getTotalSize();
+    const visibleLeafColumns = reactTable.getVisibleLeafColumns();
+    const visibleDataColumnCount = visibleLeafColumns.filter((column)=>column.id !== selectColumnId).length;
+    const shouldShowCsvExport = csvExportableColumns.length > 0 && csvFilename;
+    const filteredSelectedRows = reactTable.getFilteredSelectedRowModel();
+    const validPrimaryBulkActions = bulkActions.filter((bulkAction)=>filteredSelectedRows.rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
+    const validSecondaryBulkActions = secondaryBulkActions.filter((bulkAction)=>filteredSelectedRows.rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
+    const shouldShowMoreActions = validSecondaryBulkActions.length > 0 || shouldShowCsvExport;
+    const getBulkActionRows = (bulkAction)=>filteredSelectedRows.flatRows.filter((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true).map((row)=>row.original);
+    const primaryBulkActionRowsMap = new Map(validPrimaryBulkActions.map((bulkAction)=>[
+            bulkAction.key,
+            getBulkActionRows(bulkAction)
+        ]));
+    const secondaryBulkActionRowsMap = new Map(validSecondaryBulkActions.map((bulkAction)=>[
+            bulkAction.key,
+            getBulkActionRows(bulkAction)
+        ]));
+    const allBulkActionRowCounts = [
+        ...Array.from(primaryBulkActionRowsMap.values()).map((actionRows)=>actionRows.length),
+        ...Array.from(secondaryBulkActionRowsMap.values()).map((actionRows)=>actionRows.length)
+    ];
+    const bulkActionRowCountsDiffer = new Set(allBulkActionRowCounts).size > 1;
+    const hasMultipleActions = allBulkActionRowCounts.length > 1;
+    const allRowsCanDoAllActions = hasMultipleActions && allBulkActionRowCounts.every((count)=>count === filteredSelectedRows.rows.length);
+    const showBulkActionCounts = bulkActionRowCountsDiffer || hasMultipleActions && !allRowsCanDoAllActions;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].root,
+        ref: refs.setReference,
         children: [
+            validPrimaryBulkActions.length > 0 || validSecondaryBulkActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                ref: refs.setFloating,
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].bulkSelectionModal,
+                style: {
+                    left: bulkSelectionModalXCoordinate
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_2e00482a__["default"], {
+                    hasShadow: true,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_bacbf899__["default"], {
+                        spacing: "00",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].bulkSelectionModalContent,
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_5c2eb952__["default"], {
+                                    spacing: "n2",
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_a2cbb2b8__["default"], {
+                                            color: "purple",
+                                            children: filteredSelectedRows.rows.length
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__["default"], {
+                                            font: "regular-bold",
+                                            children: "selected"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].bulkSelectionActions,
+                                    children: [
+                                        validPrimaryBulkActions.map((bulkAction)=>{
+                                            const actionRows = primaryBulkActionRowsMap.get(bulkAction.key) ?? [];
+                                            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
+                                                icon: bulkAction.icon,
+                                                render: (onClose)=>bulkAction.render({
+                                                        rows: actionRows,
+                                                        resetRowSelection: ()=>reactTable.resetRowSelection(),
+                                                        onClose
+                                                    }),
+                                                children: showBulkActionCounts ? `${bulkAction.label} (${actionRows.length})` : bulkAction.label
+                                            }, bulkAction.key);
+                                        }),
+                                        shouldShowMoreActions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__["default"], {
+                                            id: "bulkActionOverflow",
+                                            ariaLabel: "More actions",
+                                            type: "ghost",
+                                            options: [
+                                                ...validSecondaryBulkActions.map((bulkAction)=>{
+                                                    const actionRows = secondaryBulkActionRowsMap.get(bulkAction.key) ?? [];
+                                                    return {
+                                                        id: bulkAction.key,
+                                                        label: showBulkActionCounts ? `${bulkAction.label} (${actionRows.length})` : bulkAction.label,
+                                                        icon: bulkAction.icon,
+                                                        type: "render",
+                                                        render: (onClose)=>bulkAction.render({
+                                                                rows: actionRows,
+                                                                resetRowSelection: ()=>reactTable.resetRowSelection(),
+                                                                onClose
+                                                            })
+                                                    };
+                                                }),
+                                                ...shouldShowCsvExport ? [
+                                                    {
+                                                        id: "download-selected-rows",
+                                                        label: "Download CSV",
+                                                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                            symbol: "Download",
+                                                            size: "small"
+                                                        }),
+                                                        type: "onClick",
+                                                        onClick: ()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_tables_js_ad146866__.handleDownloadCsv)(csvFilename, csvExportableColumns, reactTable.getSelectedRowModel().rows)
+                                                    }
+                                                ] : []
+                                            ],
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                symbol: "Overflow"
+                                            })
+                                        }) : null,
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                symbol: "Close"
+                                            }),
+                                            onClick: ()=>{
+                                                reactTable.resetRowSelection(true);
+                                            },
+                                            title: `Deselect ${reactTable.getFilteredSelectedRowModel().rows.length} ${1 === reactTable.getFilteredSelectedRowModel().rows.length ? "selection" : "selections"}`,
+                                            type: "ghost"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                })
+            }) : null,
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].mainColumn,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
@@ -491,7 +735,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                 }),
                                             children: "Columns"
                                         }) : null,
-                                        data.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                                        data.length > 0 && shouldShowCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                                             type: "secondary",
                                             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
                                                 symbol: "Download"
@@ -580,14 +824,14 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                                 className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
                                                                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
                                                                     className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].loadingCell),
-                                                                    colSpan: Math.max(reactTable.getVisibleLeafColumns().length, 1),
+                                                                    colSpan: Math.max(visibleLeafColumns.length, 1),
                                                                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
                                                                         symbol: "Loading",
                                                                         size: "large",
                                                                         animate: true
                                                                     })
                                                                 })
-                                                            }) : 0 === reactTable.getVisibleLeafColumns().length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                            }) : 0 === visibleDataColumnCount ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
                                                                 className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
                                                                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
                                                                     className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows,
@@ -605,7 +849,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                                         transform: `translateY(${virtualRow.start}px)`
                                                                     },
                                                                     children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
-                                                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableCell, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cell),
+                                                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableCell, cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].selectionCell : void 0, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cell),
                                                                             style: {
                                                                                 ...getColumnStyle(cell.column),
                                                                                 flexGrow: 0
@@ -620,7 +864,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                                 className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
                                                                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
                                                                     className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows,
-                                                                    colSpan: reactTable.getVisibleLeafColumns().length,
+                                                                    colSpan: visibleLeafColumns.length,
                                                                     children: emptyState
                                                                 })
                                                             })

package/dist/presentation/CustomizableTable/CustomizableTable_module.css

@@ -7,7 +7,7 @@
 }
 
 .columnStack-supahl {
-  gap: var(--size-p2);
+  gap: var(--size-n1);
   flex-direction: column;
   flex: 1;
   min-width: 0;
@@ -64,13 +64,10 @@
 
 .cell-TKX6Qc {
   border-right: solid var(--size-n5) var(--color-grey-t08);
-  padding-left: var(--size-00);
-  padding-top: var(--size-00);
-  padding-bottom: var(--size-00);
+  padding: var(--size-n1);
 }
 
 .cell-TKX6Qc:last-child {
-  padding-right: var(--size-00);
   border-right: none;
 }
 
@@ -99,16 +96,10 @@
 
 .headerCell-HsDaea {
   cursor: grab;
-  padding-top: var(--size-00);
-  padding-bottom: var(--size-00);
-  padding-left: var(--size-00);
+  padding: var(--size-n1);
   position: relative;
 }
 
-.headerCell-HsDaea:last-child {
-  padding-right: var(--size-00);
-}
-
 .headerSortable-fnjI8P {
   gap: var(--size-n2);
   text-align: left;

package/dist/presentation/RichList/RichList.d.ts

@@ -77,10 +77,13 @@ type CommonProps<Type> = {
      *   (`rowMainCompact`).
      * - Main-slot `prefixOnWide` / `suffixOnWide` adornments are hidden
      *   (`rowListAtCompactBreakpoint`).
-     * - Hover-only controls become always-visible (row bulk-action checkbox lane,
-     *   toolbar select-all) and toolbar button labels collapse to icons. These rules
-     *   live in CSS keyed off the `data-richlist-compact` attribute that JS sets on
-     *   `.richListQueryScope` from this same `isCompactContentSlots` signal.
+     * - Hover-only row select become always-visible (row bulk-action checkbox lane,
+     *   toolbar select-all) and **modal** toolbar button labels collapse to icons **only**
+     *   for Buttons with `.toolbarButtonLabel` (Filters modal, Display, CSV). A **single**
+     *   single-column filter is rendered as an inline label-less `MenuButton` in the toolbar
+     *   instead (`filter.label` is not shown there; optional `aria-label` only).
+     *   That control is not collapsed this way. Label collapse rules live in CSS keyed off
+     *   `data-richlist-compact` on `.richListQueryScope` from `isCompactContentSlots`.
      * - The Display dialog's column-visibility section is hidden (no room).
      *
      * @default `RICH_LIST_CONTENT_COMPACT_MAX_PX` (1024); see `helpers.ts`