@worknice/whiteboard 0.52.1 → 0.53.0

package/dist/presentation/RichList/RichList.js

@@ -0,0 +1,507 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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_clsx__ from "clsx";
+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_FilterModal_js_c5dcd344__ from "../../controls/FilterModal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_3d9c174d__ from "../../utils/customProperties.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__ from "../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__ from "./helpers.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__ from "./RichList.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichListBulkActionBar_js_d46cecae__ from "./RichListBulkActionBar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__ from "./RichListDisplayModal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichListRow_js_08189b13__ from "./RichListRow.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichListToolbar_js_747b658d__ from "./RichListToolbar.js";
+const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], contentAlignment = "space-evenly", trailingSlot, href, rowActions, bulkActions = [], secondaryBulkActions = [], rowHeight = "medium", csvFilename, fillContainerHeight = false, compactBreakpoint: compactBreakpointProp, enableSorting = false, emptyState = "No results", id, pathName, localStorageSchema, header })=>{
+    const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [isDisplayModalOpen, setIsDisplayModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const lastSelectedRowRef = (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 listScopeRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [isCompactContentSlots, setIsCompactContentSlots] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const compactBreakpointPx = compactBreakpointProp ?? __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.RICH_LIST_CONTENT_COMPACT_MAX_PX;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const el = listScopeRef.current;
+        if (!el) return;
+        const update = ()=>{
+            const w = el.clientWidth;
+            setIsCompactContentSlots(w > 0 && w <= compactBreakpointPx);
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, [
+        compactBreakpointPx
+    ]);
+    const enableRowSelection = bulkActions.length + secondaryBulkActions.length > 0;
+    const normalizedPrimary = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeTextField)(mainSlot.primary, "primary"), [
+        mainSlot.primary
+    ]);
+    const normalizedSecondary = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>mainSlot.secondary ? (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeTextField)(mainSlot.secondary, "secondary") : null, [
+        mainSlot.secondary
+    ]);
+    const normalizedLeadingSlots = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const arr = Array.isArray(leadingSlot) ? leadingSlot : void 0 !== leadingSlot ? [
+            leadingSlot
+        ] : [];
+        return arr.map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "leading", index));
+    }, [
+        leadingSlot
+    ]);
+    const normalizedContentSlots = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>contentSlots.map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "content", index)), [
+        contentSlots
+    ]);
+    const normalizedTrailingSlots = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const arr = Array.isArray(trailingSlot) ? trailingSlot : void 0 !== trailingSlot ? [
+            trailingSlot
+        ] : [];
+        return arr.map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "trailing", index));
+    }, [
+        trailingSlot
+    ]);
+    const rowMainHidesContentSlotColumns = isCompactContentSlots && !normalizedContentSlots.some((s)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(s.layoutVisibility, true));
+    const allEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>[
+            ...normalizedLeadingSlots,
+            normalizedPrimary,
+            normalizedSecondary,
+            ...normalizedContentSlots,
+            ...normalizedTrailingSlots
+        ], [
+        normalizedLeadingSlots,
+        normalizedPrimary,
+        normalizedSecondary,
+        normalizedContentSlots,
+        normalizedTrailingSlots
+    ]);
+    const entriesWithFilter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && void 0 !== e.filter && e.filter.options.length > 0), [
+        allEntries
+    ]);
+    const entriesWithGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && e.globalFiltering && void 0 !== e.value), [
+        allEntries
+    ]);
+    const entriesWithCsvExport = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && e.csvExport), [
+        allEntries
+    ]);
+    const csvExportColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>entriesWithCsvExport.filter((e)=>void 0 !== e.value).map((entry)=>({
+                id: entry.id,
+                header: entry.label ?? entry.id
+            })), [
+        entriesWithCsvExport
+    ]);
+    const toggleableContentSlots = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isToggleableContentColumn)(e)), [
+        allEntries
+    ]);
+    const sortableEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && void 0 !== e.value), [
+        allEntries
+    ]);
+    const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
+        const columns = allEntries.filter((e)=>null !== e).map((entry)=>{
+            if (void 0 === entry.value) return columnHelper.display({
+                id: entry.id,
+                cell: ({ row })=>entry.render(row.original),
+                enableHiding: (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isColumnWithVisibilityState)(entry),
+                enableGlobalFilter: false,
+                enableColumnFilter: void 0 !== entry.filter
+            });
+            const value = entry.value;
+            return columnHelper.accessor((row)=>value(row), {
+                id: entry.id,
+                cell: ({ row })=>entry.render(row.original),
+                enableHiding: (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isColumnWithVisibilityState)(entry),
+                enableGlobalFilter: entry.globalFiltering,
+                ...enableSorting ? {
+                    enableSorting: true,
+                    sortUndefined: 1
+                } : {
+                    enableSorting: false
+                },
+                filterFn: entry.filter ? (row, _columnId, filterValue)=>{
+                    const filter = entry.filter;
+                    if (!filter) return true;
+                    if (filter.isMulti && Array.isArray(filterValue)) {
+                        if (0 === filterValue.length) return true;
+                        return filterValue.some((optionId)=>{
+                            const option = filter.options.find((opt)=>opt.id === optionId);
+                            return option ? option.predicate(row.original) : false;
+                        });
+                    }
+                    if (!filter.isMulti && "string" == typeof filterValue) {
+                        const option = filter.options.find((opt)=>opt.id === filterValue);
+                        return option?.predicate?.(row.original) ?? true;
+                    }
+                    return true;
+                } : void 0
+            });
+        });
+        const selectColumn = enableRowSelection ? columnHelper.display({
+            id: __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.SELECT_COLUMN_ID,
+            enableHiding: false
+        }) : void 0;
+        return selectColumn ? [
+            selectColumn,
+            ...columns
+        ] : columns;
+    }, [
+        allEntries,
+        enableRowSelection,
+        enableSorting
+    ]);
+    const columnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>entriesWithFilter.map((entry)=>{
+            const filter = entry.filter;
+            if (filter.isMulti) return {
+                id: entry.id,
+                value: []
+            };
+            return {
+                id: entry.id,
+                value: filter.options[0].id
+            };
+        }), [
+        entriesWithFilter
+    ]);
+    const storageKey = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>pathName && id ? `${pathName}#${id}_richList` : null, [
+        pathName,
+        id
+    ]);
+    const localStorageData = "undefined" != typeof window && storageKey ? window.localStorage.getItem(storageKey) : null;
+    let parsedLocalStorage = {};
+    if (localStorageData && localStorageSchema) try {
+        parsedLocalStorage = JSON.parse(localStorageData);
+        localStorageSchema.parse(parsedLocalStorage);
+    } catch (error) {
+        console.error("Error parsing localStorage data:", error);
+        parsedLocalStorage = {};
+    }
+    const permanentlyHiddenColumnIds = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>new Set(allEntries.filter((e)=>null !== e && "canToggleVisibility" in e && e.hiddenByDefault && !e.canToggleVisibility).map((e)=>e.id)), [
+        allEntries
+    ]);
+    const columnVisibilityDefaultForHiddenByDefault = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(allEntries.filter((e)=>null !== e && "canToggleVisibility" in e && e.hiddenByDefault).map((e)=>[
+                e.id,
+                false
+            ])), [
+        allEntries
+    ]);
+    const initialColumnVisibility = (()=>{
+        const base = columnVisibilityDefaultForHiddenByDefault;
+        const saved = parsedLocalStorage.columnVisibility;
+        if (!saved) return base;
+        const next = {
+            ...base,
+            ...saved
+        };
+        for (const id of permanentlyHiddenColumnIds)next[id] = false;
+        return next;
+    })();
+    const isRowSelectable = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((row)=>{
+        const all = [
+            ...bulkActions,
+            ...secondaryBulkActions
+        ];
+        return all.some((action)=>!action.predicate || action.predicate(row.original));
+    }, [
+        bulkActions,
+        secondaryBulkActions
+    ]);
+    const table = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.useReactTable)({
+        data,
+        columns: columnDefs,
+        getRowId,
+        getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getCoreRowModel)(),
+        getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getFilteredRowModel)(),
+        ...enableSorting ? {
+            getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getSortedRowModel)()
+        } : {},
+        getColumnCanGlobalFilter: ()=>true,
+        enableRowSelection: enableRowSelection ? isRowSelectable : false,
+        initialState: {
+            columnFilters: parsedLocalStorage.columnFilters ?? columnFiltersInitialState,
+            columnVisibility: initialColumnVisibility,
+            globalFilter: "",
+            sorting: parsedLocalStorage.sorting ?? []
+        },
+        defaultColumn: {
+            enableColumnFilter: false,
+            enableGlobalFilter: false,
+            enableSorting: false
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        if (0 === permanentlyHiddenColumnIds.size) return;
+        let anyVisible = false;
+        const next = {};
+        for (const id of permanentlyHiddenColumnIds)if (table.getColumn(id)?.getIsVisible()) {
+            anyVisible = true;
+            next[id] = false;
+        }
+        if (anyVisible) table.setColumnVisibility((prev)=>({
+                ...prev,
+                ...next
+            }));
+    }, [
+        permanentlyHiddenColumnIds,
+        table
+    ]);
+    const tableState = table.getState();
+    const rows = table.getRowModel().rows;
+    const filteredSelectedRows = table.getFilteredSelectedRowModel();
+    const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>table.setGlobalFilter(value), 4);
+    const activeFilterCount = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const currentFilters = tableState.columnFilters;
+        return columnFiltersInitialState.filter((initialFilter)=>{
+            const currentFilter = currentFilters.find((f)=>f.id === initialFilter.id);
+            const currentValue = currentFilter?.value;
+            const initialValue = initialFilter.value;
+            if (Array.isArray(initialValue) && Array.isArray(currentValue)) return currentValue.length !== initialValue.length || initialValue.some((v, i)=>v !== currentValue[i]);
+            return currentValue !== initialValue;
+        }).length;
+    }, [
+        tableState.columnFilters,
+        columnFiltersInitialState
+    ]);
+    const showSearchReset = activeFilterCount > 0 || "" !== tableState.globalFilter;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify({
+            columnFilters: tableState.columnFilters,
+            columnVisibility: tableState.columnVisibility,
+            sorting: tableState.sorting
+        }));
+    }, [
+        tableState.columnFilters,
+        tableState.columnVisibility,
+        tableState.sorting,
+        storageKey
+    ]);
+    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 shouldShowCsvExport = csvExportColumns.length > 0 && Boolean(csvFilename);
+    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((xs)=>xs.length),
+        ...Array.from(secondaryBulkActionRowsMap.values()).map((xs)=>xs.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;
+    const resolvedRowHeightPx = "number" == typeof rowHeight ? rowHeight : __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.ROW_HEIGHT_PRESETS[rowHeight];
+    const listRootStyle = (0, __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_3d9c174d__["default"])({
+        "--row-height": `${resolvedRowHeightPx}px`,
+        "--richlist-padding-inline": `${(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListInlinePaddingPx)(rowHeight)}px`
+    });
+    const showDisplayForColumnVisibility = !isCompactContentSlots && toggleableContentSlots.length > 0;
+    const showDisplayButton = enableSorting && sortableEntries.length > 0 || showDisplayForColumnVisibility;
+    const defaultDisplayColumnVisibility = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(toggleableContentSlots.map((entry)=>[
+                entry.id,
+                !("hiddenByDefault" in entry && entry.hiddenByDefault)
+            ])), [
+        toggleableContentSlots
+    ]);
+    const sortableColumnsForModal = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>sortableEntries.map((entry)=>({
+                id: entry.id,
+                label: entry.label ?? entry.id
+            })), [
+        sortableEntries
+    ]);
+    const displayColumnsForModal = toggleableContentSlots.map((entry)=>({
+            id: entry.id,
+            label: entry.label ?? entry.id,
+            visible: table.getColumn(entry.id)?.getIsVisible() ?? true,
+            defaultVisible: !("hiddenByDefault" in entry && entry.hiddenByDefault)
+        }));
+    const displayColumnsForDisplayModal = isCompactContentSlots ? [] : displayColumnsForModal;
+    const displayActiveCount = (0, __WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__.getDisplayFormActiveExpanderCount)(enableSorting && sortableEntries.length > 0, tableState.sorting, displayColumnsForDisplayModal);
+    const hasToolbar = enableRowSelection || entriesWithGlobalFilter.length > 0 || entriesWithFilter.length > 0 || showDisplayButton || shouldShowCsvExport;
+    const actionsByRowId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const map = new Map();
+        if (!rowActions) return map;
+        for (const row of data){
+            const resolved = rowActions(row).filter((a)=>null !== a).filter((a)=>!a.predicate || a.predicate(row));
+            map.set(getRowId(row), resolved);
+        }
+        return map;
+    }, [
+        data,
+        rowActions,
+        getRowId
+    ]);
+    const maxAlwaysVisibleActions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        let max = 0;
+        for (const actions of actionsByRowId.values()){
+            const count = actions.filter((a)=>a.alwaysVisible).length;
+            if (count > max) max = count;
+        }
+        return max;
+    }, [
+        actionsByRowId
+    ]);
+    const anyRowHasOverflowAction = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        for (const actions of actionsByRowId.values())if (actions.some((a)=>!a.alwaysVisible)) return true;
+        return false;
+    }, [
+        actionsByRowId
+    ]);
+    const filterableColumnsForModal = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>entriesWithFilter.map((entry)=>({
+                id: entry.id,
+                filter: entry.filter
+            })), [
+        entriesWithFilter
+    ]);
+    const showBulkBar = validPrimaryBulkActions.length > 0 || validSecondaryBulkActions.length > 0;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                ref: refs.setReference,
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].root, fillContainerHeight && __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].rootFillHeight),
+                style: listRootStyle,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    ref: listScopeRef,
+                    className: __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].richListQueryScope,
+                    "data-richlist-compact": isCompactContentSlots ? "" : void 0,
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].richListHead,
+                            children: [
+                                showBulkBar ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichListBulkActionBar_js_d46cecae__["default"], {
+                                    table: table,
+                                    floatingRef: refs.setFloating,
+                                    leftCoordinate: bulkSelectionModalXCoordinate,
+                                    selectedCount: filteredSelectedRows.rows.length,
+                                    primaryBulkActions: validPrimaryBulkActions,
+                                    secondaryBulkActions: validSecondaryBulkActions,
+                                    primaryBulkActionRowsMap: primaryBulkActionRowsMap,
+                                    secondaryBulkActionRowsMap: secondaryBulkActionRowsMap,
+                                    showBulkActionCounts: showBulkActionCounts,
+                                    csvExportColumns: csvExportColumns,
+                                    csvFilename: csvFilename
+                                }) : null,
+                                header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].listHeader,
+                                    children: header()
+                                }) : null,
+                                hasToolbar ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichListToolbar_js_747b658d__["default"], {
+                                    hasGlobalSearch: entriesWithGlobalFilter.length > 0,
+                                    searchTerm: searchTerm,
+                                    onSearchTermChange: (value)=>{
+                                        setSearchTerm(value);
+                                        throttledSetGlobalFilter(value);
+                                    },
+                                    hasFilters: entriesWithFilter.length > 0,
+                                    activeFilterCount: activeFilterCount,
+                                    onOpenFilterModal: ()=>setIsFilterModalOpen(true),
+                                    showDisplay: showDisplayButton,
+                                    onOpenDisplayModal: ()=>setIsDisplayModalOpen(true),
+                                    displayActiveCount: displayActiveCount,
+                                    showCsvExport: shouldShowCsvExport && Boolean(csvFilename),
+                                    onDownloadCsv: ()=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.handleDownloadCsv)(csvFilename, csvExportColumns, table.getRowModel().rows),
+                                    showSelectAll: enableRowSelection,
+                                    selectAllAllSelected: table.getIsAllRowsSelected(),
+                                    selectAllSomeSelected: table.getIsSomeRowsSelected(),
+                                    selectAllDisabled: 0 === table.getRowModel().rows.filter((r)=>r.getCanSelect()).length,
+                                    onSelectAllChange: ()=>{
+                                        const all = table.getIsAllRowsSelected();
+                                        const some = table.getIsSomeRowsSelected();
+                                        table.toggleAllRowsSelected(!(all || some));
+                                    }
+                                }) : null,
+                                showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].toolbarStatus,
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__["default"], {
+                                            font: "small",
+                                            tone: "muted",
+                                            children: [
+                                                "Showing ",
+                                                table.getFilteredRowModel().flatRows.length,
+                                                " of",
+                                                " ",
+                                                table.getPreFilteredRowModel().flatRows.length
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                                            onClick: ()=>{
+                                                table.setColumnFilters(columnFiltersInitialState);
+                                                table.resetGlobalFilter();
+                                                setSearchTerm("");
+                                            },
+                                            type: "secondary",
+                                            size: "small",
+                                            children: "Reset"
+                                        })
+                                    ]
+                                }) : null
+                            ]
+                        }),
+                        rows.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+                            className: __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].list,
+                            children: rows.map((row)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichListRow_js_08189b13__["default"], {
+                                    row: row,
+                                    table: table,
+                                    enableRowSelection: enableRowSelection,
+                                    href: href,
+                                    normalizedLeadingSlots: normalizedLeadingSlots,
+                                    normalizedPrimary: normalizedPrimary,
+                                    normalizedSecondary: normalizedSecondary,
+                                    mainSlotMaxWidthPx: mainSlot.size,
+                                    normalizedContentSlots: normalizedContentSlots,
+                                    normalizedTrailingSlots: normalizedTrailingSlots,
+                                    isCompactContentSlots: isCompactContentSlots,
+                                    rowMainHidesContentSlotColumns: rowMainHidesContentSlotColumns,
+                                    contentSlotsJustifyContent: contentAlignment,
+                                    actionsForRow: actionsByRowId.get(row.id) ?? [],
+                                    maxAlwaysVisibleActions: maxAlwaysVisibleActions,
+                                    anyRowHasOverflowAction: anyRowHasOverflowAction,
+                                    lastSelectedRowRef: lastSelectedRowRef
+                                }, row.id))
+                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__RichList_module_js_320d4975__["default"].emptyState,
+                            children: emptyState
+                        })
+                    ]
+                })
+            }),
+            isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__["default"], {
+                onClose: ()=>setIsFilterModalOpen(false),
+                filterableColumns: filterableColumnsForModal,
+                currentFilters: tableState.columnFilters,
+                onFiltersChange: (filters)=>table.setColumnFilters(filters)
+            }),
+            isDisplayModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__["default"], {
+                onClose: ()=>setIsDisplayModalOpen(false),
+                sortableColumns: enableSorting ? sortableColumnsForModal : [],
+                currentSorting: tableState.sorting,
+                onApplySorting: (sorting)=>table.setSorting(sorting),
+                displayColumns: displayColumnsForDisplayModal,
+                onApplyColumnVisibility: (vis)=>{
+                    table.setColumnVisibility((prev)=>{
+                        const next = {
+                            ...prev
+                        };
+                        for (const [id, visible] of Object.entries(vis))next[id] = visible;
+                        return next;
+                    });
+                },
+                defaultSorting: [],
+                defaultColumnVisibility: defaultDisplayColumnVisibility
+            })
+        ]
+    });
+};
+const RichList_rslib_entry_ = RichList;
+export { RichList_rslib_entry_ as default };

package/dist/presentation/RichList/RichList.module.js

@@ -0,0 +1,12 @@
+import "./RichList_module.css";
+const RichList_module_rslib_entry_ = {
+    root: "root-S5afi_",
+    rootFillHeight: "rootFillHeight-F5N1tt",
+    richListQueryScope: "richListQueryScope-_rCOEN",
+    richListHead: "richListHead-YX3P21",
+    listHeader: "listHeader-LmUwi0",
+    toolbarStatus: "toolbarStatus-OBimHB",
+    list: "list-j1kaiA",
+    emptyState: "emptyState-xAYoQA"
+};
+export { RichList_module_rslib_entry_ as default };

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import RichList from "./RichList";
+declare const meta: Meta<typeof RichList>;
+export default meta;
+type Story = StoryObj<typeof RichList>;
+export declare const PeopleDirectory: Story;
+/**
+ * Both bulk actions and href are used.
+ */
+export declare const EmployeePaperwork: Story;
+export declare const Paperwork: Story;
+export declare const PaperworkApprovals: Story;
+export declare const Leave: Story;
+export declare const Tasks: Story;
+export declare const EmployeeCompliance: Story;
+export declare const ComplianceGroups: Story;
+export declare const CustomFields: Story;
+export declare const SavedQuestions: Story;
+export declare const PeopleTags: Story;
+export declare const Tables: Story;
+export declare const Positions: Story;
+/** Mobile-friendly list of people with actions. */
+export declare const EmployeePeople: Story;
+export declare const EmptyList: Story;