@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.4.2

package/lib/rte/Editor/Editor.mocks.d.ts

@@ -0,0 +1,6 @@
+export declare const label = "Form field label";
+export declare class PegaCustomElement extends HTMLElement {
+    removeElements(): void;
+    connectedCallback(): void;
+}
+//# sourceMappingURL=Editor.mocks.d.ts.map

package/lib/rte/Editor/Editor.mocks.d.ts.map

@@ -0,0 +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/lib/rte/Editor/Editor.mocks.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom';
+export const label = 'Form field label';
+const PegaCustom = ({ children }) => {
+    return (_jsx("p", { style: { color: 'blue', textTransform: 'uppercase' }, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: children } }, void 0));
+};
+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(_jsx(PegaCustom, { children: inner }, void 0), mountPoint);
+    }
+}
+//# sourceMappingURL=Editor.mocks.js.map

package/lib/rte/Editor/Editor.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.mocks.js","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,YACE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE;QACpD,2CAA2C;QAC3C,uBAAuB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,WAC7C,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,KAAC,UAAU,cAAE,KAAK,WAAc,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/lib/rte/Editor/Editor.stories.d.ts.map

@@ -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"}
+{"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/lib/rte/Editor/Editor.stories.js

@@ -1,21 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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) => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onFocus: action('Editor focused'), onBlur: action('Editor blurred'), onImageAdded: onImageAdded, defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p></body>' }, void 0));
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onFocus: action('Editor focused'), onBlur: action('Editor blurred'), onImageAdded: onImageAdded, defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p><img alt="placeholder" src="http://via.placeholder.com/640x360"/></body>' }, void 0));
 };
 export const EmptyEditorDemo = () => {
     const editorRef = useRef(null);
@@ -34,25 +33,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>
       ` }, void 0));
 };
-const PegaCustom = ({ children }) => {
-    return (_jsx("p", { style: { color: 'blue', textTransform: 'uppercase' }, 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: { __html: children } }, void 0));
-};
-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(_jsx(PegaCustom, { children: inner }, void 0), mountPoint);
-    }
-}
 export const CustomComponentDemo = () => {
     const editorRef = useRef(null);
     const [editor, setEditor] = useState({});

package/lib/rte/Editor/Editor.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.js","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></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>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</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>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; 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>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</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&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>\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"]}
+{"version":3,"file":"Editor.stories.js","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>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</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>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; 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>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</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&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>\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/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts

@@ -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/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts.map

@@ -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"}
+{"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/lib/rte/RichTextEditor/RichTextEditor.stories.js.map

@@ -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 &#39;Hello world!&#39; HTML\n        </Button>\n        <Button onClick={insertText} label='RTE Must be focused for insert text to work'>\n          Insert &#39;Hi mom!&#39;\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"]}
+{"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 &#39;Hello world!&#39; HTML\n        </Button>\n        <Button onClick={insertText} label='RTE Must be focused for insert text to work'>\n          Insert &#39;Hi mom!&#39;\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/social/Chat/RepeatingView.mocks.d.ts

@@ -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/lib/social/Chat/RepeatingView.mocks.d.ts.map

@@ -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/lib/social/Chat/RepeatingView.mocks.js

@@ -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/lib/social/Chat/RepeatingView.mocks.js.map

@@ -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/lib/social/Chat/RepeatingView.stories.d.ts

@@ -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/lib/social/Chat/RepeatingView.stories.d.ts.map

@@ -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"}
+{"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/lib/social/Chat/RepeatingView.stories.js

@@ -1,58 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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();
     }, []);
@@ -81,9 +45,15 @@ export const RepeatingViewSample = () => {
             });
         }
     }, [rows, setRows]);
-    return (_jsx(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, children: row => {
+    return (_jsx(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, children: row => {
             const { name: { title, first, last }, phone, picture: { thumbnail } } = row;
             return (_jsx(SummaryItem, { primary: [title, first, last].join(' '), visual: _jsx(Avatar, { imageSrc: thumbnail, name: [title, first, last].join(' '), shape: 'circle', size: 'l' }, void 0), secondary: phone }, void 0));
         } }, void 0));
 };
+RepeatingViewSample.args = {
+    scrollDirection: 'top-to-bottom'
+};
+RepeatingViewSample.argTypes = {
+    scrollDirection: { options: ['top-to-bottom', 'bottom-to-top'], control: { type: 'select' } }
+};
 //# sourceMappingURL=RepeatingView.stories.js.map

package/lib/social/Chat/RepeatingView.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RepeatingView.stories.js","sourceRoot":"","sources":["../../../src/social/Chat/RepeatingView.stories.tsx"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"RepeatingView.stories.js","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/lib/social/Chat/RepeatingView.styles.d.ts

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

package/lib/social/Chat/RepeatingView.styles.d.ts.map

@@ -0,0 +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/lib/social/Chat/RepeatingView.styles.js

@@ -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/lib/social/Chat/RepeatingView.styles.js.map

@@ -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"]}