npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.4.1 → 3.0.0-dev.6.0 - Mend

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

package/jsx/rte/Editor/Editor.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Editor.mocks.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qBAAqB,CAAC;AAYxC,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,cAAc;IAMd,iBAAiB;CAOlB"}

package/jsx/rte/Editor/Editor.mocks.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import ReactDOM from 'react-dom';
+export const label = 'Form field label';
+const PegaCustom = ({ children }) => {
+    return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
+};
+export class PegaCustomElement extends HTMLElement {
+    removeElements() {
+        while (this.firstChild) {
+            this.removeChild(this.firstChild);
+        }
+    }
+    connectedCallback() {
+        const inner = this.innerHTML;
+        this.removeElements();
+        const mountPoint = document.createElement('span');
+        this.appendChild(mountPoint);
+        ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);
+    }
+}
+//# sourceMappingURL=Editor.mocks.jsx.map

package/jsx/rte/Editor/Editor.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Editor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC;AAExC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;IACxD,OAAO,CACL,CAAC,CAAC,CACA,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAErD,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAChD,cAAc;QACZ,OAAO,IAAI,CAAC,UAAU,EAAE;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACnC;IACH,CAAC;IAED,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;IAChE,CAAC;CACF","sourcesContent":["import ReactDOM from 'react-dom';\n\nexport const label = 'Form field label';\n\nconst PegaCustom = ({ children }: { children: string }) => {\n return (\n <p\n style={{ color: 'blue', textTransform: 'uppercase' }}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: children }}\n />\n );\n};\n\nexport class PegaCustomElement extends HTMLElement {\n removeElements() {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n connectedCallback() {\n const inner = this.innerHTML;\n this.removeElements();\n const mountPoint = document.createElement('span');\n this.appendChild(mountPoint);\n ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n }\n}\n"]}

package/jsx/rte/Editor/Editor.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;~~AAiBxC~~,wBAGU;~~AAIV~~,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;~~AA4BF~~,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}
1	+ {"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAkBxC,wBAGU;AAEV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}

package/jsx/rte/Editor/Editor.stories.jsx CHANGED Viewed

@@ -1,13 +1,12 @@
 import { useState, useRef } from 'react';
-import ReactDOM from 'react-dom';
 import { action } from '@storybook/addon-actions';
 import { Button, Card, CardContent, CardFooter, Flex, Text, TextArea } from '@pega/cosmos-react-core';
 import { Editor } from '@pega/cosmos-react-rte';
+import { label, PegaCustomElement } from './Editor.mocks';
 export default {
     title: 'RTE/Editor',
     component: Editor
 };
-const label = 'Form field label';
 export const EditorDemo = () => {
     const editorRef = useRef(null);
     const onImageAdded = (image, id) => {
@@ -33,23 +32,6 @@ export const ReadonlyFormField = () => {
       <div id="on-github" class="on-github"><h3>Found a problem with this page?</h3><ul><li><a href="https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md" title="You're going to need to sign in to GitHub first (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Edit on <b>GitHub</b></a></li><li><a href="https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md" title="Folder: en-us/web/html (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Source on <b>GitHub</b></a></li><li><a href="https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML" title="This will take you to https://github.com/mdn/content to file a new issue" target="_blank" rel="noopener noreferrer">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href="https://github.com/mdn/content/blob/main/README.md" target="_blank" rel="noopener noreferrer">our Contribution guide</a>.</li></ul></div>
       `}/>);
 };
-const PegaCustom = ({ children }) => {
-    return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
-};
-class PegaCustomElement extends HTMLElement {
-    removeElements() {
-        while (this.firstChild) {
-            this.removeChild(this.firstChild);
-        }
-    }
-    connectedCallback() {
-        const inner = this.innerHTML;
-        this.removeElements();
-        const mountPoint = document.createElement('span');
-        this.appendChild(mountPoint);
-        ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);
-    }
-}
 export const CustomComponentDemo = () => {
     const editorRef = useRef(null);
     const [editor, setEditor] = useState({});

package/jsx/rte/Editor/Editor.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n const editorRef = useRef<EditorState>(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 return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"placeholder\" src=\"http://via.placeholder.com/640x360\"/></body>'\n />\n );\n};\n\nexport const EmptyEditorDemo = () => {\n const editorRef = useRef<EditorState>(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 return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onImageAdded={onImageAdded}\n onFocus={action('Editor has focus')}\n onBlur={action('Editor has blurred')}\n placeholder='Type some stuff in here'\n />\n );\n};\n\nexport const ReadonlyFormField = () => {\n return (\n <Editor\n label={label}\n readOnly\n defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> and many others.</p>\n <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code><</code>\" and \"<code>></code>\".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p>\n\n <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n `}\n />\n );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n return (\n <p\n style={{ color: 'blue', textTransform: 'uppercase' }}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: children }}\n />\n );\n};\n\nclass PegaCustomElement extends HTMLElement {\n removeElements() {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n connectedCallback() {\n const inner = this.innerHTML;\n this.removeElements();\n const mountPoint = document.createElement('span');\n this.appendChild(mountPoint);\n ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n }\n}\n\nexport const CustomComponentDemo = () => {\n const editorRef = useRef<EditorState>(null);\n const [editor, setEditor] = useState({} as TinymceEditor);\n\n const onCustomAction = () => {\n editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n customActions={[\n {\n icon: 'pega',\n text: 'Insert a custom element',\n onMouseDown: () => {\n onCustomAction();\n }\n }\n ]}\n onInit={initializedEditor => {\n setEditor(initializedEditor);\n }}\n />\n );\n};\n\nexport const RichTextEditorWithLogs = () => {\n const editorRef = useRef<EditorState>(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 <Editor\n ref={editorRef}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\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 RichTextEditorHtmlParsingDemo = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<EditorState>(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 <Editor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label={label}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nimport { label, PegaCustomElement } from './Editor.mocks';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\nexport const EditorDemo = () => {\n const editorRef = useRef<EditorState>(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 return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"placeholder\" src=\"http://via.placeholder.com/640x360\"/></body>'\n />\n );\n};\n\nexport const EmptyEditorDemo = () => {\n const editorRef = useRef<EditorState>(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 return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onImageAdded={onImageAdded}\n onFocus={action('Editor has focus')}\n onBlur={action('Editor has blurred')}\n placeholder='Type some stuff in here'\n />\n );\n};\n\nexport const ReadonlyFormField = () => {\n return (\n <Editor\n label={label}\n readOnly\n defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> and many others.</p>\n <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code><</code>\" and \"<code>></code>\".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p>\n\n <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n `}\n />\n );\n};\n\nexport const CustomComponentDemo = () => {\n const editorRef = useRef<EditorState>(null);\n const [editor, setEditor] = useState({} as TinymceEditor);\n\n const onCustomAction = () => {\n editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n customActions={[\n {\n icon: 'pega',\n text: 'Insert a custom element',\n onMouseDown: () => {\n onCustomAction();\n }\n }\n ]}\n onInit={initializedEditor => {\n setEditor(initializedEditor);\n }}\n />\n );\n};\n\nexport const RichTextEditorWithLogs = () => {\n const editorRef = useRef<EditorState>(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 <Editor\n ref={editorRef}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\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 RichTextEditorHtmlParsingDemo = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<EditorState>(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 <Editor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label={label}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}

package/jsx/rte/RichTextEditor/RichTextEditor.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,yBAAyB,CAAC;AAGhE,MAAM,CAAC,MAAM,SAAS,GAAoB;IACxC;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,CAAC;QAC5B,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG;KAChD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,eAAe;QACxB,SAAS,EAAE,CAAC,0BAA0B,EAAE,mBAAmB,CAAC;QAC5D,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAG;KACjD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,mBAAmB,CAAC;QAChC,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,UAAU,CAAC;QACvB,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;QAC7C,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG;KAChD;CACF,CAAC","sourcesContent":["import { Avatar, MenuItemProps } from '@pega/cosmos-react-core';\n\n// cspell:disable\nexport const demoUsers: MenuItemProps[] = [\n {\n id: 'turnc',\n primary: 'Cindy Turner',\n secondary: ['Lead Engineer'],\n visual: <Avatar size='l' name='Cindy Turner' />\n },\n {\n id: 'deans',\n primary: 'Seth DeAngelo',\n secondary: ['Senior Software Engineer', 'Backend Developer'],\n visual: <Avatar size='l' name='Seth DeAngelo' />\n },\n {\n id: 'moorj',\n primary: 'Janet Moore',\n secondary: ['Backend Developer'],\n visual: <Avatar size='l' name='Janet Moore' />\n },\n {\n id: 'thomd',\n primary: 'Dean Thomas',\n secondary: ['Designer'],\n visual: <Avatar size='l' name='Dean Thomas' />\n },\n {\n id: 'hathb',\n primary: 'Bob Hathoway',\n secondary: ['Lead Designer', 'Product Owner'],\n visual: <Avatar size='l' name='Bob Hathoway' />\n }\n];\n"]}
1	+ {"version":3,"file":"RichTextEditor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,yBAAyB,CAAC;AAGhE,MAAM,CAAC,MAAM,SAAS,GAAoB;IACxC;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,CAAC;QAC5B,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG;KAChD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,eAAe;QACxB,SAAS,EAAE,CAAC,0BAA0B,EAAE,mBAAmB,CAAC;QAC5D,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAG;KACjD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,mBAAmB,CAAC;QAChC,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,UAAU,CAAC;QACvB,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;QAC7C,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG;KAChD;CACF,CAAC","sourcesContent":["import { Avatar, MenuItemProps } from '@pega/cosmos-react-core';\n\n// cspell:disable\nexport const demoUsers: MenuItemProps[] = [\n {\n id: 'turnc',\n primary: 'Cindy Turner',\n secondary: ['Lead Engineer'],\n visual: <Avatar size='l' name='Cindy Turner' />\n },\n {\n id: 'deans',\n primary: 'Seth DeAngelo',\n secondary: ['Senior Software Engineer', 'Backend Developer'],\n visual: <Avatar size='l' name='Seth DeAngelo' />\n },\n {\n id: 'moorj',\n primary: 'Janet Moore',\n secondary: ['Backend Developer'],\n visual: <Avatar size='l' name='Janet Moore' />\n },\n {\n id: 'thomd',\n primary: 'Dean Thomas',\n secondary: ['Designer'],\n visual: <Avatar size='l' name='Dean Thomas' />\n },\n {\n id: 'hathb',\n primary: 'Bob Hathoway',\n secondary: ['Lead Designer', 'Product Owner'],\n visual: <Avatar size='l' name='Bob Hathoway' />\n }\n];\n// cspell:enable\n"]}

package/jsx/rte/RichTextEditor/RichTextEditor.stories.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { RichTextEditorProps } from '@pega/cosmos-react-rte';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const RichTextEditorDemo: Story<RichTextEditorProps>;
-export declare const RichTextEditorWithLogs: () => JSX.Element;
+export declare const RichTextEditorWithLogs: Story;
 export declare const RichTextEditorMDDemo: Story<RichTextEditorProps>;
-export declare const RichTextEditorHtmlParsingDemo: () => JSX.Element;
+export declare const RichTextEditorHtmlParsingDemo: Story;
 //# sourceMappingURL=RichTextEditor.stories.d.ts.map

package/jsx/rte/RichTextEditor/RichTextEditor.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAa/C,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAIlG,wBAqBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAkDzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,~~mBA2ClC~~,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,mBAAmB,CAuC3D,CAAC;AAEF,eAAO,MAAM,6BAA6B,~~mBAuCzC~~,CAAC"}
1	+ {"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAa/C,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAIlG,wBAqBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAkDzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA2CpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,mBAAmB,CAuC3D,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAuC3C,CAAC"}

package/jsx/rte/RichTextEditor/RichTextEditor.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.stories.jsx","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 = () => {\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 = () => {\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.jsx","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/jsx/social/Chat/RepeatingView.mocks.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { RepeatingViewRow } from '@pega/cosmos-react-social';
+export interface Contact extends RepeatingViewRow {
+    name: {
+        title: string;
+        first: string;
+        last: string;
+    };
+    phone: string;
+    picture: {
+        thumbnail: string;
+    };
+}
+export declare const FetchContactsAPI: (results: number, abortController: AbortController) => Promise<Contact[]>;
+//# sourceMappingURL=RepeatingView.mocks.d.ts.map

package/jsx/social/Chat/RepeatingView.mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RepeatingView.mocks.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,WAAW,OAAQ,SAAQ,gBAAgB;IAC/C,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,eAAe,KAC7B,OAAO,CAAC,OAAO,EAAE,CAWrB,CAAC"}

package/jsx/social/Chat/RepeatingView.mocks.js ADDED Viewed

@@ -0,0 +1,11 @@
+export const FetchContactsAPI = (results, abortController) => {
+    return fetch(`https://randomuser.me/api?results=${results}`, {
+        signal: abortController.signal
+    })
+        .then(res => res.json())
+        .then((data) => [...data.results].map(item => ({
+        ...item,
+        id: Math.floor(Math.random() * Math.floor(500000)).toString()
+    })));
+};
+//# sourceMappingURL=RepeatingView.mocks.js.map

package/jsx/social/Chat/RepeatingView.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RepeatingView.mocks.js","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.mocks.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,gBAAgB,GAGH,CAAC,OAAO,EAAE,eAAe,EAAE,EAAE;IACrD,OAAO,KAAK,CAAC,qCAAqC,OAAO,EAAE,EAAE;QAC3D,MAAM,EAAE,eAAe,CAAC,MAAM;KAC/B,CAAC;SACC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;SACvB,IAAI,CAAC,CAAC,IAAS,EAAE,EAAE,CAClB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,GAAG,IAAI;QACP,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE;KAC9D,CAAC,CAAC,CACJ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { RepeatingViewRow } from '@pega/cosmos-react-social';\n\nexport interface Contact extends RepeatingViewRow {\n name: { title: string; first: string; last: string };\n phone: string;\n picture: { thumbnail: string };\n}\n\nexport const FetchContactsAPI: (\n results: number,\n abortController: AbortController\n) => Promise<Contact[]> = (results, abortController) => {\n return fetch(`https://randomuser.me/api?results=${results}`, {\n signal: abortController.signal\n })\n .then(res => res.json())\n .then((data: any) =>\n [...data.results].map(item => ({\n ...item,\n id: Math.floor(Math.random() * Math.floor(500000)).toString()\n }))\n );\n};\n"]}

package/jsx/social/Chat/RepeatingView.stories.d.ts CHANGED Viewed

@@ -1,20 +1,9 @@
-/// <reference types="react" />
-import { RepeatingViewRow, RepeatingViewProps } from '@pega/cosmos-react-social';
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<RepeatingViewProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta, Story } from '@storybook/react';
+import { RepeatingViewProps } from '@pega/cosmos-react-social';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export interface Contact extends RepeatingViewRow {
-    name: {
-        title: string;
-        first: string;
-        last: string;
-    };
-    phone: string;
-    picture: {
-        thumbnail: string;
-    };
+interface RepeatingViewStoryProps {
+    scrollDirection: RepeatingViewProps['scrollDirection'];
 }
-export declare const RepeatingViewSample: () => JSX.Element;
+export declare const RepeatingViewSample: Story<RepeatingViewStoryProps>;
 //# sourceMappingURL=RepeatingView.stories.d.ts.map

package/jsx/social/Chat/RepeatingView.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RepeatingView.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.stories.tsx"],"names":[],"mappings":"~~;AAKA~~,OAAO,~~EAIL~~,~~gBAAgB~~,~~EAChB~~,~~kBAAkB~~,~~EACnB~~,MAAM,~~2BAA2B~~,CAAC~~;;;;;AAEnC,wBAGE~~;~~AAEF,MAAM,WAAW,OAAQ,SAAQ,gBAAgB;IAC~~/C,~~IAAI~~,~~EAAE;QAAE~~,~~KAAK~~,EAAE,MAAM,CAAC;~~QAAC~~,~~KAAK~~,~~EAAE,MAAM,CAAC~~;~~QAAC~~,~~IAAI~~,EAAE,~~MAAM~~,~~CAAA;KAAE,~~CAAC~~;IACrD~~,~~KAAK~~,~~EAAE~~,~~MAAM,~~CAAC;~~IACd~~,~~OAAO~~,~~EAAE;QAAE~~,~~SAAS~~,EAAE,~~MAAM~~,~~CAAA;KAAE,~~CAAC~~;CAChC;AA6CD~~,~~eAAO~~,~~MAAM~~,~~mBAAmB,mBAmF/B,~~CAAC"}
1	+ {"version":3,"file":"RepeatingView.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;;AAK9E,wBAGU;AAEV,UAAU,uBAAuB;IAC/B,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,uBAAuB,CAgF9D,CAAC"}

package/jsx/social/Chat/RepeatingView.stories.jsx CHANGED Viewed

@@ -1,57 +1,21 @@
 import { useCallback, useState, useEffect, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { radios } from '@storybook/addon-knobs';
-import { Avatar, SummaryItem, defaultThemeProp } from '@pega/cosmos-react-core';
-import { RepeatingView, StyledRepeatingViewItem, StyledRepeatingView } from '@pega/cosmos-react-social';
+import { Avatar, SummaryItem } from '@pega/cosmos-react-core';
+import { RepeatingView } from '@pega/cosmos-react-social';
+import { StyledContactsBook } from './RepeatingView.styles';
+import { FetchContactsAPI } from './RepeatingView.mocks';
 export default {
     title: 'Social/Chat/RepeatingView',
     component: RepeatingView
 };
-const StyledContactsBook = styled(StyledRepeatingView)(({ theme }) => {
-    const bdrColor = theme.base.palette['border-line'];
-    return css `
-    width: 25rem;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, 0%);
-    z-index: 1;
-    border: 0.0625rem solid ${bdrColor};
-    background-color: ${theme.base.palette['primary-background']};
-    ${StyledRepeatingViewItem} {
-      border-bottom: 0.0625rem solid ${bdrColor};
-      padding: calc(0.5 * ${theme.base.spacing});
-    }
-  `;
-});
-StyledContactsBook.defaultProps = defaultThemeProp;
-const INITIAL_CHUNK_SIZE = 50;
-const APPEND_CHUNK_SIZE = 25;
-const FETCH_AHEAD_OFFSET = 10;
-const TOTAL_RECORDS = Math.max(INITIAL_CHUNK_SIZE, 100);
-function id() {
-    return Math.floor(Math.random() * Math.floor(500000)).toString();
-}
-const FetchContactsAPI = (results, abortController) => {
-    return fetch(`https://randomuser.me/api?results=${results}`, {
-        signal: abortController.signal
-    })
-        .then(res => res.json())
-        .then((data) => [...data.results].map(item => ({
-        ...item,
-        id: id()
-    })));
-};
-export const RepeatingViewSample = () => {
+export const RepeatingViewSample = (args) => {
+    const INITIAL_CHUNK_SIZE = 50;
+    const APPEND_CHUNK_SIZE = 25;
+    const FETCH_AHEAD_OFFSET = 10;
+    const TOTAL_RECORDS = Math.max(INITIAL_CHUNK_SIZE, 100);
     const [rows, setRows] = useState({
         data: [],
         isLoading: true
     });
-    const scrollDirectionOptions = {
-        'Top to bottom': 'top-to-bottom',
-        'Bottom to top': 'bottom-to-top'
-    };
-    const scrollDirection = radios('Scroll direction', scrollDirectionOptions, scrollDirectionOptions[Object.keys(scrollDirectionOptions)[0]]);
     const abortController = useMemo(() => {
         return new AbortController();
     }, []);
@@ -80,11 +44,17 @@ export const RepeatingViewSample = () => {
             });
         }
     }, [rows, setRows]);
-    return (<RepeatingView as={StyledContactsBook} loading={rows.isLoading} rows={rows.data} style={{ height: '40rem', maxHeight: '100vh' }} loadMore={loadMore} offset={rows.data.length === TOTAL_RECORDS ? -1 : rows.data.length - FETCH_AHEAD_OFFSET} scrollDirection={scrollDirection}>
+    return (<RepeatingView as={StyledContactsBook} loading={rows.isLoading} rows={rows.data} style={{ height: '40rem', maxHeight: '100vh' }} loadMore={loadMore} offset={rows.data.length === TOTAL_RECORDS ? -1 : rows.data.length - FETCH_AHEAD_OFFSET} scrollDirection={args.scrollDirection}>
       {row => {
             const { name: { title, first, last }, phone, picture: { thumbnail } } = row;
             return (<SummaryItem primary={[title, first, last].join(' ')} visual={<Avatar imageSrc={thumbnail} name={[title, first, last].join(' ')} shape='circle' size='l'/>} secondary={phone}/>);
         }}
     </RepeatingView>);
 };
+RepeatingViewSample.args = {
+    scrollDirection: 'top-to-bottom'
+};
+RepeatingViewSample.argTypes = {
+    scrollDirection: { options: ['top-to-bottom', 'bottom-to-top'], control: { type: 'select' } }
+};
 //# sourceMappingURL=RepeatingView.stories.jsx.map

package/jsx/social/Chat/RepeatingView.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RepeatingView.stories.jsx","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;~~AAClE~~,OAAO,MAAM,EAAE,~~EAAE~~,~~GAAG,~~EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAChD~~,OAAO,EAAE,~~MAAM~~,~~EAAE~~,MAAM,~~wBAAwB~~,CAAC;~~AAEhD~~,OAAO,EAAE,~~MAAM~~,EAAE,~~WAAW,EAAE,gBAAgB,EAAE,~~MAAM,~~yBAAyB~~,CAAC;~~AAChF~~,OAAO,~~EACL~~,~~aAAa~~,~~EACb~~,~~uBAAuB,EACvB,mBAAmB,EAGpB,~~MAAM,~~2BAA2B~~,CAAC;~~AAEnC~~,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,aAAa;~~CACzB~~,CAAC;~~AAQF~~,MAAM,~~kBAAkB~~,~~GAAG,~~MAAM,~~CAAC,~~mBAAmB,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EAAE~~,~~KAAK,~~EAAE~~,EAAE,EAAE~~;~~IACnE~~,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACnD,OAAO,GAAG,CAAA;;;;;;;8BAOkB,QAAQ;wBACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;MAC1D,uBAAuB;uCACU,QAAQ;4BACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,~~CAAC,YAAY,~~GAAG,~~gBAAgB,CAAC;AAEnD,MAAM,kBAAkB,GAAG,~~EAAE,CAAC;~~AAC9B~~,MAAM,iBAAiB,GAAG,EAAE,CAAC;~~AAC7B~~,MAAM,kBAAkB,GAAG,EAAE,CAAC;~~AAC9B~~,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;~~AAExD~~,~~SAAS,EAAE;IACT,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,~~MAAM,~~EAAE,GAAG,IAAI,~~CAAC,~~KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;AACnE,CAAC;AAED,MAAM,gBAAgB,GACpB,CAAC,OAAO,EAAE,eAAe,EAAE,EAAE;IAC3B,OAAO,KAAK,CAAC,qCAAqC,OAAO,EAAE,EAAE;QAC3D,MAAM,EAAE,eAAe,CAAC,MAAM;KAC/B,CAAC;SACC,~~IAAI,~~CAAC,GAAG,CAAC,~~EAAE,~~CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;SACvB,IAAI,CAAC,CAAC,IAAS,EAAE,EAAE,CAClB,CAAC,GAAG,IAAI,CAAC,~~OAAO,CAAC,~~CAAC,~~GAAG,~~CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,GAAG,IAAI;QACP,EAAE,EAAE,EAAE,EAAE;KACT,CAAC,CAAC,CACJ,CAAC;AACN,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,~~QAAQ,CAG7B;QACD,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;IAEH,MAAM,~~sBAAsB,GAA0D;QACpF,~~eAAe,~~EAAE,eAAe;QAChC,eAAe,EAAE,eAAe;KACjC,CAAC;IACF,MAAM,eAAe,~~GAAG,~~MAAM,CAC5B,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,CAAC,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAC/D,CAAC;IAEF,MAAM,eAAe,GAAG,~~OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,IAAI,eAAe,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,OAAkB,EAAE,EAAE;YAChF,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACnB,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC;aACrC,CAAC,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACnB,GAAG,QAAQ;gBACX,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC,CAAC;YACJ,gBAAgB,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,OAAkB,EAAE,EAAE;gBAC/E,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oBACnB,SAAS,EAAE,KAAK;oBAChB,IAAI,EAAE,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC;iBACrC,CAAC,CAAC,CAAC;YACN,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,CAAC,aAAa,CACZ,EAAE,CAAC,CAAC,kBAAkB,CAAC,CACvB,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CACxB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAC/C,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,kBAAkB,CAAC,CACxF,eAAe,CAAC,CAAC,eAAe,CAAC,~~CAEjC~~;MAAA,CAAC,GAAG,CAAC,EAAE;YACL,MAAM,EACJ,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAC5B,KAAK,EACL,OAAO,EAAE,EAAE,SAAS,EAAE,EACvB,GAAG,GAAc,CAAC;YACnB,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CACxC,MAAM,CAAC,CACL,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CACrC,KAAK,CAAC,QAAQ,CACd,IAAI,CAAC,GAAG,EACR,CACH,CACD,SAAS,CAAC,CAAC,KAAK,CAAC,EACjB,CACH,CAAC;QACJ,CAAC,CACH;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useCallback, useState, useEffect, useMemo } from 'react';\nimport ~~styled,~~ { ~~css~~ } ~~from 'styled-components';\nimport { radios~~ } from '@storybook/~~addon-knobs~~';\n\nimport { Avatar, SummaryItem, ~~defaultThemeProp~~ } from '@pega/cosmos-react-core';\nimport {\n RepeatingView~~,\n StyledRepeatingViewItem,\n StyledRepeatingView,\n RepeatingViewRow,\n~~ RepeatingViewProps\n} from '@pega/cosmos-react-social';\n\nexport default {\n title: 'Social/Chat/RepeatingView',\n component: RepeatingView\n}~~;\n\nexport~~ ~~interface~~ ~~Contact extends RepeatingViewRow {\n name: { title: string; first: string; last: string }~~;\n ~~phone: string;\n picture: { thumbnail: string };\n}~~\~~n\nconst~~ ~~StyledContactsBook~~ ~~= styled(StyledRepeatingView)((~~{ ~~theme }) => {~~\n ~~const~~ ~~bdrColor = theme.base.palette~~['~~border-line~~'];\n ~~return css`\~~n ~~width:~~ ~~25rem;\n position:~~ ~~absolute;\n top~~: ~~0;\n left:~~ ~~50%;\n transform:~~ ~~translate~~(~~-50%, 0%);\~~n ~~z-index~~: ~~1;\n border: 0.0625rem solid ${bdrColor};\n background-color: ${theme.base.palette['primary-background']};\n ${StyledRepeatingViewItem} {~~\n ~~border-bottom:~~ ~~0.0625rem~~ ~~solid $~~{~~bdrColor};\n padding: calc(0.5 * ${theme.base.spacing});\n }~~\n ~~`;\n});\n\nStyledContactsBook.defaultProps~~ ~~= defaultThemeProp;\n\nconst~~ INITIAL_CHUNK_SIZE = 50;\~~nconst~~ APPEND_CHUNK_SIZE = 25;\~~nconst~~ FETCH_AHEAD_OFFSET = 10;\~~nconst~~ TOTAL_RECORDS = Math.max(INITIAL_CHUNK_SIZE, 100);\n\~~nfunction id() {\~~n return Math.floor(Math.random() * Math.floor(500000)).toString();\n}\n\nconst FetchContactsAPI: (results: number, abortController: AbortController) => Promise<Contact[]> =\n (results, abortController) => {\n return fetch(`https://randomuser.me/api?results=${results}`, {\n signal: abortController.signal\n })\n .then(res => res.json())\n .then((data: any) =>\n [...data.results].map(item => ({\n ...item,\n id: id()\n }))\n );\n };\n\nexport const ~~RepeatingViewSample = () => {\n const~~ [rows, setRows] = useState<{\n data: Contact[];\n isLoading: boolean;\n }>({\n data: [],\n isLoading: true\n });\n\n const scrollDirectionOptions: Record<string, RepeatingViewProps['scrollDirection']> = {\n 'Top to bottom': 'top-to-bottom',\n 'Bottom to top': 'bottom-to-top'\n };\n const scrollDirection = radios(\n 'Scroll direction',\n scrollDirectionOptions,\n scrollDirectionOptions[Object.keys(scrollDirectionOptions)[0]]\n );\n\n const abortController = useMemo(() => {\n return new AbortController();\n }, []);\n\n useEffect(() => {\n FetchContactsAPI(INITIAL_CHUNK_SIZE, abortController).then((newRows: Contact[]) => {\n setRows(prevRows => ({\n isLoading: false,\n data: [...prevRows.data, ...newRows]\n }));\n });\n return () => {\n abortController.abort();\n };\n }, []);\n\n const loadMore = useCallback(() => {\n if (!rows.isLoading) {\n setRows(prevRows => ({\n ...prevRows,\n isLoading: true\n }));\n FetchContactsAPI(APPEND_CHUNK_SIZE, abortController).then((newRows: Contact[]) => {\n setRows(prevRows => ({\n isLoading: false,\n data: [...prevRows.data, ...newRows]\n }));\n });\n }\n }, [rows, setRows]);\n\n return (\n <RepeatingView\n as={StyledContactsBook}\n loading={rows.isLoading}\n rows={rows.data}\n style={{ height: '40rem', maxHeight: '100vh' }}\n loadMore={loadMore}\n offset={rows.data.length === TOTAL_RECORDS ? -1 : rows.data.length - FETCH_AHEAD_OFFSET}\n scrollDirection={scrollDirection}\n >\n {row => {\n const {\n name: { title, first, last },\n phone,\n picture: { thumbnail }\n } = row as Contact;\n return (\n <SummaryItem\n primary={[title, first, last].join(' ')}\n visual={\n <Avatar\n imageSrc={thumbnail}\n name={[title, first, last].join(' ')}\n shape='circle'\n size='l'\n />\n }\n secondary={phone}\n />\n );\n }}\n </RepeatingView>\n );\n};\n"]}
1	+ {"version":3,"file":"RepeatingView.stories.jsx","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useEffect, useMemo } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Avatar, SummaryItem } from '@pega/cosmos-react-core';\nimport { RepeatingView, RepeatingViewProps } from '@pega/cosmos-react-social';\n\nimport { StyledContactsBook } from './RepeatingView.styles';\nimport { Contact, FetchContactsAPI } from './RepeatingView.mocks';\n\nexport default {\n title: 'Social/Chat/RepeatingView',\n component: RepeatingView\n} as Meta;\n\ninterface RepeatingViewStoryProps {\n scrollDirection: RepeatingViewProps['scrollDirection'];\n}\n\nexport const RepeatingViewSample: Story<RepeatingViewStoryProps> = (\n args: RepeatingViewStoryProps\n) => {\n const INITIAL_CHUNK_SIZE = 50;\n const APPEND_CHUNK_SIZE = 25;\n const FETCH_AHEAD_OFFSET = 10;\n const TOTAL_RECORDS = Math.max(INITIAL_CHUNK_SIZE, 100);\n\n const [rows, setRows] = useState<{\n data: Contact[];\n isLoading: boolean;\n }>({\n data: [],\n isLoading: true\n });\n\n const abortController = useMemo(() => {\n return new AbortController();\n }, []);\n\n useEffect(() => {\n FetchContactsAPI(INITIAL_CHUNK_SIZE, abortController).then((newRows: Contact[]) => {\n setRows(prevRows => ({\n isLoading: false,\n data: [...prevRows.data, ...newRows]\n }));\n });\n return () => {\n abortController.abort();\n };\n }, []);\n\n const loadMore = useCallback(() => {\n if (!rows.isLoading) {\n setRows(prevRows => ({\n ...prevRows,\n isLoading: true\n }));\n FetchContactsAPI(APPEND_CHUNK_SIZE, abortController).then((newRows: Contact[]) => {\n setRows(prevRows => ({\n isLoading: false,\n data: [...prevRows.data, ...newRows]\n }));\n });\n }\n }, [rows, setRows]);\n\n return (\n <RepeatingView\n as={StyledContactsBook}\n loading={rows.isLoading}\n rows={rows.data}\n style={{ height: '40rem', maxHeight: '100vh' }}\n loadMore={loadMore}\n offset={rows.data.length === TOTAL_RECORDS ? -1 : rows.data.length - FETCH_AHEAD_OFFSET}\n scrollDirection={args.scrollDirection}\n >\n {row => {\n const {\n name: { title, first, last },\n phone,\n picture: { thumbnail }\n } = row as Contact;\n return (\n <SummaryItem\n primary={[title, first, last].join(' ')}\n visual={\n <Avatar\n imageSrc={thumbnail}\n name={[title, first, last].join(' ')}\n shape='circle'\n size='l'\n />\n }\n secondary={phone}\n />\n );\n }}\n </RepeatingView>\n );\n};\n\nRepeatingViewSample.args = {\n scrollDirection: 'top-to-bottom'\n};\n\nRepeatingViewSample.argTypes = {\n scrollDirection: { options: ['top-to-bottom', 'bottom-to-top'], control: { type: 'select' } }\n};\n"]}

package/jsx/social/Chat/RepeatingView.styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const StyledContactsBook: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2	+ //# sourceMappingURL=RepeatingView.styles.d.ts.map

package/jsx/social/Chat/RepeatingView.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"RepeatingView.styles.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAgB7B,CAAC"}

package/jsx/social/Chat/RepeatingView.styles.js ADDED Viewed

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledRepeatingView, StyledRepeatingViewItem } from '@pega/cosmos-react-social';
+export const StyledContactsBook = styled(StyledRepeatingView)(({ theme }) => {
+    const bdrColor = theme.base.palette['border-line'];
+    return css `
+    width: 25rem;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    z-index: 1;
+    border: 0.0625rem solid ${bdrColor};
+    background-color: ${theme.base.palette['primary-background']};
+    ${StyledRepeatingViewItem} {
+      border-bottom: 0.0625rem solid ${bdrColor};
+      padding: calc(0.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledContactsBook.defaultProps = defaultThemeProp;
+//# sourceMappingURL=RepeatingView.styles.js.map

package/jsx/social/Chat/RepeatingView.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RepeatingView.styles.js","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEzF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACnD,OAAO,GAAG,CAAA;;;;;;;8BAOkB,QAAQ;wBACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;MAC1D,uBAAuB;uCACU,QAAQ;4BACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledRepeatingView, StyledRepeatingViewItem } from '@pega/cosmos-react-social';\n\nexport const StyledContactsBook = styled(StyledRepeatingView)(({ theme }) => {\n const bdrColor = theme.base.palette['border-line'];\n return css`\n width: 25rem;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n z-index: 1;\n border: 0.0625rem solid ${bdrColor};\n background-color: ${theme.base.palette['primary-background']};\n ${StyledRepeatingViewItem} {\n border-bottom: 0.0625rem solid ${bdrColor};\n padding: calc(0.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledContactsBook.defaultProps = defaultThemeProp;\n"]}