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

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

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/jsx/core/ListToolbar/ListToolbar.stories.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 import { Meta, Story } from '@storybook/react';
-import { ListToolbarProps, FormControlProps } from '@pega/cosmos-react-core';
+import { FormControlProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface ListToolbarStoryProps {
-    condensed: ListToolbarProps['condensed'];
     createNewLabel: string;
     required: FormControlProps['required'];
 }

package/jsx/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/jsx/core/ListToolbar/ListToolbar.stories.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 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',
@@ -10,6 +10,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,
@@ -59,10 +60,8 @@ export const ListToolbarDemo = (args) => {
             onSubmit: () => { }
         };
     }, []);
-    return (<Card>
-      <CardHeader>
-        <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>
-          <ListToolbar heading={{
+    return (<StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>
+      <ListToolbar name='Contacts' viewSelector={{
             views,
             onViewSelect: id => {
                 setViews(cur => {
@@ -74,29 +73,25 @@ export const ListToolbarDemo = (args) => {
         }} createNew={{
             onClick: action('Clicked Create New'),
             label: args.createNewLabel
-        }} search={{ onSearchSubmit: action('Search submit') }} count={{
+        }} search={{
+            onSearchSubmit: action('Search submit'),
+            value: searchValue,
+            onSearchChange: setSearchValue
+        }} count={{
             total: 32,
             selected: 4
-        }} filter={filterProp} sort={sortProp} group={groupProp} actions={actions} additionalActions={<MenuButton text='Edit'/>} condensed={args.condensed} formControlProps={{ required: args.required }}/>
-        </StagedStateDispatchContext.Provider>
-      </CardHeader>
-    </Card>);
+        }} filter={filterProp} sort={sortProp} group={groupProp} actions={actions} additionalActions={<MenuButton text='Edit'/>} formControlProps={{ required: args.required }}/>
+    </StagedStateDispatchContext.Provider>);
 };
 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 (<Card>
-      <CardHeader>
-        <ListToolbar heading='Top accounts in California' search={{ onSearchSubmit: action('Search submit') }} count={{ total: 212, totalHasMore: true }} actions={actions} formControlProps={{ required: true }}/>
-      </CardHeader>
-    </Card>);
+    return (<ListToolbar name='Top accounts in California' search={{ onSearchSubmit: action('Search submit') }} count={{ total: 212, totalHasMore: true }} actions={actions} formControlProps={{ required: true }}/>);
 };
 //# sourceMappingURL=ListToolbar.stories.jsx.map

package/jsx/core/ListToolbar/ListToolbar.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.jsx","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;oBAE9B,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,CAAC,~~IAAI,CACH;MAAA,CAAC,UAAU,CACT;QAAA,CAAC,~~0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,yBAAyB,CAAC,CACpE;~~UAAA~~,CAAC,WAAW,CACV,~~OAAO~~,CAAC,CAAC;~~YACP~~,KAAK;YACL,YAAY,EAAE,EAAE,CAAC,EAAE;gBACjB,QAAQ,CAAC,GAAG,CAAC,EAAE;oBACb,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;gBAClE,CAAC,CAAC,CAAC;YACL,CAAC;YACD,SAAS,EAAE,GAAG;YACd,YAAY,EAAE,GAAG;SAClB,CAAC,CACF,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC;YACrC,KAAK,EAAE,IAAI,CAAC,cAAc;SAC3B,CAAC,CACF,MAAM,CAAC,CAAC,~~EAAE,~~cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,~~CACpD~~,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,EAAE;YACT,QAAQ,EAAE,CAAC;SACZ,CAAC,CACF,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAG,CAAC,CAC9C,~~SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,~~gBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAElD;~~QAAA~~,EAAE,0BAA0B,CAAC,QAAQ,~~CACvC;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,IAAI,~~CAAC,~~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,CAAC,~~IAAI,CACH;MAAA,CAAC,UAAU,CACT;QAAA,CAAC,~~WAAW,CACV,~~OAAO~~,CAAC,4BAA4B,~~CACpC~~,MAAM,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CACpD,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAC1C,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,gBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,~~EAEzC;MAAA~~,~~EAAE~~,~~UAAU,CACd;IAAA,EAAE,IAAI,~~CAAC~~,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.jsx","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/jsx/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/jsx/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/jsx/core/Progress/Progress.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
-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',
@@ -11,7 +11,7 @@ export default {
         message: '',
         determinate: false,
         value: 67,
-        testImperativeFocus: false,
+        focusOnVisible: false,
         visible: true,
         announce: false,
         cycleProp: 'none'
@@ -20,7 +20,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' } },
@@ -29,7 +29,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);
@@ -97,16 +96,8 @@ export const ProgressDemo = (args) => {
             mollit anim id est laborum.
           </Text>)}
         {args.placement === 'inline' && <Text>Progress demo </Text>}
-        <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}/>
+        <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}/>
       </StyledDemoWrap>
-      {args.testImperativeFocus && (<Flex item={{ grow: 0 }}>
-          <Button onClick={() => {
-                progressHandle.current?.focus();
-            }}>
-            Focus progress
-          </Button>
-        </Flex>)}
     </Flex>);
 };
 export const ConfigurableProgress = (args) => {

package/jsx/core/Progress/Progress.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/core/Tree/Tree.stories.jsx CHANGED Viewed

@@ -16,6 +16,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;
@@ -34,11 +35,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 });
     });
@@ -61,20 +62,9 @@ export const StandardTreeDemo = (args) => {
         });
     };
     return (<>
-      <StandardTree lined={args.lined} currentNodeId={currentNodeId} nodes={allNodes} onNodeClick={id => {
-            const clickedNode = treeHelpers.getNode(allNodes, id);
+      <StandardTree lined={args.lined} currentNodeId={currentNodeId} nodes={allNodes} onNodeClick={(id, e) => {
+            e.preventDefault();
             setCurrentNodeId(id);
-            if (!clickedNode?.nodes)
-                return;
-            setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
-                return {
-                    ...node,
-                    loading: node.nodes?.length === 0
-                };
-            }));
-            if (clickedNode?.nodes?.length > 0)
-                return;
-            loadChildNodes(id);
         }} onNodeToggle={id => {
             const clickedNode = treeHelpers.getNode(allNodes, id);
             if (!clickedNode?.nodes)
@@ -89,15 +79,17 @@ export const StandardTreeDemo = (args) => {
             if (clickedNode?.nodes?.length > 0)
                 return;
             loadChildNodes(id);
-        }}/>
+        }} selectableParents={args.selectableParents}/>
       <Button onClick={() => expandTo('')}>Collapse All</Button>
       <Button onClick={() => expandTo(currentNodeId || '')}>Expand to active item</Button>
     </>);
 };
 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.jsx.map

package/jsx/core/Tree/Tree.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.stories.jsx","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,CAAC,cAAc,CACb,KAAK,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CACpC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;YAChC,OAAO,CACL,EACE;YAAA,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAChB;YAAA,CAAC,OAAO,CACV;UAAA,GAAG,CACJ,CAAC;QACJ,CAAC,CAAC,EACF,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,EACE;MAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,WAAW,CAAC,CAAC,~~EAAE,~~CAAC,EAAE~~;YAChB~~,~~MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,~~EAAE,~~EAAE,~~CAAC,~~CAAC;YACtD,gBAAgB,CAAC,~~EAAE,~~CAAC,CAAC;YAErB,IAAI,CAAC,WAAW,~~EAAE~~,KAAK~~;~~gBAAE~~,~~OAAO;YAEhC,WAAW,~~CAAC,~~IAAI,~~CAAC,~~EAAE~~,~~CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,~~EAAE,~~EAAE,EAAE,IAAI,~~CAAC~~,EAAE~~;~~gBACnC~~,~~OAAO;oBACL~~,~~GAAG,IAAI;oBACP,OAAO,EAAE,IAAI,~~CAAC,~~KAAK,~~EAAE,~~MAAM,KAAK,~~CAAC~~;iBAClC~~,CAAC;~~YACJ~~,CAAC,CAAC,~~CACH,CAAC;YAGF,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC,~~CACF,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE;YACjB,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAEtD,IAAI,CAAC,WAAW,EAAE,KAAK;gBAAE,OAAO;YAEhC,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;gBACnC,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;oBACxB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;iBAClC,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;YAGF,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC,~~EAEJ~~;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM,CACzD;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,MAAM,CACrF;IAAA,GAAG,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.jsx","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/jsx/core/URL/URL.stories.jsx CHANGED Viewed

@@ -12,6 +12,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.jsx.map

package/jsx/core/URL/URL.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"URL.stories.jsx","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,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,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.jsx","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,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,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/jsx/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/jsx/work/CaseView/CaseView.stories.jsx CHANGED Viewed

@@ -13,10 +13,9 @@ export default {
     }
 };
 export const CaseViewDemo = (args) => {
-    const { persistentUtility, parentCases, heading, tasks, intelligentGuidance } = args;
-    return (<AppShellDemo appHeader main={<CaseViewMock stages tasks={tasks || <TasksDemo count={4}/>} persistentUtility={persistentUtility
+    return (<AppShellDemo appHeader main={<CaseViewMock stages tasks={args.tasks || <TasksDemo count={4}/>} persistentUtility={args.persistentUtility
                 ? { title: 'Persistent utility', content: <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/jsx/work/CaseView/CaseView.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.stories.jsx","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,CAAC,YAAY,CACX,SAAS,CACT,IAAI,CAAC,CACH,CAAC,YAAY,CACX,MAAM,CACN,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAG,CAAC,~~CACxC~~,iBAAiB,CAAC,CAChB,iBAAiB;~~gBACf~~,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,CAAC,wBAAwB,CAAC,AAAD,EAAG,EAAE;gBACxE,CAAC,CAAC,SAAS,CACd,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,~~CACzB~~,OAAO,CAAC,CAAC,OAAO,IAAI,kBAAkB,CAAC,~~CACvC~~,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,~~EACzC~~,CACH,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,SAAS,EAAE,GAAG,EAAE;YACd,QAAQ;iBACL,aAAa,CAEZ,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.jsx","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,CAAC,YAAY,CACX,SAAS,CACT,IAAI,CAAC,CACH,CAAC,YAAY,CACX,MAAM,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAG,CAAC,CAC7C,iBAAiB,CAAC,CAChB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,CAAC,wBAAwB,CAAC,AAAD,EAAG,EAAE;gBACxE,CAAC,CAAC,SAAS,CACd,CACD,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,kBAAkB,CAAC,CAC5C,mBAAmB,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,EAC9C,CACH,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,SAAS,EAAE,GAAG,EAAE;YACd,QAAQ;iBACL,aAAa,CAEZ,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/jsx/work/Timeline/Timeline.stories.jsx CHANGED Viewed

@@ -58,7 +58,7 @@ export const TimelineToolbarDemo = () => {
     }, []);
     return (<Card>
       <CardHeader>
-        <TimelineToolbar heading='Timeline Demo' search={{ onSearchSubmit, onSearchChange, value: searchValue }} count={{ total: items.length }} sort={{
+        <TimelineToolbar name='Timeline Demo' search={{ onSearchSubmit, onSearchChange, value: searchValue }} count={{ total: items.length }} sort={{
             selected: sortOrder,
             onItemClick: (id) => {
                 setSortOrder(id);

package/jsx/work/Timeline/Timeline.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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~~OAAO~~,CAAC,eAAe,~~CACvB~~,MAAM,CAAC,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAC/D,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAC/B,IAAI,CAAC,CAAC;YACJ,QAAQ,EAAE,SAAS;YACnB,WAAW,EAAE,CAAC,EAA8B,EAAE,EAAE;gBAC9C,YAAY,CAAC,EAAE,CAAC,CAAC;YACnB,CAAC;SACF,CAAC,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,OAAO;YACjB,WAAW,EAAE,CAAC,EAA4B,EAAE,EAAE;gBAC5C,UAAU,CAAC,EAAE,CAAC,CAAC;YACjB,CAAC;SACF,CAAC,EAEN;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,WAAW,CACV;QAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CAAC,KAAK,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,OAAO,CAAC,CAAC,OAAO,CAAC,EAErB;MAAA,EAAE,WAAW,CACf;IAAA,EAAE,IAAI,CAAC,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.jsx","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/lib/build/AppShell/AppShell.mocks.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NavProps } from '@pega/cosmos-react-build';
 export interface TabbedPageStoryProps {
     pageContent: PageContentProps;
     showBreadcrumbs: boolean;
@@ -16,27 +17,7 @@ export declare const getPath: (args: TabbedPageStoryProps) => {
     primary: string;
     href: string | undefined;
 }[] | undefined;
-export declare const appExplorerMenuList: {
-    id: string;
-    label: string;
-    nodes: ({
-        id: string;
-        label: string;
-        nodes?: undefined;
-    } | {
-        id: string;
-        label: string;
-        nodes: {
-            id: string;
-            label: string;
-        }[];
-    })[];
-}[];
-export declare const branchesMenuList: {
-    icon: string;
-    id: string;
-    label: string;
-}[];
+export declare const defaultNavItems: NavProps['items'];
 export declare const contents: {
     id: string;
     data: {
@@ -45,25 +26,5 @@ export declare const contents: {
         tabs: string[];
     };
 }[];
-export declare const recordMenuList: {
-    id: string;
-    label: string;
-    nodes: {
-        id: string;
-        label: string;
-    }[];
-}[];
-export declare const treeList: ({
-    id: string;
-    label: string;
-    nodes?: undefined;
-} | {
-    id: string;
-    label: string;
-    nodes: {
-        id: string;
-        label: string;
-    }[];
-})[];
 export declare const TabbedPageComp: FC<TabbedPageStoryProps>;
 //# sourceMappingURL=AppShell.mocks.d.ts.map

package/lib/build/AppShell/AppShell.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;~~AAK3B~~,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;CACH;AAED,eAAO,MAAM,OAAO,SAAU,oBAAoB;;;;eAqBjD,CAAC;AAEF,eAAO,MAAM,~~mBAAmB;;;;;;;;;;;;;;;GA2D/B~~,~~CAAC;AAEF~~,~~eAAO,MAAM,gBAAgB;;;;GAqB5B,CAAC;AAEF,eAAO,MAAM,~~QAAQ~~;;;;;;;GAkSpB~~,CAAC~~;AAEF~~,~~eAAO~~,~~MAAM~~,~~cAAc;;;;;;;GAiC1B,~~CAAC;AAEF,eAAO,MAAM,QAAQ~~;;;;;;;;;;;IA+FpB~~,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,oBAAoB,CAwBnD,CAAC"}
1	+ {"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;CACH;AAED,eAAO,MAAM,OAAO,SAAU,oBAAoB;;;;eAqBjD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,CAiH7C,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;GA0NpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,oBAAoB,CAwBnD,CAAC"}