@worknice/whiteboard 0.60.1 → 0.62.0

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

@@ -1,17 +1,20 @@
 "use client";
 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_AssignmentQuestionnaire_js_065f7cd5__ from "../../../icons/components/AssignmentQuestionnaire.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Leave_js_20fd4ebb__ from "../../../icons/components/Leave.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Profile_js_13788365__ from "../../../icons/components/Profile.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__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";
 import * as __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__ from "./shared/bulkActionStubs.js";
-const LEADING_DOCUMENT = "AssignmentDocument";
-const LEADING_FORM = "AssignmentQuestionnaire";
-const LEADING_ID_STYLE = "Profile";
+const LEADING_DOCUMENT = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__["default"], {});
+const LEADING_FORM = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_065f7cd5__["default"], {});
+const LEADING_ID_STYLE = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Profile_js_13788365__["default"], {});
 const rows = [
     {
         id: "pa1",
@@ -164,11 +167,12 @@ const assigneeLinkStyle = {
     textDecoration: "none",
     zIndex: 2
 };
-const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__["default"])();
     const titleField = {
         label: "Document",
         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",
@@ -192,10 +196,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
                     justifyContent: "center",
                     padding: "var(--size-n2)"
                 },
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                    symbol: r.leadingIcon,
-                    size: "default"
-                })
+                children: r.leadingIcon
             }),
         size: 32
     };
@@ -204,6 +205,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
         label: "Status / timeline",
         canToggleVisibility: true,
         value: (r)=>r.statusLine,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -219,8 +221,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
                 align: "center",
                 tagName: "div",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "Leave",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Leave_js_20fd4ebb__["default"], {
                         size: "small",
                         tone: "muted"
                     }),
@@ -240,6 +241,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
         label: "Person",
         canToggleVisibility: true,
         value: (r)=>r.assigneeName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -287,6 +289,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
         id: "secondary",
         label: "Approver",
         value: (r)=>r.secondaryName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -328,7 +331,6 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
             assigneeSlot
         ],
         data: rows,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         leadingSlot: leadingSlot,

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

@@ -15,5 +15,5 @@ export type PeopleListRow = {
     }>;
     tags: string[];
 };
-declare const PeopleList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const PeopleList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default PeopleList;

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

@@ -261,10 +261,11 @@ const people = [
         ]
     }
 ];
-const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const PeopleList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const titleField = {
         label: "Name",
         value: (r)=>r.name,
+        enableSorting: true,
         globalFiltering: true,
         csvExport: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -284,6 +285,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
     const subtitleField = {
         label: "Position",
         value: (r)=>r.position,
+        enableSorting: true,
         globalFiltering: true,
         csvExport: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -309,6 +311,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
             label: "Employee ID",
             hiddenByDefault: true,
             value: (r)=>r.id,
+            enableSorting: true,
             render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                     font: "small",
                     children: r.id
@@ -322,6 +325,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
             label: "Department",
             hiddenByDefault: true,
             value: (r)=>r.department,
+            enableSorting: true,
             render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                     font: "small",
                     children: r.department
@@ -343,6 +347,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
         id: "tags",
         label: "Tags",
         value: (r)=>r.tags.join(" "),
+        enableSorting: true,
         render: (r)=>r.tags.map((t)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     style: {
                         padding: "4px"
@@ -373,7 +378,6 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
         fillContainerHeight: true,
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
-        enableSorting: enableSorting,
         rowHeight: rowHeight,
         href: ()=>"#",
         csvFilename: "people-directory.csv",

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,