npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.4.2 → 3.0.0-dev.7.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.4.2 → 3.0.0-dev.7.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 (445) hide show

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

@@ -16,15 +16,15 @@ export default {
     }
 };
 export const LinkDemo = (args) => {
-    return (_jsx(Link, { href: 'http://www.pega.com', variant: args.variant, target: '_blank', children: "Visit Pega!" }, void 0));
+    return (_jsx(Link, { href: 'http://www.pega.com', variant: args.variant, target: '_blank', children: "Visit Pega!" }));
 };
 export const LinkWithIconDemo = () => {
-    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Link, { href: 'http://www.pega.com', variant: 'primary', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Link, { href: 'http://www.pega.com', variant: 'secondary', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Link, { href: 'http://www.pega.com', variant: 'simple', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Link, { href: 'http://www.pega.com', variant: 'link', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Link, { href: 'http://www.pega.com', variant: 'text', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Link, { href: 'http://www.pega.com', variant: 'primary', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }) }), _jsx(Link, { href: 'http://www.pega.com', variant: 'secondary', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }) }), _jsx(Link, { href: 'http://www.pega.com', variant: 'simple', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }) }), _jsx(Link, { href: 'http://www.pega.com', variant: 'link', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }) }), _jsx(Link, { href: 'http://www.pega.com', variant: 'text', icon: true, target: '_blank', children: _jsx(Icon, { name: 'plus' }) })] }));
 };
 LinkWithIconDemo.argTypes = {
     variant: { table: { disable: true } }
 };
 export const PreviewableLink = (args) => {
-    return (_jsx(Link, { href: 'http://www.pega.com', variant: args.variant, previewable: true, target: '_blank', children: "Visit Pega!" }, void 0));
+    return (_jsx(Link, { href: 'http://www.pega.com', variant: args.variant, previewable: true, target: '_blank', children: "Visit Pega!" }));
 };
 //# sourceMappingURL=Link.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.stories.js","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAC,QAAQ,~~oCAEhE~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,GAAG,EAAE;IAC1C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACrE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACf~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACf~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACf~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACf~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACf~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,QAAC,MAAM,EAAC,QAAQ,~~oCAE5E~~,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n title: 'Core/Link',\n component: Link,\n args: {\n variant: 'link'\n },\n argTypes: {\n variant: {\n options: ['link', 'primary', 'secondary', 'simple', 'text'],\n control: { type: 'select' }\n }\n }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n return (\n <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n Visit Pega!\n </Link>\n );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n return (\n <Flex container={{ alignItems: 'center' }}>\n <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n </Flex>\n );\n};\n\nLinkWithIconDemo.argTypes = {\n variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n return (\n <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n Visit Pega!\n </Link>\n );\n};\n"]}
1	+ {"version":3,"file":"Link.stories.js","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAC,QAAQ,4BAEhE,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,GAAG,EAAE;IAC1C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACrE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,QAAC,MAAM,EAAC,QAAQ,4BAE5E,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n title: 'Core/Link',\n component: Link,\n args: {\n variant: 'link'\n },\n argTypes: {\n variant: {\n options: ['link', 'primary', 'secondary', 'simple', 'text'],\n control: { type: 'select' }\n }\n }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n return (\n <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n Visit Pega!\n </Link>\n );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n return (\n <Flex container={{ alignItems: 'center' }}>\n <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n <Icon name='plus' />\n </Link>\n </Flex>\n );\n};\n\nLinkWithIconDemo.argTypes = {\n variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n return (\n <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n Visit Pega!\n </Link>\n );\n};\n"]}

package/lib/core/List/CommaSeparatedList.stories.js CHANGED Viewed

@@ -21,7 +21,7 @@ export const CommaSeparatedListDemo = (args) => {
         'Value 13',
         'Value 14'
     ];
-    return _jsx(CommaSeparatedList, { heading: args.heading, items: items }, void 0);
+    return _jsx(CommaSeparatedList, { heading: args.heading, items: items });
 };
 CommaSeparatedListDemo.args = {
     heading: 'List Heading'

package/lib/core/List/CommaSeparatedList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommaSeparatedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,KAAC,kBAAkB,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,~~WAAI~~,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/List',\n component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n args: CommaSeparatedListProps\n) => {\n const items = [\n 'Value 1',\n 'Value 2',\n 'Value 3',\n 'Value 4',\n 'Value 5',\n 'Value 6',\n 'Value 7',\n 'Value 8',\n 'Value 9',\n 'Value 10',\n 'Value 11',\n 'Value 12',\n 'Value 13',\n 'Value 14'\n ];\n\n return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n heading: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"CommaSeparatedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,KAAC,kBAAkB,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/List',\n component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n args: CommaSeparatedListProps\n) => {\n const items = [\n 'Value 1',\n 'Value 2',\n 'Value 3',\n 'Value 4',\n 'Value 5',\n 'Value 6',\n 'Value 7',\n 'Value 8',\n 'Value 9',\n 'Value 10',\n 'Value 11',\n 'Value 12',\n 'Value 13',\n 'Value 14'\n ];\n\n return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n heading: { control: { type: 'text' } }\n};\n"]}

package/lib/core/List/OrderedList.stories.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const OrderedListDemo = (args) => {
             setLimit(args.itemsToShow);
         }
     };
-    return (_jsx(OrderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: items.slice(0, limit), count: items.flat().length }, void 0));
+    return (_jsx(OrderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: items.slice(0, limit), count: items.flat().length }));
 };
 OrderedListDemo.args = {
     heading: 'List Heading',

package/lib/core/List/OrderedList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAoB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;CACf,CAAC;AAOV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/E,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,~~WAC1B~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { OrderedListProps, OrderedList } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/List',\n component: OrderedList\n} as Meta;\n\ninterface OrderedListStoryProps {\n itemsToShow: number;\n heading: OrderedListProps['heading'];\n}\n\nexport const OrderedListDemo: Story<OrderedListStoryProps> = (args: OrderedListStoryProps) => {\n const [limit, setLimit] = useState(0);\n const items = [\n 'Value 1',\n ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],\n 'Value 9',\n 'Value 10',\n 'Value 11',\n 'Value 12'\n ];\n\n useEffect(() => {\n setLimit(args.itemsToShow);\n }, [args.itemsToShow]);\n\n const handleToggleShow = () => {\n if (limit === args.itemsToShow) {\n setLimit(items.flat().length);\n } else {\n setLimit(args.itemsToShow);\n }\n };\n\n return (\n <OrderedList\n onToggleShow={handleToggleShow}\n heading={args.heading}\n items={items.slice(0, limit)}\n count={items.flat().length}\n />\n );\n};\n\nOrderedListDemo.args = {\n heading: 'List Heading',\n itemsToShow: 3\n};\n\nOrderedListDemo.argTypes = {\n heading: { control: { type: 'text' } },\n itemsToShow: { control: { type: 'number' } }\n};\n"]}
1	+ {"version":3,"file":"OrderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAoB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;CACf,CAAC;AAOV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/E,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { OrderedListProps, OrderedList } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/List',\n component: OrderedList\n} as Meta;\n\ninterface OrderedListStoryProps {\n itemsToShow: number;\n heading: OrderedListProps['heading'];\n}\n\nexport const OrderedListDemo: Story<OrderedListStoryProps> = (args: OrderedListStoryProps) => {\n const [limit, setLimit] = useState(0);\n const items = [\n 'Value 1',\n ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],\n 'Value 9',\n 'Value 10',\n 'Value 11',\n 'Value 12'\n ];\n\n useEffect(() => {\n setLimit(args.itemsToShow);\n }, [args.itemsToShow]);\n\n const handleToggleShow = () => {\n if (limit === args.itemsToShow) {\n setLimit(items.flat().length);\n } else {\n setLimit(args.itemsToShow);\n }\n };\n\n return (\n <OrderedList\n onToggleShow={handleToggleShow}\n heading={args.heading}\n items={items.slice(0, limit)}\n count={items.flat().length}\n />\n );\n};\n\nOrderedListDemo.args = {\n heading: 'List Heading',\n itemsToShow: 3\n};\n\nOrderedListDemo.argTypes = {\n heading: { control: { type: 'text' } },\n itemsToShow: { control: { type: 'number' } }\n};\n"]}

package/lib/core/List/UnorderedList.stories.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const UnorderedListDemo = (args) => {
             setLimit(args.itemsToShow);
         }
     };
-    return (_jsx(UnorderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: items.slice(0, limit), count: items.flat().length }, void 0));
+    return (_jsx(UnorderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: items.slice(0, limit), count: items.flat().length }));
 };
 UnorderedListDemo.args = {
     heading: 'List Heading',

package/lib/core/List/UnorderedList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UnorderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/UnorderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAsB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,aAAa;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,iBAAiB,GAAmC,CAC/D,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/E,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,~~WAC1B~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { UnorderedListProps, UnorderedList } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/List',\n component: UnorderedList\n} as Meta;\n\ninterface UnorderedListStoryProps {\n itemsToShow: number;\n heading: UnorderedListProps['heading'];\n}\n\nexport const UnorderedListDemo: Story<UnorderedListStoryProps> = (\n args: UnorderedListStoryProps\n) => {\n const [limit, setLimit] = useState(0);\n const items = [\n 'Value 1',\n ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],\n 'Value 9',\n 'Value 10',\n 'Value 11',\n 'Value 12'\n ];\n\n useEffect(() => {\n setLimit(args.itemsToShow);\n }, [args.itemsToShow]);\n\n const handleToggleShow = () => {\n if (limit === args.itemsToShow) {\n setLimit(items.flat().length);\n } else {\n setLimit(args.itemsToShow);\n }\n };\n\n return (\n <UnorderedList\n onToggleShow={handleToggleShow}\n heading={args.heading}\n items={items.slice(0, limit)}\n count={items.flat().length}\n />\n );\n};\n\nUnorderedListDemo.args = {\n heading: 'List Heading',\n itemsToShow: 3\n};\n\nUnorderedListDemo.argTypes = {\n heading: { control: { type: 'text' } },\n itemsToShow: { control: { type: 'number' } }\n};\n"]}
1	+ {"version":3,"file":"UnorderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/UnorderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAsB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,aAAa;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,iBAAiB,GAAmC,CAC/D,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/E,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { UnorderedListProps, UnorderedList } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/List',\n component: UnorderedList\n} as Meta;\n\ninterface UnorderedListStoryProps {\n itemsToShow: number;\n heading: UnorderedListProps['heading'];\n}\n\nexport const UnorderedListDemo: Story<UnorderedListStoryProps> = (\n args: UnorderedListStoryProps\n) => {\n const [limit, setLimit] = useState(0);\n const items = [\n 'Value 1',\n ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],\n 'Value 9',\n 'Value 10',\n 'Value 11',\n 'Value 12'\n ];\n\n useEffect(() => {\n setLimit(args.itemsToShow);\n }, [args.itemsToShow]);\n\n const handleToggleShow = () => {\n if (limit === args.itemsToShow) {\n setLimit(items.flat().length);\n } else {\n setLimit(args.itemsToShow);\n }\n };\n\n return (\n <UnorderedList\n onToggleShow={handleToggleShow}\n heading={args.heading}\n items={items.slice(0, limit)}\n count={items.flat().length}\n />\n );\n};\n\nUnorderedListDemo.args = {\n heading: 'List Heading',\n itemsToShow: 3\n};\n\nUnorderedListDemo.argTypes = {\n heading: { control: { type: 'text' } },\n itemsToShow: { control: { type: 'number' } }\n};\n"]}

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

@@ -30,21 +30,21 @@ const MockCondition = () => {
                     setLocalState(cur => ({ ...cur, lhs: e.target.value }));
                 }, children: mockFields.map(field => {
                     return (_jsx(Option, { value: field, children: field }, field));
-                }) }, void 0), _jsx(Select, { label: 'Comparator', onChange: (e) => {
+                }) }), _jsx(Select, { label: 'Comparator', onChange: (e) => {
                     setLocalState(cur => ({ ...cur, comparator: e.target.value }));
                 }, children: ['Equals', 'Contains', 'Starts with'].map(comparator => {
                     return (_jsx(Option, { value: comparator, children: comparator }, comparator));
-                }) }, void 0), _jsx(Input, { label: 'Value', value: localState.rhs, onChange: (e) => {
+                }) }), _jsx(Input, { label: 'Value', value: localState.rhs, onChange: (e) => {
                     setLocalState(cur => ({ ...cur, rhs: e.target.value }));
-                } }, void 0)] }, void 0));
+                } })] }));
 };
 export const FilterRenderer = () => {
     const [conditions, setConditions] = useState(() => [_jsx(MockCondition, {}, 1)]);
     return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [conditions, _jsx("div", { children: _jsx(Button, { variant: 'link', onClick: () => {
                         setConditions(cur => [...cur, _jsx(MockCondition, {}, cur.length + 1)]);
-                    }, children: _jsxs(Flex, { container: { inline: true, alignItems: 'start', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx("span", { children: "Add condition" }, void 0)] }, void 0) }, void 0) }, void 0)] }, void 0));
+                    }, children: _jsxs(Flex, { container: { inline: true, alignItems: 'start', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: "Add condition" })] }) }) })] }));
 };
 export const GroupRenderer = () => {
-    return _jsx(_Fragment, { children: "GroupBy content goes here..." }, void 0);
+    return _jsx(_Fragment, { children: "GroupBy content goes here..." });
 };
 //# sourceMappingURL=ListToolbar.mocks.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.mocks.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,aAAa,EAAY,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EACL,qBAAqB,EACrB,MAAM,EAEN,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,CAAC,MAAM,OAAO,GAAa,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACjF,IAAI;IACJ,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,QAAQ;CACf,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAA+B;IACnD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE;IAChD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE;IACjD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,aAAa,CAAmB,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AAEpF,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAE1E,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,cAAc,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAC9D,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;IAE7B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC;QAC3C,GAAG,EAAE,SAAS;QACd,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;KACR,CAAC,CAAC;IAEH,qBAAqB,CAAC,GAAG,EAAE;QACzB,cAAc,CAAC;YACb,CAAC,WAAW,CAAC,EAAE,UAAU;SAC1B,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IAE9C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,2BAA2B,EAAE,aAC5D,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;oBAC9C,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC1D,CAAC,YAEA,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;oBACtB,OAAO,CACL,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,YACjB,KAAK,IADmB,KAAK,CAEvB,CACV,CAAC;gBACJ,CAAC,CAAC,~~WACK~~,EACT,KAAC,MAAM,IACL,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;oBAC9C,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBACjE,CAAC,YAEA,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;oBACtD,OAAO,CACL,KAAC,MAAM,IAAC,KAAK,EAAE,UAAU,YACtB,UAAU,IADmB,UAAU,CAEjC,CACV,CAAC;gBACJ,CAAC,CAAC,~~WACK~~,EACT,KAAC,KAAK,IACJ,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,UAAU,CAAC,GAAG,EACrB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;oBAC7C,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC1D,CAAC,~~WACD~~,~~YACG~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,GAAG,EAAE,CAAC,CAAC,KAAC,aAAa,MAAM,CAAC,CAAI,CAAC,CAAC,CAAC;IAC/F,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,UAAU,EACX,wBACE,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,KAAC,aAAa,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,CAAI,CAAC,CAAC,CAAC;oBACzE,CAAC,YAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,MAAM,aACvE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,EACpB,~~mDAA0B~~,~~YACrB~~,~~WACA~~,~~WACL~~,~~YACD~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,~~qEAAiC~~,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["import { ChangeEvent, createContext, Dispatch, useContext, useState } from 'react';\n\nimport {\n useAfterInitialEffect,\n useUID,\n Action,\n Input,\n Select,\n Option,\n Flex,\n Button,\n Icon,\n Grid\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nexport const actions: Action[] = ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n text,\n id: text,\n icon: 'filter'\n}));\n\nexport const mockViews: ViewSelectorProps['views'] = [\n { id: '1', text: 'Data view 1', selected: true },\n { id: '2', text: 'Data view 2', selected: false },\n { id: '3', text: 'Data view 3', selected: false }\n];\n\nexport const StagedStateDispatchContext = createContext<Dispatch<object>>(() => {});\n\nconst mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);\n\nconst MockCondition = () => {\n const setStagedState = useContext(StagedStateDispatchContext);\n const conditionId = useUID();\n\n const [localState, setLocalState] = useState({\n lhs: 'Field 1',\n comparator: 'Equals',\n rhs: ''\n });\n\n useAfterInitialEffect(() => {\n setStagedState({\n [conditionId]: localState\n });\n }, [conditionId, localState, setStagedState]);\n\n return (\n <Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>\n <Select\n label='Field'\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n setLocalState(cur => ({ ...cur, lhs: e.target.value }));\n }}\n >\n {mockFields.map(field => {\n return (\n <Option value={field} key={field}>\n {field}\n </Option>\n );\n })}\n </Select>\n <Select\n label='Comparator'\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n setLocalState(cur => ({ ...cur, comparator: e.target.value }));\n }}\n >\n {['Equals', 'Contains', 'Starts with'].map(comparator => {\n return (\n <Option value={comparator} key={comparator}>\n {comparator}\n </Option>\n );\n })}\n </Select>\n <Input\n label='Value'\n value={localState.rhs}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setLocalState(cur => ({ ...cur, rhs: e.target.value }));\n }}\n />\n </Grid>\n );\n};\n\nexport const FilterRenderer = () => {\n const [conditions, setConditions] = useState<JSX.Element[]>(() => [<MockCondition key={1} />]);\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {conditions}\n <div>\n <Button\n variant='link'\n onClick={() => {\n setConditions(cur => [...cur, <MockCondition key={cur.length + 1} />]);\n }}\n >\n <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n <Icon name='plus' />\n <span>Add condition</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport const GroupRenderer = () => {\n return <>GroupBy content goes here...</>;\n};\n"]}
1	+ {"version":3,"file":"ListToolbar.mocks.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, createContext, Dispatch, useContext, useState } from 'react';\n\nimport {\n useAfterInitialEffect,\n useUID,\n Action,\n Input,\n Select,\n Option,\n Flex,\n Button,\n Icon,\n Grid\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nexport const actions: Action[] = ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n text,\n id: text,\n icon: 'filter'\n}));\n\nexport const mockViews: ViewSelectorProps['views'] = [\n { id: '1', text: 'Data view 1', selected: true },\n { id: '2', text: 'Data view 2', selected: false },\n { id: '3', text: 'Data view 3', selected: false }\n];\n\nexport const StagedStateDispatchContext = createContext<Dispatch<object>>(() => {});\n\nconst mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);\n\nconst MockCondition = () => {\n const setStagedState = useContext(StagedStateDispatchContext);\n const conditionId = useUID();\n\n const [localState, setLocalState] = useState({\n lhs: 'Field 1',\n comparator: 'Equals',\n rhs: ''\n });\n\n useAfterInitialEffect(() => {\n setStagedState({\n [conditionId]: localState\n });\n }, [conditionId, localState, setStagedState]);\n\n return (\n <Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>\n <Select\n label='Field'\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n setLocalState(cur => ({ ...cur, lhs: e.target.value }));\n }}\n >\n {mockFields.map(field => {\n return (\n <Option value={field} key={field}>\n {field}\n </Option>\n );\n })}\n </Select>\n <Select\n label='Comparator'\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n setLocalState(cur => ({ ...cur, comparator: e.target.value }));\n }}\n >\n {['Equals', 'Contains', 'Starts with'].map(comparator => {\n return (\n <Option value={comparator} key={comparator}>\n {comparator}\n </Option>\n );\n })}\n </Select>\n <Input\n label='Value'\n value={localState.rhs}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setLocalState(cur => ({ ...cur, rhs: e.target.value }));\n }}\n />\n </Grid>\n );\n};\n\nexport const FilterRenderer = () => {\n const [conditions, setConditions] = useState<JSX.Element[]>(() => [<MockCondition key={1} />]);\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {conditions}\n <div>\n <Button\n variant='link'\n onClick={() => {\n setConditions(cur => [...cur, <MockCondition key={cur.length + 1} />]);\n }}\n >\n <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n <Icon name='plus' />\n <span>Add condition</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport const GroupRenderer = () => {\n return <>GroupBy content goes here...</>;\n};\n"]}

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

@@ -71,9 +71,9 @@ export const ListToolbarDemo = () => {
                     }, onCreateNew: action('Clicked Create New'), search: { onSearchSubmit: action('Search submit') }, count: {
                         total: 32,
                         selected: 4
-                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions }, void 0) }, void 0) }, void 0) }, void 0));
+                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions }) }) }) }));
 };
 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 }, actions: actions }, void 0) }, void 0) }, void 0));
+    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(ListToolbar, { heading: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212 }, actions: actions }) }) }));
 };
 //# 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":"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~~WAChB~~,~~WACkC~~,~~WAC3B~~,~~WACR~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,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,EACrB,OAAO,EAAE,OAAO,~~WAChB~~,~~WACS~~,~~WACR~~,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Card, CardHeader, ListToolbar } 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\nexport const ListToolbarDemo = () => {\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 }}\n onCreateNew={action('Clicked Create New')}\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 />\n </StagedStateDispatchContext.Provider>\n </CardHeader>\n </Card>\n );\n};\n\nexport const SimpleToolbarDemo = () => {\n return (\n <Card>\n <CardHeader>\n <ListToolbar\n heading='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212 }}\n actions={actions}\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 } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Card, CardHeader, ListToolbar } 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\nexport const ListToolbarDemo = () => {\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 }}\n onCreateNew={action('Clicked Create New')}\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 />\n </StagedStateDispatchContext.Provider>\n </CardHeader>\n </Card>\n );\n};\n\nexport const SimpleToolbarDemo = () => {\n return (\n <Card>\n <CardHeader>\n <ListToolbar\n heading='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212 }}\n actions={actions}\n />\n </CardHeader>\n </Card>\n );\n};\n"]}

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

@@ -24,7 +24,7 @@ export const LocationDemo = (args) => {
                 else {
                     setLocationObj(selectedValueObj.name);
                 }
-            }, onClick: handleClick, centerMapOnChange: args.centerMapOnChange, zoomLevel: args.zoomLevel, height: args.height, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0) }, void 0));
+            }, onClick: handleClick, centerMapOnChange: args.centerMapOnChange, zoomLevel: args.zoomLevel, height: args.height, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }) }));
 };
 LocationDemo.args = {
     apiKey: '',
@@ -58,7 +58,7 @@ export const LocationInputDemo = (args) => {
                 setValue(inputValue);
             }, onSelect: selectedValueObj => {
                 setValue(selectedValueObj.name);
-            }, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0) }, void 0));
+            }, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }) }));
 };
 LocationInputDemo.args = {
     apiKey: '',
@@ -85,7 +85,7 @@ export const LocationViewDemo = (args) => {
     const handleClick = ({ latitude, longitude }) => {
         setLocation(`${latitude.toString()},${longitude.toString()}`);
     };
-    return (_jsx(MapsContext.Provider, { value: { name: 'google', apiKey: args.apiKey }, children: _jsx(LocationView, { location: location, centerMapOnChange: args.centerMapOnChange, zoomLevel: args.zoomLevel, height: args.height, onClick: handleClick }, void 0) }, void 0));
+    return (_jsx(MapsContext.Provider, { value: { name: 'google', apiKey: args.apiKey }, children: _jsx(LocationView, { location: location, centerMapOnChange: args.centerMapOnChange, zoomLevel: args.zoomLevel, height: args.height, onClick: handleClick }) }));
 };
 LocationViewDemo.args = {
     apiKey: '',
@@ -102,7 +102,7 @@ LocationViewDemo.argTypes = {
     height: { control: { type: 'text' } }
 };
 export const LocationDisplayDemo = (args) => {
-    return (_jsx(MapsContext.Provider, { value: { name: 'google', apiKey: args.apiKey }, children: _jsx(LocationDisplay, { value: args.value, zoomLevel: args.zoomLevel, height: args.height, variant: args.variant, displayText: args.displayText }, void 0) }, void 0));
+    return (_jsx(MapsContext.Provider, { value: { name: 'google', apiKey: args.apiKey }, children: _jsx(LocationDisplay, { value: args.value, zoomLevel: args.zoomLevel, height: args.height, variant: args.variant, displayText: args.displayText }) }));
 };
 LocationDisplayDemo.args = {
     apiKey: '',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Location.stories.js","sourceRoot":"","sources":["../../../src/core/Location/Location.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n LatLng,\n LocationDisplay,\n LocationDisplayProps,\n LocationInput,\n LocationInputProps,\n LocationView,\n LocationViewProps,\n MapsContext\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Location',\n component: LocationInput\n} as Meta;\n\ninterface APIKey {\n apiKey?: string;\n}\n\nexport const LocationDemo: Story<LocationInputProps & APIKey> = (\n args: LocationInputProps & APIKey\n) => {\n const [value, setValue] = useState('Boston, MA');\n const [locationObj, setLocationObj] = useState<LatLng \| string>('Boston, MA');\n\n const handleClick = ({ latitude, longitude }: { latitude: number; longitude: number }) => {\n setLocationObj({ latitude, longitude });\n };\n\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationInput\n showMap\n defaultToCurrentLocation={args.defaultToCurrentLocation}\n value={value}\n label={args.label}\n labelHidden={args.labelHidden}\n onChange={inputValue => {\n setValue(inputValue);\n }}\n location={locationObj}\n onSelect={selectedValueObj => {\n setValue(selectedValueObj.name);\n if (selectedValueObj.latitude && selectedValueObj.longitude) {\n setLocationObj({\n latitude: selectedValueObj.latitude,\n longitude: selectedValueObj.longitude\n });\n } else {\n setLocationObj(selectedValueObj.name);\n }\n }}\n onClick={handleClick}\n centerMapOnChange={args.centerMapOnChange}\n zoomLevel={args.zoomLevel}\n height={args.height}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationDemo.args = {\n apiKey: '',\n defaultToCurrentLocation: false,\n label: 'Pick a location',\n labelHidden: false,\n centerMapOnChange: true,\n zoomLevel: 13,\n height: '25rem',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nLocationDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n defaultToCurrentLocation: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n centerMapOnChange: { control: { type: 'boolean' } },\n zoomLevel: { control: { type: 'number' } },\n height: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const LocationInputDemo: Story<LocationInputProps & APIKey> = (\n args: LocationInputProps & APIKey\n) => {\n const [value, setValue] = useState('');\n\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationInput\n defaultToCurrentLocation={args.defaultToCurrentLocation}\n value={value}\n label={args.label}\n labelHidden={args.labelHidden}\n onChange={inputValue => {\n setValue(inputValue);\n }}\n onSelect={selectedValueObj => {\n setValue(selectedValueObj.name);\n }}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationInputDemo.args = {\n apiKey: '',\n defaultToCurrentLocation: false,\n label: 'Pick a location',\n labelHidden: false,\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nLocationInputDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n defaultToCurrentLocation: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const LocationViewDemo: Story<LocationViewProps & APIKey> = (\n args: LocationViewProps & APIKey\n) => {\n const [location, setLocation] = useState(args.location);\n\n const handleClick = ({ latitude, longitude }: { latitude: number; longitude: number }) => {\n setLocation(`${latitude.toString()},${longitude.toString()}`);\n };\n\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationView\n location={location}\n centerMapOnChange={args.centerMapOnChange}\n zoomLevel={args.zoomLevel}\n height={args.height}\n onClick={handleClick}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationViewDemo.args = {\n apiKey: '',\n location: 'Boston, MA',\n centerMapOnChange: true,\n zoomLevel: 13,\n height: '25rem'\n};\n\nLocationViewDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n location: { control: { type: 'text' } },\n centerMapOnChange: { control: { type: 'boolean' } },\n zoomLevel: { control: { type: 'number' } },\n height: { control: { type: 'text' } }\n};\n\nexport const LocationDisplayDemo: Story<LocationDisplayProps & APIKey> = (\n args: LocationDisplayProps & APIKey\n) => {\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationDisplay\n value={args.value}\n zoomLevel={args.zoomLevel}\n height={args.height}\n variant={args.variant}\n displayText={args.displayText}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationDisplayDemo.args = {\n apiKey: '',\n value: 'Boston, MA',\n zoomLevel: 13,\n height: '25rem',\n variant: 'text-map',\n displayText: 'Come visit Boston!'\n};\n\nLocationDisplayDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n value: { control: { type: 'text' } },\n zoomLevel: { control: { type: 'number' } },\n height: { control: { type: 'text' } },\n variant: { options: ['text-map', 'map', 'text'], control: { type: 'select' } },\n displayText: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"Location.stories.js","sourceRoot":"","sources":["../../../src/core/Location/Location.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAEL,eAAe,EAEf,aAAa,EAEb,YAAY,EAEZ,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,aAAa;CACjB,CAAC;AAMV,MAAM,CAAC,MAAM,YAAY,GAAuC,CAC9D,IAAiC,EACjC,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,YAAY,CAAC,CAAC;IAE9E,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA2C,EAAE,EAAE;QACvF,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAClE,KAAC,aAAa,IACZ,OAAO,QACP,wBAAwB,EAAE,IAAI,CAAC,wBAAwB,EACvD,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,UAAU,CAAC,EAAE;gBACrB,QAAQ,CAAC,UAAU,CAAC,CAAC;YACvB,CAAC,EACD,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,gBAAgB,CAAC,EAAE;gBAC3B,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBAChC,IAAI,gBAAgB,CAAC,QAAQ,IAAI,gBAAgB,CAAC,SAAS,EAAE;oBAC3D,cAAc,CAAC;wBACb,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;wBACnC,SAAS,EAAE,gBAAgB,CAAC,SAAS;qBACtC,CAAC,CAAC;iBACJ;qBAAM;oBACL,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;iBACvC;YACH,CAAC,EACD,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,GACmB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,EAAE;IACV,wBAAwB,EAAE,KAAK;IAC/B,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,IAAI;IACvB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1D,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAuC,CACnE,IAAiC,EACjC,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAClE,KAAC,aAAa,IACZ,wBAAwB,EAAE,IAAI,CAAC,wBAAwB,EACvD,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,UAAU,CAAC,EAAE;gBACrB,QAAQ,CAAC,UAAU,CAAC,CAAC;YACvB,CAAC,EACD,QAAQ,EAAE,gBAAgB,CAAC,EAAE;gBAC3B,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,GACmB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,MAAM,EAAE,EAAE;IACV,wBAAwB,EAAE,KAAK;IAC/B,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,KAAK;IAClB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1D,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAsC,CACjE,IAAgC,EAChC,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA2C,EAAE,EAAE;QACvF,WAAW,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,IAAI,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAClE,KAAC,YAAY,IACX,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,WAAW,GACpB,GACmB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,YAAY;IACtB,iBAAiB,EAAE,IAAI;IACvB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAyC,CACvE,IAAmC,EACnC,EAAE;IACF,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAClE,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,GAC7B,GACmB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,UAAU;IACnB,WAAW,EAAE,oBAAoB;CAClC,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n LatLng,\n LocationDisplay,\n LocationDisplayProps,\n LocationInput,\n LocationInputProps,\n LocationView,\n LocationViewProps,\n MapsContext\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Location',\n component: LocationInput\n} as Meta;\n\ninterface APIKey {\n apiKey?: string;\n}\n\nexport const LocationDemo: Story<LocationInputProps & APIKey> = (\n args: LocationInputProps & APIKey\n) => {\n const [value, setValue] = useState('Boston, MA');\n const [locationObj, setLocationObj] = useState<LatLng \| string>('Boston, MA');\n\n const handleClick = ({ latitude, longitude }: { latitude: number; longitude: number }) => {\n setLocationObj({ latitude, longitude });\n };\n\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationInput\n showMap\n defaultToCurrentLocation={args.defaultToCurrentLocation}\n value={value}\n label={args.label}\n labelHidden={args.labelHidden}\n onChange={inputValue => {\n setValue(inputValue);\n }}\n location={locationObj}\n onSelect={selectedValueObj => {\n setValue(selectedValueObj.name);\n if (selectedValueObj.latitude && selectedValueObj.longitude) {\n setLocationObj({\n latitude: selectedValueObj.latitude,\n longitude: selectedValueObj.longitude\n });\n } else {\n setLocationObj(selectedValueObj.name);\n }\n }}\n onClick={handleClick}\n centerMapOnChange={args.centerMapOnChange}\n zoomLevel={args.zoomLevel}\n height={args.height}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationDemo.args = {\n apiKey: '',\n defaultToCurrentLocation: false,\n label: 'Pick a location',\n labelHidden: false,\n centerMapOnChange: true,\n zoomLevel: 13,\n height: '25rem',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nLocationDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n defaultToCurrentLocation: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n centerMapOnChange: { control: { type: 'boolean' } },\n zoomLevel: { control: { type: 'number' } },\n height: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const LocationInputDemo: Story<LocationInputProps & APIKey> = (\n args: LocationInputProps & APIKey\n) => {\n const [value, setValue] = useState('');\n\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationInput\n defaultToCurrentLocation={args.defaultToCurrentLocation}\n value={value}\n label={args.label}\n labelHidden={args.labelHidden}\n onChange={inputValue => {\n setValue(inputValue);\n }}\n onSelect={selectedValueObj => {\n setValue(selectedValueObj.name);\n }}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationInputDemo.args = {\n apiKey: '',\n defaultToCurrentLocation: false,\n label: 'Pick a location',\n labelHidden: false,\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nLocationInputDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n defaultToCurrentLocation: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const LocationViewDemo: Story<LocationViewProps & APIKey> = (\n args: LocationViewProps & APIKey\n) => {\n const [location, setLocation] = useState(args.location);\n\n const handleClick = ({ latitude, longitude }: { latitude: number; longitude: number }) => {\n setLocation(`${latitude.toString()},${longitude.toString()}`);\n };\n\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationView\n location={location}\n centerMapOnChange={args.centerMapOnChange}\n zoomLevel={args.zoomLevel}\n height={args.height}\n onClick={handleClick}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationViewDemo.args = {\n apiKey: '',\n location: 'Boston, MA',\n centerMapOnChange: true,\n zoomLevel: 13,\n height: '25rem'\n};\n\nLocationViewDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n location: { control: { type: 'text' } },\n centerMapOnChange: { control: { type: 'boolean' } },\n zoomLevel: { control: { type: 'number' } },\n height: { control: { type: 'text' } }\n};\n\nexport const LocationDisplayDemo: Story<LocationDisplayProps & APIKey> = (\n args: LocationDisplayProps & APIKey\n) => {\n return (\n <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n <LocationDisplay\n value={args.value}\n zoomLevel={args.zoomLevel}\n height={args.height}\n variant={args.variant}\n displayText={args.displayText}\n />\n </MapsContext.Provider>\n );\n};\n\nLocationDisplayDemo.args = {\n apiKey: '',\n value: 'Boston, MA',\n zoomLevel: 13,\n height: '25rem',\n variant: 'text-map',\n displayText: 'Come visit Boston!'\n};\n\nLocationDisplayDemo.argTypes = {\n apiKey: { control: { type: 'text' } },\n value: { control: { type: 'text' } },\n zoomLevel: { control: { type: 'number' } },\n height: { control: { type: 'text' } },\n variant: { options: ['text-map', 'map', 'text'], control: { type: 'select' } },\n displayText: { control: { type: 'text' } }\n};\n"]}

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

@@ -62,7 +62,7 @@ export const MenuDemo = (args) => {
             }
             return {
                 ...item,
-                visual: args.showItemVisual && item.visual ? _jsx(StyledFlag, { children: item.visual }, void 0) : undefined,
+                visual: args.showItemVisual && item.visual ? _jsx(StyledFlag, { children: item.visual }) : undefined,
                 count: args.showItemCount && item.items ? item.items.length : undefined,
                 secondary: args.showItemSecondary ? item.secondary : undefined,
                 selected: selectable ? !!item.selected : undefined,
@@ -118,7 +118,7 @@ export const MenuDemo = (args) => {
             searchEleRef?.current?.focus();
         }
     }, [isOpen, searchEleRef.current]);
-    return (_jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'primary', children: "Open the MENU" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, children: _jsx(Menu, { ...args, id: menuID, items: args.noItems ? [] : itemsToRender, accent: search ? searchRegex : undefined, mode: args.variant === 'drill-down' ? args.mode : 'action', loading: isLoading, emptyText: args.emptyText, variant: args.variant, loadMore: args.infiniteScroll && hasMore ? loadMore : undefined, focusControlEl: searchEleRef.current || undefined, onItemClick: id => {
+    return (_jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'primary', children: "Open the MENU" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, children: _jsx(Menu, { ...args, id: menuID, items: args.noItems ? [] : itemsToRender, accent: search ? searchRegex : undefined, mode: args.variant === 'drill-down' ? args.mode : 'action', loading: isLoading, emptyText: args.emptyText, variant: args.variant, loadMore: args.infiniteScroll && hasMore ? loadMore : undefined, focusControlEl: searchEleRef.current || undefined, onItemClick: id => {
                         if (args.mode === 'single-select' || args.mode === 'multi-select') {
                             setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
                         }
@@ -132,15 +132,15 @@ export const MenuDemo = (args) => {
                             }
                             resetMenu();
                         }
-                    }, header: args.variant === 'drill-down' && (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'combobox', searchInputAriaLabel: 'Start typing to search.' }, void 0)), footer: args.variant === 'flyout' ? (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'combobox', searchInputAriaLabel: 'Start typing to search.' }, void 0)) : ((args.mode === 'single-select' || args.mode === 'multi-select') && (_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: resetMenu, children: "Cancel" }, void 0), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
+                    }, header: args.variant === 'drill-down' && (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'combobox', searchInputAriaLabel: 'Start typing to search.' })), footer: args.variant === 'flyout' ? (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'combobox', searchInputAriaLabel: 'Start typing to search.' })) : ((args.mode === 'single-select' || args.mode === 'multi-select') && (_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: resetMenu, children: "Cancel" }), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
                                     resetMenu();
                                     push({
                                         id: `${Date.now()}`,
                                         content: `${selections.length} item${selections.length !== 1 ? 's' : ''} added`
                                     });
-                                }, children: ["Add", selections.length > 0 && args.mode === 'multi-select' && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Count, { children: selections.length }, void 0)] }, void 0))] }, void 0)] }, void 0))) }, void 0) }, void 0)] }, void 0));
+                                }, children: ["Add", selections.length > 0 && args.mode === 'multi-select' && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Count, { children: selections.length })] }))] })] }))) }) })] }));
 };
 export const FlatMenuDemo = (args) => {
-    return _jsx(MenuDemo, { ...args, useFlatData: true }, void 0);
+    return _jsx(MenuDemo, { ...args, useFlatData: true });
 };
 //# sourceMappingURL=Menu.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.stories.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n Button,\n Count,\n Flex,\n Menu,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n Popover,\n SearchInput,\n ToasterContext,\n createUID,\n useElement,\n useOuterEvent,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n title: 'Core/Menu',\n component: Menu,\n args: {\n variant: 'drill-down',\n mode: 'action',\n showItemSecondary: true,\n showItemVisual: true,\n showItemCount: true,\n parentSelection: false,\n filterPattern: 'contains',\n infiniteScroll: false,\n noItems: false,\n emptyText: 'No items',\n useFlatData: false\n },\n argTypes: {\n variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n showItemSecondary: { control: { type: 'boolean' } },\n showItemVisual: { control: { type: 'boolean' } },\n showItemCount: { control: { type: 'boolean' } },\n parentSelection: { control: { type: 'boolean' } },\n filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n infiniteScroll: { control: { type: 'boolean' } },\n noItems: { control: { type: 'boolean' } },\n emptyText: { control: { type: 'text' } },\n useFlatData: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {\n showItemSecondary?: boolean;\n showItemVisual?: boolean;\n showItemCount?: boolean;\n parentSelection?: boolean;\n filterPattern?: 'contains' \| 'starts with';\n infiniteScroll?: boolean;\n noItems?: boolean;\n useFlatData?: boolean;\n}\n\nexport const MenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n const menuID = createUID();\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useContext(ToasterContext);\n const [isOpen, setIsOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<MenuProps['items']>(\n args.infiniteScroll ? data.slice(0, 10) : data\n );\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [search, setSearch] = useState('');\n const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n const searchRegex = useMemo(() => {\n const escapedSearch = search.replace(/[.*+\\-?^${}()\|[\\]\\\\]/g, '\\\\$&');\n return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n }, [search, args.filterPattern]);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n item => {\n let selectable = false;\n\n if (!item.items \|\| args.parentSelection) {\n selectable = true;\n }\n\n return {\n ...item,\n visual:\n args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n count: args.showItemCount && item.items ? item.items.length : undefined,\n secondary: args.showItemSecondary ? item.secondary : undefined,\n selected: selectable ? !!item.selected : undefined,\n tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n };\n }\n );\n }, [search, items, searchRegex, args.showItemVisual]);\n\n const resetMenu = useCallback(() => {\n setIsOpen(false);\n setItems(data.slice(0, 10));\n setSearch('');\n }, []);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') resetMenu();\n },\n [resetMenu]\n );\n\n const loadMore = useCallback(\n (expandedItemId?: MenuItemProps['id']) => {\n if (!expandedItemId) {\n setIsLoading(true);\n setTimeout(() => {\n setIsLoading(false);\n setItems(prevItems => {\n const newItems = data.slice(prevItems.length, prevItems.length + 10);\n\n if (newItems.length === 0) setHasMore(false);\n\n return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n });\n }, 2000);\n }\n },\n [items, isLoading]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n if (args.variant === 'flyout') {\n const path = e.composedPath();\n const considerEvent = path.every(el => {\n return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n });\n if (considerEvent) {\n resetMenu();\n }\n } else {\n resetMenu();\n }\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n searchEleRef?.current?.focus();\n }\n }, [isOpen, searchEleRef.current]);\n\n return (\n <Flex container={{ justify: 'center' }}>\n <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n Open the MENU\n </Button>\n\n <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n <Menu\n {...args}\n id={menuID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n loading={isLoading}\n emptyText={args.emptyText}\n variant={args.variant}\n loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n focusControlEl={searchEleRef.current \|\| undefined}\n onItemClick={id => {\n if (args.mode === 'single-select' \|\| args.mode === 'multi-select') {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n } else {\n const clicked = menuHelpers.getItem(items, id);\n if (clicked) {\n push({\n id: `${Date.now()}`,\n content: `${clicked.primary} added`\n });\n }\n resetMenu();\n }\n }}\n header={\n args.variant === 'drill-down' && (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n ) : (\n (args.mode === 'single-select' \|\| args.mode === 'multi-select') && (\n <Flex container={{ justify: 'between' }}>\n <Button onClick={resetMenu}>Cancel</Button>\n\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n resetMenu();\n push({\n id: `${Date.now()}`,\n content: `${selections.length} item${\n selections.length !== 1 ? 's' : ''\n } added`\n });\n }}\n >\n Add\n {selections.length > 0 && args.mode === 'multi-select' && (\n <>\n  <Count>{selections.length}</Count>\n </>\n )}\n </Button>\n </Flex>\n )\n )\n }\n />\n </Popover>\n </Flex>\n );\n};\n\nexport const FlatMenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n return <MenuDemo {...args} useFlatData />;\n};\n"]}
1	+ {"version":3,"file":"Menu.stories.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n Button,\n Count,\n Flex,\n Menu,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n Popover,\n SearchInput,\n ToasterContext,\n createUID,\n useElement,\n useOuterEvent,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n title: 'Core/Menu',\n component: Menu,\n args: {\n variant: 'drill-down',\n mode: 'action',\n showItemSecondary: true,\n showItemVisual: true,\n showItemCount: true,\n parentSelection: false,\n filterPattern: 'contains',\n infiniteScroll: false,\n noItems: false,\n emptyText: 'No items',\n useFlatData: false\n },\n argTypes: {\n variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n showItemSecondary: { control: { type: 'boolean' } },\n showItemVisual: { control: { type: 'boolean' } },\n showItemCount: { control: { type: 'boolean' } },\n parentSelection: { control: { type: 'boolean' } },\n filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n infiniteScroll: { control: { type: 'boolean' } },\n noItems: { control: { type: 'boolean' } },\n emptyText: { control: { type: 'text' } },\n useFlatData: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {\n showItemSecondary?: boolean;\n showItemVisual?: boolean;\n showItemCount?: boolean;\n parentSelection?: boolean;\n filterPattern?: 'contains' \| 'starts with';\n infiniteScroll?: boolean;\n noItems?: boolean;\n useFlatData?: boolean;\n}\n\nexport const MenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n const menuID = createUID();\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useContext(ToasterContext);\n const [isOpen, setIsOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<MenuProps['items']>(\n args.infiniteScroll ? data.slice(0, 10) : data\n );\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [search, setSearch] = useState('');\n const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n const searchRegex = useMemo(() => {\n const escapedSearch = search.replace(/[.*+\\-?^${}()\|[\\]\\\\]/g, '\\\\$&');\n return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n }, [search, args.filterPattern]);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n item => {\n let selectable = false;\n\n if (!item.items \|\| args.parentSelection) {\n selectable = true;\n }\n\n return {\n ...item,\n visual:\n args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n count: args.showItemCount && item.items ? item.items.length : undefined,\n secondary: args.showItemSecondary ? item.secondary : undefined,\n selected: selectable ? !!item.selected : undefined,\n tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n };\n }\n );\n }, [search, items, searchRegex, args.showItemVisual]);\n\n const resetMenu = useCallback(() => {\n setIsOpen(false);\n setItems(data.slice(0, 10));\n setSearch('');\n }, []);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') resetMenu();\n },\n [resetMenu]\n );\n\n const loadMore = useCallback(\n (expandedItemId?: MenuItemProps['id']) => {\n if (!expandedItemId) {\n setIsLoading(true);\n setTimeout(() => {\n setIsLoading(false);\n setItems(prevItems => {\n const newItems = data.slice(prevItems.length, prevItems.length + 10);\n\n if (newItems.length === 0) setHasMore(false);\n\n return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n });\n }, 2000);\n }\n },\n [items, isLoading]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n if (args.variant === 'flyout') {\n const path = e.composedPath();\n const considerEvent = path.every(el => {\n return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n });\n if (considerEvent) {\n resetMenu();\n }\n } else {\n resetMenu();\n }\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n searchEleRef?.current?.focus();\n }\n }, [isOpen, searchEleRef.current]);\n\n return (\n <Flex container={{ justify: 'center' }}>\n <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n Open the MENU\n </Button>\n\n <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n <Menu\n {...args}\n id={menuID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n loading={isLoading}\n emptyText={args.emptyText}\n variant={args.variant}\n loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n focusControlEl={searchEleRef.current \|\| undefined}\n onItemClick={id => {\n if (args.mode === 'single-select' \|\| args.mode === 'multi-select') {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n } else {\n const clicked = menuHelpers.getItem(items, id);\n if (clicked) {\n push({\n id: `${Date.now()}`,\n content: `${clicked.primary} added`\n });\n }\n resetMenu();\n }\n }}\n header={\n args.variant === 'drill-down' && (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n ) : (\n (args.mode === 'single-select' \|\| args.mode === 'multi-select') && (\n <Flex container={{ justify: 'between' }}>\n <Button onClick={resetMenu}>Cancel</Button>\n\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n resetMenu();\n push({\n id: `${Date.now()}`,\n content: `${selections.length} item${\n selections.length !== 1 ? 's' : ''\n } added`\n });\n }}\n >\n Add\n {selections.length > 0 && args.mode === 'multi-select' && (\n <>\n  <Count>{selections.length}</Count>\n </>\n )}\n </Button>\n </Flex>\n )\n )\n }\n />\n </Popover>\n </Flex>\n );\n};\n\nexport const FlatMenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n return <MenuDemo {...args} useFlatData />;\n};\n"]}

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

@@ -37,7 +37,7 @@ export const MenuButtonAction = (args) => {
         return menuHelpers.mapTree(items, item => {
             return {
                 ...item,
-                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }, void 0) : undefined,
+                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }) : undefined,
                 secondary: args.showItemSecondary ? item.secondary : undefined
             };
         });
@@ -53,7 +53,7 @@ export const MenuButtonAction = (args) => {
             mode: 'action',
             items: itemsToRender,
             onItemClick: () => { }
-        } }, void 0));
+        } }));
 };
 MenuButtonAction.args = {
     text: 'Actions'
@@ -74,7 +74,7 @@ export const MenuButtonSingleSelect = (args) => {
         return menuHelpers.mapTree(items, item => {
             return {
                 ...item,
-                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }, void 0) : undefined,
+                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }) : undefined,
                 secondary: args.showItemSecondary ? item.secondary : undefined
             };
         });
@@ -94,7 +94,7 @@ export const MenuButtonSingleSelect = (args) => {
             mode: 'single-select',
             items: itemsToRender,
             onItemClick: handleMenuItemClick
-        } }, void 0));
+        } }));
 };
 MenuButtonSingleSelect.args = {
     text: 'Select an item'
@@ -115,7 +115,7 @@ export const MenuButtonMultiSelect = (args) => {
         return menuHelpers.mapTree(items, item => {
             return {
                 ...item,
-                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }, void 0) : undefined,
+                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }) : undefined,
                 secondary: args.showItemSecondary ? item.secondary : undefined
             };
         });
@@ -141,8 +141,8 @@ export const MenuButtonMultiSelect = (args) => {
                                 };
                             });
                         });
-                    }, children: "Clear" }, void 0) }, void 0))
-        } }, void 0));
+                    }, children: "Clear" }) }))
+        } }));
 };
 MenuButtonMultiSelect.args = {
     text: 'Select items'
@@ -160,7 +160,7 @@ export const MenuButtonDisabledItems = (args) => {
         return menuHelpers.mapTree(items, (item, index) => {
             return {
                 ...item,
-                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }, void 0) : undefined,
+                visual: args.showItemVisual ? _jsx(Avatar, { name: item.primary }) : undefined,
                 secondary: args.showItemSecondary ? item.secondary : undefined,
                 disabled: (index + 1) % 2 === 0
             };
@@ -177,7 +177,7 @@ export const MenuButtonDisabledItems = (args) => {
             mode: 'action',
             items: itemsToRender,
             onItemClick: () => { }
-        } }, void 0));
+        } }));
 };
 MenuButtonDisabledItems.args = {
     text: 'Actions'