@worknice/whiteboard 0.62.0 → 0.63.0

package/dist/presentation/CustomizableTable/CustomizableTable.js

@@ -468,7 +468,8 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
             return void 0 !== tableColumn && tableColumn.getIsVisible();
         }), [
         filterableColumns,
-        reactTable
+        reactTable,
+        columnVisibility
     ]);
     const hasFilterableColumns = filterableColumnsForModal.length > 0;
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{

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

@@ -1,5 +1,6 @@
 import { type CSSProperties, type ReactNode } from "react";
 import { type ZodTypeAny } from "zod";
+import { type RichListRowHeight } from "./helpers";
 import { type RichListBulkAction, type RichListContentSlot, type RichListMainSlot, type RichListRowAction, type RichListSlot } from "./types";
 type CommonProps<Type> = {
     data: Array<Type>;
@@ -48,9 +49,14 @@ type CommonProps<Type> = {
      */
     rowActions?: (row: Type) => Array<RichListRowAction<Type> | null>;
     /**
+     * Row height preset, pixel value, or breakpoint-specific values keyed to
+     * `compactBreakpoint` (same signal as `layoutVisibility: "whenWide"` / `"whenCompact"`).
+     *
+     * @example rowHeight="large"
+     * @example rowHeight={{ whenWide: "large", whenCompact: "medium" }}
      * @default `"medium"`
      */
-    rowHeight?: number | "small" | "medium" | "large";
+    rowHeight?: RichListRowHeight;
     /**
      * File name for CSV export when columns with `csvExport: true` are included.
      * @default (omitted) no CSV download from the list toolbar.
@@ -149,4 +155,4 @@ type NavigationProps<Type> = {
 export type RichListProps<Type> = CommonProps<Type> & NavigationProps<Type>;
 declare const RichList: <Type>({ data, getRowId, leadingSlot, mainSlot, contentSlots, contentAlignment, trailingSlot, href, onClick, rowActions, bulkActions, secondaryBulkActions, rowHeight, csvFilename, fillContainerHeight, compactBreakpoint: compactBreakpointProp, emptyState, id, pathName, localStorageSchema, header, }: RichListProps<Type>) => import("react/jsx-runtime").JSX.Element;
 export default RichList;
-export type { RichListBulkAction, RichListColumnWidthMode, RichListContentSlot, RichListLayoutVisibility, RichListMainSlot, RichListRowAction, RichListSlot, RichListSlotSize, RichListTextField, } from "./types";
+export type { RichListBulkAction, RichListColumnWidthMode, RichListContentSlot, RichListGrouping, RichListLayoutVisibility, RichListMainSlot, RichListRowAction, RichListSlot, RichListSlotSize, RichListTextField, } from "./types";

package/dist/presentation/RichList/RichList.js

@@ -63,7 +63,6 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         contentSlots
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
-        if (0 === renderableContentSlots.length) return;
         const el = listScopeRef.current;
         if (!el) return;
         const update = ()=>{
@@ -75,7 +74,6 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         ro.observe(el);
         return ()=>ro.disconnect();
     }, [
-        renderableContentSlots,
         compactBreakpointPx
     ]);
     const enableRowSelection = bulkActions.length + secondaryBulkActions.length > 0;
@@ -146,6 +144,9 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
     const sortableEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && e.enableSorting && void 0 !== e.value), [
         allEntries
     ]);
+    const groupableEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && void 0 !== e.grouping), [
+        allEntries
+    ]);
     const hasSortableEntries = sortableEntries.length > 0;
     const sortableEntryIds = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>new Set(sortableEntries.map((entry)=>entry.id)), [
         sortableEntries
@@ -155,12 +156,14 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         const tableFilteringForEntry = (entryId)=>!(void 0 !== inlineSingleSelectExcludedFromTableColumnId && entryId === inlineSingleSelectExcludedFromTableColumnId);
         const columns = allEntries.filter((e)=>null !== e).map((entry)=>{
             const tableFiltering = !!entry.filter && tableFilteringForEntry(entry.id);
+            const grouping = entry.grouping;
             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: tableFiltering
+                enableColumnFilter: tableFiltering,
+                getGroupingValue: grouping ? (row)=>grouping.fn(row) : void 0
             });
             const value = entry.value;
             return columnHelper.accessor((row)=>value(row), {
@@ -171,6 +174,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                 enableSorting: entry.enableSorting,
                 sortingFn: entry.sortingFn ?? "auto",
                 sortUndefined: 1,
+                getGroupingValue: grouping ? (row)=>grouping.fn(row) : void 0,
                 filterFn: entry.filter && tableFiltering ? (row, _columnId, filterValue)=>{
                     const filter = entry.filter;
                     if (!filter) return true;
@@ -311,8 +315,11 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         data: tableData,
         columns: columnDefs,
         getRowId,
+        groupedColumnMode: false,
         getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getCoreRowModel)(),
         getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getFilteredRowModel)(),
+        getGroupedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getGroupedRowModel)(),
+        getExpandedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getExpandedRowModel)(),
         ...hasSortableEntries ? {
             getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getSortedRowModel)()
         } : {},
@@ -321,12 +328,15 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         initialState: {
             columnFilters: tableColumnFiltersInitialState,
             columnVisibility: initialColumnVisibility,
+            expanded: true,
             globalFilter: "",
+            grouping: parsedLocalStorage.grouping ?? [],
             sorting: initialSorting
         },
         defaultColumn: {
             enableColumnFilter: false,
             enableGlobalFilter: false,
+            enableGrouping: false,
             enableSorting: false
         }
     });
@@ -363,12 +373,14 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify({
             columnFilters: mergeInlineSinglePersistedColumnFilters(tableState.columnFilters, inlineSingleSelectExcludedFromTableColumnId, inlineSingleSelectOptionIdResolved),
             columnVisibility: tableState.columnVisibility,
-            sorting: persistedSorting
+            sorting: persistedSorting,
+            grouping: tableState.grouping
         }));
     }, [
         storageKey,
         tableState.columnFilters,
         tableState.columnVisibility,
+        tableState.grouping,
         persistedSorting,
         inlineSingleSelectExcludedFromTableColumnId,
         inlineSingleSelectOptionIdResolved
@@ -393,13 +405,17 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
     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 resolvedRowHeightValue = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.resolveRichListRowHeightValue)(rowHeight, isCompactContentSlots, "medium"), [
+        rowHeight,
+        isCompactContentSlots
+    ]);
+    const resolvedRowHeightPx = (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListRowHeightToPx)(resolvedRowHeightValue);
     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`
+        "--richlist-padding-inline": `${(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListInlinePaddingPx)(resolvedRowHeightValue)}px`
     });
     const showDisplayForColumnVisibility = !isCompactContentSlots && toggleableContentSlots.length > 0;
-    const showDisplayButton = hasSortableEntries || showDisplayForColumnVisibility;
+    const showDisplayButton = hasSortableEntries || groupableEntries.length > 0 || showDisplayForColumnVisibility;
     const defaultDisplayColumnVisibility = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(toggleableContentSlots.map((entry)=>[
                 entry.id,
                 !("hiddenByDefault" in entry && entry.hiddenByDefault)
@@ -412,6 +428,12 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
             })), [
         sortableEntries
     ]);
+    const groupableColumnsForModal = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>groupableEntries.map((entry)=>({
+                id: entry.id,
+                label: entry.grouping.label
+            })), [
+        groupableEntries
+    ]);
     const displayColumnsForModal = toggleableContentSlots.map((entry)=>({
             id: entry.id,
             label: entry.label ?? entry.id,
@@ -419,7 +441,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
             defaultVisible: !("hiddenByDefault" in entry && entry.hiddenByDefault)
         }));
     const displayColumnsForDisplayModal = isCompactContentSlots ? [] : displayColumnsForModal;
-    const displayActiveCount = (0, __WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__.getDisplayFormActiveExpanderCount)(hasSortableEntries, persistedSorting, displayColumnsForDisplayModal);
+    const displayActiveCount = (0, __WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__.getDisplayFormActiveExpanderCount)(hasSortableEntries, persistedSorting, displayColumnsForDisplayModal, groupableEntries.length > 0, tableState.grouping[0]);
     const hasToolbar = enableRowSelection || entriesWithGlobalFilter.length > 0 || entriesWithFilter.length > 0 || showDisplayButton || shouldShowCsvExport;
     const actionsByRowId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const map = new Map();
@@ -530,7 +552,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                                             tone: "muted",
                                             children: [
                                                 "Showing ",
-                                                table.getFilteredRowModel().flatRows.length,
+                                                table.getPreGroupedRowModel().flatRows.length,
                                                 " of",
                                                 " ",
                                                 table.getPreFilteredRowModel().flatRows.length
@@ -552,9 +574,12 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                         }),
                         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"], {
+                            children: rows.map((row)=>{
+                                const groupEntry = groupableEntries.find((entry)=>entry.id === row.groupingColumnId);
+                                return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichListRow_js_08189b13__["default"], {
                                     row: row,
                                     table: table,
+                                    groupEntry: groupEntry,
                                     enableRowSelection: enableRowSelection,
                                     href: href,
                                     onClick: onClick,
@@ -569,7 +594,8 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                                     contentSlotsJustifyContent: contentAlignment,
                                     actionsForRow: actionsByRowId.get(row.id) ?? [],
                                     lastSelectedRowRef: lastSelectedRowRef
-                                }, row.id))
+                                }, 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
@@ -588,6 +614,11 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                 sortableColumns: sortableColumnsForModal,
                 currentSorting: persistedSorting,
                 onApplySorting: (sorting)=>table.setSorting(sorting),
+                groupableColumns: groupableColumnsForModal,
+                currentGroupingId: tableState.grouping[0],
+                onApplyGrouping: (columnId)=>table.setGrouping(columnId ? [
+                        columnId
+                    ] : []),
                 displayColumns: displayColumnsForDisplayModal,
                 onApplyColumnVisibility: (vis)=>{
                     table.setColumnVisibility((prev)=>{
@@ -599,6 +630,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                     });
                 },
                 defaultSorting: [],
+                defaultGroupingId: void 0,
                 defaultColumnVisibility: defaultDisplayColumnVisibility
             })
         ]

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

@@ -1,17 +1,21 @@
 import type { SortingState } from "@tanstack/react-table";
 /**
  * How many `FilterExpander` sections in the display form are in the
- * highlighted (non-default) state: Sort, and/or Visible columns.
+ * highlighted (non-default) state: Sort, Group by, and/or Visible columns.
  */
 export declare function getDisplayFormActiveExpanderCount(hasSortForm: boolean, sorting: SortingState, displayColumnRows: Array<{
     id: string;
     visible: boolean;
     defaultVisible: boolean;
-}>): number;
+}>, hasGroupForm: boolean, groupingId: string | undefined): number;
 type SortableColumn = {
     id: string;
     label: string;
 };
+type GroupableColumn = {
+    id: string;
+    label: string;
+};
 type DisplayColumn = {
     id: string;
     label: string;
@@ -24,10 +28,14 @@ type Props = {
     sortableColumns: SortableColumn[];
     currentSorting: SortingState;
     onApplySorting: (sorting: SortingState) => void;
+    groupableColumns: GroupableColumn[];
+    currentGroupingId: string | undefined;
+    onApplyGrouping: (columnId: string | undefined) => void;
     displayColumns: DisplayColumn[];
     onApplyColumnVisibility: (visibility: Record<string, boolean>) => void;
     defaultSorting: SortingState;
+    defaultGroupingId: string | undefined;
     defaultColumnVisibility: Record<string, boolean>;
 };
-declare const RichListDisplayModal: ({ onClose, sortableColumns, currentSorting, onApplySorting, displayColumns, onApplyColumnVisibility, defaultSorting, defaultColumnVisibility, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const RichListDisplayModal: ({ onClose, sortableColumns, currentSorting, onApplySorting, groupableColumns, currentGroupingId, onApplyGrouping, displayColumns, onApplyColumnVisibility, defaultSorting, defaultGroupingId, defaultColumnVisibility, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default RichListDisplayModal;

package/dist/presentation/RichList/RichListDisplayModal.js

@@ -16,13 +16,15 @@ import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_91697624__ from "../Modal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__ from "../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_6ebc0134__ from "../VStack.js";
 const NO_SORT_ID = "__richListNoSort__";
-function getDisplayFormActiveExpanderCount(hasSortForm, sorting, displayColumnRows) {
+const NO_GROUP_ID = "__richListNoGroup__";
+function getDisplayFormActiveExpanderCount(hasSortForm, sorting, displayColumnRows, hasGroupForm, groupingId) {
     let n = 0;
     if (hasSortForm && void 0 !== sorting[0]) n += 1;
+    if (hasGroupForm && void 0 !== groupingId) n += 1;
     if (displayColumnRows.some((c)=>c.visible !== c.defaultVisible)) n += 1;
     return n;
 }
-const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onApplySorting, displayColumns, onApplyColumnVisibility, defaultSorting, defaultColumnVisibility })=>{
+const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onApplySorting, groupableColumns, currentGroupingId, onApplyGrouping, displayColumns, onApplyColumnVisibility, defaultSorting, defaultGroupingId, defaultColumnVisibility })=>{
     const sortOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>[
             {
                 id: NO_SORT_ID,
@@ -32,9 +34,19 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
         ], [
         sortableColumns
     ]);
+    const groupOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>[
+            {
+                id: NO_GROUP_ID,
+                label: "No grouping"
+            },
+            ...groupableColumns
+        ], [
+        groupableColumns
+    ]);
     const firstSort = currentSorting[0];
     const initialSortColumnId = firstSort?.id ?? NO_SORT_ID;
     const initialSortDesc = firstSort?.desc ?? false;
+    const initialGroupColumnId = currentGroupingId ?? NO_GROUP_ID;
     const initialVisibility = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(displayColumns.map((c)=>[
                 c.id,
                 c.visible
@@ -45,6 +57,7 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
         initialValues: {
             sortColumnId: initialSortColumnId,
             sortDesc: initialSortDesc,
+            groupColumnId: initialGroupColumnId,
             visibility: initialVisibility
         },
         onSubmit: async (values)=>{
@@ -55,6 +68,7 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
                 }
             ] : [];
             onApplySorting(nextSort);
+            onApplyGrouping(values.groupColumnId && values.groupColumnId !== NO_GROUP_ID ? values.groupColumnId : void 0);
             onApplyColumnVisibility(values.visibility);
         }
     });
@@ -62,19 +76,27 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
         data.sortColumnId,
         sortOptions
     ]);
+    const groupColumnOption = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>groupOptions.find((o)=>o.id === data.groupColumnId) ?? groupOptions[0], [
+        data.groupColumnId,
+        groupOptions
+    ]);
     const isSortActive = data.sortColumnId !== NO_SORT_ID;
+    const isGroupActive = data.groupColumnId !== NO_GROUP_ID;
     const hasSortSection = sortableColumns.length > 0;
+    const hasGroupSection = groupableColumns.length > 0;
     const hasDisplaySection = displayColumns.length > 0;
     const handleReset = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
         setData(()=>({
                 sortColumnId: defaultSorting[0]?.id ?? NO_SORT_ID,
                 sortDesc: defaultSorting[0]?.desc ?? false,
+                groupColumnId: defaultGroupingId ?? NO_GROUP_ID,
                 visibility: {
                     ...defaultColumnVisibility
                 }
             }));
     }, [
         defaultColumnVisibility,
+        defaultGroupingId,
         defaultSorting,
         setData
     ]);
@@ -93,7 +115,7 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
                         type: "secondary",
                         onClick: handleReset,
                         icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Restore_js_f78ce3bd__["default"], {}),
-                        disabled: !hasSortSection && !hasDisplaySection,
+                        disabled: !hasSortSection && !hasGroupSection && !hasDisplaySection,
                         children: "Reset"
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_786d786e__["default"], {
@@ -118,8 +140,8 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
                 children: [
                     hasSortSection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__.FilterExpander, {
                         label: "Sort by",
-                        highlight: isSortActive,
-                        defaultOpen: !hasDisplaySection || isSortActive,
+                        highlight: isSortActive || hasGroupSection && isGroupActive,
+                        defaultOpen: !hasDisplaySection || isSortActive || hasGroupSection && isGroupActive,
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_6ebc0134__["default"], {
                             spacing: "n2",
                             justifyItems: "start",
@@ -158,10 +180,41 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
                                             }));
                                     },
                                     disabled: !isSortActive
-                                })
+                                }),
+                                hasGroupSection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_a37c3c04__["default"], {
+                                    id: "richListDisplayGroupColumn",
+                                    options: groupOptions,
+                                    optionToId: (o)=>o.id,
+                                    optionToLabel: (o)=>o.label,
+                                    value: groupColumnOption,
+                                    onChange: (option)=>{
+                                        setData((prev)=>({
+                                                ...prev,
+                                                groupColumnId: option.id
+                                            }));
+                                    }
+                                }) : null
                             ]
                         })
                     }) : null,
+                    !hasSortSection && hasGroupSection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__.FilterExpander, {
+                        label: "Group by",
+                        highlight: isGroupActive,
+                        defaultOpen: !hasDisplaySection || isGroupActive,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_a37c3c04__["default"], {
+                            id: "richListDisplayGroupColumn",
+                            options: groupOptions,
+                            optionToId: (o)=>o.id,
+                            optionToLabel: (o)=>o.label,
+                            value: groupColumnOption,
+                            onChange: (option)=>{
+                                setData((prev)=>({
+                                        ...prev,
+                                        groupColumnId: option.id
+                                    }));
+                            }
+                        })
+                    }) : null,
                     hasDisplaySection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__.FilterExpander, {
                         label: "Visible columns",
                         highlight: displayColumns.some((c)=>data.visibility[c.id] !== c.defaultVisible),

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

@@ -1,10 +1,15 @@
 import { type Row, type Table } from "@tanstack/react-table";
 import { type CSSProperties, type MutableRefObject } from "react";
-import { type NormalizedSlot, type NormalizedTextField } from "./types";
+import { type NormalizedSlot, type NormalizedTextField, type RichListGrouping } from "./types";
 import { type RichListRowAction } from "./types";
+type GroupEntry<Type> = {
+    id: string;
+    grouping: RichListGrouping<Type>;
+};
 type Props<Type> = {
     row: Row<Type>;
     table: Table<Type>;
+    groupEntry: GroupEntry<Type> | undefined;
     /** When the list has bulk actions, rows can be selected via the checkbox lane. */
     enableRowSelection: boolean;
     href: ((row: Type) => string) | undefined;
@@ -34,5 +39,5 @@ type Props<Type> = {
     actionsForRow: Array<RichListRowAction<Type>>;
     lastSelectedRowRef: MutableRefObject<Row<Type> | undefined>;
 };
-declare const RichListRow: <Type>({ row, table, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
+declare const RichListRow: <Type>({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
 export default RichListRow;

package/dist/presentation/RichList/RichListRow.js

@@ -20,7 +20,7 @@ function contentSlotAlignClass(align) {
             return __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].contentSlotStart;
     }
 }
-const RichListRow = ({ row, table, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef })=>{
+const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_c6ca8eb1__["default"])();
     const rowOriginal = row.original;
     const hrefValue = href ? href(rowOriginal) : void 0;
@@ -139,6 +139,16 @@ const RichListRow = ({ row, table, enableRowSelection, href, onClick, normalized
         },
         onChange: (value)=>row.toggleSelected(value)
     });
+    if (row.getIsGrouped() && groupEntry) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
+        className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].listItem,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].row, __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowGrouped),
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].groupHeader,
+                children: groupEntry.grouping.header(rowOriginal)
+            })
+        })
+    });
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
         className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].listItem,
         "data-selected": row.getIsSelected() ? "" : void 0,

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

@@ -2,6 +2,8 @@ import "./RichListRow_module.css";
 const RichListRow_module_rslib_entry_ = {
     listItem: "listItem-HfVE7t",
     row: "row-qNQike",
+    groupHeader: "groupHeader-XItOuo",
+    rowGrouped: "rowGrouped-M7DdXT",
     clickableZone: "clickableZone-KG4Ygg",
     clickableZoneActive: "clickableZoneActive-OtaDew",
     leadingLane: "leadingLane-oEnTWq",

package/dist/presentation/RichList/RichListRow_module.css

@@ -7,6 +7,14 @@
   border-top: solid var(--size-n5) var(--color-grey-t09);
 }
 
+.groupHeader-XItOuo {
+  flex: auto;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
 .row-qNQike {
   --row-bg: transparent;
   --row-hover-bg: var(--color-grey-t10);
@@ -40,6 +48,20 @@
   .listItem-HfVE7t[data-selected] > .row-qNQike:hover {
     background-color: var(--color-purple-t09);
   }
+
+  .row-qNQike.rowGrouped-M7DdXT:hover {
+    background-color: var(--color-grey-t10);
+  }
+}
+
+.row-qNQike.rowGrouped-M7DdXT {
+  --row-bg: var(--color-grey-t10);
+  --row-hover-bg: var(--color-grey-t10);
+  background-color: var(--color-grey-t10);
+  height: auto;
+  min-height: 0;
+  padding: var(--size-00);
+  overflow: visible;
 }
 
 .clickableZone-KG4Ygg {
@@ -58,7 +80,7 @@
   cursor: pointer;
 }
 
-.clickableZoneActive-OtaDew :is(.leadingLane-oEnTWq, .rowMain-ekCI8x, .trailingLane-J4qLz8) a[href], .clickableZoneActive-OtaDew :is(.leadingLane-oEnTWq, .rowMain-ekCI8x, .trailingLane-J4qLz8) a[role="link"], .clickableZoneActive-OtaDew .contentSlot-xgewfJ a[href], .clickableZoneActive-OtaDew .contentSlot-xgewfJ a[role="link"] {
+.clickableZoneActive-OtaDew :is(.leadingLane-oEnTWq, .rowMain-ekCI8x, .trailingLane-J4qLz8) :is(a[href], a[role="link"], button), .clickableZoneActive-OtaDew .contentSlot-xgewfJ :is(a[href], a[role="link"], button) {
   pointer-events: auto;
   z-index: 2;
   position: relative;
@@ -239,10 +261,6 @@
   display: flex;
 }
 
-.primaryLine-Sedy1b {
-  font: var(--font-regular-bold);
-}
-
 .secondaryLine-iySU25 {
   color: var(--color-grey-s03);
 }

package/dist/presentation/RichList/RichList_module.css

@@ -1,4 +1,5 @@
 .root-S5afi_ {
+  isolation: isolate;
   background: var(--color-white);
   border-radius: var(--size-n2);
   border: solid var(--size-n5) var(--color-grey-t09);

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

@@ -28,13 +28,29 @@ export declare const formatSlotSize: (size: RichListSlotSize) => string;
  *   `data-richlist-compact` attribute that JS sets on `.richListQueryScope` from
  *   `isCompactContentSlots` (driven by this prop).
  * - The Display dialog's column-visibility section is hidden (no room).
+ * - `rowHeight` object form picks `whenCompact` vs `whenWide` (see `RichListRowHeight`).
  */
 export declare const RICH_LIST_CONTENT_COMPACT_MAX_PX = 1024;
 export declare const ROW_HEIGHT_PRESETS: {
     readonly small: 56;
     readonly medium: 72;
-    readonly large: 104;
+    readonly large: 96;
 };
+export type RichListRowHeightValue = number | keyof typeof ROW_HEIGHT_PRESETS;
+type AtLeastOne<T, K extends keyof T = keyof T> = K extends keyof T ? Pick<T, K> & Partial<Omit<T, K>> : never;
+/** Breakpoint-specific row height; at least one of `whenWide` / `whenCompact` required. */
+export type RichListRowHeightByBreakpoint = AtLeastOne<{
+    whenWide: RichListRowHeightValue;
+    whenCompact: RichListRowHeightValue;
+}>;
+export type RichListRowHeight = RichListRowHeightValue | RichListRowHeightByBreakpoint;
+export declare const isRichListRowHeightByBreakpoint: (rowHeight: RichListRowHeight) => rowHeight is RichListRowHeightByBreakpoint;
+export declare const richListRowHeightToPx: (value: RichListRowHeightValue) => number;
+/**
+ * Picks the scalar height for the current compact state.
+ * Missing side falls back to `defaultValue` (RichList default: `"medium"`).
+ */
+export declare const resolveRichListRowHeightValue: (rowHeight: RichListRowHeight | undefined, isCompact: boolean, defaultValue?: RichListRowHeightValue) => RichListRowHeightValue;
 /**
  * Horizontal padding (px) applied across the whole list (toolbar, rows, empty state)
  * at each row height preset. Forwarded as the `--richlist-padding-inline` custom
@@ -44,7 +60,7 @@ export declare const ROW_HEIGHT_PRESETS: {
 export declare const RICH_LIST_INLINE_PAD_PRESET_PX: {
     [K in keyof typeof ROW_HEIGHT_PRESETS]: number;
 };
-export declare const richListInlinePaddingPx: (rowHeight: number | keyof typeof ROW_HEIGHT_PRESETS) => number;
+export declare const richListInlinePaddingPx: (rowHeight: RichListRowHeightValue) => number;
 export declare const SELECT_COLUMN_ID = "_richListSelect";
 export declare const normalizeTextField: <Type>(field: RichListTextField<Type>, position: "primary" | "secondary") => NormalizedTextField<Type>;
 /**

package/dist/presentation/RichList/helpers.js

@@ -13,7 +13,15 @@ const RICH_LIST_CONTENT_COMPACT_MAX_PX = 1024;
 const ROW_HEIGHT_PRESETS = {
     small: 56,
     medium: 72,
-    large: 104
+    large: 96
+};
+const isRichListRowHeightByBreakpoint = (rowHeight)=>"object" == typeof rowHeight && null !== rowHeight;
+const richListRowHeightToPx = (value)=>"number" == typeof value ? value : ROW_HEIGHT_PRESETS[value];
+const resolveRichListRowHeightValue = (rowHeight, isCompact, defaultValue = "medium")=>{
+    const input = rowHeight ?? defaultValue;
+    if (!isRichListRowHeightByBreakpoint(input)) return input;
+    const selected = isCompact ? input.whenCompact : input.whenWide;
+    return selected ?? defaultValue;
 };
 const RICH_LIST_INLINE_PAD_PRESET_PX = {
     small: 12,
@@ -51,7 +59,8 @@ const normalizeTextField = (field, position)=>{
         csvExport: field.csvExport ?? false,
         enableSorting: field.enableSorting ?? false,
         sortingFn: field.sortingFn,
-        layoutVisibility: field.layoutVisibility ?? "always"
+        layoutVisibility: field.layoutVisibility ?? "always",
+        grouping: field.grouping
     };
 };
 const normalizeSlot = (slot, position, positionIndex)=>{
@@ -90,7 +99,8 @@ const normalizeSlot = (slot, position, positionIndex)=>{
         hiddenByDefault: slot.hiddenByDefault ?? false,
         csvExport: slot.csvExport ?? false,
         enableSorting: slot.enableSorting ?? false,
-        sortingFn: slot.sortingFn
+        sortingFn: slot.sortingFn,
+        grouping: slot.grouping
     };
 };
 const isVisibleAtBreakpoint = (layoutVisibility, isCompactContentSlots)=>{
@@ -148,4 +158,4 @@ const richListRowActionToMenuOption = (action, row)=>{
         render: action.render
     };
 };
-export { RICH_LIST_CONTENT_COMPACT_MAX_PX, RICH_LIST_INLINE_PAD_PRESET_PX, ROW_HEIGHT_PRESETS, SELECT_COLUMN_ID, formatSlotSize, handleDownloadCsv, isColumnWithVisibilityState, isToggleableContentColumn, isVisibleAtBreakpoint, normalizeSlot, normalizeTextField, richListInlinePaddingPx, richListRowActionToMenuOption };
+export { RICH_LIST_CONTENT_COMPACT_MAX_PX, RICH_LIST_INLINE_PAD_PRESET_PX, ROW_HEIGHT_PRESETS, SELECT_COLUMN_ID, formatSlotSize, handleDownloadCsv, isColumnWithVisibilityState, isRichListRowHeightByBreakpoint, isToggleableContentColumn, isVisibleAtBreakpoint, normalizeSlot, normalizeTextField, resolveRichListRowHeightValue, richListInlinePaddingPx, richListRowActionToMenuOption, richListRowHeightToPx };

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

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "react";
+import type { RichListRowHeight } from "../helpers";
 export type CommonProps = {
     compactBreakpoint?: number;
     contentAlignment?: NonNullable<CSSProperties["justifyContent"]>;
-    rowHeight?: number | "large" | "medium" | "small";
+    rowHeight?: RichListRowHeight;
 };

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

@@ -2,6 +2,12 @@ import type { SortingColumnDef } from "@tanstack/react-table";
 import { type ReactNode } from "react";
 import { type Filter } from "../../controls/FilterModal";
 import { type PrimitiveValue } from "../../utils/tables";
+/** Row grouping config. */
+export type RichListGrouping<Type> = {
+    fn: (row: Type) => string;
+    header: (row: Type) => ReactNode;
+    label: string;
+};
 /**
  * Column width. Use a number (pixels) or a percentage string such as `"30%"` if the
  * track should grow or shrink with the list width.
@@ -106,6 +112,8 @@ export type RichListTextField<Type> = ((row: Type) => ReactNode) | {
      * @default `"always"`
      */
     layoutVisibility?: RichListLayoutVisibility;
+    /** When set, this field can group rows in the list toolbar. */
+    grouping?: RichListGrouping<Type>;
 };
 /**
  * Primary and optional secondary lines stacked in the row’s main column (same horizontal
@@ -196,6 +204,8 @@ type RichListBaseSlotObject<Type> = {
      * @default `"always"`
      */
     layoutVisibility?: RichListLayoutVisibility;
+    /** When set, this column can group rows in the list toolbar. */
+    grouping?: RichListGrouping<Type>;
 };
 /**
  * A **leading** or **trailing** column. The row order is: leading, main slot (primary /
@@ -277,6 +287,7 @@ export type NormalizedTextField<Type> = {
     sortingFn?: SortingColumnDef<Type>["sortingFn"];
     /** @default `"always"` */
     layoutVisibility: RichListLayoutVisibility;
+    grouping?: RichListGrouping<Type>;
 };
 /**
  * Internal shape after `normalizeSlot` in `helpers.ts`. See `RichListSlot` and
@@ -318,6 +329,7 @@ export type NormalizedSlot<Type> = {
     enableSorting: boolean;
     /** @default `"auto"` */
     sortingFn?: SortingColumnDef<Type>["sortingFn"];
+    grouping?: RichListGrouping<Type>;
 };
 /**
  * One action for a row: an icon in the action strip and/or an item in the “more” menu.

package/dist/presentation/SheetHeader_module.css

@@ -5,3 +5,13 @@
   display: grid;
 }
 
+.container-yc42of > header > :first-child {
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .container-yc42of > header {
+    grid-template-columns: 1fr auto;
+  }
+}
+

package/dist/presentation/TagSet.d.ts

@@ -1,6 +1,12 @@
 import { type ReactNode } from "react";
 type Props = {
     direction?: "row" | "column";
+    /**
+     * When set, at most this many tags are rendered, followed by a "+N" count
+     * of the remaining tags. The set becomes a button that opens a modal
+     * listing every tag.
+     */
+    maxVisibleTags?: number;
     tags: Array<{
         key: string;
         value: ReactNode;
@@ -11,5 +17,5 @@ type Props = {
  * nothing will be rendered.  If there's not enough space, the tags will wrap
  * (using flexbox) or be truncated.
  */
-declare const TagSet: ({ tags, direction }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const TagSet: ({ tags, direction, maxVisibleTags }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default TagSet;

package/dist/presentation/TagSet.js

@@ -1,18 +1,81 @@
+"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_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__ from "../icons/components/Close.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__ from "./TagSet.module.js";
-const TagSet = ({ tags, direction = "row" })=>{
+const TagSet = ({ tags, direction = "row", maxVisibleTags })=>{
+    const [isModalOpen, setIsModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const nonNullTags = tags.filter((badge)=>null !== badge && void 0 !== badge.value && null !== badge.value);
-    return nonNullTags.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-            __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
-            "row" === direction ? __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow : __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionColumn
-        ]),
+    if (0 === nonNullTags.length) return null;
+    const containerClassName = (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+        __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
+        "row" === direction ? __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow : __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionColumn
+    ]);
+    const hiddenTagCount = void 0 === maxVisibleTags ? 0 : Math.max(nonNullTags.length - maxVisibleTags, 0);
+    if (0 === hiddenTagCount) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: containerClassName,
         children: nonNullTags.map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
                 children: value
             }, key))
-    }) : null;
+    });
+    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__.jsxs)("button", {
+                "aria-label": `Show all ${nonNullTags.length} tags`,
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(containerClassName, __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].overflowTrigger),
+                onClick: (event)=>{
+                    event.stopPropagation();
+                    setIsModalOpen(true);
+                },
+                title: `Show all ${nonNullTags.length} tags`,
+                type: "button",
+                children: [
+                    nonNullTags.slice(0, maxVisibleTags).map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+                            children: value
+                        }, key)),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                        font: "small-semibold",
+                        children: [
+                            "+",
+                            hiddenTagCount
+                        ]
+                    })
+                ]
+            }),
+            isModalOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
+                onClose: ()=>setIsModalOpen(false),
+                size: "small",
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+                    header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                        font: "h6",
+                        children: "Tags"
+                    }),
+                    actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__["default"], {}),
+                        onClick: ()=>setIsModalOpen(false),
+                        type: "ghost"
+                    }),
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
+                                __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow
+                            ]),
+                            children: nonNullTags.map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+                                    children: value
+                                }, key))
+                        })
+                    })
+                })
+            }) : null
+        ]
+    });
 };
 const TagSet_rslib_entry_ = TagSet;
 export { TagSet_rslib_entry_ as default };

package/dist/presentation/TagSet.module.js

@@ -2,6 +2,7 @@ import "./TagSet_module.css";
 const TagSet_module_rslib_entry_ = {
     container: "container-L0HAwG",
     directionRow: "directionRow-gPULoA",
-    directionColumn: "directionColumn-YfoXcq"
+    directionColumn: "directionColumn-YfoXcq",
+    overflowTrigger: "overflowTrigger-GgLKSJ"
 };
 export { TagSet_module_rslib_entry_ as default };

package/dist/presentation/TagSet_module.css

@@ -13,3 +13,13 @@
   flex-direction: column;
 }
 
+.overflowTrigger-GgLKSJ {
+  cursor: pointer;
+  align-items: center;
+}
+
+.overflowTrigger-GgLKSJ:focus-visible {
+  border-radius: var(--size-n3);
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.45.0"
+    "@worknice/utils": "^0.46.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",