@worknice/whiteboard 0.60.1 → 0.61.0

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

@@ -1,7 +1,8 @@
 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__icons_components_People_js_eb6cef46__ from "../../../icons/components/People.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__RichList_js_64f3f04c__ from "../RichList.js";
 const tags = [
@@ -55,9 +56,7 @@ const rowActions = ()=>[
         {
             id: "more",
             label: "Tag 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
@@ -67,7 +66,6 @@ const PeopleTagsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
         data: tags,
-        enableSorting: false,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         rowActions: rowActions,
@@ -90,8 +88,7 @@ const PeopleTagsList = ({ 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/Positions.d.ts

@@ -18,5 +18,5 @@ export type PositionsRow = {
      */
     manager: PersonRef | "vacant" | null;
 };
-declare const PositionsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const PositionsList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default PositionsList;

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

@@ -1,10 +1,12 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_ArrowTurnLeftUp_js_efb58056__ from "../../../icons/components/ArrowTurnLeftUp.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__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__ from "../../../utils/useNextContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.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__RichList_js_64f3f04c__ from "../RichList.js";
 const positions = [
@@ -276,7 +278,7 @@ const slotLinkStyle = {
     textDecoration: "none",
     zIndex: 2
 };
-const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const PositionsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__["default"])();
     const renderAssignee = (r)=>{
         if ("vacant" === r.assignee) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
@@ -292,7 +294,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                         id: `${r.id}-assign-vacant`,
                         size: "small",
                         href: `#assignee-${r.id}`,
-                        hoverIcon: "Edit"
+                        hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__["default"]
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                         font: "small",
@@ -318,7 +320,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                         size: "small",
                         hue: "200",
                         href: `#assignee-${r.id}`,
-                        hoverIcon: "Edit"
+                        hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__["default"]
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                         font: "small",
@@ -338,8 +340,8 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                 id: `${r.id}-mgr-vacant`,
                 size: "small",
                 href: `#manager-${r.id}`,
-                hoverIcon: "Edit",
-                badgeIcon: "ArrowTurnLeftUp"
+                hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__["default"],
+                badgeIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_ArrowTurnLeftUp_js_efb58056__["default"]
             })
         });
         return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
@@ -354,8 +356,8 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                 name: r.manager.name,
                 imageUrl: r.manager.imageUrl,
                 href: `#manager-${r.id}`,
-                hoverIcon: "Edit",
-                badgeIcon: "ArrowTurnLeftUp",
+                hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_1595b5f9__["default"],
+                badgeIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_ArrowTurnLeftUp_js_efb58056__["default"],
                 size: "small",
                 hue: "200"
             })
@@ -364,6 +366,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
     const titleField = {
         label: "Position",
         value: (r)=>`${r.title} ${r.department}`,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "regular-bold",
@@ -373,6 +376,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
     const subtitleField = {
         label: "Code / function / reports",
         value: (r)=>`${r.positionCode} ${r.department} ${r.directReports} direct reports`,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -416,8 +420,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                         spacing: "n1",
                         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"
                             }),
@@ -439,6 +442,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
         id: "assigned",
         label: "Assigned",
         value: (r)=>"vacant" === r.assignee ? "Vacant" : r.assignee.name,
+        enableSorting: true,
         render: (r)=>renderAssignee(r),
         align: "start",
         size: 200,
@@ -470,6 +474,7 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
             if ("vacant" === r.manager) return "Vacant";
             return r.manager.name;
         },
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>renderManager(r),
         align: "center",
@@ -500,7 +505,6 @@ const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, row
         data: positions,
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         rowHeight: rowHeight,

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

@@ -15,5 +15,5 @@ export type ReviewsRow = {
  * (see `RichList` / `MenuButton`), with performance-style rows: avatar, cycle title, type badge,
  * due / submitted copy on the trailing edge.
  */
-declare const ReviewsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const ReviewsList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default ReviewsList;

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

@@ -151,6 +151,7 @@ const avatarSlot = {
 const primaryField = {
     label: "Review",
     value: (r)=>`${r.cycleName} ${r.personName}`,
+    enableSorting: true,
     globalFiltering: true,
     render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
             font: "regular-bold",
@@ -192,13 +193,12 @@ const statusFilterSlot = {
         ]
     }
 };
-const ReviewsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+const ReviewsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
         data: reviewRows,
         getRowId: (r)=>r.id,
         fillContainerHeight: true,
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
-        enableSorting: enableSorting,
         rowHeight: rowHeight,
         leadingSlot: avatarSlot,
         mainSlot: {

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

@@ -1,7 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Comment_js_158e39fb__ from "../../../icons/components/Comment.js";
+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__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__RichList_js_64f3f04c__ from "../RichList.js";
 const questions = [
@@ -97,9 +98,7 @@ const rowActions = ()=>[
         {
             id: "more",
             label: "Question 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
@@ -109,7 +108,6 @@ const SavedQuestionsList = ({ compactBreakpoint, contentAlignment, rowHeight })=
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
         data: questions,
-        enableSorting: false,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         rowActions: rowActions,
@@ -124,8 +122,7 @@ const SavedQuestionsList = ({ 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: "Comment",
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Comment_js_158e39fb__["default"], {
                             size: "small",
                             tone: "muted"
                         }),

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

@@ -5,5 +5,5 @@ export type TablesRow = {
     description: string;
     columnCount: number;
 };
-declare const TablesList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const TablesList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default TablesList;

package/dist/presentation/RichList/stories/Tables.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_Columns_js_a53f0b82__ from "../../../icons/components/Columns.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__RichList_js_64f3f04c__ from "../RichList.js";
 const tables = [
@@ -41,45 +41,59 @@ const tables = [
         columnCount: 5
     }
 ];
-const TablesList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+const TablesList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
         data: tables,
         fillContainerHeight: true,
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
-        enableSorting: enableSorting,
         getRowId: (r)=>r.id,
         href: ()=>"#",
         rowHeight: rowHeight,
         mainSlot: {
-            primary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
-                    font: "regular-bold",
-                    children: r.title
-                }),
-            secondary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
-                    font: "small",
-                    tone: "muted",
-                    children: r.description
-                })
-        },
-        trailingSlot: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
-                align: "center",
-                spacing: "n2",
-                children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "Columns",
-                        size: "small",
-                        tone: "muted"
-                    }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+            primary: {
+                label: "Name",
+                value: (r)=>r.title,
+                enableSorting: true,
+                render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "regular-bold",
+                        children: r.title
+                    })
+            },
+            secondary: {
+                label: "Description",
+                value: (r)=>r.description,
+                enableSorting: true,
+                render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                         font: "small",
                         tone: "muted",
-                        children: [
-                            r.columnCount,
-                            " columns"
-                        ]
+                        children: r.description
                     })
-                ]
-            })
+            }
+        },
+        trailingSlot: {
+            id: "columnCount",
+            label: "Columns",
+            value: (r)=>r.columnCount,
+            enableSorting: true,
+            render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                    align: "center",
+                    spacing: "n2",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Columns_js_a53f0b82__["default"], {
+                            size: "small",
+                            tone: "muted"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                            font: "small",
+                            tone: "muted",
+                            children: [
+                                r.columnCount,
+                                " columns"
+                            ]
+                        })
+                    ]
+                })
+        }
     });
 const Tables_rslib_entry_ = TablesList;
 export { Tables_rslib_entry_ as default };

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

@@ -12,5 +12,5 @@ export type TasksRow = {
     /** Far-right “secondary” person. */
     secondaryImageUrl: string;
 };
-declare const TasksList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const TasksList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default TasksList;

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

@@ -1,9 +1,12 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__ from "../../../icons/components/Calendar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Leave_js_20fd4ebb__ from "../../../icons/components/Leave.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_PaperworkExpired_js_7ea54805__ from "../../../icons/components/PaperworkExpired.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__ from "../../../icons/components/Warning.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.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__RichList_js_64f3f04c__ from "../RichList.js";
 const rows = [
@@ -161,27 +164,28 @@ const rows = [
 const uniqueAssigneeNames = [
     ...new Set(rows.map((r)=>r.assigneeName))
 ].sort((a, b)=>a.localeCompare(b));
-function dueIconAndTones(style) {
+function dueIconComponentAndTones(style) {
     if ("soon" === style) return {
-        symbol: "Leave",
+        iconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Leave_js_20fd4ebb__["default"],
         textTone: "warning",
         iconTone: "warning"
     };
     if ("overdue" === style) return {
-        symbol: "Warning",
+        iconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__["default"],
         textTone: "danger",
         iconTone: "danger"
     };
     return {
-        symbol: "Calendar",
+        iconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__["default"],
         textTone: "muted",
         iconTone: "muted"
     };
 }
-const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const TasksList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const titleField = {
         label: "Task",
         value: (r)=>r.title,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "regular-bold",
@@ -198,6 +202,7 @@ const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
         label: "Due",
         canToggleVisibility: true,
         value: (r)=>r.dueText,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -226,8 +231,7 @@ const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
                 align: "center",
                 tagName: "div",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "PaperworkExpired",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_PaperworkExpired_js_7ea54805__["default"], {
                         tone: "light"
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -237,14 +241,13 @@ const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
                     })
                 ]
             });
-            const { symbol, textTone, iconTone } = dueIconAndTones(r.dueStyle);
+            const { iconComponent: Icon, textTone, iconTone } = dueIconComponentAndTones(r.dueStyle);
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
                 spacing: "n2",
                 align: "center",
                 tagName: "div",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: symbol,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Icon, {
                         tone: iconTone
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -264,6 +267,7 @@ const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
         label: "Assignee",
         canToggleVisibility: true,
         value: (r)=>r.assigneeName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -300,6 +304,7 @@ const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
         id: "secondary",
         label: "Owner",
         value: (r)=>r.id,
+        enableSorting: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 style: {
                     display: "flex",
@@ -325,7 +330,6 @@ const TasksList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
             assigneeSlot
         ],
         data: rows,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         rowHeight: rowHeight,

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

@@ -1,9 +1,12 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_5f9dd2b4__ from "../../../../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Archive_js_74e0c705__ from "../../../../icons/components/Archive.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_9114c712__ from "../../../../icons/components/Download.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_49d19450__ from "../../../../icons/components/Email.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Visible_js_aebf335a__ from "../../../../icons/components/Visible.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_a31a1396__ from "../../../Card.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_3505c994__ from "../../../CardContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_836c9c03__ from "../../../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0a12b1b9__ from "../../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_473ea137__ from "../../../Modal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_8f4f405b__ from "../../../PlainText.js";
 function dismissBulkActionStub({ onClose, resetRowSelection }) {
@@ -39,8 +42,7 @@ function richListStoryViewBulkAction() {
     return {
         key: "view",
         label: "View",
-        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0a12b1b9__["default"], {
-            symbol: "Visible",
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Visible_js_aebf335a__["default"], {
             size: "small"
         }),
         render: ({ rows, onClose, resetRowSelection })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RichListStoryStubBulkActionModal, {
@@ -57,8 +59,7 @@ function richListStoryEmailBulkAction() {
     return {
         key: "email",
         label: "Email",
-        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0a12b1b9__["default"], {
-            symbol: "Email",
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_49d19450__["default"], {
             size: "small"
         }),
         render: ({ rows, onClose, resetRowSelection })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RichListStoryStubBulkActionModal, {
@@ -75,8 +76,7 @@ function richListStoryExportBulkAction() {
     return {
         key: "export",
         label: "Export",
-        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0a12b1b9__["default"], {
-            symbol: "Download",
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_9114c712__["default"], {
             size: "small"
         }),
         render: ({ rows, onClose, resetRowSelection })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RichListStoryStubBulkActionModal, {
@@ -93,8 +93,7 @@ function richListStoryArchiveBulkAction() {
     return {
         key: "archive",
         label: "Archive",
-        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0a12b1b9__["default"], {
-            symbol: "Archive",
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Archive_js_74e0c705__["default"], {
             size: "small"
         }),
         render: ({ rows, onClose, resetRowSelection })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RichListStoryStubBulkActionModal, {

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

@@ -2,6 +2,5 @@ import type { CSSProperties } from "react";
 export type CommonProps = {
     compactBreakpoint?: number;
     contentAlignment?: NonNullable<CSSProperties["justifyContent"]>;
-    enableSorting?: boolean;
     rowHeight?: number | "large" | "medium" | "small";
 };

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

@@ -1,3 +1,4 @@
+import type { SortingColumnDef } from "@tanstack/react-table";
 import { type ReactNode } from "react";
 import { type Filter } from "../../controls/FilterModal";
 import { type PrimitiveValue } from "../../utils/tables";
@@ -87,6 +88,17 @@ export type RichListTextField<Type> = ((row: Type) => ReactNode) | {
      * @default `false`
      */
     csvExport?: boolean;
+    /**
+     * If `true`, this field can be selected from the Display dialog's Sort section.
+     * Requires `value`.
+     * @default `false`
+     */
+    enableSorting?: boolean;
+    /**
+     * Custom TanStack sorting function for this field.
+     * @default `"auto"`
+     */
+    sortingFn?: SortingColumnDef<Type>["sortingFn"];
     /**
      * Hide / show this line based on `RichList`’s `compactBreakpoint`. Use
      * `"whenCompact"` on `mainSlot.secondary` to surface a line only at compact
@@ -165,6 +177,17 @@ type RichListBaseSlotObject<Type> = {
      * @default `false`
      */
     csvExport?: boolean;
+    /**
+     * If `true`, this column can be selected from the Display dialog's Sort section.
+     * Requires `value`.
+     * @default `false`
+     */
+    enableSorting?: boolean;
+    /**
+     * Custom TanStack sorting function for this column.
+     * @default `"auto"`
+     */
+    sortingFn?: SortingColumnDef<Type>["sortingFn"];
     /**
      * Show / hide this whole column based on `RichList`’s `compactBreakpoint`. Combined
      * with column visibility from the Display dialog (which always wins). Useful for
@@ -248,6 +271,10 @@ export type NormalizedTextField<Type> = {
     globalFiltering: boolean;
     /** @default `false` (or `false` for function form). */
     csvExport: boolean;
+    /** @default `false` */
+    enableSorting: boolean;
+    /** @default `"auto"` */
+    sortingFn?: SortingColumnDef<Type>["sortingFn"];
     /** @default `"always"` */
     layoutVisibility: RichListLayoutVisibility;
 };
@@ -287,6 +314,10 @@ export type NormalizedSlot<Type> = {
     hiddenByDefault: boolean;
     /** @default `false` if omitted on the object. */
     csvExport: boolean;
+    /** @default `false` if omitted on the object. */
+    enableSorting: boolean;
+    /** @default `"auto"` */
+    sortingFn?: SortingColumnDef<Type>["sortingFn"];
 };
 /**
  * One action for a row: an icon in the action strip and/or an item in the “more” menu.
@@ -312,11 +343,16 @@ export type RichListRowAction<Type> = {
      */
     predicate?: (row: Type) => boolean;
 } & ({
-    onClick: (row: Type) => void;
+    type: "link";
+    href: (row: Type) => string;
+    /** When `true`, opens in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+} | {
     type: "onClick";
+    onClick: (row: Type) => void;
 } | {
-    render: (onClose: () => void) => ReactNode;
     type: "render";
+    render: (onClose: () => void) => ReactNode;
 });
 /**
  * An action on the **selected** rows. Used with `bulkActions` on the list. The `render`

package/dist/presentation/Slot.js

@@ -1,6 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Action_js_a620af98__ from "../controls/Action.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__ from "../icons/components/Close.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Slot_module_js_6a83970f__ from "./Slot.module.js";
 const Slot = ({ children, disabled = false, onClear })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__Slot_module_js_6a83970f__["default"].container,
@@ -13,9 +13,7 @@ const Slot = ({ children, disabled = false, onClear })=>/*#__PURE__*/ (0, __WEBP
                     type: "ghost",
                     size: "small",
                     disabled: disabled,
-                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                        symbol: "Close"
-                    }),
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__["default"], {}),
                     title: "Remove",
                     tooltip: "Remove",
                     onClick: ()=>{