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

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

package/lib/rte/RichTextEditor/RichTextEditor.stories.js CHANGED Viewed

@@ -46,7 +46,7 @@ export const RichTextEditorDemo = (args) => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ], onImageAdded: onImageAdded, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, defaultValue: '<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>' }, void 0), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: overwriteText, children: "Overwrite RTE value with 'Hello world!' HTML" }, void 0), _jsx(Button, { onClick: insertText, label: 'RTE Must be focused for insert text to work', children: "Insert 'Hi mom!'" }, void 0)] }, void 0)] }, void 0));
+                ], onImageAdded: onImageAdded, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, defaultValue: '<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: overwriteText, children: "Overwrite RTE value with 'Hello world!' HTML" }), _jsx(Button, { onClick: insertText, label: 'RTE Must be focused for insert text to work', children: "Insert 'Hi mom!'" })] })] }));
 };
 export const RichTextEditorWithLogs = () => {
     const editorRef = useRef(null);
@@ -72,7 +72,7 @@ export const RichTextEditorWithLogs = () => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }, void 0), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }, void 0), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }, void 0), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" }, void 0)] }, void 0), _jsx(Text, { children: content }, void 0)] }, void 0));
+                ], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" })] }), _jsx(Text, { children: content })] }));
 };
 export const RichTextEditorMDDemo = (args) => {
     const [users, setUsers] = useState(demoUsers);
@@ -91,7 +91,7 @@ export const RichTextEditorMDDemo = (args) => {
                 markdown: `@${item.id}:${item.primary}:user:`,
                 text: item.primary
             };
-        }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+        }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 export const RichTextEditorHtmlParsingDemo = () => {
     const [html, setHtml] = useState('<p>Hello world!</p>');
@@ -100,7 +100,7 @@ export const RichTextEditorHtmlParsingDemo = () => {
         const src = URL.createObjectURL(image);
         rteRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }, void 0) }, void 0), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }, void 0) }, void 0)] }, void 0), _jsx(RichTextEditor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: 'Rich text editor', toolbar: [
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }) }), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }) })] }), _jsx(RichTextEditor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: 'Rich text editor', toolbar: [
                     'inline-styling',
                     'headers',
                     'tables',
@@ -109,6 +109,6 @@ export const RichTextEditorHtmlParsingDemo = () => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ] }, void 0)] }, void 0));
+                ] })] }));
 };
 //# sourceMappingURL=RichTextEditor.stories.js.map

package/lib/rte/RichTextEditor/RichTextEditor.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useRef } from 'react';\n\nimport {\n Button,\n Flex,\n MenuItemProps,\n Text,\n Card,\n CardContent,\n CardFooter,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n title: 'RTE/RichTextEditor',\n component: RichTextEditor,\n args: {\n label: 'Rich text editor',\n labelHidden: false,\n info: 'The rich text editor can be used in forms, comments, and documents',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { 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} as Meta;\n\nexport const RichTextEditorDemo: Story<RichTextEditorProps> = (args: RichTextEditorProps) => {\n const editorRef = useRef<RichTextEditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const overwriteText = () => {\n editorRef.current?.insertHtml('<p>Hello world!</p>', true);\n };\n\n const insertText = () => {\n editorRef.current?.insertText('Hi mom!');\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n defaultValue='<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>'\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={overwriteText}>\n Overwrite RTE value with 'Hello world!' HTML\n </Button>\n <Button onClick={insertText} label='RTE Must be focused for insert text to work'>\n Insert 'Hi mom!'\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport const RichTextEditorWithLogs: Story = () => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState<string \| undefined>();\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const showContent = (type: 'html' \| 'plain_text' \| 'rich_text') => {\n if (type === 'html') setContent(editorRef.current?.getHtml());\n else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n label='Rich text editor with logs'\n info='Click on the buttons below to show the different formatted outputs of the RTE'\n />\n\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => showContent('html')}>Show HTML</Button>\n <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n </Flex>\n\n <Text>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorMDDemo: Story<RichTextEditorProps> = (args: RichTextEditorProps) => {\n const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n const searchUsers = (event: { search: string; trigger: string }) => {\n if (event.trigger === '@') {\n setUsers(\n demoUsers.filter(user => {\n return user.primary.toLowerCase().includes(event.search.toLowerCase());\n })\n );\n }\n };\n\n return (\n <RichTextEditor\n searchTriggers={[{ trigger: '@', regex: '[a-zA-Z](?: [a-zA-Z])?' }]}\n onSearch={searchUsers}\n getSearchItemReplacement={(id: string) => {\n const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown: `@${item.id}:${item.primary}:user:`,\n text: item.primary\n };\n }}\n menu={users.length ? { items: users } : undefined}\n autoFocus\n markdownOnly\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo: Story = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<RichTextEditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <RichTextEditor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Rich text editor'\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextEditor.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useRef } from 'react';\n\nimport {\n Button,\n Flex,\n MenuItemProps,\n Text,\n Card,\n CardContent,\n CardFooter,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n title: 'RTE/RichTextEditor',\n component: RichTextEditor,\n args: {\n label: 'Rich text editor',\n labelHidden: false,\n info: 'The rich text editor can be used in forms, comments, and documents',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { 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} as Meta;\n\nexport const RichTextEditorDemo: Story<RichTextEditorProps> = (args: RichTextEditorProps) => {\n const editorRef = useRef<RichTextEditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const overwriteText = () => {\n editorRef.current?.insertHtml('<p>Hello world!</p>', true);\n };\n\n const insertText = () => {\n editorRef.current?.insertText('Hi mom!');\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n defaultValue='<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>'\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={overwriteText}>\n Overwrite RTE value with 'Hello world!' HTML\n </Button>\n <Button onClick={insertText} label='RTE Must be focused for insert text to work'>\n Insert 'Hi mom!'\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport const RichTextEditorWithLogs: Story = () => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState<string \| undefined>();\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const showContent = (type: 'html' \| 'plain_text' \| 'rich_text') => {\n if (type === 'html') setContent(editorRef.current?.getHtml());\n else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n label='Rich text editor with logs'\n info='Click on the buttons below to show the different formatted outputs of the RTE'\n />\n\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => showContent('html')}>Show HTML</Button>\n <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n </Flex>\n\n <Text>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorMDDemo: Story<RichTextEditorProps> = (args: RichTextEditorProps) => {\n const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n const searchUsers = (event: { search: string; trigger: string }) => {\n if (event.trigger === '@') {\n setUsers(\n demoUsers.filter(user => {\n return user.primary.toLowerCase().includes(event.search.toLowerCase());\n })\n );\n }\n };\n\n return (\n <RichTextEditor\n searchTriggers={[{ trigger: '@', regex: '[a-zA-Z](?: [a-zA-Z])?' }]}\n onSearch={searchUsers}\n getSearchItemReplacement={(id: string) => {\n const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown: `@${item.id}:${item.primary}:user:`,\n text: item.primary\n };\n }}\n menu={users.length ? { items: users } : undefined}\n autoFocus\n markdownOnly\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo: Story = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<RichTextEditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <RichTextEditor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Rich text editor'\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n />\n </Flex>\n );\n};\n"]}

package/lib/rte/RichTextEditor/RichTextViewer.stories.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const RichTextViewerDemo = () => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ], onChange: () => setContent(editorRef.current?.getRichText() || '') }, void 0), _jsx(RichTextViewer, { content: content, type: 'richtext' }, void 0)] }, void 0));
+                ], onChange: () => setContent(editorRef.current?.getRichText() || '') }), _jsx(RichTextViewer, { content: content, type: 'richtext' })] }));
 };
 export const RichTextViewerHTMLDemo = () => {
     const editorRef = useRef(null);
@@ -32,11 +32,11 @@ export const RichTextViewerHTMLDemo = () => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ], onChange: () => setContent(editorRef.current?.getHtml() || '') }, void 0), _jsx(RichTextViewer, { content: content, type: 'html' }, void 0)] }, void 0));
+                ], onChange: () => setContent(editorRef.current?.getHtml() || '') }), _jsx(RichTextViewer, { content: content, type: 'html' })] }));
 };
 export const RichTextViewerMDDemo = () => {
     const LinkComponent = ({ token }) => {
-        return (_jsx(Link, { href: token.href, previewable: true, children: token.text }, void 0));
+        return (_jsx(Link, { href: token.href, previewable: true, children: token.text }));
     };
     const editorRef = useRef(null);
     const [content, setContent] = useState('');
@@ -56,11 +56,11 @@ export const RichTextViewerMDDemo = () => {
                         markdown: `@${item.id}:${item.primary}:user:`,
                         text: item.primary
                     };
-                }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, defaultValue: '# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\n\nThere is built in support for #tags: as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)', onChange: () => setContent(editorRef.current?.getPlainText() || '') }, void 0), _jsx(RichTextViewer, { content: content, type: 'markdown', interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], markdownMap: {
+                }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, defaultValue: '# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\n\nThere is built in support for #tags: as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)', onChange: () => setContent(editorRef.current?.getPlainText() || '') }), _jsx(RichTextViewer, { content: content, type: 'markdown', interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], markdownMap: {
                     link: (linkToken) => {
                         if (linkToken.href?.includes('www.pega.com'))
                             return LinkComponent;
                     }
-                } }, void 0)] }, void 0));
+                } })] }));
 };
 //# sourceMappingURL=RichTextViewer.stories.js.map

package/lib/rte/RichTextEditor/RichTextViewer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAiB,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EACL,cAAc,EACd,cAAc,EAGf,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,cAAc;CAClB,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,cAAc,IACb,GAAG,EAAE,SAAS,EACd,OAAO,EAAE;oBACP,gBAAgB;oBAChB,SAAS;oBACT,QAAQ;oBACR,OAAO;oBACP,OAAO;oBACP,gBAAgB;oBAChB,aAAa;iBACd,EACD,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,~~WAClE~~,EAEF,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,~~WAAG~~,~~YAC~~/C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,cAAc,IACb,GAAG,EAAE,SAAS,EACd,OAAO,EAAE;oBACP,gBAAgB;oBAChB,SAAS;oBACT,QAAQ;oBACR,OAAO;oBACP,OAAO;oBACP,gBAAgB;oBAChB,aAAa;iBACd,EACD,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,~~WAC9D~~,EAEF,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,~~WAAG~~,~~YAC3C~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;QAC/D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,WAAW,kBAChC,KAAK,CAAC,IAAI,~~WACN~~,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,SAAS,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,IAAI,KAAK,CAAC,OAAO,KAAK,GAAG,EAAE;YACzB,QAAQ,CACN,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;gBACtB,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;YACzE,CAAC,CAAC,CACH,CAAC;SACH;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,cAAc,IACb,GAAG,EAAE,SAAS,EACd,cAAc,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,0BAA0B,EAAE,CAAC,EACrE,QAAQ,EAAE,WAAW,EACrB,wBAAwB,EAAE,CAAC,EAAU,EAAE,EAAE;oBACvC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;oBAE/D,IAAI,CAAC,IAAI;wBAAE,OAAO,SAAS,CAAC;oBAE5B,OAAO;wBACL,QAAQ,EAAE,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,QAAQ;wBAC7C,IAAI,EAAE,IAAI,CAAC,OAAO;qBACnB,CAAC;gBACJ,CAAC,EACD,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACjD,SAAS,QACT,YAAY,QACZ,YAAY,EACV,kUAAkU,EAEpU,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,~~WACnE~~,EAEF,KAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,UAAU,EACf,oBAAoB,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,EAChE,WAAW,EAAE;oBACX,IAAI,EAAE,CAAC,SAA2B,EAAE,EAAE;wBACpC,IAAI,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC;4BAAE,OAAO,aAAa,CAAC;oBACrE,CAAC;iBACF,~~WACD~~,~~YACG~~,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n RichTextEditor,\n RichTextViewer,\n RichTextEditorState,\n TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n title: 'RTE/RichTextViewer',\n component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo = () => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState('[]');\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onChange={() => setContent(editorRef.current?.getRichText() \|\| '')}\n />\n\n <RichTextViewer content={content} type='richtext' />\n </Flex>\n );\n};\n\nexport const RichTextViewerHTMLDemo = () => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState('');\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onChange={() => setContent(editorRef.current?.getHtml() \|\| '')}\n />\n\n <RichTextViewer content={content} type='html' />\n </Flex>\n );\n};\n\nexport const RichTextViewerMDDemo = () => {\n const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n return (\n <Link href={token.href} previewable>\n {token.text}\n </Link>\n );\n };\n\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState('');\n const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n const searchUsers = (event: { search: string; trigger: string }) => {\n if (event.trigger === '@') {\n setUsers(\n demoUsers.filter(user => {\n return user.primary.toLowerCase().includes(event.search.toLowerCase());\n })\n );\n }\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n searchTriggers={[{ trigger: '@', regex: '[a-zA-Z](?: [a-zA-Z])?' }]}\n onSearch={searchUsers}\n getSearchItemReplacement={(id: string) => {\n const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown: `@${item.id}:${item.primary}:user:`,\n text: item.primary\n };\n }}\n menu={users.length ? { items: users } : undefined}\n autoFocus\n markdownOnly\n defaultValue={\n '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n }\n onChange={() => setContent(editorRef.current?.getPlainText() \|\| '')}\n />\n\n <RichTextViewer\n content={content}\n type='markdown'\n interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n markdownMap={{\n link: (linkToken: TokenMap['link']) => {\n if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n }\n }}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextViewer.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n RichTextEditor,\n RichTextViewer,\n RichTextEditorState,\n TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n title: 'RTE/RichTextViewer',\n component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo = () => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState('[]');\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onChange={() => setContent(editorRef.current?.getRichText() \|\| '')}\n />\n\n <RichTextViewer content={content} type='richtext' />\n </Flex>\n );\n};\n\nexport const RichTextViewerHTMLDemo = () => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState('');\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onChange={() => setContent(editorRef.current?.getHtml() \|\| '')}\n />\n\n <RichTextViewer content={content} type='html' />\n </Flex>\n );\n};\n\nexport const RichTextViewerMDDemo = () => {\n const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n return (\n <Link href={token.href} previewable>\n {token.text}\n </Link>\n );\n };\n\n const editorRef = useRef<RichTextEditorState>(null);\n const [content, setContent] = useState('');\n const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n const searchUsers = (event: { search: string; trigger: string }) => {\n if (event.trigger === '@') {\n setUsers(\n demoUsers.filter(user => {\n return user.primary.toLowerCase().includes(event.search.toLowerCase());\n })\n );\n }\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <RichTextEditor\n ref={editorRef}\n searchTriggers={[{ trigger: '@', regex: '[a-zA-Z](?: [a-zA-Z])?' }]}\n onSearch={searchUsers}\n getSearchItemReplacement={(id: string) => {\n const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown: `@${item.id}:${item.primary}:user:`,\n text: item.primary\n };\n }}\n menu={users.length ? { items: users } : undefined}\n autoFocus\n markdownOnly\n defaultValue={\n '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n }\n onChange={() => setContent(editorRef.current?.getPlainText() \|\| '')}\n />\n\n <RichTextViewer\n content={content}\n type='markdown'\n interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n markdownMap={{\n link: (linkToken: TokenMap['link']) => {\n if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n }\n }}\n />\n </Flex>\n );\n};\n"]}

package/lib/social/Chat/Chat.stories.js CHANGED Viewed

@@ -18,8 +18,8 @@ export const ChatHeaderDemo = () => {
     const actionsConfig = (_jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
                         gap: 1,
                         alignItems: 'center'
-                    }, children: [_jsx(Icon, { name: 'chats' }, void 0), _jsx(Text, { children: "Transcripts" }, void 0)] }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', children: _jsx(Icon, { name: 'information' }, void 0) }, void 0)] }, void 0));
-    return (_jsx(ChatHeader, { title: 'Live Chat', icon: 'chat-solid', "aria-label": 'Chat header', actions: actionsConfig }, void 0));
+                    }, children: [_jsx(Icon, { name: 'chats' }), _jsx(Text, { children: "Transcripts" })] }) }), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', children: _jsx(Icon, { name: 'information' }) })] }));
+    return (_jsx(ChatHeader, { title: 'Live Chat', icon: 'chat-solid', "aria-label": 'Chat header', actions: actionsConfig }));
 };
 /** ***************************** ChatHeader component - END ******************* */
 /** **************************** MessageList component - START ************************* */
@@ -28,7 +28,7 @@ export const MessageListDemo = () => {
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
     return (_jsx(Flex, { container: true, style: { height: '80vh' }, children: _jsx(MessageList, { tabIndex: 0, messages: messages, unReadMessageCount: unReadMessageCount, onScrollToButtonClick: () => {
                 setUnReadMessagesCount(0);
-            } }, void 0) }, void 0));
+            } }) }));
 };
 /** **************************** MessageList component - END **************************** */
 /** ***************************** Message component - START ********************** */
@@ -56,7 +56,7 @@ export const MessageDemo = (args) => {
             title: 'Ask the expert'
         }
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(Message, { type: 'message', attachments: attachments, avatarInfo: { name: 'John Brown' }, status: 'Opened', timeStamp: '1:44 PM', message: 'Hi, Welcome to u-plus. How can I help you ?', variant: args.variant, direction: args.direction }, void 0), _jsx("br", {}, void 0), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, pagePushLinks: pagePushLinks, variant: args.variant, direction: args.direction }, void 0), _jsx("br", {}, void 0), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, variant: args.variant, direction: args.direction }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Message, { type: 'message', attachments: attachments, avatarInfo: { name: 'John Brown' }, status: 'Opened', timeStamp: '1:44 PM', message: 'Hi, Welcome to u-plus. How can I help you ?', variant: args.variant, direction: args.direction }), _jsx("br", {}), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, pagePushLinks: pagePushLinks, variant: args.variant, direction: args.direction }), _jsx("br", {}), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, variant: args.variant, direction: args.direction })] }));
 };
 MessageDemo.args = {
     variant: 'receiver',
@@ -68,9 +68,9 @@ MessageDemo.argTypes = {
 };
 /** ***************************** Message component - END *********************** */
 /** **************************** SystemMessage component - START ***************** */
-export const SystemMessageDemo = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }, void 0));
+export const SystemMessageDemo = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }));
 export const TypeIndicatorDemo = (args) => {
-    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message }, void 0);
+    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message });
 };
 TypeIndicatorDemo.args = {
     message: ''
@@ -87,7 +87,7 @@ export const ChatTranscriptsDemo = () => {
 };
 /** **************************** ChatTranscripts component - END ************************ */
 /** *************************** TranscriptMessage component - START ****************** */
-export const TranscriptMessageDemo = () => (_jsx(TranscriptMessage, { timeStamp: '01:20 PM', variant: 'bot', message: 'Hello\u2026 This is bot. How can I help you? Please select your category.' }, void 0));
+export const TranscriptMessageDemo = () => (_jsx(TranscriptMessage, { timeStamp: '01:20 PM', variant: 'bot', message: 'Hello\u2026 This is bot. How can I help you? Please select your category.' }));
 /** *************************** TranscriptMessage component - END ******************** */
 /** *************************** SuggestedReplyPicker component - START ****************** */
 export const SuggestedReplyPickerDemo = () => {
@@ -105,9 +105,9 @@ export const SuggestedReplyPickerDemo = () => {
     ];
     return (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: suggestedReply => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
-        }, onDismiss: action('Suggested reply dismissed') }, void 0));
+        }, onDismiss: action('Suggested reply dismissed') }));
 };
-export const ChatComposerDemo = (args) => (_jsxs(ChatComposer, { maxAttachments: args.maxAttachments, attachments: ChatMockData.defaultAttachments, maxLength: 256, placeholder: 'Type here to send message', onSend: () => { }, children: [_jsx(MenuButton, { text: 'Phrases', menu: { items: [] } }, void 0), _jsx(MenuButton, { text: 'Page Push', menu: { items: [] } }, void 0)] }, void 0));
+export const ChatComposerDemo = (args) => (_jsxs(ChatComposer, { maxAttachments: args.maxAttachments, attachments: ChatMockData.defaultAttachments, maxLength: 256, placeholder: 'Type here to send message', onSend: () => { }, children: [_jsx(MenuButton, { text: 'Phrases', menu: { items: [] } }), _jsx(MenuButton, { text: 'Page Push', menu: { items: [] } })] }));
 ChatComposerDemo.args = {
     maxAttachments: 2
 };
@@ -144,9 +144,9 @@ export const StandardChat = (args) => {
         message: (_jsxs(Flex, { container: {
                 direction: 'column',
                 gap: 1
-            }, children: [_jsx(TextArea, { placeholder: 'Please comment\u2026', label: 'Please comment on our service performance and how we can better serve you. Thank you for your time.' }, void 0), _jsxs(Select, { label: 'Is the problem resolved?', children: [_jsx(Option, { children: "Yes" }, void 0), _jsx(Option, { children: "No" }, void 0)] }, void 0), _jsx(Flex, { container: {
+            }, children: [_jsx(TextArea, { placeholder: 'Please comment\u2026', label: 'Please comment on our service performance and how we can better serve you. Thank you for your time.' }), _jsxs(Select, { label: 'Is the problem resolved?', children: [_jsx(Option, { children: "Yes" }), _jsx(Option, { children: "No" })] }), _jsx(Flex, { container: {
                         justify: 'center'
-                    }, children: _jsx(Button, { variant: 'primary', children: "Submit" }, void 0) }, void 0)] }, void 0))
+                    }, children: _jsx(Button, { variant: 'primary', children: "Submit" }) })] }))
     };
     const mockChatMessages = useMemo(() => {
         return [
@@ -154,8 +154,8 @@ export const StandardChat = (args) => {
                 const { messagePrivacy, ...restMessageData } = message;
                 if (messagePrivacy) {
                     restMessageData.messageHeader = {
-                        content: _jsx("span", { children: messagePrivacy }, void 0),
-                        meta: _jsx(Link, { href: '/', children: "I-12345" }, void 0)
+                        content: _jsx("span", { children: messagePrivacy }),
+                        meta: _jsx(Link, { href: '/', children: "I-12345" })
                     };
                 }
                 return restMessageData;
@@ -234,7 +234,7 @@ export const StandardChat = (args) => {
                 {
                     id: '1',
                     name: 'Session status',
-                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" })
                 },
                 {
                     id: '2',
@@ -246,7 +246,7 @@ export const StandardChat = (args) => {
                 {
                     id: '1',
                     name: 'Session status',
-                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" })
                 },
                 {
                     id: '2',
@@ -263,7 +263,7 @@ export const StandardChat = (args) => {
                 {
                     id: '1',
                     name: 'Session status',
-                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" })
                 },
                 {
                     id: '2',
@@ -280,12 +280,12 @@ export const StandardChat = (args) => {
     const header = (_jsx(ChatHeader, { title: Channels.options[args.selectedChannel || 'LiveChat'].title, icon: Channels.options[args.selectedChannel || 'LiveChat'].icon, "aria-label": 'Chat header', actions: _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', onClick: () => setShowTranscripts(!showTranscripts), "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
                             gap: 1,
                             alignItems: 'center'
-                        }, children: [_jsx(Icon, { name: 'chats' }, void 0), _jsx(Text, { children: "Transcripts" }, void 0)] }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', ref: setButtonRef, onClick: () => setOpenPopover(current => !current), children: _jsx(Icon, { name: 'information' }, void 0) }, void 0), _jsx(Popover, { show: openPopover, target: buttonRef, ref: setPopoverRef, arrow: true, placement: 'bottom-end', children: _jsxs(Flex, { container: { direction: 'column', gap: 1, pad: 2 }, children: [_jsx(Text, { variant: 'h4', children: additionalInfo.title }, void 0), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.options[args.selectedChannel || 'LiveChat'] }, void 0)] }, void 0) }, void 0), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: {
+                        }, children: [_jsx(Icon, { name: 'chats' }), _jsx(Text, { children: "Transcripts" })] }) }), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', ref: setButtonRef, onClick: () => setOpenPopover(current => !current), children: _jsx(Icon, { name: 'information' }) }), _jsx(Popover, { show: openPopover, target: buttonRef, ref: setPopoverRef, arrow: true, placement: 'bottom-end', children: _jsxs(Flex, { container: { direction: 'column', gap: 1, pad: 2 }, children: [_jsx(Text, { variant: 'h4', children: additionalInfo.title }), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.options[args.selectedChannel || 'LiveChat'] })] }) }), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: {
                         items: [
                             { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },
                             { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
                         ]
-                    } }, void 0)] }, void 0) }, void 0));
+                    } })] }) }));
     const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
     const transcriptsContainerRef = useRef(null);
     useOuterEvent('mousedown', [transcriptsContainerRef], () => {
@@ -298,21 +298,21 @@ export const StandardChat = (args) => {
                         gap: 1
                     }, children: _jsx(Button, { icon: true, "aria-label": 'Show earlier transcripts', variant: 'secondary', onClick: () => {
                             setShowEarlierTranscripts(!showEarlierTranscripts);
-                        }, children: _jsx(Icon, { name: 'caret-up' }, void 0) }, void 0) }, void 0)), transcripts
+                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })), transcripts
                     .sort((transcript) => transcript.earlierTranscripts)
                     .filter((transcript) => showEarlierTranscripts ? true : !transcript.earlierTranscripts)
                     .map((transcript) => {
                     const transcriptData = transcript.data.map((message) => {
                         if (message.messagePrivacy) {
                             message.transcriptHeader = {
-                                content: _jsx(Status, { variant: 'warn', children: message.messagePrivacy.privacy }, void 0),
-                                meta: _jsx(Link, { href: '/', children: "I-12345" }, void 0)
+                                content: _jsx(Status, { variant: 'warn', children: message.messagePrivacy.privacy }),
+                                meta: _jsx(Link, { href: '/', children: "I-12345" })
                             };
                         }
                         return message;
                     });
                     return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcriptData }, transcript.id));
-                })] }, void 0)) : undefined;
+                })] })) : undefined;
     }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
     const chatBanner = {
         id: 'warning',
@@ -346,7 +346,7 @@ export const StandardChat = (args) => {
                     message: args.message,
                     ariaLabel: 'Pegasystems is typing'
                 }
-            ] }, void 0) }, void 0));
+            ] }) }));
     const chatComposerImperativeHandleRef = useRef(null);
     const [mountPopover, setMountPopover] = useState(false);
     const specialKeysConfig = {
@@ -385,17 +385,17 @@ export const StandardChat = (args) => {
                 message,
                 timeStamp: '1:45 PM'
             });
-        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: args.disableChat }, void 0), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: args.disableChat }, void 0), _jsx(Popover, { show: mountPopover, target: chatComposerImperativeHandleRef?.current?.textAreaRef?.current, placement: 'top-start', children: _jsx(Menu, { scrollAt: 20, items: ChatMockData.phrasesDisplayNames.map((name, idx) => ({
+        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: args.disableChat }), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: args.disableChat }), _jsx(Popover, { show: mountPopover, target: chatComposerImperativeHandleRef?.current?.textAreaRef?.current, placement: 'top-start', children: _jsx(Menu, { scrollAt: 20, items: ChatMockData.phrasesDisplayNames.map((name, idx) => ({
                         primary: name,
                         id: idx.toString(),
                         onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])
-                    })) }, void 0) }, void 0)] }, void 0));
+                    })) }) })] }));
     const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: (suggestedReply) => {
             chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
             setShowSuggestedReplies(false);
         }, onDismiss: () => {
             setShowSuggestedReplies(false);
-        } }, void 0)) : undefined;
+        } })) : undefined;
     const fetchGoogleSprite = () => {
         return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
     };
@@ -405,7 +405,7 @@ export const StandardChat = (args) => {
                 height: 'calc(100vh)',
                 width: args.chatWidth || '30rem',
                 margin: 'auto'
-            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: args.showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker }, void 0) }, void 0) }, void 0));
+            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: args.showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker }) }) }));
 };
 StandardChat.args = {
     maxAttachments: 2,