@worknice/whiteboard 0.53.0 → 0.55.0

package/dist/presentation/RichList/RichList.js

@@ -15,8 +15,33 @@ import * as __WEBPACK_EXTERNAL_MODULE__RichListBulkActionBar_js_d46cecae__ from
 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";
+function countColumnFiltersDifferingFromInitial(currentFilters, initialFilters) {
+    return initialFilters.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;
+}
+function stripColumnFilterById(filters, columnId) {
+    if (void 0 === columnId) return filters;
+    return filters.filter((f)=>f.id !== columnId);
+}
+function mergeInlineSinglePersistedColumnFilters(tableColumnFilters, inlineColumnId, inlineOptionId) {
+    if (void 0 === inlineColumnId || void 0 === inlineOptionId) return tableColumnFilters;
+    const without = stripColumnFilterById(tableColumnFilters, inlineColumnId);
+    return [
+        ...without,
+        {
+            id: inlineColumnId,
+            value: inlineOptionId
+        }
+    ];
+}
 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 [inlineSingleSelectChoice, setInlineSingleSelectChoice] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
     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);
@@ -84,6 +109,13 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     const entriesWithFilter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && void 0 !== e.filter && e.filter.options.length > 0), [
         allEntries
     ]);
+    const inlineSingleSelectExcludedFromTableColumnId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (1 !== entriesWithFilter.length) return;
+        if (true === entriesWithFilter[0].filter.isMulti) return;
+        return entriesWithFilter[0].id;
+    }, [
+        entriesWithFilter
+    ]);
     const entriesWithGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && e.globalFiltering && void 0 !== e.value), [
         allEntries
     ]);
@@ -104,13 +136,15 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     ]);
     const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
+        const tableFilteringForEntry = (entryId)=>!(void 0 !== inlineSingleSelectExcludedFromTableColumnId && entryId === inlineSingleSelectExcludedFromTableColumnId);
         const columns = allEntries.filter((e)=>null !== e).map((entry)=>{
+            const tableFiltering = !!entry.filter && tableFilteringForEntry(entry.id);
             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
+                enableColumnFilter: tableFiltering
             });
             const value = entry.value;
             return columnHelper.accessor((row)=>value(row), {
@@ -124,7 +158,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
                 } : {
                     enableSorting: false
                 },
-                filterFn: entry.filter ? (row, _columnId, filterValue)=>{
+                filterFn: entry.filter && tableFiltering ? (row, _columnId, filterValue)=>{
                     const filter = entry.filter;
                     if (!filter) return true;
                     if (filter.isMulti && Array.isArray(filterValue)) {
@@ -153,7 +187,8 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     }, [
         allEntries,
         enableRowSelection,
-        enableSorting
+        enableSorting,
+        inlineSingleSelectExcludedFromTableColumnId
     ]);
     const columnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>entriesWithFilter.map((entry)=>{
             const filter = entry.filter;
@@ -173,14 +208,59 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
         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 parsedLocalStorage = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!localStorageData || !localStorageSchema) return {};
+        try {
+            const parsed = JSON.parse(localStorageData);
+            localStorageSchema.parse(parsed);
+            return parsed;
+        } catch (error) {
+            console.error("Error parsing localStorage data:", error);
+            return {};
+        }
+    }, [
+        localStorageData,
+        localStorageSchema
+    ]);
+    const mergedInitialPersistedColumnFilters = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>parsedLocalStorage.columnFilters ?? columnFiltersInitialState, [
+        parsedLocalStorage.columnFilters,
+        columnFiltersInitialState
+    ]);
+    const tableColumnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>stripColumnFilterById(mergedInitialPersistedColumnFilters, inlineSingleSelectExcludedFromTableColumnId), [
+        mergedInitialPersistedColumnFilters,
+        inlineSingleSelectExcludedFromTableColumnId
+    ]);
+    const modalColumnFiltersBaseline = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>stripColumnFilterById(columnFiltersInitialState, inlineSingleSelectExcludedFromTableColumnId), [
+        columnFiltersInitialState,
+        inlineSingleSelectExcludedFromTableColumnId
+    ]);
+    const inlineSingleSelectOptionIdResolved = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (void 0 === inlineSingleSelectExcludedFromTableColumnId) return;
+        const entry = entriesWithFilter[0];
+        const options = entry.filter.options;
+        const isValidOption = (optionId)=>void 0 !== optionId && options.some((o)=>o.id === optionId);
+        if (isValidOption(inlineSingleSelectChoice)) return inlineSingleSelectChoice;
+        const fromPersisted = mergedInitialPersistedColumnFilters.find((f)=>f.id === inlineSingleSelectExcludedFromTableColumnId)?.value;
+        if ("string" == typeof fromPersisted && isValidOption(fromPersisted)) return fromPersisted;
+        return entry.filter.options[0].id;
+    }, [
+        entriesWithFilter,
+        inlineSingleSelectExcludedFromTableColumnId,
+        inlineSingleSelectChoice,
+        mergedInitialPersistedColumnFilters
+    ]);
+    const tableData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (void 0 === inlineSingleSelectExcludedFromTableColumnId || void 0 === inlineSingleSelectOptionIdResolved) return data;
+        const filter = entriesWithFilter[0].filter;
+        const option = filter.options.find((o)=>o.id === inlineSingleSelectOptionIdResolved);
+        const pred = option?.predicate;
+        return pred ? data.filter((row)=>pred(row)) : data;
+    }, [
+        data,
+        entriesWithFilter,
+        inlineSingleSelectExcludedFromTableColumnId,
+        inlineSingleSelectOptionIdResolved
+    ]);
     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
     ]);
@@ -212,7 +292,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
         secondaryBulkActions
     ]);
     const table = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.useReactTable)({
-        data,
+        data: tableData,
         columns: columnDefs,
         getRowId,
         getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getCoreRowModel)(),
@@ -223,7 +303,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
         getColumnCanGlobalFilter: ()=>true,
         enableRowSelection: enableRowSelection ? isRowSelectable : false,
         initialState: {
-            columnFilters: parsedLocalStorage.columnFilters ?? columnFiltersInitialState,
+            columnFilters: tableColumnFiltersInitialState,
             columnVisibility: initialColumnVisibility,
             globalFilter: "",
             sorting: parsedLocalStorage.sorting ?? []
@@ -254,31 +334,24 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     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;
-    }, [
+    const activeFilterCount = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>countColumnFiltersDifferingFromInitial(tableState.columnFilters, modalColumnFiltersBaseline), [
         tableState.columnFilters,
-        columnFiltersInitialState
+        modalColumnFiltersBaseline
     ]);
     const showSearchReset = activeFilterCount > 0 || "" !== tableState.globalFilter;
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify({
-            columnFilters: tableState.columnFilters,
+            columnFilters: mergeInlineSinglePersistedColumnFilters(tableState.columnFilters, inlineSingleSelectExcludedFromTableColumnId, inlineSingleSelectOptionIdResolved),
             columnVisibility: tableState.columnVisibility,
             sorting: tableState.sorting
         }));
     }, [
+        storageKey,
         tableState.columnFilters,
         tableState.columnVisibility,
         tableState.sorting,
-        storageKey
+        inlineSingleSelectExcludedFromTableColumnId,
+        inlineSingleSelectOptionIdResolved
     ]);
     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));
@@ -331,13 +404,13 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     const actionsByRowId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const map = new Map();
         if (!rowActions) return map;
-        for (const row of data){
+        for (const row of tableData){
             const resolved = rowActions(row).filter((a)=>null !== a).filter((a)=>!a.predicate || a.predicate(row));
             map.set(getRowId(row), resolved);
         }
         return map;
     }, [
-        data,
+        tableData,
         rowActions,
         getRowId
     ]);
@@ -363,6 +436,30 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
             })), [
         entriesWithFilter
     ]);
+    const showFiltersModalButton = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>entriesWithFilter.length > 1 || 1 === entriesWithFilter.length && true === entriesWithFilter[0].filter.isMulti, [
+        entriesWithFilter
+    ]);
+    const inlineSingleSelectFilter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (void 0 === inlineSingleSelectExcludedFromTableColumnId) return;
+        const entry = entriesWithFilter[0];
+        const filter = entry.filter;
+        const value = void 0 !== inlineSingleSelectOptionIdResolved ? inlineSingleSelectOptionIdResolved : filter.options[0].id;
+        return {
+            label: filter.label,
+            options: filter.options.map((o)=>({
+                    id: o.id,
+                    label: o.label
+                })),
+            value,
+            onChange: (optionId)=>{
+                setInlineSingleSelectChoice(optionId);
+            }
+        };
+    }, [
+        entriesWithFilter,
+        inlineSingleSelectExcludedFromTableColumnId,
+        inlineSingleSelectOptionIdResolved
+    ]);
     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: [
@@ -402,8 +499,9 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
                                         setSearchTerm(value);
                                         throttledSetGlobalFilter(value);
                                     },
-                                    hasFilters: entriesWithFilter.length > 0,
+                                    hasFilters: showFiltersModalButton,
                                     activeFilterCount: activeFilterCount,
+                                    inlineSingleSelectFilter: inlineSingleSelectFilter,
                                     onOpenFilterModal: ()=>setIsFilterModalOpen(true),
                                     showDisplay: showDisplayButton,
                                     onOpenDisplayModal: ()=>setIsDisplayModalOpen(true),
@@ -436,7 +534,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
                                         }),
                                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                                             onClick: ()=>{
-                                                table.setColumnFilters(columnFiltersInitialState);
+                                                table.setColumnFilters(modalColumnFiltersBaseline);
                                                 table.resetGlobalFilter();
                                                 setSearchTerm("");
                                             },

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

@@ -21,4 +21,6 @@ export declare const Tables: Story;
 export declare const Positions: Story;
 /** Mobile-friendly list of people with actions. */
 export declare const EmployeePeople: Story;
+/** Performance-style review rows: search, inline status filter, type badges, due dates. */
+export declare const Reviews: Story;
 export declare const EmptyList: Story;

package/dist/presentation/RichList/RichList.stories.js

@@ -13,6 +13,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__stories_PaperworkApprovals_js_59df2dae__
 import * as __WEBPACK_EXTERNAL_MODULE__stories_PeopleList_js_08c544af__ from "./stories/PeopleList.js";
 import * as __WEBPACK_EXTERNAL_MODULE__stories_PeopleTags_js_7b425bf0__ from "./stories/PeopleTags.js";
 import * as __WEBPACK_EXTERNAL_MODULE__stories_Positions_js_26e8c2fc__ from "./stories/Positions.js";
+import * as __WEBPACK_EXTERNAL_MODULE__stories_Reviews_js_1264af6d__ from "./stories/Reviews.js";
 import * as __WEBPACK_EXTERNAL_MODULE__stories_SavedQuestions_js_d58c31d5__ from "./stories/SavedQuestions.js";
 import * as __WEBPACK_EXTERNAL_MODULE__stories_Tables_js_73ee4da7__ from "./stories/Tables.js";
 import * as __WEBPACK_EXTERNAL_MODULE__stories_Tasks_js_9f5cc0bc__ from "./stories/Tasks.js";
@@ -309,6 +310,19 @@ const EmployeePeople = {
             rowHeight: args.rowHeight
         })
 };
+const Reviews = {
+    args: {
+        rowHeight: "large",
+        enableSorting: false,
+        compactBreakpoint: 450
+    },
+    render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Reviews_js_1264af6d__["default"], {
+            compactBreakpoint: args.compactBreakpoint,
+            contentAlignment: args.contentAlignment,
+            enableSorting: args.enableSorting,
+            rowHeight: args.rowHeight
+        })
+};
 const EmptyList = {
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_174fa6e8__["default"], {
             data: [],
@@ -331,4 +345,4 @@ const EmptyList = {
             }
         })
 };
-export { ComplianceGroups, CustomFields, EmployeeCompliance, EmployeePaperwork, EmployeePeople, EmptyList, Leave, Paperwork, PaperworkApprovals, PeopleDirectory, PeopleTags, Positions, SavedQuestions, Tables, Tasks, RichList_stories_rslib_entry_ as default };
+export { ComplianceGroups, CustomFields, EmployeeCompliance, EmployeePaperwork, EmployeePeople, EmptyList, Leave, Paperwork, PaperworkApprovals, PeopleDirectory, PeopleTags, Positions, Reviews, SavedQuestions, Tables, Tasks, RichList_stories_rslib_entry_ as default };

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

@@ -1,3 +1,16 @@
+type ToolbarInlineSingleSelectFilter = {
+    /**
+     * Optional accessible name for the menu trigger. Never rendered as visible toolbar text
+     * (single-select inline filter is intentionally label-less to save space).
+     */
+    label: string;
+    options: Array<{
+        id: string;
+        label: string;
+    }>;
+    value: string;
+    onChange: (optionId: string) => void;
+};
 type Props = {
     hasGlobalSearch: boolean;
     searchTerm: string;
@@ -5,6 +18,8 @@ type Props = {
     hasFilters: boolean;
     activeFilterCount: number;
     onOpenFilterModal: () => void;
+    /** When set, renders an inline single-select `MenuButton` (no visible filter label; optional `aria-label` from `filter.label`). */
+    inlineSingleSelectFilter?: ToolbarInlineSingleSelectFilter;
     showDisplay: boolean;
     onOpenDisplayModal: () => void;
     displayActiveCount: number;
@@ -17,5 +32,5 @@ type Props = {
     selectAllDisabled: boolean;
     onSelectAllChange: () => void;
 };
-declare const RichListToolbar: ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasFilters, activeFilterCount, onOpenFilterModal, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const RichListToolbar: ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasFilters, activeFilterCount, onOpenFilterModal, inlineSingleSelectFilter, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default RichListToolbar;

package/dist/presentation/RichList/RichListToolbar.js

@@ -1,12 +1,30 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 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_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__Icon_js_e5f9af80__ from "../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__ from "./RichListToolbar.module.js";
-const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasFilters, activeFilterCount, onOpenFilterModal, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange })=>{
+const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasFilters, activeFilterCount, onOpenFilterModal, inlineSingleSelectFilter, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange })=>{
     const selectAllRevealed = selectAllAllSelected || selectAllSomeSelected;
+    const inlineFilterMenuOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!inlineSingleSelectFilter) return [];
+        const { onChange, options } = inlineSingleSelectFilter;
+        return options.map((option)=>({
+                id: option.id,
+                label: option.label,
+                type: "onClick",
+                onClick: ()=>{
+                    onChange(option.id);
+                }
+            }));
+    }, [
+        inlineSingleSelectFilter
+    ]);
+    const inlineFilterMenuLabel = inlineSingleSelectFilter?.options.find((option)=>option.id === inlineSingleSelectFilter.value)?.label ?? inlineSingleSelectFilter?.options[0]?.label;
+    const inlineFilterAriaLabel = inlineSingleSelectFilter && "" !== inlineSingleSelectFilter.label.trim() ? inlineSingleSelectFilter.label.trim() : void 0;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbar,
         children: [
@@ -43,6 +61,18 @@ const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasF
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarActions,
                 children: [
+                    inlineSingleSelectFilter ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__["default"], {
+                        ariaLabel: inlineFilterAriaLabel,
+                        iconRight: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                            size: "small",
+                            symbol: "ChevronDown"
+                        }),
+                        id: "richListToolbarInlineFilter",
+                        options: inlineFilterMenuOptions,
+                        size: "small",
+                        type: "ghost",
+                        children: inlineFilterMenuLabel
+                    }) : null,
                     hasFilters ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarFilterButtonWrap, activeFilterCount > 0 && __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarFilterButtonActive),
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {

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

@@ -0,0 +1,19 @@
+import { type CommonProps } from "./shared";
+export type ReviewsRow = {
+    id: string;
+    cycleName: string;
+    reviewBadging: "self" | "peer";
+    reviewStatus: "assigned" | "submitted" | "incomplete";
+    dueDate: string;
+    submittedAt: string | null;
+    personName: string;
+    personHue: string;
+    personImageUrl: string;
+};
+/**
+ * Demonstrates toolbar search plus a single single-select filter as an inline menu
+ * (see `RichList` / `MenuButton`), with performance-style rows: avatar, cycle title, type badge,
+ * due / submitted copy on the trailing edge.
+ */
+declare const ReviewsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default ReviewsList;

package/dist/presentation/RichList/stories/Reviews.js

@@ -0,0 +1,215 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__ from "../../PersonAvatar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__ from "./shared.js";
+const formatListDate = (isoDate)=>{
+    const d = new Date(`${isoDate}T12:00:00`);
+    return new Intl.DateTimeFormat("en-GB", {
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+    }).format(d);
+};
+const reviewRows = [
+    {
+        id: "pr-1",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "self",
+        reviewStatus: "assigned",
+        dueDate: "2026-03-01",
+        submittedAt: null,
+        personName: "Alex Chen",
+        personHue: "220",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "pr-2",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "peer",
+        reviewStatus: "assigned",
+        dueDate: "2026-03-08",
+        submittedAt: null,
+        personName: "Jordan Lee",
+        personHue: "280",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22)
+    },
+    {
+        id: "pr-3",
+        cycleName: "2026 Mid-year Review",
+        reviewBadging: "self",
+        reviewStatus: "assigned",
+        dueDate: "2026-06-30",
+        submittedAt: null,
+        personName: "Sam Rivera",
+        personHue: "40",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(33)
+    },
+    {
+        id: "pr-4",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "self",
+        reviewStatus: "submitted",
+        dueDate: "2026-03-15",
+        submittedAt: "2026-03-10T09:00:00.000Z",
+        personName: "Riley Nguyen",
+        personHue: "160",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "pr-5",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "peer",
+        reviewStatus: "submitted",
+        dueDate: "2026-03-20",
+        submittedAt: "2026-03-18T14:30:00.000Z",
+        personName: "Morgan Blake",
+        personHue: "300",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22)
+    },
+    {
+        id: "pr-6",
+        cycleName: "2026 Mid-year Review",
+        reviewBadging: "peer",
+        reviewStatus: "submitted",
+        dueDate: "2026-07-05",
+        submittedAt: "2026-06-28T11:15:00.000Z",
+        personName: "Casey Park",
+        personHue: "100",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(33)
+    },
+    {
+        id: "pr-7",
+        cycleName: "2026 End of year",
+        reviewBadging: "self",
+        reviewStatus: "submitted",
+        dueDate: "2026-11-30",
+        submittedAt: "2026-11-24T16:45:00.000Z",
+        personName: "Taylor Brooks",
+        personHue: "20",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "pr-8",
+        cycleName: "2026 End of year",
+        reviewBadging: "peer",
+        reviewStatus: "submitted",
+        dueDate: "2026-11-30",
+        submittedAt: "2026-11-29T08:20:00.000Z",
+        personName: "Jamie Patel",
+        personHue: "200",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22)
+    }
+];
+const renderDueLine = (row)=>{
+    switch(row.reviewStatus){
+        case "assigned":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: [
+                    "Due ",
+                    formatListDate(row.dueDate)
+                ]
+            });
+        case "submitted":
+            if (!row.submittedAt) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: "Submitted"
+            });
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: [
+                    "Submitted ",
+                    formatListDate(row.submittedAt.slice(0, 10))
+                ]
+            });
+        case "incomplete":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: [
+                    "Was due ",
+                    formatListDate(row.dueDate)
+                ]
+            });
+    }
+};
+const avatarSlot = {
+    id: "reviewee",
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+            hue: r.personHue,
+            id: r.id,
+            imageUrl: r.personImageUrl,
+            name: r.personName,
+            size: "small"
+        }),
+    size: 48
+};
+const primaryField = {
+    label: "Review",
+    value: (r)=>`${r.cycleName} ${r.personName}`,
+    globalFiltering: true,
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+            font: "regular-bold",
+            children: r.cycleName
+        })
+};
+const secondaryTypeField = {
+    render: (r)=>renderDueLine(r)
+};
+const statusFilterSlot = {
+    id: "reviewStatus",
+    label: "",
+    hiddenByDefault: true,
+    value: (r)=>r.reviewStatus,
+    globalFiltering: false,
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+            font: "small",
+            tone: "muted",
+            children: r.reviewStatus
+        }),
+    filter: {
+        label: "Status",
+        options: [
+            {
+                id: "assigned",
+                label: "Assigned",
+                predicate: (r)=>"assigned" === r.reviewStatus
+            },
+            {
+                id: "submitted",
+                label: "Submitted",
+                predicate: (r)=>"submitted" === r.reviewStatus
+            },
+            {
+                id: "incomplete",
+                label: "Incomplete",
+                predicate: (r)=>"incomplete" === r.reviewStatus
+            }
+        ]
+    }
+};
+const ReviewsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        data: reviewRows,
+        getRowId: (r)=>r.id,
+        fillContainerHeight: true,
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        enableSorting: enableSorting,
+        rowHeight: rowHeight,
+        leadingSlot: avatarSlot,
+        mainSlot: {
+            size: 380,
+            primary: primaryField,
+            secondary: secondaryTypeField
+        },
+        contentSlots: [
+            statusFilterSlot
+        ],
+        href: (r)=>`#review-${r.id}`
+    });
+const Reviews_rslib_entry_ = ReviewsList;
+export { Reviews_rslib_entry_ as default };

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

@@ -71,7 +71,10 @@ export type RichListTextField<Type> = ((row: Type) => ReactNode) | {
      */
     label?: string;
     /**
-     * If set, this line can appear in the Filters dialog like a table column.
+     * If set, this can appear in the Filters dialog.
+     * When it is the only filter and a single-select, the toolbar renders an inline
+     * `MenuButton` **without** a visible label (`filter.label` is still used in the Filters
+     * modal when open, and as `aria-label` on that menu trigger when non-empty).
      */
     filter?: Filter<Type>;
     /**
@@ -147,7 +150,9 @@ type RichListBaseSlotObject<Type> = {
      */
     compactSize?: RichListSlotSize;
     /**
-     * Column filter for the Filters dialog; needs a clear `label` in the UI.
+     * Column filter for the Filters dialog; use a clear `filter.label` where the modal applies.
+     * When this is the list’s only single-select filter, the toolbar renders a label-less
+     * inline `MenuButton` (same `filter.label` feeds `aria-label` when non-empty).
      */
     filter?: Filter<Type>;
     /**