@worknice/whiteboard 0.60.1 → 0.62.0

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

@@ -8,6 +8,7 @@ type Props<Type> = {
     /** When the list has bulk actions, rows can be selected via the checkbox lane. */
     enableRowSelection: boolean;
     href: ((row: Type) => string) | undefined;
+    onClick: ((row: Type) => void) | undefined;
     normalizedLeadingSlots: Array<NormalizedSlot<Type>>;
     normalizedPrimary: NormalizedTextField<Type>;
     normalizedSecondary: NormalizedTextField<Type> | null;
@@ -31,9 +32,7 @@ type Props<Type> = {
     /** Flex `justify-content` for `.contentSlots`. */
     contentSlotsJustifyContent: NonNullable<CSSProperties["justifyContent"]>;
     actionsForRow: Array<RichListRowAction<Type>>;
-    maxAlwaysVisibleActions: number;
-    anyRowHasOverflowAction: boolean;
     lastSelectedRowRef: MutableRefObject<Row<Type> | undefined>;
 };
-declare const RichListRow: <Type>({ row, table, enableRowSelection, href, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, maxAlwaysVisibleActions, anyRowHasOverflowAction, lastSelectedRowRef, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
+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;
 export default RichListRow;

package/dist/presentation/RichList/RichListRow.js

@@ -2,11 +2,12 @@
 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__controls_Button_js_2f50b64a__ from "../../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_4cb13ec4__ from "../../controls/ButtonLink.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__ from "../../controls/Disclosure.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__ from "../../controls/MenuButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__ from "../../icons/components/Overflow.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__ from "../../inputs/CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_c6ca8eb1__ from "../../utils/useNextContext.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__ from "./helpers.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__ from "./RichListRow.module.js";
 function contentSlotAlignClass(align) {
@@ -19,13 +20,12 @@ function contentSlotAlignClass(align) {
             return __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].contentSlotStart;
     }
 }
-const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, maxAlwaysVisibleActions, anyRowHasOverflowAction, lastSelectedRowRef })=>{
+const RichListRow = ({ row, table, 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);
@@ -33,8 +33,9 @@ const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSl
     const showPrimary = (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(normalizedPrimary.layoutVisibility, isCompactContentSlots);
     const showSecondary = null !== normalizedSecondary && (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(normalizedSecondary.layoutVisibility, isCompactContentSlots);
     const isLinkable = Boolean(hrefValue);
-    const bulkClickToSelect = enableRowSelection && !isLinkable && row.getCanSelect();
-    const isClickable = isLinkable || bulkClickToSelect;
+    const hasRowClick = Boolean(onClick);
+    const bulkClickToSelect = enableRowSelection && !isLinkable && !hasRowClick && row.getCanSelect();
+    const isClickable = isLinkable || bulkClickToSelect || hasRowClick;
     const applyShiftSelection = ()=>{
         if (!lastSelectedRowRef.current) return false;
         const visibleRows = table.getRowModel().rows;
@@ -50,11 +51,21 @@ const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSl
         return true;
     };
     const handleClickableZoneClick = (event)=>{
+        if (onClick) {
+            onClick(rowOriginal);
+            return;
+        }
         if (!bulkClickToSelect) return;
         if (event.shiftKey && applyShiftSelection()) return;
         lastSelectedRowRef.current = row;
         row.toggleSelected(!row.getIsSelected());
     };
+    const handleClickableZoneKeyDown = (event)=>{
+        if (!onClick) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        event.preventDefault();
+        onClick(rowOriginal);
+    };
     const contentSlotStyle = (slot)=>{
         const isFixed = "fixed" === slot.columnWidthMode;
         if (void 0 === slot.size) {
@@ -144,7 +155,10 @@ const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSl
                 }) : null,
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                     className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].clickableZone, isClickable && __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].clickableZoneActive),
-                    onClick: bulkClickToSelect ? handleClickableZoneClick : void 0,
+                    onClick: hasRowClick || bulkClickToSelect ? handleClickableZoneClick : void 0,
+                    onKeyDown: hasRowClick ? handleClickableZoneKeyDown : void 0,
+                    role: hasRowClick ? "button" : void 0,
+                    tabIndex: hasRowClick ? 0 : void 0,
                     children: [
                         rowOverlay,
                         visibleLeadingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -215,72 +229,46 @@ const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSl
                             }, 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)=>"onClick" === action.type ? /*#__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) : /*#__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__Icon_js_e5f9af80__["default"], {
-                                        symbol: "Overflow"
-                                    })
-                                })
-                            }, `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)=>({
-                                id: action.id,
-                                label: action.label,
-                                icon: action.icon,
-                                ..."onClick" === action.type ? {
-                                    onClick: ()=>action.onClick(rowOriginal),
-                                    type: "onClick"
-                                } : {
-                                    render: (onClose)=>action.render(onClose),
-                                    type: "render"
-                                }
-                            })),
-                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                            symbol: "Overflow"
-                        })
-                    }) : /*#__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__Icon_js_e5f9af80__["default"], {
-                                symbol: "Overflow"
-                            })
-                        })
+                        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"], {})
                     })
                 }) : null
             ]

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

@@ -27,7 +27,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

@@ -301,12 +301,6 @@
   display: flex;
 }
 
-.actionPlaceholder-yugzJR {
-  pointer-events: none;
-  visibility: hidden;
-  display: inline-flex;
-}
-
 .rowListAtCompactBreakpoint-g6EL_A .textFieldAdornment-LP2CuE {
   display: none;
 }

package/dist/presentation/RichList/RichListToolbar.js

@@ -4,8 +4,12 @@ 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__icons_components_ChevronDown_js_18f696fa__ from "../../icons/components/ChevronDown.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_486a4eac__ from "../../icons/components/Download.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Filter_js_7e0f51a7__ from "../../icons/components/Filter.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Search_js_cc9f4c8e__ from "../../icons/components/Search.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Sliders_js_1483374f__ from "../../icons/components/Sliders.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, inlineSingleSelectFilter, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange })=>{
     const selectAllRevealed = selectAllAllSelected || selectAllSomeSelected;
@@ -45,9 +49,7 @@ const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasF
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                         className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarSearchIcon,
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                            symbol: "Search"
-                        })
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Search_js_cc9f4c8e__["default"], {})
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
                         type: "text",
@@ -63,9 +65,8 @@ const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasF
                 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"
+                        iconRight: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_ChevronDown_js_18f696fa__["default"], {
+                            size: "small"
                         }),
                         id: "richListToolbarInlineFilter",
                         options: inlineFilterMenuOptions,
@@ -78,9 +79,7 @@ const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasF
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                             type: "ghost",
                             onClick: onOpenFilterModal,
-                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                symbol: "Filter"
-                            }),
+                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Filter_js_7e0f51a7__["default"], {}),
                             id: "richListFilters",
                             tooltip: "Filters",
                             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
@@ -97,9 +96,7 @@ const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasF
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                             type: "ghost",
                             onClick: onOpenDisplayModal,
-                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                symbol: "Sliders"
-                            }),
+                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Sliders_js_1483374f__["default"], {}),
                             id: "richListDisplay",
                             tooltip: "Display",
                             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
@@ -113,9 +110,7 @@ const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasF
                     }) : null,
                     showCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                         type: "ghost",
-                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                            symbol: "Download"
-                        }),
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_486a4eac__["default"], {}),
                         onClick: onDownloadCsv,
                         tooltip: "Download all rows as CSV",
                         id: "richListDownloadCsv"

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

@@ -1,5 +1,6 @@
 import type { Row } from "@tanstack/react-table";
-import { type NormalizedSlot, type NormalizedTextField, type RichListContentSlot, type RichListSlotSize, type RichListTextField } from "./types";
+import type { MenuButtonOption } from "../../controls/MenuButton";
+import { type NormalizedSlot, type NormalizedTextField, type RichListContentSlot, type RichListRowAction, type RichListSlotSize, type RichListTextField } from "./types";
 export declare const isToggleableContentColumn: <Type>(entry: NormalizedTextField<Type> | NormalizedSlot<Type> | null) => entry is NormalizedSlot<Type>;
 /**
  * Whether this column’s visibility is stored (toggleable content, or `hiddenByDefault`
@@ -74,4 +75,5 @@ type CsvColumn = {
  * `handleDownloadCsv` in `utils/tables` for regression stability.
  */
 export declare const handleDownloadCsv: <Type>(csvFilename: string | undefined, columns: CsvColumn[], rows: Row<Type>[]) => void;
+export declare const richListRowActionToMenuOption: <Type>(action: RichListRowAction<Type>, row: Type) => MenuButtonOption;
 export {};

package/dist/presentation/RichList/helpers.js

@@ -35,6 +35,7 @@ const normalizeTextField = (field, position)=>{
         render: field,
         globalFiltering: false,
         csvExport: false,
+        enableSorting: false,
         layoutVisibility: "always"
     };
     return {
@@ -48,6 +49,8 @@ const normalizeTextField = (field, position)=>{
         filter: field.filter,
         globalFiltering: field.globalFiltering ?? void 0 !== field.value,
         csvExport: field.csvExport ?? false,
+        enableSorting: field.enableSorting ?? false,
+        sortingFn: field.sortingFn,
         layoutVisibility: field.layoutVisibility ?? "always"
     };
 };
@@ -65,7 +68,8 @@ const normalizeSlot = (slot, position, positionIndex)=>{
             globalFiltering: false,
             canToggleVisibility: false,
             hiddenByDefault: false,
-            csvExport: false
+            csvExport: false,
+            enableSorting: false
         };
     }
     return {
@@ -84,7 +88,9 @@ const normalizeSlot = (slot, position, positionIndex)=>{
         globalFiltering: slot.globalFiltering ?? void 0 !== slot.value,
         canToggleVisibility: "content" === position && true === slot.canToggleVisibility,
         hiddenByDefault: slot.hiddenByDefault ?? false,
-        csvExport: slot.csvExport ?? false
+        csvExport: slot.csvExport ?? false,
+        enableSorting: slot.enableSorting ?? false,
+        sortingFn: slot.sortingFn
     };
 };
 const isVisibleAtBreakpoint = (layoutVisibility, isCompactContentSlots)=>{
@@ -118,4 +124,28 @@ const handleDownloadCsv = (csvFilename, columns, rows)=>{
     document.body.removeChild(a);
     URL.revokeObjectURL(objectUrl);
 };
-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 };
+const richListRowActionToMenuOption = (action, row)=>{
+    if ("link" === action.type) return {
+        id: action.id,
+        label: action.label,
+        icon: action.icon,
+        type: "link",
+        href: action.href(row),
+        external: action.external
+    };
+    if ("onClick" === action.type) return {
+        id: action.id,
+        label: action.label,
+        icon: action.icon,
+        type: "onClick",
+        onClick: ()=>action.onClick(row)
+    };
+    return {
+        id: action.id,
+        label: action.label,
+        icon: action.icon,
+        type: "render",
+        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 };

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

@@ -1,8 +1,11 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__ from "../../../icons/components/AssignmentDocument.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__ from "../../../icons/components/Edit.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_People_js_eb6cef46__ from "../../../icons/components/People.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Visible_js_9104e1a5__ from "../../../icons/components/Visible.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_30fa518e__ from "../../Card.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_a2c43d68__ from "../../CardContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_ddbcc46a__ from "../../Modal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
@@ -72,9 +75,7 @@ const rowActions = ()=>[
         {
             id: "view",
             label: "View group",
-            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                symbol: "Visible"
-            }),
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Visible_js_9104e1a5__["default"], {}),
             alwaysVisible: false,
             type: "render",
             render: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_ddbcc46a__["default"], {
@@ -97,9 +98,7 @@ const rowActions = ()=>[
         {
             id: "edit",
             label: "Edit",
-            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                symbol: "Edit"
-            }),
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__["default"], {}),
             alwaysVisible: false,
             type: "onClick",
             onClick: ()=>void 0
@@ -109,7 +108,6 @@ const ComplianceGroupsList = ({ compactBreakpoint, contentAlignment, rowHeight }
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
         data: groups,
-        enableSorting: false,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         href: ()=>"#",
@@ -125,8 +123,7 @@ const ComplianceGroupsList = ({ compactBreakpoint, contentAlignment, rowHeight }
                     align: "center",
                     tagName: "div",
                     children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                            symbol: "AssignmentDocument",
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__["default"], {
                             size: "small",
                             tone: "muted"
                         }),
@@ -144,8 +141,7 @@ const ComplianceGroupsList = ({ compactBreakpoint, contentAlignment, rowHeight }
                 justify: "end",
                 tagName: "div",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "People",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_People_js_eb6cef46__["default"], {
                         size: "small",
                         tone: "muted"
                     }),

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

@@ -1,6 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__ from "../../../icons/components/Edit.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
 const fields = [
@@ -37,9 +37,7 @@ const rowActions = ()=>[
         {
             id: "more",
             label: "Field actions",
-            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                symbol: "Edit"
-            }),
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__["default"], {}),
             alwaysVisible: false,
             type: "onClick",
             onClick: ()=>void 0
@@ -49,7 +47,6 @@ const CustomFieldsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
         data: fields,
-        enableSorting: false,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         rowActions: rowActions,

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

@@ -11,5 +11,5 @@ export type EmployeeComplianceRow = {
     };
     statusDetail: string;
 };
-declare const EmployeeComplianceList: ({ compactBreakpoint, contentAlignment, rowHeight, enableSorting, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmployeeComplianceList: ({ compactBreakpoint, contentAlignment, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default EmployeeComplianceList;

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

@@ -1,8 +1,9 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_237a92ad__ from "../../../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_c0058dca__ from "../../../icons/components/Email.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__ from "../../../icons/components/Warning.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_c336f579__ from "../../VStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
@@ -79,8 +80,7 @@ const leadingSlot = {
                 minWidth: "var(--size-p1)",
                 padding: "var(--size-n2)"
             },
-            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                symbol: "Warning",
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__["default"], {
                 size: "default",
                 tone: "danger"
             })
@@ -95,8 +95,7 @@ const complianceStatusHeader = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_r
                 align: "center",
                 spacing: "n2",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "Warning",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__["default"], {
                         tone: "danger"
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -126,8 +125,7 @@ const complianceStatusHeader = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_r
                 },
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_237a92ad__["default"], {
                     id: "compliance-send-reminder-all",
-                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "Email",
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_c0058dca__["default"], {
                         size: "small"
                     }),
                     onClick: ()=>{},
@@ -137,10 +135,11 @@ const complianceStatusHeader = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_r
             })
         ]
     });
-const EmployeeComplianceList = ({ compactBreakpoint, contentAlignment, rowHeight, enableSorting })=>{
+const EmployeeComplianceList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const titleField = {
         label: "Policy",
         value: (r)=>r.title,
+        enableSorting: true,
         globalFiltering: false,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "regular-bold",
@@ -156,6 +155,7 @@ const EmployeeComplianceList = ({ compactBreakpoint, contentAlignment, rowHeight
         id: "compliance",
         label: "Status",
         value: (r)=>`${r.statusBadge.text} ${r.statusDetail}`,
+        enableSorting: true,
         globalFiltering: false,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 style: {
@@ -253,7 +253,6 @@ const EmployeeComplianceList = ({ compactBreakpoint, contentAlignment, rowHeight
                     fillContainerHeight: true,
                     compactBreakpoint: compactBreakpoint,
                     contentAlignment: contentAlignment,
-                    enableSorting: enableSorting,
                     href: ()=>"#",
                     getRowId: (r)=>r.id,
                     header: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -282,7 +281,6 @@ const EmployeeComplianceList = ({ compactBreakpoint, contentAlignment, rowHeight
                     fillContainerHeight: true,
                     compactBreakpoint: compactBreakpoint,
                     contentAlignment: contentAlignment,
-                    enableSorting: false,
                     getRowId: (r)=>r.id,
                     header: complianceStatusHeader,
                     rowHeight: rowHeight,

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

@@ -1,13 +1,11 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import Badge from "../../Badge";
-import Icon from "../../Icon";
 import { type CommonProps } from "./shared";
 type NameBadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
-type IconSymbol = ComponentProps<typeof Icon>["symbol"];
 export type EmployeePaperworkRow = {
     id: string;
     title: string;
-    leadingSymbol: IconSymbol;
+    leadingIcon: ReactNode;
     statusBadge: {
         id: string;
         text: string;
@@ -17,5 +15,5 @@ export type EmployeePaperworkRow = {
     statusTone: "danger" | "muted" | "warning";
     statusLine: string;
 };
-declare const EmployeePaperworkList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmployeePaperworkList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default EmployeePaperworkList;