@worknice/whiteboard 0.60.0 → 0.61.0

package/dist/presentation/IconBadge.js

@@ -1,8 +1,7 @@
 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__Icon_js_0d271bb6__ from "./Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__ from "./IconBadge.module.js";
-const IconBadge = ({ symbol, id, color = "grey" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+const IconBadge = ({ icon, id, color = "grey" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
         id: id,
         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].badge, {
             [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].blue]: "blue" === color,
@@ -15,10 +14,7 @@ const IconBadge = ({ symbol, id, color = "grey" })=>/*#__PURE__*/ (0, __WEBPACK_
             [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].teal]: "teal" === color,
             [__WEBPACK_EXTERNAL_MODULE__IconBadge_module_js_cbb5a845__["default"].yellow]: "yellow" === color
         }),
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-            symbol: symbol,
-            size: "default"
-        })
+        children: icon
     });
 const IconBadge_rslib_entry_ = IconBadge;
 export { IconBadge_rslib_entry_ as default };

package/dist/presentation/LightweightTable.js

@@ -1,7 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__ from "../controls/MenuButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_53ee91ec__ from "../icons/components/Overflow.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__LightweightTable_module_js_15596fa6__ from "./LightweightTable.module.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Placeholder_js_b43af71f__ from "./Placeholder.js";
 const LightweightTable = ({ items, getItemId, itemToHref, renderLeading, Content, renderTrailing, rowActions, emptyState = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Placeholder_js_b43af71f__["default"], {
@@ -53,9 +53,7 @@ const LightweightTable = ({ items, getItemId, itemToHref, renderLeading, Content
                                 type: "ghost",
                                 size: "small",
                                 options: rowActions(item).filter((action)=>null !== action),
-                                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                    symbol: "Overflow"
-                                })
+                                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_53ee91ec__["default"], {})
                             })
                         }) : null
                     ]

package/dist/presentation/ListCard.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_ChevronRight_js_3a199590__ from "../icons/components/ChevronRight.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__ from "./Label.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ListCard_module_js_03577d96__ from "./ListCard.module.js";
 const ListCard = ({ fields = [], href, statuses, title })=>{
@@ -38,9 +38,7 @@ const ListCard = ({ fields = [], href, statuses, title })=>{
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     className: __WEBPACK_EXTERNAL_MODULE__ListCard_module_js_03577d96__["default"].chevron,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                        symbol: "ChevronRight"
-                    })
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_ChevronRight_js_3a199590__["default"], {})
                 })
             ]
         })

package/dist/presentation/ObscuredText.js

@@ -1,6 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Hidden_js_a4065ee0__ from "../icons/components/Hidden.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Visible_js_03fb7d76__ from "../icons/components/Visible.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ObscuredText_module_js_1e05c3bc__ from "./ObscuredText.module.js";
 const ObscuredText = ({ children })=>{
     const [visible, setVisible] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
@@ -14,9 +15,10 @@ const ObscuredText = ({ children })=>{
                 className: __WEBPACK_EXTERNAL_MODULE__ObscuredText_module_js_1e05c3bc__["default"].text,
                 children: visible ? children : children.replace(/./g, "•")
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                size: "small",
-                symbol: visible ? "Visible" : "Hidden"
+            visible ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Visible_js_03fb7d76__["default"], {
+                size: "small"
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Hidden_js_a4065ee0__["default"], {
+                size: "small"
             })
         ]
     });

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

@@ -6,8 +6,8 @@ declare const meta: {
         name?: string;
         imageUrl?: string | null;
         hue?: string;
-        badgeIcon?: import("./Avatar").IconSymbol;
-        hoverIcon?: import("./Avatar").IconSymbol;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
         href: string;
@@ -18,8 +18,8 @@ declare const meta: {
         name?: string;
         imageUrl?: string | null;
         hue?: string;
-        badgeIcon?: import("./Avatar").IconSymbol;
-        hoverIcon?: import("./Avatar").IconSymbol;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
         href?: never;
@@ -30,8 +30,8 @@ declare const meta: {
         name?: string;
         imageUrl?: string | null;
         hue?: string;
-        badgeIcon?: import("./Avatar").IconSymbol;
-        hoverIcon?: import("./Avatar").IconSymbol;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
         href?: never;
@@ -45,15 +45,15 @@ declare const meta: {
         size: "xlarge";
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/nextjs-vite").ReactRenderer, {
-        id: string;
         size?: ("small" | "large" | "xlarge" | "tiny" | "xtiny") | undefined;
+        id: string;
         onClick?: ((event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void) | undefined;
         name?: string | undefined;
         hue?: string | undefined;
         href?: string | undefined;
         imageUrl?: string | null | undefined;
-        badgeIcon?: import("./Avatar").IconSymbol | undefined;
-        hoverIcon?: import("./Avatar").IconSymbol | undefined;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps> | undefined;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     parameters: {
         layout: string;

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

@@ -89,12 +89,6 @@ type CommonProps<Type> = {
      * @default `RICH_LIST_CONTENT_COMPACT_MAX_PX` (1024); see `helpers.ts`
      */
     compactBreakpoint?: number;
-    /**
-     * If `true`, users can change sort order from the Display dialog. Resets to the
-     * default are separate from the toolbar filter reset.
-     * @default `false`
-     */
-    enableSorting?: boolean;
     /**
      * Content when a filter or search returns no rows.
      * @default the string `No results`
@@ -129,6 +123,11 @@ type NavigationProps<Type> = {
      * link covers the rest of the row (same idea as row actions not covering the whole row).
      */
     href?: (row: Type) => string;
+    /**
+     * Invoked when the user activates the row’s main content zone (click or keyboard).
+     * Takes precedence over bulk row-click selection; `href` takes precedence over this.
+     */
+    onClick?: (row: Type) => void;
     /**
      * Primary bulk actions in the bar when rows are selected. Each can open a panel (the
      * `render` on the action). Row selection is enabled when this or `secondaryBulkActions`
@@ -148,6 +147,6 @@ type NavigationProps<Type> = {
  * `helpers.ts`.
  */
 export type RichListProps<Type> = CommonProps<Type> & NavigationProps<Type>;
-declare const RichList: <Type>({ data, getRowId, leadingSlot, mainSlot, contentSlots, contentAlignment, trailingSlot, href, rowActions, bulkActions, secondaryBulkActions, rowHeight, csvFilename, fillContainerHeight, compactBreakpoint: compactBreakpointProp, enableSorting, emptyState, id, pathName, localStorageSchema, header, }: RichListProps<Type>) => import("react/jsx-runtime").JSX.Element;
+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";

package/dist/presentation/RichList/RichList.js

@@ -41,7 +41,7 @@ function mergeInlineSinglePersistedColumnFilters(tableColumnFilters, inlineColum
         }
     ];
 }
-const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_RICH_LIST_CONTENT_SLOTS, contentAlignment = "space-evenly", trailingSlot, href, rowActions, bulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, secondaryBulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, rowHeight = "medium", csvFilename, fillContainerHeight = false, compactBreakpoint: compactBreakpointProp, enableSorting = false, emptyState = "No results", id, pathName, localStorageSchema, header })=>{
+const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_RICH_LIST_CONTENT_SLOTS, contentAlignment = "space-evenly", trailingSlot, href, onClick, rowActions, bulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, secondaryBulkActions = EMPTY_RICH_LIST_BULK_ACTIONS, rowHeight = "medium", csvFilename, fillContainerHeight = false, compactBreakpoint: compactBreakpointProp, emptyState = "No results", id, pathName, localStorageSchema, header })=>{
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
     const [inlineSingleSelectChoice, setInlineSingleSelectChoice] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
     const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
@@ -143,9 +143,13 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
     const toggleableContentSlots = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isToggleableContentColumn)(e)), [
         allEntries
     ]);
-    const sortableEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && void 0 !== e.value), [
+    const sortableEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>allEntries.filter((e)=>null !== e && e.enableSorting && void 0 !== e.value), [
         allEntries
     ]);
+    const hasSortableEntries = sortableEntries.length > 0;
+    const sortableEntryIds = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>new Set(sortableEntries.map((entry)=>entry.id)), [
+        sortableEntries
+    ]);
     const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
         const tableFilteringForEntry = (entryId)=>!(void 0 !== inlineSingleSelectExcludedFromTableColumnId && entryId === inlineSingleSelectExcludedFromTableColumnId);
@@ -164,12 +168,9 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                 cell: ({ row })=>entry.render(row.original),
                 enableHiding: (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isColumnWithVisibilityState)(entry),
                 enableGlobalFilter: entry.globalFiltering,
-                ...enableSorting ? {
-                    enableSorting: true,
-                    sortUndefined: 1
-                } : {
-                    enableSorting: false
-                },
+                enableSorting: entry.enableSorting,
+                sortingFn: entry.sortingFn ?? "auto",
+                sortUndefined: 1,
                 filterFn: entry.filter && tableFiltering ? (row, _columnId, filterValue)=>{
                     const filter = entry.filter;
                     if (!filter) return true;
@@ -199,7 +200,6 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
     }, [
         allEntries,
         enableRowSelection,
-        enableSorting,
         inlineSingleSelectExcludedFromTableColumnId
     ]);
     const columnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>entriesWithFilter.map((entry)=>{
@@ -234,6 +234,10 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         localStorageData,
         localStorageSchema
     ]);
+    const initialSorting = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(parsedLocalStorage.sorting ?? []).filter((sort)=>sortableEntryIds.has(sort.id)), [
+        parsedLocalStorage.sorting,
+        sortableEntryIds
+    ]);
     const mergedInitialPersistedColumnFilters = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>parsedLocalStorage.columnFilters ?? columnFiltersInitialState, [
         parsedLocalStorage.columnFilters,
         columnFiltersInitialState
@@ -309,7 +313,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         getRowId,
         getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getCoreRowModel)(),
         getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getFilteredRowModel)(),
-        ...enableSorting ? {
+        ...hasSortableEntries ? {
             getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getSortedRowModel)()
         } : {},
         getColumnCanGlobalFilter: ()=>true,
@@ -318,7 +322,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
             columnFilters: tableColumnFiltersInitialState,
             columnVisibility: initialColumnVisibility,
             globalFilter: "",
-            sorting: parsedLocalStorage.sorting ?? []
+            sorting: initialSorting
         },
         defaultColumn: {
             enableColumnFilter: false,
@@ -343,6 +347,10 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         table
     ]);
     const tableState = table.getState();
+    const persistedSorting = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>tableState.sorting.filter((sort)=>sortableEntryIds.has(sort.id)), [
+        sortableEntryIds,
+        tableState.sorting
+    ]);
     const rows = table.getRowModel().rows;
     const filteredSelectedRows = table.getFilteredSelectedRowModel();
     const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>table.setGlobalFilter(value), 4);
@@ -355,13 +363,13 @@ 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: tableState.sorting
+            sorting: persistedSorting
         }));
     }, [
         storageKey,
         tableState.columnFilters,
         tableState.columnVisibility,
-        tableState.sorting,
+        persistedSorting,
         inlineSingleSelectExcludedFromTableColumnId,
         inlineSingleSelectOptionIdResolved
     ]);
@@ -391,7 +399,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
         "--richlist-padding-inline": `${(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListInlinePaddingPx)(rowHeight)}px`
     });
     const showDisplayForColumnVisibility = !isCompactContentSlots && toggleableContentSlots.length > 0;
-    const showDisplayButton = enableSorting && sortableEntries.length > 0 || showDisplayForColumnVisibility;
+    const showDisplayButton = hasSortableEntries || showDisplayForColumnVisibility;
     const defaultDisplayColumnVisibility = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(toggleableContentSlots.map((entry)=>[
                 entry.id,
                 !("hiddenByDefault" in entry && entry.hiddenByDefault)
@@ -411,7 +419,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)(enableSorting && sortableEntries.length > 0, tableState.sorting, displayColumnsForDisplayModal);
+    const displayActiveCount = (0, __WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__.getDisplayFormActiveExpanderCount)(hasSortableEntries, persistedSorting, displayColumnsForDisplayModal);
     const hasToolbar = enableRowSelection || entriesWithGlobalFilter.length > 0 || entriesWithFilter.length > 0 || showDisplayButton || shouldShowCsvExport;
     const actionsByRowId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const map = new Map();
@@ -565,6 +573,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
                                     table: table,
                                     enableRowSelection: enableRowSelection,
                                     href: href,
+                                    onClick: onClick,
                                     normalizedLeadingSlots: normalizedLeadingSlots,
                                     normalizedPrimary: normalizedPrimary,
                                     normalizedSecondary: normalizedSecondary,
@@ -594,8 +603,8 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = EMPTY_
             }),
             isDisplayModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichListDisplayModal_js_6277e838__["default"], {
                 onClose: ()=>setIsDisplayModalOpen(false),
-                sortableColumns: enableSorting ? sortableColumnsForModal : [],
-                currentSorting: tableState.sorting,
+                sortableColumns: sortableColumnsForModal,
+                currentSorting: persistedSorting,
                 onApplySorting: (sorting)=>table.setSorting(sorting),
                 displayColumns: displayColumnsForDisplayModal,
                 onApplyColumnVisibility: (vis)=>{

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

@@ -27,7 +27,6 @@ const meta = {
     component: __WEBPACK_EXTERNAL_MODULE__RichList_js_174fa6e8__["default"],
     args: {
         rowHeight: "medium",
-        enableSorting: false,
         contentAlignment: "space-evenly",
         compactBreakpoint: __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.RICH_LIST_CONTENT_COMPACT_MAX_PX
     },
@@ -69,9 +68,6 @@ const meta = {
         emptyState: {
             control: false
         },
-        enableSorting: {
-            control: "boolean"
-        },
         fillContainerHeight: {
             control: false
         },
@@ -84,6 +80,9 @@ const meta = {
         href: {
             control: false
         },
+        onClick: {
+            control: false
+        },
         id: {
             control: false
         },
@@ -153,13 +152,11 @@ const meta = {
 const RichList_stories_rslib_entry_ = meta;
 const PeopleDirectory = {
     args: {
-        compactBreakpoint: 800,
-        enableSorting: true
+        compactBreakpoint: 800
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_PeopleList_js_08c544af__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
@@ -171,59 +168,50 @@ const EmployeePaperwork = {
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_EmployeePaperwork_js_ce2a4560__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const Paperwork = {
     args: {
         compactBreakpoint: 800,
-        enableSorting: true,
         contentAlignment: "flex-end"
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Paperwork_js_6aeab56c__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const PaperworkApprovals = {
     args: {
         compactBreakpoint: 800,
-        enableSorting: true,
         contentAlignment: "flex-end"
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_PaperworkApprovals_js_59df2dae__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const Leave = {
     args: {
         compactBreakpoint: 800,
-        enableSorting: true,
         contentAlignment: "flex-end"
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Leave_js_fe8f2780__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const Tasks = {
     args: {
         compactBreakpoint: 800,
-        enableSorting: true,
         contentAlignment: "flex-end"
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Tasks_js_9f5cc0bc__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
@@ -231,8 +219,7 @@ const EmployeeCompliance = {
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_EmployeeCompliance_js_97782914__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            rowHeight: args.rowHeight,
-            enableSorting: args.enableSorting
+            rowHeight: args.rowHeight
         })
 };
 const ComplianceGroups = {
@@ -283,43 +270,34 @@ const Tables = {
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Tables_js_73ee4da7__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const Positions = {
     args: {
-        enableSorting: true,
         contentAlignment: "flex-end"
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Positions_js_26e8c2fc__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const EmployeePeople = {
-    args: {
-        enableSorting: false
-    },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_EmployeePeople_js_30f49b1f__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
 const Reviews = {
     args: {
         rowHeight: "large",
-        enableSorting: false,
         compactBreakpoint: 450
     },
     render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__stories_Reviews_js_1264af6d__["default"], {
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             rowHeight: args.rowHeight
         })
 };
@@ -329,7 +307,6 @@ const EmptyList = {
             fillContainerHeight: true,
             compactBreakpoint: args.compactBreakpoint,
             contentAlignment: args.contentAlignment,
-            enableSorting: args.enableSorting,
             getRowId: (r)=>r.id,
             rowHeight: args.rowHeight,
             mainSlot: {

package/dist/presentation/RichList/RichListBulkActionBar.js

@@ -3,11 +3,13 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/j
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../../controls/Button.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_Close_js_387b6f2b__ from "../../icons/components/Close.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_486a4eac__ from "../../icons/components/Download.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__ from "../../icons/components/Overflow.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_a2cbb2b8__ from "../Badge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_2e00482a__ from "../Card.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_bacbf899__ from "../CardContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_5c2eb952__ from "../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__ from "../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__ from "./helpers.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichListBulkActionBar_module_js_84de7cc9__ from "./RichListBulkActionBar.module.js";
@@ -79,8 +81,7 @@ const RichListBulkActionBar = ({ table, floatingRef, leftCoordinate, selectedCou
                                             {
                                                 id: "download-selected-rows",
                                                 label: "Download CSV",
-                                                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"], {
                                                     size: "small"
                                                 }),
                                                 type: "onClick",
@@ -88,14 +89,10 @@ const RichListBulkActionBar = ({ table, floatingRef, leftCoordinate, selectedCou
                                             }
                                         ] : []
                                     ],
-                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                        symbol: "Overflow"
-                                    })
+                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__["default"], {})
                                 }) : null,
                                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
-                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                        symbol: "Close"
-                                    }),
+                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_387b6f2b__["default"], {}),
                                     onClick: ()=>table.resetRowSelection(true),
                                     title: `Deselect ${selectedCount} ${1 === selectedCount ? "selection" : "selections"}`,
                                     type: "ghost"

package/dist/presentation/RichList/RichListDisplayModal.js

@@ -8,10 +8,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_6389bc93__ from ".
 import * as __WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_bf559bf6__ from "../../fields/SimpleRadioSetField.js";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_786d786e__ from "../../forms/FormButtonSet.js";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e95dafc7__ from "../../forms/useForm.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Restore_js_f78ce3bd__ from "../../icons/components/Restore.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_a37c3c04__ from "../../inputs/SelectInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_2e00482a__ from "../Card.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_5c2eb952__ from "../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
 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";
@@ -92,9 +92,7 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                         type: "secondary",
                         onClick: handleReset,
-                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                            symbol: "Restore"
-                        }),
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Restore_js_f78ce3bd__["default"], {}),
                         disabled: !hasSortSection && !hasDisplaySection,
                         children: "Reset"
                     }),
@@ -119,7 +117,7 @@ const RichListDisplayModal = ({ onClose, sortableColumns, currentSorting, onAppl
                 className: __WEBPACK_EXTERNAL_MODULE__controls_FilterModal_module_js_3b5407aa__["default"].filterExpandersContainer,
                 children: [
                     hasSortSection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__.FilterExpander, {
-                        label: "Sort",
+                        label: "Sort by",
                         highlight: isSortActive,
                         defaultOpen: !hasDisplaySection || isSortActive,
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_6ebc0134__["default"], {

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;
@@ -35,5 +36,5 @@ type Props<Type> = {
     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, maxAlwaysVisibleActions, anyRowHasOverflowAction, lastSelectedRowRef, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
 export default RichListRow;