@pega/cosmos-react-demos 4.0.0-dev.13.0 → 4.0.0-dev.14.0

package/lib/work/Tasks/Tasks.mocks.js

@@ -0,0 +1,51 @@
+const viewGroups = [
+    {
+        text: 'Worklist',
+        items: [
+            {
+                id: '1',
+                text: 'Assigned to me',
+                selected: true,
+                count: 3
+            }
+        ]
+    },
+    {
+        text: 'Work groups',
+        items: [
+            {
+                id: '2',
+                text: 'Underwriting',
+                selected: false,
+                count: 8
+            },
+            {
+                id: '3',
+                text: 'Escalations',
+                selected: false,
+                count: 1
+            }
+        ]
+    },
+    {
+        text: 'Team members',
+        items: [
+            {
+                id: '4',
+                text: 'James Kirk',
+                selected: false,
+                visual: { name: 'James Kirk' },
+                count: 5
+            },
+            {
+                id: '5',
+                text: 'Leonard McCoy',
+                selected: false,
+                visual: { name: 'Leonard McCoy' },
+                count: 4
+            }
+        ]
+    }
+];
+export default viewGroups;
+//# sourceMappingURL=Tasks.mocks.js.map

package/lib/work/Tasks/Tasks.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.mocks.js","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG;IACjB;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,CAAC;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,CAAC;aACT;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,CAAC;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;gBAC9B,KAAK,EAAE,CAAC;aACT;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE;gBACjC,KAAK,EAAE,CAAC;aACT;SACF;KACF;CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["const viewGroups = [\n  {\n    text: 'Worklist',\n    items: [\n      {\n        id: '1',\n        text: 'Assigned to me',\n        selected: true,\n        count: 3\n      }\n    ]\n  },\n  {\n    text: 'Work groups',\n    items: [\n      {\n        id: '2',\n        text: 'Underwriting',\n        selected: false,\n        count: 8\n      },\n      {\n        id: '3',\n        text: 'Escalations',\n        selected: false,\n        count: 1\n      }\n    ]\n  },\n  {\n    text: 'Team members',\n    items: [\n      {\n        id: '4',\n        text: 'James Kirk',\n        selected: false,\n        visual: { name: 'James Kirk' },\n        count: 5\n      },\n      {\n        id: '5',\n        text: 'Leonard McCoy',\n        selected: false,\n        visual: { name: 'Leonard McCoy' },\n        count: 4\n      }\n    ]\n  }\n];\n\nexport default viewGroups;\n"]}

package/lib/work/Tasks/Tasks.stories.d.ts

@@ -1,13 +1,15 @@
 import { Meta, Story } from '@storybook/react';
 import { TasksProps } from '@pega/cosmos-react-work';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface TasksStoryProps {
-    headerText?: TasksProps['headerText'];
-    showHeaderVisual?: boolean;
-    showHeaderSecondary?: boolean;
+    name?: TasksProps['name'];
+    showVisual?: boolean;
+    showViewSelector?: boolean;
+    enableExpand?: boolean;
     count?: TasksProps['count'];
     openableTasks?: boolean;
+    search?: boolean;
 }
 export declare const TasksDemo: Story<TasksStoryProps>;
 //# sourceMappingURL=Tasks.stories.d.ts.map

package/lib/work/Tasks/Tasks.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA2B/C,OAAO,EAAS,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAoJ5C,CAAC"}
+{"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAsB/C,OAAO,EAAS,UAAU,EAA0C,MAAM,yBAAyB,CAAC;;AAIpG,wBAGU;AAEV,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAoH5C,CAAC"}

package/lib/work/Tasks/Tasks.stories.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Avatar, Button, MenuButton, MetaList, Text, Form, Input, TextArea, RadioCheckGroup, RadioButton, Checkbox, DateInput, NumberInput, FileInput, menuHelpers, Status, Link, DateTimeDisplay, EmptyState, Flex } from '@pega/cosmos-react-core';
-import { Tasks } from '@pega/cosmos-react-work';
+import { useState } from 'react';
+import { Button, MetaList, Text, Form, Input, TextArea, RadioCheckGroup, RadioButton, Checkbox, DateInput, NumberInput, FileInput, Status, Link, DateTimeDisplay, Flex } from '@pega/cosmos-react-core';
+import { Tasks, tasksHelpers as helpers } from '@pega/cosmos-react-work';
+import viewGroups from './Tasks.mocks';
 export default {
     title: 'Work/Tasks',
     component: Tasks
@@ -12,45 +13,14 @@ export const TasksDemo = (args) => {
     const DemoTaskForm = ({ onSubmit, onCancel }) => {
         return (_jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: onCancel, children: "Cancel" }), _jsx(Button, { variant: 'primary', onClick: onSubmit, children: "Submit" })] }), children: _jsxs(Flex, { container: { direction: 'column', itemGap: 2 }, children: [_jsx(Input, { label: 'Text field 1', required: true }), _jsx(Input, { label: 'Text field 2' }), _jsx(NumberInput, { onChange: () => { }, label: 'Number field' }), _jsx(Checkbox, { label: 'Boolean field', required: true }), _jsxs(RadioCheckGroup, { label: 'Picklist options', name: 'picklist-1', children: [_jsx(RadioButton, { label: 'option 1', defaultChecked: true }), _jsx(RadioButton, { label: 'option 2' }), _jsx(RadioButton, { label: 'option 3' })] }), _jsx(TextArea, { label: 'Text paragraph field', required: true }), _jsx(FileInput, { label: 'File field' }), _jsx(DateInput, { label: 'Datetime field' })] }) }));
     };
-    const [workGroups, setWorkGroups] = useState(() => {
-        return Array.from({ length: 10 }, (_, i) => {
-            return {
-                id: `${i + 1}`,
-                primary: `Workgroup ${i + 1}`,
-                count: typeof args.count === 'number' ? args.count : Math.floor(Math.random() * 10),
-                selected: i === 0,
-                visual: _jsx(Avatar, { size: 'l', name: `Team ${i + 1}` })
-            };
-        });
-    });
-    const activeGroup = menuHelpers.getSelected(workGroups)[0];
-    const activeGroupTaskCount = activeGroup?.count ?? 0;
-    useEffect(() => {
-        setWorkGroups(cur => {
-            return cur.map(group => {
-                if (group.id === activeGroup.id) {
-                    // Asserting as args.count changes will always be a number in demo
-                    return { ...group, count: args.count };
-                }
-                return group;
-            });
-        });
-    }, [args.count]);
-    const groupSelection = (_jsx(MenuButton, { variant: 'text', text: activeGroup.primary, menu: {
-            mode: 'single-select',
-            items: workGroups,
-            onItemClick: id => {
-                setWorkGroups(currentWorkGroups => {
-                    return menuHelpers.mapTree(currentWorkGroups, group => {
-                        if (id === group.id || group.selected) {
-                            return { ...group, selected: id === group.id };
-                        }
-                        return group;
-                    });
-                });
-            }
-        } }));
-    const taskArray = Array.from({ length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount }, (_, i) => {
+    const [views, setViews] = useState(viewGroups);
+    const activeView = helpers.getSelectedView(views);
+    const activeViewTaskCount = args.count ?? activeView?.count ?? 0;
+    const taskArray = Array.from({
+        length: isLimited
+            ? Math.min(3, args.count ?? activeViewTaskCount)
+            : args.count ?? activeViewTaskCount
+    }, (_, i) => {
         const dueIn = 86400000 * i;
         let status = 'info';
         if (i === 0) {
@@ -80,22 +50,35 @@ export const TasksDemo = (args) => {
                 } })) : null
         };
     });
-    return (_jsx(Tasks, { headerText: args.headerText || 'Tasks', count: activeGroupTaskCount, items: taskArray, headerVisual: args.showHeaderVisual && activeGroup ? (_jsx(Avatar, { size: 'l', name: activeGroup.primary })) : undefined, headerSecondary: args.showHeaderSecondary ? groupSelection : undefined, emptyPlaceholder: _jsx(EmptyState, {}), onExpandToggle: () => {
-            setIsLimited(cur => !cur);
-        } }));
+    return (_jsx(Tasks, { name: args.name ?? 'Tasks', count: activeViewTaskCount, items: taskArray, avatar: args.showVisual && activeView ? { name: activeView.text } : undefined, viewSelector: args.showViewSelector
+            ? {
+                views,
+                onViewSelect: id => {
+                    setViews(cur => helpers.selectView(cur, id));
+                }
+            }
+            : undefined, onExpandToggle: args.enableExpand && activeViewTaskCount > 3
+            ? () => {
+                setIsLimited(cur => !cur);
+            }
+            : undefined, search: args.search ? {} : undefined }));
 };
 TasksDemo.args = {
-    headerText: 'Tasks',
-    showHeaderVisual: true,
-    showHeaderSecondary: true,
+    name: 'Assignments',
+    showVisual: true,
+    showViewSelector: true,
+    enableExpand: true,
+    openableTasks: true,
     count: undefined,
-    openableTasks: true
+    search: false
 };
 TasksDemo.argTypes = {
-    headerText: { control: { type: 'text' } },
-    showHeaderVisual: { control: { type: 'boolean' } },
-    showHeaderSecondary: { control: { type: 'boolean' } },
+    name: { control: { type: 'text' } },
+    showVisual: { control: { type: 'boolean' } },
+    showViewSelector: { control: { type: 'boolean' } },
+    enableExpand: { control: { type: 'boolean' } },
     count: { control: { type: 'number' } },
-    openableTasks: { control: { type: 'boolean' } }
+    openableTasks: { control: { type: 'boolean' } },
+    search: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Tasks.stories.js.map

package/lib/work/Tasks/Tasks.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tasks.stories.js","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,MAAM,EACN,MAAM,EACN,UAAU,EAEV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,EACN,IAAI,EACJ,eAAe,EAEf,UAAU,EACV,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAA6B,MAAM,yBAAyB,CAAC;AAE3E,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAUV,MAAM,CAAC,MAAM,SAAS,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACzE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAkD,EAAE,EAAE;QAC9F,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,QAAQ,uBAAiB,EAC1C,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,uBAElC,IACR,YAGL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aAClD,KAAC,KAAK,IAAC,KAAK,EAAC,cAAc,EAAC,QAAQ,SAAG,EACvC,KAAC,KAAK,IAAC,KAAK,EAAC,cAAc,GAAG,EAC9B,KAAC,WAAW,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,cAAc,GAAG,EACxD,KAAC,QAAQ,IAAC,KAAK,EAAC,eAAe,EAAC,QAAQ,SAAG,EAC3C,MAAC,eAAe,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,YAAY,aACzD,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,EAAC,cAAc,SAAG,EAC/C,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,GAAG,EAChC,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,GAAG,IAChB,EAClB,KAAC,QAAQ,IAAC,KAAK,EAAC,sBAAsB,EAAC,QAAQ,SAAG,EAClD,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,GAAG,EAChC,KAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,IAC/B,GACF,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,GAAG,EAAE;QACpE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO;gBACL,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE;gBACd,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE;gBAC7B,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;gBACnF,QAAQ,EAAE,CAAC,KAAK,CAAC;gBACjB,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAI;aACnD,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3D,MAAM,oBAAoB,GAAG,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,GAAG,CAAC,EAAE;YAClB,OAAO,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;gBACrB,IAAI,KAAK,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,EAAE;oBAC/B,kEAAkE;oBAClE,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAM,EAAE,CAAC;iBACzC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjB,MAAM,cAAc,GAAG,CACrB,KAAC,UAAU,IACT,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,IAAI,EAAE;YACJ,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,UAAU;YACjB,WAAW,EAAE,EAAE,CAAC,EAAE;gBAChB,aAAa,CAAC,iBAAiB,CAAC,EAAE;oBAChC,OAAO,WAAW,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE;wBACpD,IAAI,EAAE,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE;4BACrC,OAAO,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,KAAK,CAAC,EAAE,EAAE,CAAC;yBAChD;wBAED,OAAO,KAAK,CAAC;oBACf,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC;SACF,GACD,CACH,CAAC;IAEF,MAAM,SAAS,GAAoB,KAAK,CAAC,IAAI,CAC3C,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAChF,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACP,MAAM,KAAK,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC3B,IAAI,MAAM,GAA2B,MAAM,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,EAAE;YACX,MAAM,GAAG,QAAQ,CAAC;SACnB;aAAM,IAAI,CAAC,KAAK,CAAC,EAAE;YAClB,MAAM,GAAG,MAAM,CAAC;SACjB;QAED,OAAO;YACL,EAAE,EAAE,GAAG,CAAC,EAAE;YACV,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;YACrB,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,CACJ,KAAC,QAAQ,IACP,KAAK,EAAE;oBACL,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,YAAG,MAAM,GAAU;oBAC1C,MAAC,IAAI,IAAC,OAAO,EAAC,WAAW,qBACnB,KAAC,eAAe,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,GAAI,IAChE;oBACP,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,iCAAwB;iBAC3C,GACD,CACH;YACD,MAAM,EACJ,IAAI,CAAC,aAAa,KAAK,KAAK;gBAC1B,CAAC,CAAC,GAAG,EAAE;oBACH,cAAc,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;gBACH,CAAC,CAAC,SAAS;YACf,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CACrB,KAAC,YAAY,IACX,QAAQ,EAAE,GAAG,EAAE;oBACb,cAAc,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;oBACb,cAAc,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC,GACD,CACH,CAAC,CAAC,CAAC,IAAI;SACT,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,IACJ,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,OAAO,EACtC,KAAK,EAAE,oBAAoB,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EACV,IAAI,CAAC,gBAAgB,IAAI,WAAW,CAAC,CAAC,CAAC,CACrC,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,WAAW,CAAC,OAAO,GAAI,CAC/C,CAAC,CAAC,CAAC,SAAS,EAEf,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACtE,gBAAgB,EAAE,KAAC,UAAU,KAAG,EAChC,cAAc,EAAE,GAAG,EAAE;YACnB,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,UAAU,EAAE,OAAO;IACnB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,IAAI;IACzB,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACrD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAChD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  Avatar,\n  Button,\n  MenuButton,\n  MenuProps,\n  MetaList,\n  Text,\n  Form,\n  Input,\n  TextArea,\n  RadioCheckGroup,\n  RadioButton,\n  Checkbox,\n  DateInput,\n  NumberInput,\n  FileInput,\n  menuHelpers,\n  Status,\n  Link,\n  DateTimeDisplay,\n  StatusProps,\n  EmptyState,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Tasks',\n  component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n  headerText?: TasksProps['headerText'];\n  showHeaderVisual?: boolean;\n  showHeaderSecondary?: boolean;\n  count?: TasksProps['count'];\n  openableTasks?: boolean;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n  const [isLimited, setIsLimited] = useState(true);\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n\n  const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n    return (\n      <Form\n        actions={\n          <>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button variant='primary' onClick={onSubmit}>\n              Submit\n            </Button>\n          </>\n        }\n      >\n        <Flex container={{ direction: 'column', itemGap: 2 }}>\n          <Input label='Text field 1' required />\n          <Input label='Text field 2' />\n          <NumberInput onChange={() => {}} label='Number field' />\n          <Checkbox label='Boolean field' required />\n          <RadioCheckGroup label='Picklist options' name='picklist-1'>\n            <RadioButton label='option 1' defaultChecked />\n            <RadioButton label='option 2' />\n            <RadioButton label='option 3' />\n          </RadioCheckGroup>\n          <TextArea label='Text paragraph field' required />\n          <FileInput label='File field' />\n          <DateInput label='Datetime field' />\n        </Flex>\n      </Form>\n    );\n  };\n\n  const [workGroups, setWorkGroups] = useState<MenuProps['items']>(() => {\n    return Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i + 1}`,\n        primary: `Workgroup ${i + 1}`,\n        count: typeof args.count === 'number' ? args.count : Math.floor(Math.random() * 10),\n        selected: i === 0,\n        visual: <Avatar size='l' name={`Team ${i + 1}`} />\n      };\n    });\n  });\n\n  const activeGroup = menuHelpers.getSelected(workGroups)[0];\n  const activeGroupTaskCount = activeGroup?.count ?? 0;\n\n  useEffect(() => {\n    setWorkGroups(cur => {\n      return cur.map(group => {\n        if (group.id === activeGroup.id) {\n          // Asserting as args.count changes will always be a number in demo\n          return { ...group, count: args.count! };\n        }\n\n        return group;\n      });\n    });\n  }, [args.count]);\n\n  const groupSelection = (\n    <MenuButton\n      variant='text'\n      text={activeGroup.primary}\n      menu={{\n        mode: 'single-select',\n        items: workGroups,\n        onItemClick: id => {\n          setWorkGroups(currentWorkGroups => {\n            return menuHelpers.mapTree(currentWorkGroups, group => {\n              if (id === group.id || group.selected) {\n                return { ...group, selected: id === group.id };\n              }\n\n              return group;\n            });\n          });\n        }\n      }}\n    />\n  );\n\n  const taskArray: TaskItemProps[] = Array.from(\n    { length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount },\n    (_, i) => {\n      const dueIn = 86400000 * i;\n      let status: StatusProps['variant'] = 'info';\n\n      if (i === 0) {\n        status = 'urgent';\n      } else if (i === 1) {\n        status = 'warn';\n      }\n\n      return {\n        id: `${i}`,\n        name: `Task ${i + 1}`,\n        processName: i % 2 ? 'Demo process' : undefined,\n        meta: (\n          <MetaList\n            items={[\n              <Status variant={status}>{status}</Status>,\n              <Text variant='secondary'>\n                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n              </Text>,\n              <Link href='#demo'>Parent case link</Link>\n            ]}\n          />\n        ),\n        onOpen:\n          args.openableTasks !== false\n            ? () => {\n                setHasOpenTask(true);\n              }\n            : undefined,\n        content: hasOpenTask ? (\n          <DemoTaskForm\n            onSubmit={() => {\n              setHasOpenTask(false);\n            }}\n            onCancel={() => {\n              setHasOpenTask(false);\n            }}\n          />\n        ) : null\n      };\n    }\n  );\n\n  return (\n    <Tasks\n      headerText={args.headerText || 'Tasks'}\n      count={activeGroupTaskCount}\n      items={taskArray}\n      headerVisual={\n        args.showHeaderVisual && activeGroup ? (\n          <Avatar size='l' name={activeGroup.primary} />\n        ) : undefined\n      }\n      headerSecondary={args.showHeaderSecondary ? groupSelection : undefined}\n      emptyPlaceholder={<EmptyState />}\n      onExpandToggle={() => {\n        setIsLimited(cur => !cur);\n      }}\n    />\n  );\n};\n\nTasksDemo.args = {\n  headerText: 'Tasks',\n  showHeaderVisual: true,\n  showHeaderSecondary: true,\n  count: undefined,\n  openableTasks: true\n};\n\nTasksDemo.argTypes = {\n  headerText: { control: { type: 'text' } },\n  showHeaderVisual: { control: { type: 'boolean' } },\n  showHeaderSecondary: { control: { type: 'boolean' } },\n  count: { control: { type: 'number' } },\n  openableTasks: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Tasks.stories.js","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  MetaList,\n  Text,\n  Form,\n  Input,\n  TextArea,\n  RadioCheckGroup,\n  RadioButton,\n  Checkbox,\n  DateInput,\n  NumberInput,\n  FileInput,\n  Status,\n  Link,\n  DateTimeDisplay,\n  StatusProps,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps, tasksHelpers as helpers } from '@pega/cosmos-react-work';\n\nimport viewGroups from './Tasks.mocks';\n\nexport default {\n  title: 'Work/Tasks',\n  component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n  name?: TasksProps['name'];\n  showVisual?: boolean;\n  showViewSelector?: boolean;\n  enableExpand?: boolean;\n  count?: TasksProps['count'];\n  openableTasks?: boolean;\n  search?: boolean;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n  const [isLimited, setIsLimited] = useState(true);\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n\n  const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n    return (\n      <Form\n        actions={\n          <>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button variant='primary' onClick={onSubmit}>\n              Submit\n            </Button>\n          </>\n        }\n      >\n        <Flex container={{ direction: 'column', itemGap: 2 }}>\n          <Input label='Text field 1' required />\n          <Input label='Text field 2' />\n          <NumberInput onChange={() => {}} label='Number field' />\n          <Checkbox label='Boolean field' required />\n          <RadioCheckGroup label='Picklist options' name='picklist-1'>\n            <RadioButton label='option 1' defaultChecked />\n            <RadioButton label='option 2' />\n            <RadioButton label='option 3' />\n          </RadioCheckGroup>\n          <TextArea label='Text paragraph field' required />\n          <FileInput label='File field' />\n          <DateInput label='Datetime field' />\n        </Flex>\n      </Form>\n    );\n  };\n\n  const [views, setViews] = useState(viewGroups);\n\n  const activeView = helpers.getSelectedView(views);\n  const activeViewTaskCount = args.count ?? activeView?.count ?? 0;\n\n  const taskArray: TaskItemProps[] = Array.from(\n    {\n      length: isLimited\n        ? Math.min(3, args.count ?? activeViewTaskCount)\n        : args.count ?? activeViewTaskCount\n    },\n    (_, i) => {\n      const dueIn = 86400000 * i;\n      let status: StatusProps['variant'] = 'info';\n\n      if (i === 0) {\n        status = 'urgent';\n      } else if (i === 1) {\n        status = 'warn';\n      }\n\n      return {\n        id: `${i}`,\n        name: `Task ${i + 1}`,\n        processName: i % 2 ? 'Demo process' : undefined,\n        meta: (\n          <MetaList\n            items={[\n              <Status variant={status}>{status}</Status>,\n              <Text variant='secondary'>\n                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n              </Text>,\n              <Link href='#demo'>Parent case link</Link>\n            ]}\n          />\n        ),\n        onOpen:\n          args.openableTasks !== false\n            ? () => {\n                setHasOpenTask(true);\n              }\n            : undefined,\n        content: hasOpenTask ? (\n          <DemoTaskForm\n            onSubmit={() => {\n              setHasOpenTask(false);\n            }}\n            onCancel={() => {\n              setHasOpenTask(false);\n            }}\n          />\n        ) : null\n      };\n    }\n  );\n\n  return (\n    <Tasks\n      name={args.name ?? 'Tasks'}\n      count={activeViewTaskCount}\n      items={taskArray}\n      avatar={args.showVisual && activeView ? { name: activeView.text } : undefined}\n      viewSelector={\n        args.showViewSelector\n          ? {\n              views,\n              onViewSelect: id => {\n                setViews(cur => helpers.selectView(cur, id) as typeof viewGroups);\n              }\n            }\n          : undefined\n      }\n      onExpandToggle={\n        args.enableExpand && activeViewTaskCount > 3\n          ? () => {\n              setIsLimited(cur => !cur);\n            }\n          : undefined\n      }\n      search={args.search ? {} : undefined}\n    />\n  );\n};\n\nTasksDemo.args = {\n  name: 'Assignments',\n  showVisual: true,\n  showViewSelector: true,\n  enableExpand: true,\n  openableTasks: true,\n  count: undefined,\n  search: false\n};\n\nTasksDemo.argTypes = {\n  name: { control: { type: 'text' } },\n  showVisual: { control: { type: 'boolean' } },\n  showViewSelector: { control: { type: 'boolean' } },\n  enableExpand: { control: { type: 'boolean' } },\n  count: { control: { type: 'number' } },\n  openableTasks: { control: { type: 'boolean' } },\n  search: { control: { type: 'boolean' } }\n};\n"]}

package/lib/work/Timeline/Timeline.stories.d.ts

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react';
 import { OmitStrict } from '@pega/cosmos-react-core';
 import { TimelineProps } from '@pega/cosmos-react-work';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface TimelineDemoStoryProps extends TimelineProps {
     lazyLoading?: boolean;

package/lib/wss/AppShell/AppShell.stories.d.ts

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react';
 import { ReactNode } from 'react';
 import { AppShellProps } from '@pega/cosmos-react-wss';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface AppShellDemoProps {
     appName?: AppShellProps['appInfo']['appName'];

package/lib/wss/AppShell/AppShell.stories.js

@@ -73,7 +73,6 @@ export const AppShellDemo = (args) => {
         }, navAlignment: args.navAlignment, navPosition: args.navPosition }));
 };
 AppShellDemo.args = defaultAppDemoProps;
-// eslint-disable-next-line demo-patterns/args-match-types
 AppShellDemo.argTypes = {
     imageSrc: { control: { type: 'text' } },
     appName: { control: { type: 'text' } },

package/lib/wss/AppShell/AppShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { AppShell, AppShellProps, NotificationItem } from '@pega/cosmos-react-wss';\nimport { ContextSwitcherProps, Icon } from '@pega/cosmos-react-core';\n\nimport { DefaultMainContent, notificationItems, defaultAppDemoProps } from './AppShell.mocks';\n\nexport default {\n  title: 'Web Self Service/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellDemoProps {\n  appName?: AppShellProps['appInfo']['appName'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  numberOfNavLinks?: number;\n  navAlignment?: AppShellProps['navAlignment'];\n  navPosition?: AppShellProps['navPosition'];\n  operatorName?: AppShellProps['operator']['avatar']['name'];\n  operatorTitle?: AppShellProps['operator']['title'];\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  mainContent?: ReactNode;\n}\n\nexport const AppShellDemo: Story<AppShellDemoProps> = (args: AppShellDemoProps) => {\n  const [mainContent, setMainContent] = useState('Home');\n  const [notifications, setNotifications] = useState<NotificationItem[]>(notificationItems);\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n    {\n      id: '1',\n      primary: 'Medical',\n      selected: true,\n      visual: <Icon name='heart-pulse-solid' />\n    },\n    {\n      id: '2',\n      primary: 'Vision',\n      selected: false,\n      visual: <Icon name='glasses-solid' />\n    }\n  ]);\n\n  return (\n    <AppShell\n      main={args.mainContent ?? <DefaultMainContent content={mainContent} />}\n      appInfo={{\n        appName: args.appName ?? defaultAppDemoProps.appName,\n        imageSrc: args.imageSrc ?? defaultAppDemoProps.imageSrc,\n        onClick: () => setMainContent('Home')\n      }}\n      contextSwitcher={{\n        contexts,\n        onContextClick: (id: string) =>\n          setContexts(cur => cur!.map(ctx => ({ ...ctx, selected: id === ctx.id })))\n      }}\n      navLinks={Array.from({\n        length: args.numberOfNavLinks ?? defaultAppDemoProps.numberOfNavLinks\n      }).map((_, index) => {\n        const navName = `Navigation ${index + 1}`;\n\n        return {\n          id: `nav-${index + 1}`,\n          text: navName,\n          href: '#',\n          onClick: () => setMainContent(navName),\n          current: navName === mainContent\n        };\n      })}\n      operator={{\n        avatar: { name: args.operatorName ?? defaultAppDemoProps.operatorName },\n        title: args.operatorTitle ?? defaultAppDemoProps.operatorTitle,\n        actions: [\n          { id: 'profile', primary: 'My profile', href: '#' },\n          { id: 'settings', primary: 'Settings', href: '#' },\n          { id: 'logOut', primary: 'Log out', href: '#' }\n        ]\n      }}\n      notifications={{\n        title: 'Notifications',\n        count: numNewNotifications,\n        items: args.notificationsEmpty ? [] : notifications,\n        onItemClick: handleNotificationClick,\n        loading: args.notificationsLoading ?? defaultAppDemoProps.notificationsLoading,\n        onNotificationsOpen: () => {\n          setNumNewNotifications(0);\n        }\n      }}\n      navAlignment={args.navAlignment}\n      navPosition={args.navPosition}\n    />\n  );\n};\n\nAppShellDemo.args = defaultAppDemoProps;\n\n// eslint-disable-next-line demo-patterns/args-match-types\nAppShellDemo.argTypes = {\n  imageSrc: { control: { type: 'text' } },\n  appName: { control: { type: 'text' } },\n  numberOfNavLinks: { control: { type: 'number' } },\n  navAlignment: { options: ['start', 'center', 'end'], control: { type: 'select' } },\n  navPosition: { options: ['inline', 'below'], control: { type: 'select' } },\n  operatorName: { control: { type: 'text' } },\n  operatorTitle: { control: { type: 'text' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { AppShell, AppShellProps, NotificationItem } from '@pega/cosmos-react-wss';\nimport { ContextSwitcherProps, Icon } from '@pega/cosmos-react-core';\n\nimport { DefaultMainContent, notificationItems, defaultAppDemoProps } from './AppShell.mocks';\n\nexport default {\n  title: 'Web Self Service/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellDemoProps {\n  appName?: AppShellProps['appInfo']['appName'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  numberOfNavLinks?: number;\n  navAlignment?: AppShellProps['navAlignment'];\n  navPosition?: AppShellProps['navPosition'];\n  operatorName?: AppShellProps['operator']['avatar']['name'];\n  operatorTitle?: AppShellProps['operator']['title'];\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  mainContent?: ReactNode;\n}\n\nexport const AppShellDemo: Story<AppShellDemoProps> = (args: AppShellDemoProps) => {\n  const [mainContent, setMainContent] = useState('Home');\n  const [notifications, setNotifications] = useState<NotificationItem[]>(notificationItems);\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n    {\n      id: '1',\n      primary: 'Medical',\n      selected: true,\n      visual: <Icon name='heart-pulse-solid' />\n    },\n    {\n      id: '2',\n      primary: 'Vision',\n      selected: false,\n      visual: <Icon name='glasses-solid' />\n    }\n  ]);\n\n  return (\n    <AppShell\n      main={args.mainContent ?? <DefaultMainContent content={mainContent} />}\n      appInfo={{\n        appName: args.appName ?? defaultAppDemoProps.appName,\n        imageSrc: args.imageSrc ?? defaultAppDemoProps.imageSrc,\n        onClick: () => setMainContent('Home')\n      }}\n      contextSwitcher={{\n        contexts,\n        onContextClick: (id: string) =>\n          setContexts(cur => cur!.map(ctx => ({ ...ctx, selected: id === ctx.id })))\n      }}\n      navLinks={Array.from({\n        length: args.numberOfNavLinks ?? defaultAppDemoProps.numberOfNavLinks\n      }).map((_, index) => {\n        const navName = `Navigation ${index + 1}`;\n\n        return {\n          id: `nav-${index + 1}`,\n          text: navName,\n          href: '#',\n          onClick: () => setMainContent(navName),\n          current: navName === mainContent\n        };\n      })}\n      operator={{\n        avatar: { name: args.operatorName ?? defaultAppDemoProps.operatorName },\n        title: args.operatorTitle ?? defaultAppDemoProps.operatorTitle,\n        actions: [\n          { id: 'profile', primary: 'My profile', href: '#' },\n          { id: 'settings', primary: 'Settings', href: '#' },\n          { id: 'logOut', primary: 'Log out', href: '#' }\n        ]\n      }}\n      notifications={{\n        title: 'Notifications',\n        count: numNewNotifications,\n        items: args.notificationsEmpty ? [] : notifications,\n        onItemClick: handleNotificationClick,\n        loading: args.notificationsLoading ?? defaultAppDemoProps.notificationsLoading,\n        onNotificationsOpen: () => {\n          setNumNewNotifications(0);\n        }\n      }}\n      navAlignment={args.navAlignment}\n      navPosition={args.navPosition}\n    />\n  );\n};\n\nAppShellDemo.args = defaultAppDemoProps;\n\nAppShellDemo.argTypes = {\n  imageSrc: { control: { type: 'text' } },\n  appName: { control: { type: 'text' } },\n  numberOfNavLinks: { control: { type: 'number' } },\n  navAlignment: { options: ['start', 'center', 'end'], control: { type: 'select' } },\n  navPosition: { options: ['inline', 'below'], control: { type: 'select' } },\n  operatorName: { control: { type: 'text' } },\n  operatorTitle: { control: { type: 'text' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } }\n};\n"]}

package/lib/wss/CaseView/CaseView.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface CaseViewDemoProps {
     showStagesRegion?: boolean;

package/lib/wss/PageTemplates/PageTemplates.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface BannerPageStoryProps {
     title: string;

package/lib/wss/QuickCreate/QuickCreate.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface QuickCreateDemoArgs {
     borderRadius: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "4.0.0-dev.13.0",
+  "version": "4.0.0-dev.14.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,18 +20,28 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-condition-builder": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-core": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-cs": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-rte": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-social": "4.0.0-dev.13.0",
-    "@pega/cosmos-react-work": "4.0.0-dev.13.0",
+    "@pega/cosmos-react-build": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-condition-builder": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-core": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-cs": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-rte": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-social": "4.0.0-dev.14.0",
+    "@pega/cosmos-react-work": "4.0.0-dev.14.0",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
+    "@types/dompurify": "^2.3.4",
     "@types/emoji-mart": "^3.0.4",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",
+    "dompurify": "^2.4.0",
     "emoji-mart": "^3.0.1",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
@@ -40,14 +50,6 @@
     "tinymce": "^6.3.1"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addon-toolbars": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
-    "typescript": "~4.9.5"
+    "typescript": "~5.0.2"
   }
 }

package/jsx/core/Dialog/Dialog.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAKL,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,YAAY,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAC1B;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAC3C,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;CAChB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;CAC5B,CAAC;AAEN,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IAC1E,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;IACrE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AA8CD,eAAO,MAAM,YAAY,kEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,qDAKpB,mBAAmB,gBAsIrB,CAAC"}

package/jsx/core/Dialog/Dialog.mocks.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useEffect, useReducer, useState } from 'react';\n\nimport {\n  ComboBox,\n  createUID,\n  Flex,\n  FormDialog,\n  FormDialogProps,\n  Input\n} from '@pega/cosmos-react-core';\n\nexport type MockCategory = `Category ${number}`;\n\nexport interface MockItem {\n  readonly id: string;\n  name: string;\n  category: MockCategory;\n}\n\nexport type MockReducerPayload =\n  | {\n      type: 'add';\n      item: Pick<MockItem, 'name' | 'category'>;\n    }\n  | {\n      type: 'edit';\n      item: MockItem;\n    }\n  | {\n      type: 'remove';\n      item: Pick<MockItem, 'id'>;\n    };\n\nexport interface MockItemDialogProps extends Pick<FormDialogProps, 'target'> {\n  item: MockItem | null;\n  dispatch: (fieldValues: Pick<MockItem, 'name' | 'category'>) => void;\n  onComplete: () => void;\n}\n\nconst errorText = 'Cannot be blank';\n\nconst categories = Array.from({ length: 5 }, (_, i): MockCategory => `Category ${i + 1}`);\n\nconst initialItems: MockItem[] = Array.from({ length: 3 }, (_, i) => {\n  return {\n    id: createUID(),\n    name: `Editable item ${i + 1}`,\n    category: categories[i]\n  };\n});\n\nconst itemReducer = (items: MockItem[], payload: MockReducerPayload) => {\n  switch (payload.type) {\n    case 'add': {\n      return [...items, { ...payload.item, id: createUID() }];\n    }\n\n    case 'edit': {\n      return items.map(item => {\n        return item.id === payload.item.id\n          ? { ...item, name: payload.item.name, category: payload.item.category }\n          : item;\n      });\n    }\n\n    case 'remove': {\n      const itemIndex = items.findIndex(item => item.id === payload.item.id);\n      if (itemIndex === -1) return items;\n      items.splice(itemIndex, 1);\n      return [...items];\n    }\n\n    default: {\n      return items;\n    }\n  }\n};\n\nconst progressStates = {\n  loading: 'Loading...',\n  submitting: 'Submitting...'\n} as const;\n\nexport const useMockItems = () => {\n  return useReducer(itemReducer, undefined, () => initialItems);\n};\n\nexport const ItemDialog = ({\n  target,\n  item: itemProp,\n  dispatch,\n  onComplete\n}: MockItemDialogProps) => {\n  const [nameField, setNameField] = useState<{\n    value: string | null;\n    error: typeof errorText | null;\n    errorOnPriorBlur: boolean;\n  }>(() => {\n    return {\n      value: itemProp?.name ?? null,\n      error: null,\n      errorOnPriorBlur: false\n    };\n  });\n\n  const [categoryField, setCategoryField] = useState<{\n    value: MockCategory | null;\n    error: typeof errorText | null;\n  }>(() => {\n    return {\n      value: itemProp?.category ?? null,\n      error: null\n    };\n  });\n\n  const [progress, setProgress] = useState<\n    typeof progressStates[keyof typeof progressStates] | false\n  >(progressStates.loading);\n\n  useEffect(() => {\n    let timerId: number;\n\n    if (progress === progressStates.loading) {\n      timerId = window.setTimeout(() => {\n        setProgress(false);\n      }, 1000);\n    } else if (progress === progressStates.submitting) {\n      timerId = window.setTimeout(() => {\n        setProgress(false);\n        dispatch({ name: nameField.value!, category: categoryField.value! });\n        onComplete();\n      }, 2000);\n    }\n\n    return () => {\n      window.clearTimeout(timerId);\n    };\n  }, [progress]);\n\n  return (\n    <FormDialog\n      target={target}\n      heading={`${itemProp ? 'Edit' : 'Add'} item`}\n      progress={progress}\n      onCancel={{\n        handler: () => {\n          setProgress(false);\n          onComplete();\n        }\n      }}\n      onSubmit={{\n        disabled:\n          !!progress || [nameField, categoryField].some(field => !field.value || field.error),\n        handler: () => {\n          setProgress(progressStates.submitting);\n        }\n      }}\n    >\n      {(!progress || progress !== progressStates.loading) && (\n        <Flex container={{ direction: 'column', gap: 2 }}>\n          <Input\n            required\n            label='Name'\n            value={nameField.value ?? ''}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              setNameField(cur => ({\n                ...cur,\n                value: e.target.value,\n                error: !e.target.value && cur.errorOnPriorBlur ? errorText : null\n              }));\n            }}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              if (!e.target.value) {\n                setNameField(cur => ({\n                  ...cur,\n                  error: errorText,\n                  errorOnPriorBlur: true\n                }));\n              } else if (nameField.errorOnPriorBlur) {\n                setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));\n              }\n            }}\n            status={nameField.error ? 'error' : undefined}\n            info={nameField.error}\n          />\n          <ComboBox\n            required\n            label='Category'\n            selected={\n              categoryField.value\n                ? {\n                    items: {\n                      id: categoryField.value,\n                      text: categoryField.value\n                    }\n                  }\n                : undefined\n            }\n            menu={{\n              mode: 'single-select',\n              onItemClick: category => {\n                setCategoryField({\n                  value: category as MockCategory,\n                  error: null\n                });\n              },\n              items: categories.map(category => {\n                return {\n                  id: category,\n                  primary: category,\n                  selected: category === categoryField.value\n                };\n              })\n            }}\n            onBlur={selected => {\n              if (!selected) {\n                setCategoryField(cur => ({ ...cur, error: errorText }));\n              }\n            }}\n            status={categoryField.error ? 'error' : undefined}\n            info={categoryField.error}\n          />\n        </Flex>\n      )}\n    </FormDialog>\n  );\n};\n"]}

package/lib/core/Dialog/Dialog.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAKL,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,YAAY,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAC1B;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAC3C,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;CAChB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;CAC5B,CAAC;AAEN,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IAC1E,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;IACrE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AA8CD,eAAO,MAAM,YAAY,kEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,qDAKpB,mBAAmB,gBAsIrB,CAAC"}

package/lib/core/Dialog/Dialog.mocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.mocks.js","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useEffect, useReducer, useState } from 'react';\n\nimport {\n  ComboBox,\n  createUID,\n  Flex,\n  FormDialog,\n  FormDialogProps,\n  Input\n} from '@pega/cosmos-react-core';\n\nexport type MockCategory = `Category ${number}`;\n\nexport interface MockItem {\n  readonly id: string;\n  name: string;\n  category: MockCategory;\n}\n\nexport type MockReducerPayload =\n  | {\n      type: 'add';\n      item: Pick<MockItem, 'name' | 'category'>;\n    }\n  | {\n      type: 'edit';\n      item: MockItem;\n    }\n  | {\n      type: 'remove';\n      item: Pick<MockItem, 'id'>;\n    };\n\nexport interface MockItemDialogProps extends Pick<FormDialogProps, 'target'> {\n  item: MockItem | null;\n  dispatch: (fieldValues: Pick<MockItem, 'name' | 'category'>) => void;\n  onComplete: () => void;\n}\n\nconst errorText = 'Cannot be blank';\n\nconst categories = Array.from({ length: 5 }, (_, i): MockCategory => `Category ${i + 1}`);\n\nconst initialItems: MockItem[] = Array.from({ length: 3 }, (_, i) => {\n  return {\n    id: createUID(),\n    name: `Editable item ${i + 1}`,\n    category: categories[i]\n  };\n});\n\nconst itemReducer = (items: MockItem[], payload: MockReducerPayload) => {\n  switch (payload.type) {\n    case 'add': {\n      return [...items, { ...payload.item, id: createUID() }];\n    }\n\n    case 'edit': {\n      return items.map(item => {\n        return item.id === payload.item.id\n          ? { ...item, name: payload.item.name, category: payload.item.category }\n          : item;\n      });\n    }\n\n    case 'remove': {\n      const itemIndex = items.findIndex(item => item.id === payload.item.id);\n      if (itemIndex === -1) return items;\n      items.splice(itemIndex, 1);\n      return [...items];\n    }\n\n    default: {\n      return items;\n    }\n  }\n};\n\nconst progressStates = {\n  loading: 'Loading...',\n  submitting: 'Submitting...'\n} as const;\n\nexport const useMockItems = () => {\n  return useReducer(itemReducer, undefined, () => initialItems);\n};\n\nexport const ItemDialog = ({\n  target,\n  item: itemProp,\n  dispatch,\n  onComplete\n}: MockItemDialogProps) => {\n  const [nameField, setNameField] = useState<{\n    value: string | null;\n    error: typeof errorText | null;\n    errorOnPriorBlur: boolean;\n  }>(() => {\n    return {\n      value: itemProp?.name ?? null,\n      error: null,\n      errorOnPriorBlur: false\n    };\n  });\n\n  const [categoryField, setCategoryField] = useState<{\n    value: MockCategory | null;\n    error: typeof errorText | null;\n  }>(() => {\n    return {\n      value: itemProp?.category ?? null,\n      error: null\n    };\n  });\n\n  const [progress, setProgress] = useState<\n    typeof progressStates[keyof typeof progressStates] | false\n  >(progressStates.loading);\n\n  useEffect(() => {\n    let timerId: number;\n\n    if (progress === progressStates.loading) {\n      timerId = window.setTimeout(() => {\n        setProgress(false);\n      }, 1000);\n    } else if (progress === progressStates.submitting) {\n      timerId = window.setTimeout(() => {\n        setProgress(false);\n        dispatch({ name: nameField.value!, category: categoryField.value! });\n        onComplete();\n      }, 2000);\n    }\n\n    return () => {\n      window.clearTimeout(timerId);\n    };\n  }, [progress]);\n\n  return (\n    <FormDialog\n      target={target}\n      heading={`${itemProp ? 'Edit' : 'Add'} item`}\n      progress={progress}\n      onCancel={{\n        handler: () => {\n          setProgress(false);\n          onComplete();\n        }\n      }}\n      onSubmit={{\n        disabled:\n          !!progress || [nameField, categoryField].some(field => !field.value || field.error),\n        handler: () => {\n          setProgress(progressStates.submitting);\n        }\n      }}\n    >\n      {(!progress || progress !== progressStates.loading) && (\n        <Flex container={{ direction: 'column', gap: 2 }}>\n          <Input\n            required\n            label='Name'\n            value={nameField.value ?? ''}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              setNameField(cur => ({\n                ...cur,\n                value: e.target.value,\n                error: !e.target.value && cur.errorOnPriorBlur ? errorText : null\n              }));\n            }}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              if (!e.target.value) {\n                setNameField(cur => ({\n                  ...cur,\n                  error: errorText,\n                  errorOnPriorBlur: true\n                }));\n              } else if (nameField.errorOnPriorBlur) {\n                setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));\n              }\n            }}\n            status={nameField.error ? 'error' : undefined}\n            info={nameField.error}\n          />\n          <ComboBox\n            required\n            label='Category'\n            selected={\n              categoryField.value\n                ? {\n                    items: {\n                      id: categoryField.value,\n                      text: categoryField.value\n                    }\n                  }\n                : undefined\n            }\n            menu={{\n              mode: 'single-select',\n              onItemClick: category => {\n                setCategoryField({\n                  value: category as MockCategory,\n                  error: null\n                });\n              },\n              items: categories.map(category => {\n                return {\n                  id: category,\n                  primary: category,\n                  selected: category === categoryField.value\n                };\n              })\n            }}\n            onBlur={selected => {\n              if (!selected) {\n                setCategoryField(cur => ({ ...cur, error: errorText }));\n              }\n            }}\n            status={categoryField.error ? 'error' : undefined}\n            info={categoryField.error}\n          />\n        </Flex>\n      )}\n    </FormDialog>\n  );\n};\n"]}