npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.7.0 → 4.0.0-dev.8.1 - Mend

@pega/cosmos-react-demos 4.0.0-dev.7.0 → 4.0.0-dev.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/lib/core/ListToolbar/ListToolbar.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,~~EAGL~~,gBAAgB,~~EAGhB~~,~~gBAAgB,EACjB,~~MAAM,yBAAyB,CAAC;;~~AAWjC~~,wBAGU;AAIV,UAAU,qBAAqB;IAC7B,~~SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,~~cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,~~CA8FxD~~,CAAC;~~AAcF~~,eAAO,MAAM,iBAAiB,EAAE,~~KAc~~/B,CAAC"}
1	+ {"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAA2B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAWpF,wBAGU;AAIV,UAAU,qBAAqB;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+FxD,CAAC;AAYF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC"}

package/lib/core/ListToolbar/ListToolbar.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Card, CardHeader, ListToolbar, MenuButton } from '@pega/cosmos-react-core';
+import { ListToolbar, MenuButton } from '@pega/cosmos-react-core';
 import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
 export default {
     title: 'Core/ListToolbar',
@@ -11,6 +11,7 @@ export const ListToolbarDemo = (args) => {
     const [stagedQueryOptionState, setStagedQueryOptionState] = useState(null);
     const [views, setViews] = useState(mockViews);
     const [currentSort, setCurrentSort] = useState(null);
+    const [searchValue, setSearchValue] = useState('');
     const filterProp = useMemo(() => {
         return {
             value: stagedQueryOptionState,
@@ -61,34 +62,36 @@ export const ListToolbarDemo = (args) => {
             onSubmit: () => { }
         };
     }, []);
-    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(StagedStateDispatchContext.Provider, { value: setStagedQueryOptionState, children: _jsx(ListToolbar, { heading: {
-                        views,
-                        onViewSelect: id => {
-                            setViews(cur => {
-                                return cur.map(view => ({ ...view, selected: view.id === id }));
-                            });
-                        },
-                        defaultId: '1',
-                        appDefaultId: '2'
-                    }, createNew: {
-                        onClick: action('Clicked Create New'),
-                        label: args.createNewLabel
-                    }, search: { onSearchSubmit: action('Search submit') }, count: {
-                        total: 32,
-                        selected: 4
-                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), condensed: args.condensed, formControlProps: { required: args.required } }) }) }) }));
+    return (_jsx(StagedStateDispatchContext.Provider, { value: setStagedQueryOptionState, children: _jsx(ListToolbar, { name: 'Contacts', viewSelector: {
+                views,
+                onViewSelect: id => {
+                    setViews(cur => {
+                        return cur.map(view => ({ ...view, selected: view.id === id }));
+                    });
+                },
+                defaultId: '1',
+                appDefaultId: '2'
+            }, createNew: {
+                onClick: action('Clicked Create New'),
+                label: args.createNewLabel
+            }, search: {
+                onSearchSubmit: action('Search submit'),
+                value: searchValue,
+                onSearchChange: setSearchValue
+            }, count: {
+                total: 32,
+                selected: 4
+            }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), formControlProps: { required: args.required } }) }));
 };
 ListToolbarDemo.args = {
-    condensed: false,
     createNewLabel: undefined,
     required: false
 };
 ListToolbarDemo.argTypes = {
-    condensed: { control: { type: 'boolean' } },
     createNewLabel: { control: { type: 'text' } },
     required: { control: { type: 'boolean' } }
 };
 export const SimpleToolbarDemo = () => {
-    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(ListToolbar, { heading: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions, formControlProps: { required: true } }) }) }));
+    return (_jsx(ListToolbar, { name: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions, formControlProps: { required: true } }));
 };
 //# sourceMappingURL=ListToolbar.stories.js.map

package/lib/core/ListToolbar/ListToolbar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,~~EACL~~,~~IAAI,EACJ,UAAU,EAEV,~~WAAW,~~EACX~~,UAAU,~~EAEX~~,MAAM,yBAAyB,CAAC;~~AAGjC~~,OAAO,EACL,SAAS,EACT,OAAO,EACP,cAAc,EACd,0BAA0B,EAC1B,aAAa,EACd,MAAM,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;~~AAUV~~,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAC;~~IAExE~~,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO;YACL,KAAK,EAAE,sBAAsB;YAC7B,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,GAAG,EAAE;gBACb,yBAAyB,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,yBAAyB,CAAC,GAAG,CAAC,EAAE;oBAC9B,sCAAsC;oBACtC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBACnB,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,MAAM,QAAQ,GAAoB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAClC,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,WAAW,KAAK,KAAK;iBAChC;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,WAAW,KAAK,MAAM;iBACjC;aACF;YACD,WAAW,EAAE,EAAE,CAAC,EAAE;gBAChB,cAAc,CAAC,GAAG,CAAC,EAAE;oBACnB,OAAO,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,EAAiB,CAAC;gBAChD,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO;YACL,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;YAClB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;SACnB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,~~IAAI,cACH,KAAC,UAAU,cACT,KAAC,~~0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,yBAAyB,YACnE,KAAC,WAAW,IACV,~~OAAO~~,EAAE;~~wBACP~~,KAAK;~~wBACL~~,YAAY,EAAE,EAAE,CAAC,EAAE;~~4BACjB~~,QAAQ,CAAC,GAAG,CAAC,EAAE;~~gCACb~~,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;~~4BAClE~~,CAAC,CAAC,CAAC;~~wBACL~~,CAAC;~~wBACD~~,SAAS,EAAE,GAAG;~~wBACd~~,YAAY,EAAE,GAAG;~~qBAClB~~,EACD,SAAS,EAAE;~~wBACT~~,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC;~~wBACrC~~,KAAK,EAAE,IAAI,CAAC,cAAc;~~qBAC3B~~,EACD,MAAM,EAAE,~~EAAE,~~cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,~~EACnD~~,KAAK,EAAE;~~wBACL~~,KAAK,EAAE,EAAE;~~wBACT~~,QAAQ,EAAE,CAAC;~~qBACZ~~,EACD,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,GAAG,EAC7C,~~SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,~~gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAC7C,GACkC,~~GAC3B~~,~~GACR,CACR,~~CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,~~SAAS,EAAE,KAAK;IAChB,~~cAAc,EAAE,SAAS;IACzB,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,~~SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,~~cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,GAAG,EAAE;IAC3C,OAAO,CACL,KAAC,~~IAAI,cACH,KAAC,UAAU,cACT,KAAC,~~WAAW,IACV,~~OAAO~~,EAAC,4BAA4B,~~EACpC~~,MAAM,EAAE,EAAE,cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EACnD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,EACzC,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GACpC,~~GACS~~,~~GACR,CACR,~~CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {~~\n Card,\n CardHeader,\n ListToolbarProps,\n~~ ListToolbar~~,\n~~ MenuButton~~,\n~~ FormControlProps\n} from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n mockViews,\n actions,\n FilterRenderer,\n StagedStateDispatchContext,\n GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n title: 'Core/ListToolbar',\n component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n ~~condensed: ListToolbarProps['condensed'];\n~~ createNewLabel: string;\n required: FormControlProps['required'];\n}\n\nexport const ListToolbarDemo: Story<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object \| null>(null);\n const [views, setViews] = useState(mockViews);\n const [currentSort, setCurrentSort] = useState<SortString \| null>(null);\n\n const filterProp = useMemo(() => {\n return {\n value: stagedQueryOptionState,\n count: undefined,\n renderer: FilterRenderer,\n onCancel: () => {\n setStagedQueryOptionState(null);\n },\n onSubmit: () => {\n setStagedQueryOptionState(cur => {\n // eslint-disable-next-line no-console\n console.table(cur);\n return null;\n });\n }\n };\n }, [stagedQueryOptionState]);\n\n const sortProp: PresetMenuProps = useMemo(() => {\n return {\n mode: 'single-select',\n count: currentSort ? 1 : undefined,\n items: [\n {\n id: 'asc',\n text: 'Ascending',\n icon: 'arrow-up',\n selected: currentSort === 'asc'\n },\n {\n id: 'desc',\n text: 'Descending',\n icon: 'arrow-down',\n selected: currentSort === 'desc'\n }\n ],\n onItemClick: id => {\n setCurrentSort(cur => {\n return cur === id ? null : (id as SortString);\n });\n }\n };\n }, [currentSort]);\n\n const groupProp = useMemo(() => {\n return {\n count: undefined,\n renderer: GroupRenderer,\n onCancel: () => {},\n onSubmit: () => {}\n };\n }, []);\n\n return (\n <~~Card>\n <CardHeader>\n <~~StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n ~~heading~~={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return cur.map(view => ({ ...view, selected: view.id === id }));\n });\n },\n defaultId: '1',\n appDefaultId: '2'\n }}\n createNew={{\n onClick: action('Clicked Create New'),\n label: args.createNewLabel\n }}\n search={{ onSearchSubmit: action('Search submit') }}\n count={{\n total: 32,\n selected: 4\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={<MenuButton text='Edit' />}\n ~~condensed={args.condensed}\n~~ formControlProps={{ required: args.required }}\n />\n </StagedStateDispatchContext.Provider>\n ~~</CardHeader>\n </Card>\n~~ );\n};\n\nListToolbarDemo.args = {\n ~~condensed: false,\n~~ createNewLabel: undefined,\n required: false\n};\n\nListToolbarDemo.argTypes = {\n ~~condensed: { control: { type: 'boolean' } },\n~~ createNewLabel: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n return (\n <~~Card>\n <CardHeader>\n <~~ListToolbar\n ~~heading~~='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={{ required: true }}\n />\n ~~</CardHeader>\n </Card>\n~~ );\n};\n"]}
1	+ {"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { ListToolbar, MenuButton, FormControlProps } from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n mockViews,\n actions,\n FilterRenderer,\n StagedStateDispatchContext,\n GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n title: 'Core/ListToolbar',\n component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n createNewLabel: string;\n required: FormControlProps['required'];\n}\n\nexport const ListToolbarDemo: Story<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object \| null>(null);\n const [views, setViews] = useState(mockViews);\n const [currentSort, setCurrentSort] = useState<SortString \| null>(null);\n const [searchValue, setSearchValue] = useState('');\n\n const filterProp = useMemo(() => {\n return {\n value: stagedQueryOptionState,\n count: undefined,\n renderer: FilterRenderer,\n onCancel: () => {\n setStagedQueryOptionState(null);\n },\n onSubmit: () => {\n setStagedQueryOptionState(cur => {\n // eslint-disable-next-line no-console\n console.table(cur);\n return null;\n });\n }\n };\n }, [stagedQueryOptionState]);\n\n const sortProp: PresetMenuProps = useMemo(() => {\n return {\n mode: 'single-select',\n count: currentSort ? 1 : undefined,\n items: [\n {\n id: 'asc',\n text: 'Ascending',\n icon: 'arrow-up',\n selected: currentSort === 'asc'\n },\n {\n id: 'desc',\n text: 'Descending',\n icon: 'arrow-down',\n selected: currentSort === 'desc'\n }\n ],\n onItemClick: id => {\n setCurrentSort(cur => {\n return cur === id ? null : (id as SortString);\n });\n }\n };\n }, [currentSort]);\n\n const groupProp = useMemo(() => {\n return {\n count: undefined,\n renderer: GroupRenderer,\n onCancel: () => {},\n onSubmit: () => {}\n };\n }, []);\n\n return (\n <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n name='Contacts'\n viewSelector={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return cur.map(view => ({ ...view, selected: view.id === id }));\n });\n },\n defaultId: '1',\n appDefaultId: '2'\n }}\n createNew={{\n onClick: action('Clicked Create New'),\n label: args.createNewLabel\n }}\n search={{\n onSearchSubmit: action('Search submit'),\n value: searchValue,\n onSearchChange: setSearchValue\n }}\n count={{\n total: 32,\n selected: 4\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={<MenuButton text='Edit' />}\n formControlProps={{ required: args.required }}\n />\n </StagedStateDispatchContext.Provider>\n );\n};\n\nListToolbarDemo.args = {\n createNewLabel: undefined,\n required: false\n};\n\nListToolbarDemo.argTypes = {\n createNewLabel: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n return (\n <ListToolbar\n name='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={{ required: true }}\n />\n );\n};\n"]}

package/lib/core/Progress/Progress.stories.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export default _default;
 interface ProgressDemoProps extends ProgressProps {
     announce?: boolean;
     determinate?: boolean;
-    testImperativeFocus?: boolean;
+    focusOnVisible?: boolean;
     cycleProp?: 'none' | 'value' | 'message' | 'visible';
 }
 export declare const ProgressDemo: Story<ProgressDemoProps>;

package/lib/core/Progress/Progress.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,~~EAIL~~,aAAa,~~EAId~~,MAAM,yBAAyB,CAAC;;~~AAIjC~~,wBA0BU;AAEV,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,~~mBAAmB~~,CAAC,EAAE,OAAO,CAAC;~~IAC9B~~,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,~~CAmGjD~~,CAAC;AAEF,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAkBjE,CAAC"}
1	+ {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAiC,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAI7F,wBA0BU;AAEV,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAsFjD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAkBjE,CAAC"}

package/lib/core/Progress/Progress.stories.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Configuration, Flex, Progress, Button, Text } from '@pega/cosmos-react-core';
+import { useEffect, useMemo, useState } from 'react';
+import { Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';
 import { StyledDemoWrap } from './Progress.styles';
 export default {
     title: 'Core/Progress',
@@ -12,7 +12,7 @@ export default {
         message: '',
         determinate: false,
         value: 67,
-        testImperativeFocus: false,
+        focusOnVisible: false,
         visible: true,
         announce: false,
         cycleProp: 'none'
@@ -21,7 +21,7 @@ export default {
         variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },
         placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },
         message: { control: { type: 'text' } },
-        testImperativeFocus: { control: { type: 'boolean' } },
+        focusOnVisible: { control: { type: 'boolean' } },
         determinate: { control: { type: 'boolean' } },
         value: { control: { type: 'number' } },
         visible: { control: { type: 'boolean' } },
@@ -30,7 +30,6 @@ export default {
     }
 };
 export const ProgressDemo = (args) => {
-    const progressHandle = useRef(null);
     const cycling = args.cycleProp !== 'none';
     const [visible, setVisible] = useState(args.visible);
     const [value, setValue] = useState(args.value ?? 0);
@@ -85,9 +84,7 @@ export const ProgressDemo = (args) => {
         }
         return () => clearTimeout(timeout);
     }, [args.cycleProp, message, visible, value, cycling]);
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: "Demo Content" }), _jsxs(StyledDemoWrap, { children: [['block', 'local'].includes(args.placement || '') && (_jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })), args.placement === 'inline' && _jsx(Text, { children: "Progress demo " }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: message, value: args.determinate || args.cycleProp === 'value' ? value : undefined, handle: progressHandle, visible: visible, liveConfig: args.announce ? { contextualLabel: 'Demo' } : undefined })] }), args.testImperativeFocus && (_jsx(Flex, { item: { grow: 0 }, children: _jsx(Button, { onClick: () => {
-                        progressHandle.current?.focus();
-                    }, children: "Focus progress" }) }))] }));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: "Demo Content" }), _jsxs(StyledDemoWrap, { children: [['block', 'local'].includes(args.placement || '') && (_jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })), args.placement === 'inline' && _jsx(Text, { children: "Progress demo " }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: message, value: args.determinate || args.cycleProp === 'value' ? value : undefined, visible: visible, focusOnVisible: args.focusOnVisible, liveConfig: args.announce ? { contextualLabel: 'Demo' } : undefined })] })] }));
 };
 export const ConfigurableProgress = (args) => {
     return (_jsx(Configuration, { theme: {

package/lib/core/Progress/Progress.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n Configuration,\n Flex,\n Progress,\n ProgressProps,\n ProgressHandleValue,\n Button,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n excludeStories: ['ConfigurableProgress'],\n args: {\n variant: 'ring',\n placement: 'local',\n message: '',\n determinate: false,\n value: 67,\n testImperativeFocus: false,\n visible: true,\n announce: false,\n cycleProp: 'none'\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } },\n testImperativeFocus: { control: { type: 'boolean' } },\n determinate: { control: { type: 'boolean' } },\n value: { control: { type: 'number' } },\n visible: { control: { type: 'boolean' } },\n announce: { control: { type: 'boolean' } },\n cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }\n }\n} as Meta;\n\ninterface ProgressDemoProps extends ProgressProps {\n announce?: boolean;\n determinate?: boolean;\n testImperativeFocus?: boolean;\n cycleProp?: 'none' \| 'value' \| 'message' \| 'visible';\n}\n\nexport const ProgressDemo: Story<ProgressDemoProps> = (args: ProgressDemoProps) => {\n const progressHandle = useRef<ProgressHandleValue>(null);\n const cycling = args.cycleProp !== 'none';\n const [visible, setVisible] = useState(args.visible);\n const [value, setValue] = useState(args.value ?? 0);\n const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];\n const [messageIndex, setMessageIndex] = useState(0);\n const message = useMemo(() => {\n if (args.cycleProp === 'message') {\n return messages[messageIndex];\n }\n\n return args.message;\n }, [args.cycleProp, args.message, messageIndex]);\n\n useEffect(() => {\n if (args.cycleProp !== 'value') {\n setValue(args.value ?? 0);\n }\n }, [args.cycleProp, args.value]);\n\n useEffect(() => {\n if (args.cycleProp !== 'visible') {\n setVisible(args.visible);\n }\n }, [args.cycleProp, args.visible]);\n\n useEffect(() => {\n if (args.cycleProp === 'none') return;\n\n const duration = args.cycleProp === 'value' ? 2000 : 3000;\n const timeout = setTimeout(() => {\n switch (args.cycleProp) {\n case 'message': {\n if (messageIndex < messages.length - 1) setMessageIndex(messageIndex + 1);\n else setMessageIndex(0);\n break;\n }\n case 'value': {\n if (value < 100) setValue(Math.min(value + 10, 100));\n else setValue(0);\n break;\n }\n case 'visible': {\n setVisible(!visible);\n break;\n }\n default:\n break;\n }\n }, duration);\n\n if (!cycling) {\n clearTimeout(timeout);\n }\n\n return () => clearTimeout(timeout);\n }, [args.cycleProp, message, visible, value, cycling]);\n\n return (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h1'>Demo Content</Text>\n\n <StyledDemoWrap>\n {['block', 'local'].includes(args.placement \|\| '') && (\n <Text>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n </Text>\n )}\n {args.placement === 'inline' && <Text>Progress demo </Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={message}\n value={args.determinate \|\| args.cycleProp === 'value' ? value : undefined}\n handle={progressHandle}\n visible={visible}\n liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}\n />\n </StyledDemoWrap>\n\n {args.testImperativeFocus && (\n <Flex item={{ grow: 0 }}>\n <Button\n onClick={() => {\n progressHandle.current?.focus();\n }}\n >\n Focus progress\n </Button>\n </Flex>\n )}\n </Flex>\n );\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Flex, Progress, ProgressProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n excludeStories: ['ConfigurableProgress'],\n args: {\n variant: 'ring',\n placement: 'local',\n message: '',\n determinate: false,\n value: 67,\n focusOnVisible: false,\n visible: true,\n announce: false,\n cycleProp: 'none'\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } },\n focusOnVisible: { control: { type: 'boolean' } },\n determinate: { control: { type: 'boolean' } },\n value: { control: { type: 'number' } },\n visible: { control: { type: 'boolean' } },\n announce: { control: { type: 'boolean' } },\n cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }\n }\n} as Meta;\n\ninterface ProgressDemoProps extends ProgressProps {\n announce?: boolean;\n determinate?: boolean;\n focusOnVisible?: boolean;\n cycleProp?: 'none' \| 'value' \| 'message' \| 'visible';\n}\n\nexport const ProgressDemo: Story<ProgressDemoProps> = (args: ProgressDemoProps) => {\n const cycling = args.cycleProp !== 'none';\n const [visible, setVisible] = useState(args.visible);\n const [value, setValue] = useState(args.value ?? 0);\n const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];\n const [messageIndex, setMessageIndex] = useState(0);\n const message = useMemo(() => {\n if (args.cycleProp === 'message') {\n return messages[messageIndex];\n }\n\n return args.message;\n }, [args.cycleProp, args.message, messageIndex]);\n\n useEffect(() => {\n if (args.cycleProp !== 'value') {\n setValue(args.value ?? 0);\n }\n }, [args.cycleProp, args.value]);\n\n useEffect(() => {\n if (args.cycleProp !== 'visible') {\n setVisible(args.visible);\n }\n }, [args.cycleProp, args.visible]);\n\n useEffect(() => {\n if (args.cycleProp === 'none') return;\n\n const duration = args.cycleProp === 'value' ? 2000 : 3000;\n const timeout = setTimeout(() => {\n switch (args.cycleProp) {\n case 'message': {\n if (messageIndex < messages.length - 1) setMessageIndex(messageIndex + 1);\n else setMessageIndex(0);\n break;\n }\n case 'value': {\n if (value < 100) setValue(Math.min(value + 10, 100));\n else setValue(0);\n break;\n }\n case 'visible': {\n setVisible(!visible);\n break;\n }\n default:\n break;\n }\n }, duration);\n\n if (!cycling) {\n clearTimeout(timeout);\n }\n\n return () => clearTimeout(timeout);\n }, [args.cycleProp, message, visible, value, cycling]);\n\n return (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h1'>Demo Content</Text>\n\n <StyledDemoWrap>\n {['block', 'local'].includes(args.placement \|\| '') && (\n <Text>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n </Text>\n )}\n {args.placement === 'inline' && <Text>Progress demo </Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={message}\n value={args.determinate \|\| args.cycleProp === 'value' ? value : undefined}\n visible={visible}\n focusOnVisible={args.focusOnVisible}\n liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}\n />\n </StyledDemoWrap>\n </Flex>\n );\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}

package/lib/core/Tree/Tree.stories.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ import { StandardTreeProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const BaseTree: Story;
-export declare const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>>;
+export declare const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined' | 'selectableParents'>>;
 //# sourceMappingURL=Tree.stories.d.ts.map

package/lib/core/Tree/Tree.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,~~CAyGpE~~,CAAC"}
1	+ {"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,mBAAmB,CAAC,CA4F1F,CAAC"}

package/lib/core/Tree/Tree.stories.js CHANGED Viewed

@@ -14,6 +14,7 @@ export const BaseTree = () => {
         } }));
 };
 export const StandardTreeDemo = (args) => {
+    const [currentNodeId, setCurrentNodeId] = useState();
     const getMockNodes = ({ length = 5, parent = true } = {}) => {
         return Array.from({ length }, (_, i) => {
             const isParent = parent && i !== 2;
@@ -32,11 +33,11 @@ export const StandardTreeDemo = (args) => {
                     ? undefined
                     : nodeId => {
                         action(`Action for node: ${nodeId}`)();
-                    }
+                    },
+                href: !args.selectableParents && isParent ? undefined : `#${id}`
             };
         });
     };
-    const [currentNodeId, setCurrentNodeId] = useState();
     const [allNodes, setAllNodes] = useState(() => {
         return getMockNodes({ length: 10 });
     });
@@ -58,22 +59,9 @@ export const StandardTreeDemo = (args) => {
             return treeHelpers.expandTo(tree, id);
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(StandardTree, { lined: args.lined, currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
-                    const clickedNode = treeHelpers.getNode(allNodes, id);
+    return (_jsxs(_Fragment, { children: [_jsx(StandardTree, { lined: args.lined, currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: (id, e) => {
+                    e.preventDefault();
                     setCurrentNodeId(id);
-                    // If a leaf node, just set to current
-                    if (!clickedNode?.nodes)
-                        return;
-                    setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
-                        return {
-                            ...node,
-                            loading: node.nodes?.length === 0
-                        };
-                    }));
-                    // If a parent node with children already loaded, we're done.
-                    if (clickedNode?.nodes?.length > 0)
-                        return;
-                    loadChildNodes(id);
                 }, onNodeToggle: id => {
                     const clickedNode = treeHelpers.getNode(allNodes, id);
                     // If a leaf node, just set to current
@@ -90,12 +78,14 @@ export const StandardTreeDemo = (args) => {
                     if (clickedNode?.nodes?.length > 0)
                         return;
                     loadChildNodes(id);
-                } }), _jsx(Button, { onClick: () => expandTo(''), children: "Collapse All" }), _jsx(Button, { onClick: () => expandTo(currentNodeId || ''), children: "Expand to active item" })] }));
+                }, selectableParents: args.selectableParents }), _jsx(Button, { onClick: () => expandTo(''), children: "Collapse All" }), _jsx(Button, { onClick: () => expandTo(currentNodeId || ''), children: "Expand to active item" })] }));
 };
 StandardTreeDemo.args = {
-    lined: false
+    lined: false,
+    selectableParents: true
 };
 StandardTreeDemo.argTypes = {
-    lined: { control: { type: 'boolean' } }
+    lined: { control: { type: 'boolean' } },
+    selectableParents: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Tree.stories.js.map

package/lib/core/Tree/Tree.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,YAAY,EAEZ,IAAI,EAEJ,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAU,GAAG,EAAE;IAClC,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EAAE,WAAW,CAAC,eAAe,CAAC,EACnC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;YAChC,OAAO,CACL,8BACE,yBAAO,EAAE,GAAQ,EAChB,OAAO,IACP,CACJ,CAAC;QACJ,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,~~GAA4C~~,~~CACvE~~,~~IAAsC~~,~~EACtC~~,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,GAAG,CAAC,EACV,MAAM,GAAG,IAAI,KAC4B,EAAE,EAA8B,EAAE;QAC3E,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;YACvB,OAAO;gBACL,EAAE;gBACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBACnC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB;gBAClD,SAAS,EAAE,wBAAwB;gBACnC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBAChC,OAAO,EAAE;oBACP,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE;oBAC/E,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE;iBAC5E;gBACD,OAAO,EAAE,QAAQ;oBACf,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,MAAM,CAAC,EAAE;wBACP,MAAM,CAAC,oBAAoB,MAAM,EAAE,CAAC,EAAE,CAAC;oBACzC,CAAC;~~aACN~~,CAAC~~;QACJ~~,CAAC,CAAC,CAAC~~;IACL~~,CAAC,CAAC~~;IAEF~~,~~MAAM~~,CAAC,~~aAAa~~,EAAE,~~gBAAgB~~,CAAC,~~GAAG~~,~~QAAQ~~,~~EAAsB~~,CAAC;~~IACzE~~,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA6B,GAAG,EAAE;QACxE,OAAO,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,WAAW,CAAC,IAAI,CAAC,EAAE;gBACjB,OAAO,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;oBAC1C,OAAO;wBACL,GAAG,IAAI;wBACP,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;qBAClD,CAAC;gBACJ,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,EAAkB,EAAE,EAAE;QACtC,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,~~EAAE,~~CAAC,EAAE~~;oBAChB~~,~~MAAM~~,~~WAAW,GAAG,WAAW,~~CAAC,~~OAAO,CAAC,QAAQ,~~EAAE,EAAE~~,CAAC,CAAC~~;~~oBACtD,gBAAgB,CAAC,EAAE,CAAC,CAAC;~~oBACrB,~~sCAAsC;oBACtC,IAAI,~~CAAC,~~WAAW,EAAE,KAAK;wBAAE,OAAO;oBAEhC,WAAW,~~CAAC,~~IAAI~~,~~CAAC,~~EAAE,~~CACjB,WAAW,~~CAAC~~,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE~~;~~wBACnC~~,~~OAAO;4BACL~~,~~GAAG,IAAI;4BACP,OAAO,EAAE,IAAI,~~CAAC,~~KAAK,~~EAAE,~~MAAM,KAAK,~~CAAC~~;yBAClC~~,CAAC;~~oBACJ~~,CAAC,~~CAAC,CACH,CAAC;oBAEF,6DAA6D;oBAC7D,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;wBAAE,OAAO;oBAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC,~~EACD,YAAY,EAAE,EAAE,CAAC,EAAE;oBACjB,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBACtD,sCAAsC;oBACtC,IAAI,CAAC,WAAW,EAAE,KAAK;wBAAE,OAAO;oBAEhC,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;wBACnC,OAAO;4BACL,GAAG,IAAI;4BACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;4BACxB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;yBAClC,CAAC;oBACJ,CAAC,CAAC,CACH,CAAC;oBAEF,6DAA6D;oBAC7D,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;wBAAE,OAAO;oBAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC,~~GACD~~,EACF,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,6BAAuB,EAC1D,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,IAAI,EAAE,CAAC,sCAAgC,IACnF,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,KAAK;~~CACb~~,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~CACxC~~,CAAC","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n StandardTree,\n StandardTreeProps,\n Tree,\n TreeNode,\n treeHelpers,\n createUID,\n themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n title: 'Core/Tree',\n component: Tree\n} as Meta;\n\nexport const BaseTree: Story = () => {\n return (\n <StyledBaseTree\n nodes={themeToTree(themeDefinition)}\n nodeRenderer={({ id, subTree }) => {\n return (\n <>\n <span>{id}</span>\n {subTree}\n </>\n );\n }}\n />\n );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>> = (\n args: Pick<StandardTreeProps, 'lined'>\n) => {\n const getMockNodes = ({\n length = 5,\n parent = true\n }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n return Array.from({ length }, (_, i) => {\n const isParent = parent && i !== 2;\n const id = createUID();\n return {\n id,\n label: isParent ? 'Parent' : 'Leaf',\n icon: isParent ? 'folder-solid' : 'document-solid',\n secondary: 'This is secondary text',\n nodes: isParent ? [] : undefined,\n actions: [\n { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n ],\n onClick: isParent\n ? undefined\n : nodeId => {\n action(`Action for node: ${nodeId}`)();\n }\n };\n });\n };\n\n const [~~currentNodeId, setCurrentNodeId] = useState<string \| undefined>();\n const [~~allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n return getMockNodes({ length: 10 });\n });\n\n const loadChildNodes = (id: string) => {\n setTimeout(() => {\n setAllNodes(tree => {\n return treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n loading: false,\n nodes: [...(node.nodes ?? []), ...getMockNodes()]\n };\n });\n });\n }, 1000);\n };\n\n const expandTo = (id: TreeNode['id']) => {\n setAllNodes(tree => {\n return treeHelpers.expandTo(tree, id);\n });\n };\n\n return (\n <>\n <StandardTree\n lined={args.lined}\n currentNodeId={currentNodeId}\n nodes={allNodes}\n onNodeClick={~~id => {\n const clickedNode = treeHelpers.getNode~~(~~allNodes,~~ id~~);\n setCurrentNodeId(id);\n // If a leaf node~~, ~~just set to current\n if (!clickedNode?.nodes~~) ~~return;\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, id, node~~ => {\n ~~return {\n ...node,\n loading: node~~.~~nodes?.length === 0\n };\n })\n );\n\n // If a parent node with children already loaded, we're done.\n if~~ (~~clickedNode?.nodes?.length > 0~~) ~~return~~;\n\n ~~loadChildNodes~~(id);\n }}\n onNodeToggle={id => {\n const clickedNode = treeHelpers.getNode(allNodes, id);\n // If a leaf node, just set to current\n if (!clickedNode?.nodes) return;\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n expanded: !node.expanded,\n loading: node.nodes?.length === 0\n };\n })\n );\n\n // If a parent node with children already loaded, we're done.\n if (clickedNode?.nodes?.length > 0) return;\n\n loadChildNodes(id);\n }}\n />\n <Button onClick={() => expandTo('')}>Collapse All</Button>\n <Button onClick={() => expandTo(currentNodeId \|\| '')}>Expand to active item</Button>\n </>\n );\n};\n\nStandardTreeDemo.args = {\n lined: false\n};\n\nStandardTreeDemo.argTypes = {\n lined: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n StandardTree,\n StandardTreeProps,\n Tree,\n TreeNode,\n treeHelpers,\n createUID,\n themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n title: 'Core/Tree',\n component: Tree\n} as Meta;\n\nexport const BaseTree: Story = () => {\n return (\n <StyledBaseTree\n nodes={themeToTree(themeDefinition)}\n nodeRenderer={({ id, subTree }) => {\n return (\n <>\n <span>{id}</span>\n {subTree}\n </>\n );\n }}\n />\n );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined' \| 'selectableParents'>> = (\n args: Pick<StandardTreeProps, 'lined' \| 'selectableParents'>\n) => {\n const [currentNodeId, setCurrentNodeId] = useState<string \| undefined>();\n\n const getMockNodes = ({\n length = 5,\n parent = true\n }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n return Array.from({ length }, (_, i) => {\n const isParent = parent && i !== 2;\n const id = createUID();\n return {\n id,\n label: isParent ? 'Parent' : 'Leaf',\n icon: isParent ? 'folder-solid' : 'document-solid',\n secondary: 'This is secondary text',\n nodes: isParent ? [] : undefined,\n actions: [\n { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n ],\n onClick: isParent\n ? undefined\n : nodeId => {\n action(`Action for node: ${nodeId}`)();\n },\n href: !args.selectableParents && isParent ? undefined : `#${id}`\n };\n });\n };\n\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n return getMockNodes({ length: 10 });\n });\n\n const loadChildNodes = (id: string) => {\n setTimeout(() => {\n setAllNodes(tree => {\n return treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n loading: false,\n nodes: [...(node.nodes ?? []), ...getMockNodes()]\n };\n });\n });\n }, 1000);\n };\n\n const expandTo = (id: TreeNode['id']) => {\n setAllNodes(tree => {\n return treeHelpers.expandTo(tree, id);\n });\n };\n\n return (\n <>\n <StandardTree\n lined={args.lined}\n currentNodeId={currentNodeId}\n nodes={allNodes}\n onNodeClick={(id, e) => {\n e.preventDefault();\n setCurrentNodeId(id);\n }}\n onNodeToggle={id => {\n const clickedNode = treeHelpers.getNode(allNodes, id);\n // If a leaf node, just set to current\n if (!clickedNode?.nodes) return;\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n expanded: !node.expanded,\n loading: node.nodes?.length === 0\n };\n })\n );\n\n // If a parent node with children already loaded, we're done.\n if (clickedNode?.nodes?.length > 0) return;\n\n loadChildNodes(id);\n }}\n selectableParents={args.selectableParents}\n />\n <Button onClick={() => expandTo('')}>Collapse All</Button>\n <Button onClick={() => expandTo(currentNodeId \|\| '')}>Expand to active item</Button>\n </>\n );\n};\n\nStandardTreeDemo.args = {\n lined: false,\n selectableParents: true\n};\n\nStandardTreeDemo.argTypes = {\n lined: { control: { type: 'boolean' } },\n selectableParents: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/URL/URL.stories.js CHANGED Viewed

@@ -13,6 +13,6 @@ URLDisplayDemo.args = {
 URLDisplayDemo.argTypes = {
     value: { control: { type: 'text' } },
     displayText: { control: { type: 'text' } },
-    variant: { options: ['link', 'text'], control: { type: 'select' } }
+    variant: { options: ['link', 'text', 'qrcode'], control: { type: 'select' } }
 };
 //# sourceMappingURL=URL.stories.js.map

package/lib/core/URL/URL.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"URL.stories.js","sourceRoot":"","sources":["../../../src/core/URL/URL.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,CAC/E,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CACxF,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;~~CACpE~~,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { URLDisplay, URLDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/URL',\n component: URLDisplay\n} as Meta;\n\nexport const URLDisplayDemo: Story<URLDisplayProps> = (args: URLDisplayProps) => (\n <URLDisplay value={args.value} displayText={args.displayText} variant={args.variant} />\n);\n\nURLDisplayDemo.args = {\n value: 'https://www.google.com/',\n displayText: 'Example URL',\n variant: 'link'\n};\n\nURLDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n displayText: { control: { type: 'text' } },\n variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}
1	+ {"version":3,"file":"URL.stories.js","sourceRoot":"","sources":["../../../src/core/URL/URL.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,CAC/E,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CACxF,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9E,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { URLDisplay, URLDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/URL',\n component: URLDisplay\n} as Meta;\n\nexport const URLDisplayDemo: Story<URLDisplayProps> = (args: URLDisplayProps) => (\n <URLDisplay value={args.value} displayText={args.displayText} variant={args.variant} />\n);\n\nURLDisplayDemo.args = {\n value: 'https://www.google.com/',\n displayText: 'Example URL',\n variant: 'link'\n};\n\nURLDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n displayText: { control: { type: 'text' } },\n variant: { options: ['link', 'text', 'qrcode'], control: { type: 'select' } }\n};\n"]}

package/lib/work/CaseView/CaseView.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AASlE,wBAMU;AAEV,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,qBAAqB,CAAC;IAC7F,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,~~CAqBjD~~,CAAC"}
1	+ {"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AASlE,wBAMU;AAEV,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,qBAAqB,CAAC;IAC7F,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAoBjD,CAAC"}

package/lib/work/CaseView/CaseView.stories.js CHANGED Viewed

@@ -14,10 +14,9 @@ export default {
     }
 };
 export const CaseViewDemo = (args) => {
-    const { persistentUtility, parentCases, heading, tasks, intelligentGuidance } = args;
-    return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(CaseViewMock, { stages: true, tasks: tasks || _jsx(TasksDemo, { count: 4 }), persistentUtility: persistentUtility
+    return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(CaseViewMock, { stages: true, tasks: args.tasks || _jsx(TasksDemo, { count: 4 }), persistentUtility: args.persistentUtility
                 ? { title: 'Persistent utility', content: _jsx(PersistentUtilityContent, {}) }
-                : undefined, parentCases: parentCases, heading: heading || 'Cosmos demo case', intelligentGuidance: intelligentGuidance }) }));
+                : undefined, parentCases: args.parentCases, heading: args.heading || 'Cosmos demo case', intelligentGuidance: args.intelligentGuidance }) }));
 };
 CaseViewDemo.parameters = {
     eyes: {

package/lib/work/CaseView/CaseView.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.stories.js","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,YAAY,CAAC,aAAa,CAAC,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,YAAY,GAA6B,CAAC,IAAuB,EAAE,EAAE;IAChF,~~MAAM,EAAE,iBAAiB,EAAE,WAAW,EAAE,~~OAAO,~~EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IACrF,OAAO,~~CACL,KAAC,YAAY,IACX,SAAS,QACT,IAAI,EACF,KAAC,YAAY,IACX,MAAM,QACN,KAAK,EAAE,KAAK,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,CAAC,GAAI,~~EACvC~~,iBAAiB,EACf,iBAAiB;~~gBACf~~,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,KAAC,wBAAwB,KAAG,EAAE;gBACxE,CAAC,CAAC,SAAS,EAEf,WAAW,EAAE,WAAW,~~EACxB~~,OAAO,EAAE,OAAO,IAAI,kBAAkB,~~EACtC~~,mBAAmB,EAAE,mBAAmB,~~GACxC~~,GAEJ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,SAAS,EAAE,GAAG,EAAE;YACd,QAAQ;iBACL,aAAa;YACZ,8BAA8B;YAC9B,wBAAwB,CACzB;gBACD,EAAE,KAAK,EAAE,CAAC;QACd,CAAC;KACF;CACF,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { registerIcon } from '@pega/cosmos-react-core';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\nimport { CaseView, CaseViewProps } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TasksDemo } from '../Tasks/Tasks.stories';\n\nimport { CaseViewMock, PersistentUtilityContent } from './CaseView.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n title: 'Work/CaseView',\n component: CaseView,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\nexport interface CaseViewStoryArgs extends Pick<CaseViewProps, 'tasks' \| 'intelligentGuidance'> {\n heading?: CaseViewProps['heading'];\n persistentUtility?: boolean;\n parentCases?: boolean;\n}\n\nexport const CaseViewDemo: Story<CaseViewStoryArgs> = (args: CaseViewStoryArgs) => {\n ~~const { persistentUtility, parentCases, heading, tasks, intelligentGuidance } = args;\n~~ return (\n <AppShellDemo\n appHeader\n main={\n <CaseViewMock\n stages\n tasks={tasks \|\| <TasksDemo count={4} />}\n persistentUtility={\n persistentUtility\n ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }\n : undefined\n }\n parentCases={parentCases}\n heading={heading \|\| 'Cosmos demo case'}\n intelligentGuidance={intelligentGuidance}\n />\n }\n />\n );\n};\n\nCaseViewDemo.parameters = {\n eyes: {\n runBefore: () => {\n document\n .querySelector<HTMLButtonElement>(\n // Find the case actions menu.\n '[aria-label=\"Actions\"]'\n )\n ?.click();\n }\n }\n};\n\nCaseViewDemo.args = {\n persistentUtility: false,\n parentCases: false\n};\n\nCaseViewDemo.argTypes = {\n persistentUtility: { control: { type: 'boolean' } },\n parentCases: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"CaseView.stories.js","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,YAAY,CAAC,aAAa,CAAC,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,YAAY,GAA6B,CAAC,IAAuB,EAAE,EAAE;IAChF,OAAO,CACL,KAAC,YAAY,IACX,SAAS,QACT,IAAI,EACF,KAAC,YAAY,IACX,MAAM,QACN,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,CAAC,GAAI,EAC5C,iBAAiB,EACf,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,KAAC,wBAAwB,KAAG,EAAE;gBACxE,CAAC,CAAC,SAAS,EAEf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,kBAAkB,EAC3C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,GAC7C,GAEJ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,SAAS,EAAE,GAAG,EAAE;YACd,QAAQ;iBACL,aAAa;YACZ,8BAA8B;YAC9B,wBAAwB,CACzB;gBACD,EAAE,KAAK,EAAE,CAAC;QACd,CAAC;KACF;CACF,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { registerIcon } from '@pega/cosmos-react-core';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\nimport { CaseView, CaseViewProps } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TasksDemo } from '../Tasks/Tasks.stories';\n\nimport { CaseViewMock, PersistentUtilityContent } from './CaseView.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n title: 'Work/CaseView',\n component: CaseView,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\nexport interface CaseViewStoryArgs extends Pick<CaseViewProps, 'tasks' \| 'intelligentGuidance'> {\n heading?: CaseViewProps['heading'];\n persistentUtility?: boolean;\n parentCases?: boolean;\n}\n\nexport const CaseViewDemo: Story<CaseViewStoryArgs> = (args: CaseViewStoryArgs) => {\n return (\n <AppShellDemo\n appHeader\n main={\n <CaseViewMock\n stages\n tasks={args.tasks \|\| <TasksDemo count={4} />}\n persistentUtility={\n args.persistentUtility\n ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }\n : undefined\n }\n parentCases={args.parentCases}\n heading={args.heading \|\| 'Cosmos demo case'}\n intelligentGuidance={args.intelligentGuidance}\n />\n }\n />\n );\n};\n\nCaseViewDemo.parameters = {\n eyes: {\n runBefore: () => {\n document\n .querySelector<HTMLButtonElement>(\n // Find the case actions menu.\n '[aria-label=\"Actions\"]'\n )\n ?.click();\n }\n }\n};\n\nCaseViewDemo.args = {\n persistentUtility: false,\n parentCases: false\n};\n\nCaseViewDemo.argTypes = {\n persistentUtility: { control: { type: 'boolean' } },\n parentCases: { control: { type: 'boolean' } }\n};\n"]}

package/lib/work/Timeline/Timeline.stories.js CHANGED Viewed

@@ -57,7 +57,7 @@ export const TimelineToolbarDemo = () => {
     const onSearchSubmit = useCallback((value) => {
         setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));
     }, []);
-    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(TimelineToolbar, { heading: 'Timeline Demo', search: { onSearchSubmit, onSearchChange, value: searchValue }, count: { total: items.length }, sort: {
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(TimelineToolbar, { name: 'Timeline Demo', search: { onSearchSubmit, onSearchChange, value: searchValue }, count: { total: items.length }, sort: {
                         selected: sortOrder,
                         onItemClick: (id) => {
                             setSortOrder(id);

package/lib/work/Timeline/Timeline.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.stories.js","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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~~OAAO~~,EAAC,eAAe,~~EACvB~~,MAAM,EAAE,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9D,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,EAC9B,IAAI,EAAE;wBACJ,QAAQ,EAAE,SAAS;wBACnB,WAAW,EAAE,CAAC,EAA8B,EAAE,EAAE;4BAC9C,YAAY,CAAC,EAAE,CAAC,CAAC;wBACnB,CAAC;qBACF,EACD,KAAK,EAAE;wBACL,QAAQ,EAAE,OAAO;wBACjB,WAAW,EAAE,CAAC,EAA4B,EAAE,EAAE;4BAC5C,UAAU,CAAC,EAAE,CAAC,CAAC;wBACjB,CAAC;qBACF,GACD,GACS,EACb,KAAC,WAAW,cACV,KAAC,QAAQ,IACP,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,IAAI,IAAI,EAAE,EACvB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,GAChB,GACU,IACT,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport {\n Card,\n CardContent,\n CardHeader,\n OmitStrict,\n SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps, TimelineToolbar } from '@pega/cosmos-react-work';\nimport {\n TimelineGroupBy,\n TimelineSortOrder\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n title: 'Work/Timeline',\n component: Timeline\n} as Meta;\n\ninterface TimelineDemoStoryProps extends TimelineProps {\n lazyLoading?: boolean;\n}\n\nexport const TimelineDemo: Story<OmitStrict<TimelineDemoStoryProps, 'activity' \| 'currentTime'>> = (\n args: OmitStrict<TimelineDemoStoryProps, 'activity' \| 'currentTime'>\n) => {\n const INITIAL_CHUNK_SIZE = 7;\n const APPEND_CHUNK_SIZE = 3;\n\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<TimelineProps['activity']>([]);\n\n useEffect(() => {\n const newItems = args.lazyLoading ? () => activity.slice(0, INITIAL_CHUNK_SIZE) : activity;\n setHasMore(newItems.length < activity.length);\n setItems(newItems);\n }, [args.lazyLoading]);\n\n const loadMore = useCallback(() => {\n if (!loading) {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n\n setItems(prevItems => {\n const previousItemsLength = prevItems.length;\n const newItems = activity.slice(\n previousItemsLength,\n previousItemsLength + APPEND_CHUNK_SIZE\n );\n\n if (newItems.length === 0) {\n setHasMore(false);\n }\n\n return [...prevItems, ...newItems];\n });\n }, 2000);\n }\n }, [loading]);\n\n return (\n <Timeline\n activity={items}\n currentTime={new Date()}\n sortOrder={args.sortOrder}\n groupBy={args.groupBy}\n loading={loading}\n loadMore={hasMore ? loadMore : undefined}\n />\n );\n};\n\nTimelineDemo.args = {\n sortOrder: 'descending',\n groupBy: 'date',\n lazyLoading: false\n};\n\nTimelineDemo.argTypes = {\n sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n groupBy: {\n options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n control: { type: 'select' }\n },\n lazyLoading: { control: { type: 'boolean' } }\n};\n\nexport const TimelineToolbarDemo: Story = () => {\n const [sortOrder, setSortOrder] = useState<TimelineSortOrder>();\n const [groupBy, setGroupBy] = useState<TimelineGroupBy>();\n const [items, setItems] = useState<TimelineProps['activity']>(activity);\n const [searchValue, onSearchChange] = useState<SearchInputProps['value']>('');\n\n const onSearchSubmit = useCallback((value: string) => {\n setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));\n }, []);\n\n return (\n <Card>\n <CardHeader>\n <TimelineToolbar\n ~~heading~~='Timeline Demo'\n search={{ onSearchSubmit, onSearchChange, value: searchValue }}\n count={{ total: items.length }}\n sort={{\n selected: sortOrder,\n onItemClick: (id: TimelineProps['sortOrder']) => {\n setSortOrder(id);\n }\n }}\n group={{\n selected: groupBy,\n onItemClick: (id: TimelineProps['groupBy']) => {\n setGroupBy(id);\n }\n }}\n />\n </CardHeader>\n <CardContent>\n <Timeline\n activity={items}\n currentTime={new Date()}\n sortOrder={sortOrder}\n groupBy={groupBy}\n />\n </CardContent>\n </Card>\n );\n};\n"]}
1	+ {"version":3,"file":"Timeline.stories.js","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport {\n Card,\n CardContent,\n CardHeader,\n OmitStrict,\n SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps, TimelineToolbar } from '@pega/cosmos-react-work';\nimport {\n TimelineGroupBy,\n TimelineSortOrder\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n title: 'Work/Timeline',\n component: Timeline\n} as Meta;\n\ninterface TimelineDemoStoryProps extends TimelineProps {\n lazyLoading?: boolean;\n}\n\nexport const TimelineDemo: Story<OmitStrict<TimelineDemoStoryProps, 'activity' \| 'currentTime'>> = (\n args: OmitStrict<TimelineDemoStoryProps, 'activity' \| 'currentTime'>\n) => {\n const INITIAL_CHUNK_SIZE = 7;\n const APPEND_CHUNK_SIZE = 3;\n\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<TimelineProps['activity']>([]);\n\n useEffect(() => {\n const newItems = args.lazyLoading ? () => activity.slice(0, INITIAL_CHUNK_SIZE) : activity;\n setHasMore(newItems.length < activity.length);\n setItems(newItems);\n }, [args.lazyLoading]);\n\n const loadMore = useCallback(() => {\n if (!loading) {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n\n setItems(prevItems => {\n const previousItemsLength = prevItems.length;\n const newItems = activity.slice(\n previousItemsLength,\n previousItemsLength + APPEND_CHUNK_SIZE\n );\n\n if (newItems.length === 0) {\n setHasMore(false);\n }\n\n return [...prevItems, ...newItems];\n });\n }, 2000);\n }\n }, [loading]);\n\n return (\n <Timeline\n activity={items}\n currentTime={new Date()}\n sortOrder={args.sortOrder}\n groupBy={args.groupBy}\n loading={loading}\n loadMore={hasMore ? loadMore : undefined}\n />\n );\n};\n\nTimelineDemo.args = {\n sortOrder: 'descending',\n groupBy: 'date',\n lazyLoading: false\n};\n\nTimelineDemo.argTypes = {\n sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n groupBy: {\n options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n control: { type: 'select' }\n },\n lazyLoading: { control: { type: 'boolean' } }\n};\n\nexport const TimelineToolbarDemo: Story = () => {\n const [sortOrder, setSortOrder] = useState<TimelineSortOrder>();\n const [groupBy, setGroupBy] = useState<TimelineGroupBy>();\n const [items, setItems] = useState<TimelineProps['activity']>(activity);\n const [searchValue, onSearchChange] = useState<SearchInputProps['value']>('');\n\n const onSearchSubmit = useCallback((value: string) => {\n setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));\n }, []);\n\n return (\n <Card>\n <CardHeader>\n <TimelineToolbar\n name='Timeline Demo'\n search={{ onSearchSubmit, onSearchChange, value: searchValue }}\n count={{ total: items.length }}\n sort={{\n selected: sortOrder,\n onItemClick: (id: TimelineProps['sortOrder']) => {\n setSortOrder(id);\n }\n }}\n group={{\n selected: groupBy,\n onItemClick: (id: TimelineProps['groupBy']) => {\n setGroupBy(id);\n }\n }}\n />\n </CardHeader>\n <CardContent>\n <Timeline\n activity={items}\n currentTime={new Date()}\n sortOrder={sortOrder}\n groupBy={groupBy}\n />\n </CardContent>\n </Card>\n );\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "4.0.0-dev.7.0",
+  "version": "4.0.0-dev.8.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,14 +20,14 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-condition-builder": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-core": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-cs": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-rte": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-social": "4.0.0-dev.7.0",
-    "@pega/cosmos-react-work": "4.0.0-dev.7.0",
+    "@pega/cosmos-react-build": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-condition-builder": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-cs": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-rte": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-social": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-work": "4.0.0-dev.8.1",
     "@types/emoji-mart": "^3.0.4",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",