@worknice/whiteboard 0.61.0 → 0.63.0

package/dist/presentation/RichList/RichListRow.js

@@ -20,13 +20,12 @@ 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, maxAlwaysVisibleActions, anyRowHasOverflowAction, 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;
     const alwaysVisibleActions = actionsForRow.filter((action)=>action.alwaysVisible);
     const overflowActions = actionsForRow.filter((action)=>!action.alwaysVisible);
-    const alwaysVisiblePlaceholderCount = Math.max(0, maxAlwaysVisibleActions - alwaysVisibleActions.length);
     const isSlotVisible = (slot)=>(table.getColumn(slot.id)?.getIsVisible() ?? true) && (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(slot.layoutVisibility, isCompactContentSlots);
     const visibleContentSlots = normalizedContentSlots.filter(isSlotVisible);
     const visibleLeadingSlots = normalizedLeadingSlots.filter(isSlotVisible);
@@ -140,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,
@@ -230,67 +239,46 @@ const RichListRow = ({ row, table, enableRowSelection, href, onClick, normalized
                             }, slot.id))
                     ]
                 }),
-                maxAlwaysVisibleActions > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                alwaysVisibleActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].actionsLane,
                     onClick: (event)=>event.stopPropagation(),
-                    children: [
-                        alwaysVisibleActions.map((action)=>{
-                            if ("link" === action.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_4cb13ec4__["default"], {
-                                id: action.id,
-                                type: "ghost",
-                                size: "small",
-                                icon: action.icon,
-                                tooltip: action.label,
-                                href: action.href(rowOriginal),
-                                external: action.external
-                            }, action.id);
-                            if ("onClick" === action.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
-                                id: action.id,
-                                type: "ghost",
-                                size: "small",
-                                icon: action.icon,
-                                tooltip: action.label,
-                                onClick: ()=>action.onClick(rowOriginal)
-                            }, action.id);
-                            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
-                                id: action.id,
-                                type: "ghost",
-                                size: "small",
-                                icon: action.icon,
-                                tooltip: action.label,
-                                render: (onClose)=>action.render(onClose)
-                            }, action.id);
-                        }),
-                        Array.from({
-                            length: alwaysVisiblePlaceholderCount
-                        }).map((_, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                "aria-hidden": true,
-                                className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].actionPlaceholder,
-                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
-                                    type: "ghost",
-                                    size: "small",
-                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__["default"], {})
-                                })
-                            }, `placeholder-${index}`))
-                    ]
+                    children: alwaysVisibleActions.map((action)=>{
+                        if ("link" === action.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_4cb13ec4__["default"], {
+                            id: action.id,
+                            type: "ghost",
+                            size: "normal",
+                            icon: action.icon,
+                            tooltip: action.label,
+                            href: action.href(rowOriginal),
+                            external: action.external
+                        }, action.id);
+                        if ("onClick" === action.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                            id: action.id,
+                            type: "ghost",
+                            size: "normal",
+                            icon: action.icon,
+                            tooltip: action.label,
+                            onClick: ()=>action.onClick(rowOriginal)
+                        }, action.id);
+                        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
+                            id: action.id,
+                            type: "ghost",
+                            size: "normal",
+                            icon: action.icon,
+                            tooltip: action.label,
+                            render: (onClose)=>action.render(onClose)
+                        }, action.id);
+                    })
                 }) : null,
-                anyRowHasOverflowAction ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                overflowActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].overflowLane,
                     onClick: (event)=>event.stopPropagation(),
-                    children: overflowActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__["default"], {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__["default"], {
                         type: "ghost",
-                        size: "small",
+                        size: "normal",
                         ariaLabel: "More actions",
                         options: overflowActions.map((action)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListRowActionToMenuOption)(action, rowOriginal)),
                         icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__["default"], {})
-                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        "aria-hidden": true,
-                        className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].actionPlaceholder,
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
-                            type: "ghost",
-                            size: "small",
-                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__["default"], {})
-                        })
                     })
                 }) : null
             ]

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",
@@ -27,7 +29,6 @@ const RichListRow_module_rslib_entry_ = {
     primaryText: "primaryText-vd9ry0",
     secondaryText: "secondaryText-DmPdJ2",
     mainSlotAdornment: "mainSlotAdornment-IQslEw",
-    actionPlaceholder: "actionPlaceholder-yugzJR",
     rowListAtCompactBreakpoint: "rowListAtCompactBreakpoint-g6EL_A",
     textFieldAdornment: "textFieldAdornment-LP2CuE"
 };

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);
 }
@@ -301,12 +319,6 @@
   display: flex;
 }
 
-.actionPlaceholder-yugzJR {
-  pointer-events: none;
-  visibility: hidden;
-  display: inline-flex;
-}
-
 .rowListAtCompactBreakpoint-g6EL_A .textFieldAdornment-LP2CuE {
   display: none;
 }

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/EmployeePeople.d.ts

@@ -5,6 +5,8 @@ export type EmployeePeopleRow = {
     imageUrl: string | null;
     /** “Role at location” (single line, may truncate in the list). */
     line: string;
+    workEmail: string | null;
+    workPhone: string | null;
 };
 declare const EmployeePeopleList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default EmployeePeopleList;

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

@@ -11,91 +11,121 @@ const employees = [
         id: "e1",
         name: "Sarah Jenkins",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(19),
-        line: "VP of Engineering at New York"
+        line: "VP of Engineering at New York",
+        workEmail: "sarah.jenkins@example.com",
+        workPhone: "+1 212 555 0101"
     },
     {
         id: "e2",
         name: "David Miller",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(20),
-        line: "Product Manager at London"
+        line: "Product Manager at London",
+        workEmail: "david.miller@example.com",
+        workPhone: null
     },
     {
         id: "e3",
         name: "Emily Chen",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(21),
-        line: "Frontend Developer at Remote"
+        line: "Frontend Developer at Remote",
+        workEmail: null,
+        workPhone: "+1 415 555 0103"
     },
     {
         id: "e4",
         name: "James Washington",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(22),
-        line: "HR Specialist at Chicago"
+        line: "HR Specialist at Chicago",
+        workEmail: null,
+        workPhone: null
     },
     {
         id: "e5",
         name: "Priya Shah",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(23),
-        line: "Director of Finance at Sydney"
+        line: "Director of Finance at Sydney",
+        workEmail: "priya.shah@example.com",
+        workPhone: "+61 2 5555 0105"
     },
     {
         id: "e6",
         name: "Marcus Webb",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(24),
-        line: "Warehouse Lead at Melbourne"
+        line: "Warehouse Lead at Melbourne",
+        workEmail: "marcus.webb@example.com",
+        workPhone: null
     },
     {
         id: "e7",
         name: "Nina Okonkwo",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(25),
-        line: "Legal Counsel at Head Office"
+        line: "Legal Counsel at Head Office",
+        workEmail: null,
+        workPhone: "+44 20 7946 0107"
     },
     {
         id: "e8",
         name: "Oliver Grant",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(26),
-        line: "Sales Manager at Remote"
+        line: "Sales Manager at Remote",
+        workEmail: null,
+        workPhone: null
     },
     {
         id: "e9",
         name: "Rachel Kim",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(27),
-        line: "UX Researcher at San Francisco"
+        line: "UX Researcher at San Francisco",
+        workEmail: "rachel.kim@example.com",
+        workPhone: "+1 415 555 0109"
     },
     {
         id: "e10",
         name: "Samuel Ortiz",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(28),
-        line: "DevOps Engineer at Austin"
+        line: "DevOps Engineer at Austin",
+        workEmail: "samuel.ortiz@example.com",
+        workPhone: null
     },
     {
         id: "e11",
         name: "Tessa Bloom",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(29),
-        line: "Chief of Staff at Seattle"
+        line: "Chief of Staff at Seattle",
+        workEmail: null,
+        workPhone: "+1 206 555 0111"
     },
     {
         id: "e12",
         name: "Victor Ng",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(30),
-        line: "Data Analyst at Singapore"
+        line: "Data Analyst at Singapore",
+        workEmail: null,
+        workPhone: null
     },
     {
         id: "e13",
         name: "Yuki Tanaka",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(31),
-        line: "Account Executive at Tokyo"
+        line: "Account Executive at Tokyo",
+        workEmail: "yuki.tanaka@example.com",
+        workPhone: "+81 3 5555 0113"
     },
     {
         id: "e14",
         name: "Zara Ali",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(32),
-        line: "Customer Success at Dubai"
+        line: "Customer Success at Dubai",
+        workEmail: "zara.ali@example.com",
+        workPhone: null
     },
     {
         id: "e15",
         name: "Ben Carter",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(33),
-        line: "Facilities Coordinator at Manchester"
+        line: "Facilities Coordinator at Manchester",
+        workEmail: null,
+        workPhone: "+44 161 555 0115"
     }
 ];
 const rowActions = ()=>[
@@ -105,7 +135,8 @@ const rowActions = ()=>[
             alwaysVisible: true,
             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_c0058dca__["default"], {}),
             type: "link",
-            href: ()=>"#"
+            predicate: (row)=>Boolean(row.workEmail),
+            href: (row)=>`mailto:${row.workEmail}`
         },
         {
             id: "phone",
@@ -113,7 +144,8 @@ const rowActions = ()=>[
             alwaysVisible: true,
             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Phone_js_aed4f2f1__["default"], {}),
             type: "link",
-            href: ()=>"#"
+            predicate: (row)=>Boolean(row.workPhone),
+            href: (row)=>`tel:${row.workPhone}`
         }
     ];
 const leadingSlot = {

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;