@pega/cosmos-react-social 4.0.0-dev.9.1 → 4.0.0

package/lib/components/HashtagButton/HashtagButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HashtagButton.d.ts","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAGb,MAAM,OAAO,CAAC;AAGf,OAAO,EAAO,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,UAAU,kBAAkB;IAC1B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;IAChD,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAQD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwBvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;aAKL,MAAM;;uBAQZ,MAAM;;;CAM1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"HashtagButton.d.ts","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAGb,MAAM,OAAO,CAAC;AAGf,OAAO,EAAO,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,UAAU,kBAAkB;IAC1B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;IAChD,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAQD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsBvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;aAKL,MAAM;;uBAQZ,MAAM;;;CAM1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/HashtagButton/HashtagButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, isValidElement, useContext } from 'react';
 import styled from 'styled-components';
 import { Tag } from '@pega/cosmos-react-core';
@@ -8,7 +8,7 @@ const StyledTag = styled(Tag) `
   cursor: pointer;
 `;
 const serializer = new XMLSerializer();
-const HashtagButton = forwardRef(({ children, tag: tagProp = '', ...restProps }, ref) => {
+const HashtagButton = forwardRef(function HashtagButton({ children, tag: tagProp = '', ...restProps }, ref) {
     const { onTagClick } = useContext(FeedContext);
     let tag = '';
     if (!isValidElement(children)) {
@@ -19,7 +19,7 @@ const HashtagButton = forwardRef(({ children, tag: tagProp = '', ...restProps },
     else {
         tag = tagProp;
     }
-    return (_jsx(_Fragment, { children: _jsx(StyledTag, { ...restProps, ref: ref, onClick: () => onTagClick?.(tag), spellCheck: false, children: isValidElement(children) ? children : tag }) }));
+    return (_jsx(StyledTag, { ...restProps, ref: ref, onClick: () => onTagClick?.(tag), spellCheck: false, children: isValidElement(children) ? children : tag }));
 });
 export const HashtagButtonConfig = {
     type: 'tag',

package/lib/components/HashtagButton/HashtagButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"HashtagButton.js","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;AAEvC,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,SAAS,EAAuC,EAClF,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG;YAAE,OAAO,yBAAO,QAAQ,CAAC,OAAO,GAAQ,CAAC;QAC1D,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;KACpB;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,4BACE,KAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,YACpF,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAChC,GACX,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,0CAA0C;IACxD,SAAS,EAAE,aAAa;IACxB,MAAM,EAAE,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;QACnC,IAAI,CAAC,GAAG;YAAE,OAAO;QAEjB,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC3D,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjC,OAAO,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,EAAE;QAC3B,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAE7C,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,GAAG;YAAE,OAAO,SAAS,CAAC;QACrD,OAAO,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC;IACjC,CAAC;CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Tag, ForwardProps } from '@pega/cosmos-react-core';\nimport { getXMLAttributes } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or an object containing all necessary props. */\n  children: Record<string, string> | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\n\nconst serializer = new XMLSerializer();\n\nconst HashtagButton: FunctionComponent<HashtagButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, tag: tagProp = '', ...restProps }: PropsWithoutRef<HashtagButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onTagClick } = useContext(FeedContext);\n\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.tag) return <span>{children.rawText}</span>;\n      tag = children.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)} spellCheck={false}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  xmlElement: 'pega-tag',\n  regexPattern: /(?:^|)<pega-tag (?:[^\\n/]|\\/(?!>))+\\/>/gm,\n  component: HashtagButton,\n  inject: ({ tag }: { tag: string }) => {\n    if (!tag) return;\n\n    const element = document.createElementNS(null, 'pega-tag');\n    element.setAttribute('tag', tag);\n\n    return serializer.serializeToString(element);\n  },\n  extract: (element: string) => {\n    const attributes = getXMLAttributes(element);\n\n    if (!attributes || !attributes.tag) return undefined;\n    return { tag: attributes.tag };\n  }\n};\n\nexport default HashtagButton;\n"]}
+{"version":3,"file":"HashtagButton.js","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;AAEvC,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,SAAS,EAAuC,EAClF,GAA2B;IAE3B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAM,QAAQ,CAAC,EAAE;QAClC,IAAI,CAAC,QAAQ,CAAC,GAAG;YAAE,OAAO,yBAAO,QAAQ,CAAC,OAAO,GAAQ,CAAC;QAC1D,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;KACpB;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,KAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,YACpF,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAChC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,0CAA0C;IACxD,SAAS,EAAE,aAAa;IACxB,MAAM,EAAE,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;QACnC,IAAI,CAAC,GAAG;YAAE,OAAO;QAEjB,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC3D,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjC,OAAO,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,EAAE;QAC3B,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAE7C,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,GAAG;YAAE,OAAO,SAAS,CAAC;QACrD,OAAO,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC;IACjC,CAAC;CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Tag, ForwardProps } from '@pega/cosmos-react-core';\nimport { getXMLAttributes } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or an object containing all necessary props. */\n  children: Record<string, string> | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\n\nconst serializer = new XMLSerializer();\n\nconst HashtagButton: FunctionComponent<HashtagButtonProps & ForwardProps> = forwardRef(\n  function HashtagButton(\n    { children, tag: tagProp = '', ...restProps }: PropsWithoutRef<HashtagButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) {\n    const { onTagClick } = useContext(FeedContext);\n\n    let tag = '';\n\n    if (!isValidElement<any>(children)) {\n      if (!children.tag) return <span>{children.rawText}</span>;\n      tag = children.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)} spellCheck={false}>\n        {isValidElement(children) ? children : tag}\n      </StyledTag>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  xmlElement: 'pega-tag',\n  regexPattern: /(?:^|)<pega-tag (?:[^\\n/]|\\/(?!>))+\\/>/gm,\n  component: HashtagButton,\n  inject: ({ tag }: { tag: string }) => {\n    if (!tag) return;\n\n    const element = document.createElementNS(null, 'pega-tag');\n    element.setAttribute('tag', tag);\n\n    return serializer.serializeToString(element);\n  },\n  extract: (element: string) => {\n    const attributes = getXMLAttributes(element);\n\n    if (!attributes || !attributes.tag) return undefined;\n    return { tag: attributes.tag };\n  }\n};\n\nexport default HashtagButton;\n"]}

package/lib/components/MentionButton/MentionButton.d.ts

@@ -3,7 +3,7 @@ import { ForwardProps } from '@pega/cosmos-react-core';
 interface MentionButtonProps {
     /** Text for the button, or an object containing all necessary props. */
     children: Record<string, string> | ReactElement;
-    /** The id of the mention.  */
+    /** The id of the mention. */
     id?: string;
     /** The text of the mention button. */
     text?: string;

package/lib/components/MentionButton/MentionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,UAAU,kBAAkB;IAC1B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;IAChD,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiGvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;YAKW,MAAM;cAAQ,MAAM;cAAQ,MAAM;;;uBAWxD,MAAM;;;;;;CAW1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAKjC,UAAU,kBAAkB;IAC1B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;IAChD,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoFvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;YAKW,MAAM;cAAQ,MAAM;cAAQ,MAAM;;;uBAWxD,MAAM;;;;;;CAW1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/MentionButton/MentionButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useContext, useRef, useState } from 'react';
+import { forwardRef, isValidElement, useContext, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Link, Popover, useConsolidatedRef, useOuterEvent } from '@pega/cosmos-react-core';
+import { Button, Link, useConsolidatedRef, useElement } from '@pega/cosmos-react-core';
 import { getXMLAttributes } from '@pega/cosmos-react-rte';
 import { FeedContext } from '../Feed/Feed.context';
 const StyledButton = styled(Button) `
@@ -19,15 +19,11 @@ const StyledLink = styled(Link) `
   }
 `;
 const serializer = new XMLSerializer();
-const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp = '', type: typeProp = '', href: hrefProp = '', ...restProps }, ref) => {
-    const { feedRef, onMentionClick, onMentionPreview } = useContext(FeedContext);
-    const [showPopover, setShowPopover] = useState(false);
+const MentionButton = forwardRef(function MentionButton({ children, id: idProp = '', text: textProp = '', type: typeProp = '', href: hrefProp = '', ...restProps }, ref) {
+    const { onMentionClick, onMentionPreview } = useContext(FeedContext);
     const [mentionContent, setMentionContent] = useState();
+    const [target, setTarget] = useElement(null);
     const mentionRef = useConsolidatedRef(ref);
-    const popoverRef = useRef(null);
-    useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {
-        setShowPopover(false);
-    });
     let id = '';
     let text = '';
     let type = '';
@@ -46,15 +42,17 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
         type = typeProp;
         href = hrefProp;
     }
-    const handleClick = () => {
+    const handleClick = (e) => {
+        setTarget(e.currentTarget);
         const comp = onMentionClick?.({
             id,
             text,
-            type
+            type,
+            target: e.currentTarget,
+            closeGlimpse: () => setTarget(null)
         });
         if (comp)
-            setShowPopover(true);
-        setMentionContent(comp);
+            setMentionContent(comp);
     };
     return (_jsxs(_Fragment, { children: [href ? (_jsx(StyledLink, { ...restProps, ref: mentionRef, href: href, previewable: !!onMentionPreview, onPreview: onMentionPreview
                     ? () => onMentionPreview({
@@ -62,7 +60,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
                         text,
                         type
                     })
-                    : undefined, spellCheck: false, children: isValidElement(children) ? children : text })) : (_jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text })), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', portal: feedRef?.current ?? undefined, hideOnTargetHidden: true, arrow: true, children: mentionContent })] }));
+                    : undefined, spellCheck: false, children: isValidElement(children) ? children : text })) : (_jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text })), target && mentionContent] }));
 });
 export const MentionButtonConfig = {
     type: 'mention',

package/lib/components/MentionButton/MentionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  ForwardProps,\n  Link,\n  Popover,\n  useConsolidatedRef,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { getXMLAttributes } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the button, or an object containing all necessary props. */\n  children: Record<string, string> | ReactElement;\n  /** The id of the mention.  */\n  id?: string;\n  /** The text of the mention button. */\n  text?: string;\n  /** Designates the type of the mention for proper handling on click. */\n  type?: string;\n  /** If an href is provided, render a link. Otherwise, render a button. */\n  href?: string;\n}\n\nconst StyledButton = styled(Button)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst StyledLink = styled(Link)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst serializer = new XMLSerializer();\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      id: idProp = '',\n      text: textProp = '',\n      type: typeProp = '',\n      href: hrefProp = '',\n      ...restProps\n    }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { feedRef, onMentionClick, onMentionPreview } = useContext(FeedContext);\n    const [showPopover, setShowPopover] = useState(false);\n    const [mentionContent, setMentionContent] = useState<JSX.Element | undefined>();\n    const mentionRef = useConsolidatedRef(ref);\n    const popoverRef = useRef(null);\n\n    useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {\n      setShowPopover(false);\n    });\n\n    let id = '';\n    let text = '';\n    let type = '';\n    let href = '';\n\n    if (!isValidElement(children)) {\n      if (!children.id || !children.text || !children.type) return <span>{children.rawText}</span>;\n      id = children.id;\n      text = children.text;\n      type = children.type;\n      href = children.href || '';\n    } else {\n      id = idProp;\n      text = textProp;\n      type = typeProp;\n      href = hrefProp;\n    }\n\n    const handleClick = () => {\n      const comp = onMentionClick?.({\n        id,\n        text,\n        type\n      });\n      if (comp) setShowPopover(true);\n      setMentionContent(comp);\n    };\n\n    return (\n      <>\n        {href ? (\n          <StyledLink\n            {...restProps}\n            ref={mentionRef}\n            href={href}\n            previewable={!!onMentionPreview}\n            onPreview={\n              onMentionPreview\n                ? () =>\n                    onMentionPreview({\n                      id,\n                      text,\n                      type\n                    })\n                : undefined\n            }\n            spellCheck={false}\n          >\n            {isValidElement(children) ? children : text}\n          </StyledLink>\n        ) : (\n          <StyledButton\n            {...restProps}\n            ref={mentionRef}\n            variant='link'\n            onClick={handleClick}\n            spellCheck={false}\n          >\n            {isValidElement(children) ? children : text}\n          </StyledButton>\n        )}\n        <Popover\n          ref={popoverRef}\n          show={showPopover}\n          target={mentionRef.current}\n          placement='bottom-start'\n          portal={feedRef?.current ?? undefined}\n          hideOnTargetHidden\n          arrow\n        >\n          {mentionContent}\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  xmlElement: 'pega-mention',\n  regexPattern: /(?:^|)<pega-mention (?:[^\\n/]|\\/(?!>))+\\/>/g,\n  component: MentionButton,\n  inject: ({ id, type, text, href }: { id: string; type: string; text: string; href?: string }) => {\n    if (!id || !type || !text) return;\n\n    const element = document.createElementNS(null, 'pega-mention');\n    element.setAttribute('id', id);\n    element.setAttribute('text', text);\n    element.setAttribute('type', type);\n    if (href) element.setAttribute('href', href);\n\n    return serializer.serializeToString(element);\n  },\n  extract: (element: string) => {\n    const attributes = getXMLAttributes(element);\n\n    if (!attributes || !attributes.id || !attributes.text || !attributes.type) return undefined;\n    return {\n      id: attributes.id,\n      text: attributes.text,\n      type: attributes.type,\n      href: attributes.href\n    };\n  }\n};\n\nexport default MentionButton;\n"]}
+{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACV,QAAQ,EAET,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EAEN,IAAI,EACJ,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAenD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAM9B,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;AAEvC,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CACpB,EACE,QAAQ,EACR,EAAE,EAAE,MAAM,GAAG,EAAE,EACf,IAAI,EAAE,QAAQ,GAAG,EAAE,EACnB,IAAI,EAAE,QAAQ,GAAG,EAAE,EACnB,IAAI,EAAE,QAAQ,GAAG,EAAE,EACnB,GAAG,SAAS,EACwB,EACtC,GAA2B;IAE3B,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACrE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAA2B,CAAC;IAChF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE3C,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,IAAI,IAAI,GAAG,EAAE,CAAC;IACd,IAAI,IAAI,GAAG,EAAE,CAAC;IACd,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,IAAI,CAAC,cAAc,CAAM,QAAQ,CAAC,EAAE;QAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;YAAE,OAAO,yBAAO,QAAQ,CAAC,OAAO,GAAQ,CAAC;QAC7F,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC;QACjB,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QACrB,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QACrB,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC;KAC5B;SAAM;QACL,EAAE,GAAG,MAAM,CAAC;QACZ,IAAI,GAAG,QAAQ,CAAC;QAChB,IAAI,GAAG,QAAQ,CAAC;QAChB,IAAI,GAAG,QAAQ,CAAC;KACjB;IAED,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;YAC5B,EAAE;YACF,IAAI;YACJ,IAAI;YACJ,MAAM,EAAE,CAAC,CAAC,aAAa;YACvB,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;SACpC,CAAC,CAAC;QACH,IAAI,IAAI;YAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,OAAO,CACL,8BACG,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,UAAU,OACL,SAAS,EACb,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAC,gBAAgB,EAC/B,SAAS,EACP,gBAAgB;oBACd,CAAC,CAAC,GAAG,EAAE,CACH,gBAAgB,CAAC;wBACf,EAAE;wBACF,IAAI;wBACJ,IAAI;qBACL,CAAC;oBACN,CAAC,CAAC,SAAS,EAEf,UAAU,EAAE,KAAK,YAEhB,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAChC,CACd,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,KAAK,YAEhB,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAC9B,CAChB,EACA,MAAM,IAAI,cAAc,IACxB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,SAAS;IACf,UAAU,EAAE,cAAc;IAC1B,YAAY,EAAE,6CAA6C;IAC3D,SAAS,EAAE,aAAa;IACxB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAA6D,EAAE,EAAE;QAC9F,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;QAElC,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QAC/D,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC/B,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACnC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACnC,IAAI,IAAI;YAAE,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAE7C,OAAO,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,EAAE;QAC3B,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAE7C,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI;YAAE,OAAO,SAAS,CAAC;QAC5F,OAAO;YACL,EAAE,EAAE,UAAU,CAAC,EAAE;YACjB,IAAI,EAAE,UAAU,CAAC,IAAI;YACrB,IAAI,EAAE,UAAU,CAAC,IAAI;YACrB,IAAI,EAAE,UAAU,CAAC,IAAI;SACtB,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext,\n  useState,\n  MouseEvent\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  ForwardProps,\n  Link,\n  useConsolidatedRef,\n  useElement\n} from '@pega/cosmos-react-core';\nimport { getXMLAttributes } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the button, or an object containing all necessary props. */\n  children: Record<string, string> | ReactElement;\n  /** The id of the mention. */\n  id?: string;\n  /** The text of the mention button. */\n  text?: string;\n  /** Designates the type of the mention for proper handling on click. */\n  type?: string;\n  /** If an href is provided, render a link. Otherwise, render a button. */\n  href?: string;\n}\n\nconst StyledButton = styled(Button)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst StyledLink = styled(Link)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst serializer = new XMLSerializer();\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n  function MentionButton(\n    {\n      children,\n      id: idProp = '',\n      text: textProp = '',\n      type: typeProp = '',\n      href: hrefProp = '',\n      ...restProps\n    }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) {\n    const { onMentionClick, onMentionPreview } = useContext(FeedContext);\n    const [mentionContent, setMentionContent] = useState<JSX.Element | undefined>();\n    const [target, setTarget] = useElement<HTMLButtonElement>(null);\n    const mentionRef = useConsolidatedRef(ref);\n\n    let id = '';\n    let text = '';\n    let type = '';\n    let href = '';\n\n    if (!isValidElement<any>(children)) {\n      if (!children.id || !children.text || !children.type) return <span>{children.rawText}</span>;\n      id = children.id;\n      text = children.text;\n      type = children.type;\n      href = children.href || '';\n    } else {\n      id = idProp;\n      text = textProp;\n      type = typeProp;\n      href = hrefProp;\n    }\n\n    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n      setTarget(e.currentTarget);\n      const comp = onMentionClick?.({\n        id,\n        text,\n        type,\n        target: e.currentTarget,\n        closeGlimpse: () => setTarget(null)\n      });\n      if (comp) setMentionContent(comp);\n    };\n\n    return (\n      <>\n        {href ? (\n          <StyledLink\n            {...restProps}\n            ref={mentionRef}\n            href={href}\n            previewable={!!onMentionPreview}\n            onPreview={\n              onMentionPreview\n                ? () =>\n                    onMentionPreview({\n                      id,\n                      text,\n                      type\n                    })\n                : undefined\n            }\n            spellCheck={false}\n          >\n            {isValidElement(children) ? children : text}\n          </StyledLink>\n        ) : (\n          <StyledButton\n            {...restProps}\n            ref={mentionRef}\n            variant='link'\n            onClick={handleClick}\n            spellCheck={false}\n          >\n            {isValidElement(children) ? children : text}\n          </StyledButton>\n        )}\n        {target && mentionContent}\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  xmlElement: 'pega-mention',\n  regexPattern: /(?:^|)<pega-mention (?:[^\\n/]|\\/(?!>))+\\/>/g,\n  component: MentionButton,\n  inject: ({ id, type, text, href }: { id: string; type: string; text: string; href?: string }) => {\n    if (!id || !type || !text) return;\n\n    const element = document.createElementNS(null, 'pega-mention');\n    element.setAttribute('id', id);\n    element.setAttribute('text', text);\n    element.setAttribute('type', type);\n    if (href) element.setAttribute('href', href);\n\n    return serializer.serializeToString(element);\n  },\n  extract: (element: string) => {\n    const attributes = getXMLAttributes(element);\n\n    if (!attributes || !attributes.id || !attributes.text || !attributes.type) return undefined;\n    return {\n      id: attributes.id,\n      text: attributes.text,\n      type: attributes.type,\n      href: attributes.href\n    };\n  }\n};\n\nexport default MentionButton;\n"]}

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "4.0.0-dev.9.1",
-  "author": "Pegasystems",
-  "license": "SEE LICENSE IN LICENSE",
+  "version": "4.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
     "directory": "packages/cosmos-social"
   },
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Pegasystems",
+  "sideEffects": [
+    "./src/components/Email/EmailEntity.tsx",
+    "./lib/components/Email/EmailEntity.js"
+  ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -15,17 +19,13 @@
     "README.md",
     "lib"
   ],
-  "sideEffects": [
-    "./src/components/Email/EmailEntity.tsx",
-    "./lib/components/Email/EmailEntity.js"
-  ],
   "scripts": {
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.9.1",
-    "@pega/cosmos-react-rte": "4.0.0-dev.9.1",
-    "@pega/cosmos-react-work": "4.0.0-dev.9.1",
+    "@pega/cosmos-react-core": "4.0.0",
+    "@pega/cosmos-react-rte": "4.0.0",
+    "@pega/cosmos-react-work": "4.0.0",
     "@types/parse5": "^6.0.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
@@ -37,16 +37,14 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addon-toolbars": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-react": "^1.2.4",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-a11y": "^7.0.24",
+    "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addon-storysource": "^7.0.24",
+    "@storybook/addon-toolbars": "^7.0.24",
+    "@storybook/react": "^7.0.24",
+    "@storybook/theming": "^7.0.24",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "typescript": "~4.7.2"
+    "typescript": "~5.0.2"
   }
 }

package/lib/components/Chat/ChatTranscript.d.ts

@@ -1,23 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { RepeatingViewRow } from './RepeatingView';
-import { TranscriptMessageProps } from './TranscriptMessage';
-import { SystemMessageProps } from './SystemMessage';
-export declare type ChatTranscriptItem = (TranscriptMessageProps & {
-    type: 'transcript';
-    id: RepeatingViewRow['id'];
-}) | (SystemMessageProps & {
-    type: 'system';
-    id: RepeatingViewRow['id'];
-});
-export interface ChatTranscriptProps {
-    /** ref to the element */
-    ref?: Ref<HTMLDivElement>;
-    /** Title for transcript's body */
-    title?: string;
-    /** Transcript messages array */
-    transcript: ChatTranscriptItem[];
-}
-declare const ChatTranscript: FunctionComponent<ChatTranscriptProps & ForwardProps>;
-export default ChatTranscript;
-//# sourceMappingURL=ChatTranscript.d.ts.map

package/lib/components/Chat/ChatTranscript.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatTranscript.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAA0B,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAErF,OAAsB,EAAE,gBAAgB,EAA2B,MAAM,iBAAiB,CAAC;AAC3F,OAA0B,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAsB,EAAE,kBAAkB,EAAuB,MAAM,iBAAiB,CAAC;AAEzF,oBAAY,kBAAkB,GAC1B,CAAC,sBAAsB,GAAG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,GAC7E,CAAC,kBAAkB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,UAAU,EAAE,kBAAkB,EAAE,CAAC;CAClC;AAgCD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAwCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Chat/ChatTranscript.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, defaultThemeProp, Text } from '@pega/cosmos-react-core';
-import RepeatingView, { StyledRepeatingViewItem } from './RepeatingView';
-import TranscriptMessage from './TranscriptMessage';
-import SystemMessage, { StyledSystemMessage } from './SystemMessage';
-const StyledChatTranscriptHeading = styled.h4 ``;
-const StyledChatTranscriptContainer = styled.div(props => {
-    const { theme: { base: { shadow: { focus: shadowFocus }, spacing } } } = props;
-    return css `
-    width: 100%;
-    outline: none;
-    padding: 0 0.75rem 0.5rem;
-    &:focus {
-      box-shadow: ${shadowFocus};
-    }
-    ${StyledChatTranscriptHeading}, ${StyledRepeatingViewItem}, ${StyledSystemMessage} {
-      margin: calc(0.25 * ${spacing});
-      padding: calc(0.25 * ${spacing});
-    }
-    ${StyledSystemMessage} {
-      padding: 0;
-    }
-  `;
-});
-StyledChatTranscriptContainer.defaultProps = defaultThemeProp;
-const ChatTranscript = forwardRef((props, ref) => {
-    const { transcript: transcriptItems = [], title, ...restProps } = props;
-    return (_jsxs(Flex, { ref: ref, as: StyledChatTranscriptContainer, container: {
-            direction: 'column',
-            gap: 0.5
-        }, ...restProps, children: [title && (_jsx(Text, { variant: 'h4', as: StyledChatTranscriptHeading, children: title })), _jsx(RepeatingView, { rows: transcriptItems, children: item => {
-                    const { id, type, ...transcriptItemRestProps } = item;
-                    if (type === 'transcript') {
-                        return (_jsx(TranscriptMessage, { ...transcriptItemRestProps }, id));
-                    }
-                    if (type === 'system') {
-                        return (_jsx(SystemMessage, { ...transcriptItemRestProps }, id));
-                    }
-                    return _jsx(_Fragment, {});
-                } })] }));
-});
-export default ChatTranscript;
-//# sourceMappingURL=ChatTranscript.js.map

package/lib/components/Chat/ChatTranscript.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatTranscript.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,aAAa,EAAE,EAAoB,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,iBAA6C,MAAM,qBAAqB,CAAC;AAChF,OAAO,aAAa,EAAE,EAAsB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAezF,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;;oBAKQ,WAAW;;MAEzB,2BAA2B,KAAK,uBAAuB,KAAK,mBAAmB;4BACzD,OAAO;6BACN,OAAO;;MAE9B,mBAAmB;;;GAGtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,cAAc,GAA0D,UAAU,CACtF,CAAC,KAA2C,EAAE,GAA+B,EAAE,EAAE;IAC/E,MAAM,EAAE,UAAU,EAAE,eAAe,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,KACG,SAAS,aAEZ,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,2BAA2B,YAC/C,KAAK,GACD,CACR,EACD,KAAC,aAAa,IAAC,IAAI,EAAE,eAAe,YACjC,IAAI,CAAC,EAAE;oBACN,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,uBAAuB,EAAE,GAAG,IAA0B,CAAC;oBAC5E,IAAI,IAAI,KAAK,YAAY,EAAE;wBACzB,OAAO,CACL,KAAC,iBAAiB,OAEX,uBAAkD,IADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,OAAe,uBAA8C,IAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,mBAAK,CAAC;gBACf,CAAC,GACa,IACX,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp, ForwardProps, Text } from '@pega/cosmos-react-core';\n\nimport RepeatingView, { RepeatingViewRow, StyledRepeatingViewItem } from './RepeatingView';\nimport TranscriptMessage, { TranscriptMessageProps } from './TranscriptMessage';\nimport SystemMessage, { SystemMessageProps, StyledSystemMessage } from './SystemMessage';\n\nexport type ChatTranscriptItem =\n  | (TranscriptMessageProps & { type: 'transcript'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] });\n\nexport interface ChatTranscriptProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for transcript's body */\n  title?: string;\n  /** Transcript messages array */\n  transcript: ChatTranscriptItem[];\n}\n\nconst StyledChatTranscriptHeading = styled.h4``;\n\nconst StyledChatTranscriptContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { focus: shadowFocus },\n        spacing\n      }\n    }\n  } = props;\n  return css`\n    width: 100%;\n    outline: none;\n    padding: 0 0.75rem 0.5rem;\n    &:focus {\n      box-shadow: ${shadowFocus};\n    }\n    ${StyledChatTranscriptHeading}, ${StyledRepeatingViewItem}, ${StyledSystemMessage} {\n      margin: calc(0.25 * ${spacing});\n      padding: calc(0.25 * ${spacing});\n    }\n    ${StyledSystemMessage} {\n      padding: 0;\n    }\n  `;\n});\n\nStyledChatTranscriptContainer.defaultProps = defaultThemeProp;\n\nconst ChatTranscript: FunctionComponent<ChatTranscriptProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatTranscriptProps>, ref: ChatTranscriptProps['ref']) => {\n    const { transcript: transcriptItems = [], title, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatTranscriptContainer}\n        container={{\n          direction: 'column',\n          gap: 0.5\n        }}\n        {...restProps}\n      >\n        {title && (\n          <Text variant='h4' as={StyledChatTranscriptHeading}>\n            {title}\n          </Text>\n        )}\n        <RepeatingView rows={transcriptItems}>\n          {item => {\n            const { id, type, ...transcriptItemRestProps } = item as ChatTranscriptItem;\n            if (type === 'transcript') {\n              return (\n                <TranscriptMessage\n                  key={id}\n                  {...(transcriptItemRestProps as TranscriptMessageProps)}\n                />\n              );\n            }\n            if (type === 'system') {\n              return (\n                <SystemMessage key={id} {...(transcriptItemRestProps as SystemMessageProps)} />\n              );\n            }\n            return <></>;\n          }}\n        </RepeatingView>\n      </Flex>\n    );\n  }\n);\n\nexport default ChatTranscript;\n"]}

package/lib/components/Chat/MessageList.d.ts

@@ -1,35 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';
-import { RepeatingViewProps, RepeatingViewRow } from './RepeatingView';
-import { MessageProps } from './Message';
-import { SystemMessageProps } from './SystemMessage';
-import { TypeIndicatorProps } from './TypeIndicator';
-export interface MessageListImperativeHandleProps {
-    isScrolledToLatest: () => boolean;
-    scrollToLatestMessage: () => void;
-    scrollToNewMessage: () => void;
-}
-export declare type MessageListItemProps = (MessageProps & {
-    type: 'message';
-    id: RepeatingViewRow['id'];
-}) | (SystemMessageProps & {
-    type: 'system';
-    id: RepeatingViewRow['id'];
-}) | (TypeIndicatorProps & {
-    type: 'typing';
-    id: RepeatingViewRow['id'];
-});
-export interface MessageListProps extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {
-    /** Messages Data array */
-    messages: MessageListItemProps[];
-    /** ref to the message list */
-    ref?: Ref<MessageListImperativeHandleProps>;
-    /** Total unread messages */
-    unReadMessageCount?: number;
-    /** on scroll to button */
-    onScrollToButtonClick?: () => void;
-}
-export declare const NewMessageSeparatorId = "new-message-separator";
-declare const MessageList: FunctionComponent<MessageListProps & ForwardProps>;
-export default MessageList;
-//# sourceMappingURL=MessageList.d.ts.map

package/lib/components/Chat/MessageList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAsB,EACpB,kBAAkB,EAClB,gBAAgB,EAIjB,MAAM,iBAAiB,CAAC;AACzB,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAClD,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIpE,MAAM,WAAW,gCAAgC;IAC/C,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAClC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,oBAAY,oBAAoB,GAC5B,CAAC,YAAY,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,GAChE,CAAC,kBAAkB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,GACrE,CAAC,kBAAkB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,CAAC;AAE1E,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC;IACnE,0BAA0B;IAC1B,QAAQ,EAAE,oBAAoB,EAAE,CAAC;IACjC,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,gCAAgC,CAAC,CAAC;IAC5C,4BAA4B;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B;IAC1B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAID,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAsD7D,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA4InE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Chat/MessageList.js

@@ -1,134 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useLayoutEffect } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Flex, Icon, registerIcon, StyledButton, useI18n, debounce, defaultThemeProp } from '@pega/cosmos-react-core';
-import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
-import RepeatingView, { StyledRepeatingView, StyledRepeatingViewItem, StyledRepeatingViewUL } from './RepeatingView';
-import Message from './Message';
-import SystemMessage from './SystemMessage';
-import TypeIndicator from './TypeIndicator';
-registerIcon(caretDownIcon);
-const StyledMessageList = styled.div ``;
-export const NewMessageSeparatorId = 'new-message-separator';
-const StyledMessageListContainer = styled.div(props => {
-    const { theme: { base: { shadow: { high: shadowHigh }, colors: { white } } } } = props;
-    return css `
-    position: relative;
-    overflow-y: hidden;
-    > ${StyledMessageList} {
-      overflow-y: auto;
-    }
-    > ${StyledButton} {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      box-shadow: ${shadowHigh};
-      z-index: 1;
-      background-color: ${white};
-    }
-    ${StyledRepeatingView} {
-      overflow-y: hidden;
-    }
-    ${StyledRepeatingViewUL} {
-      padding: 1rem;
-    }
-
-    ${StyledRepeatingViewItem} {
-      padding: 0.125rem 0;
-    }
-  `;
-});
-StyledMessageListContainer.defaultProps = defaultThemeProp;
-const ScrollToLatest = props => {
-    const { scrollContainerRef } = props;
-    useLayoutEffect(() => {
-        if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTop =
-                scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
-        }
-    });
-    return _jsx(_Fragment, {});
-};
-const MessageList = forwardRef((props, ref) => {
-    const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;
-    const t = useI18n();
-    const conversationRef = useRef(null);
-    const scrollRef = useRef(false);
-    const isScrolledToLatest = useCallback(() => {
-        return conversationRef.current
-            ? conversationRef.current.scrollHeight -
-                conversationRef.current.scrollTop -
-                conversationRef.current.offsetHeight <=
-                30
-            : true;
-    }, [conversationRef.current]);
-    const scrollToLatestMessage = useCallback(() => {
-        if (conversationRef.current) {
-            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
-        }
-    }, [conversationRef.current]);
-    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);
-    const onMessageListScroll = useCallback(() => {
-        const isScrolled = isScrolledToLatest();
-        if (scrollRef.current && isScrolled) {
-            scrollRef.current = false;
-            if (unReadMessageCount) {
-                onScrollToButtonClick?.();
-            }
-        }
-        if (!scrollRef.current && !isScrolled) {
-            scrollRef.current = true;
-        }
-        setDisplayScrollToLatest(!isScrolled);
-    }, [isScrolledToLatest(), unReadMessageCount]);
-    const scrollToNewMessage = useCallback(() => {
-        if (conversationRef.current) {
-            setDisplayScrollToLatest(false);
-            const newMessageIndicatorEle = conversationRef.current.querySelector('[data-new-message-separator]');
-            if (newMessageIndicatorEle) {
-                conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;
-            }
-            else {
-                conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
-            }
-        }
-    }, [conversationRef.current]);
-    useImperativeHandle(ref, () => ({
-        isScrolledToLatest,
-        scrollToLatestMessage,
-        scrollToNewMessage
-    }), [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledMessageListContainer, item: {
-                    grow: 1
-                }, container: {
-                    direction: 'column'
-                }, ...restProps, children: [(unReadMessageCount > 0 || displayScrollLatest) && (_jsxs(Button, { "aria-label": unReadMessageCount > 0
-                            ? t('scroll_to_unread_messages')
-                            : t('scroll_to_latest_message'), onClick: () => {
-                            if (unReadMessageCount > 0) {
-                                scrollToNewMessage();
-                            }
-                            else {
-                                scrollToLatestMessage();
-                            }
-                            onScrollToButtonClick?.();
-                        }, icon: unReadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }), unReadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] })] })), _jsx(RepeatingView, { as: StyledMessageList, container: { direction: 'column' }, ref: conversationRef, rows: messages, onScroll: debounce(onMessageListScroll, 100), ...restProps, children: (item) => {
-                            const { id, type, ...messageListItemRestProps } = item;
-                            if (type === 'message') {
-                                return _jsx(Message, { ...messageListItemRestProps }, id);
-                            }
-                            if (type === 'system') {
-                                const extraProps = {};
-                                if (id === NewMessageSeparatorId) {
-                                    extraProps['data-new-message-separator'] = NewMessageSeparatorId;
-                                }
-                                return (_jsx(SystemMessage, { ...messageListItemRestProps, ...extraProps }, id));
-                            }
-                            if (type === 'typing') {
-                                return (_jsx(TypeIndicator, { ...messageListItemRestProps }, id));
-                            }
-                        } })] }), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef })] }));
-});
-export default MessageList;
-//# sourceMappingURL=MessageList.js.map

package/lib/components/Chat/MessageList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useCallback,\n  useState,\n  useLayoutEffect,\n  RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledButton,\n  useI18n,\n  debounce,\n  defaultThemeProp,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport RepeatingView, {\n  RepeatingViewProps,\n  RepeatingViewRow,\n  StyledRepeatingView,\n  StyledRepeatingViewItem,\n  StyledRepeatingViewUL\n} from './RepeatingView';\nimport Message, { MessageProps } from './Message';\nimport SystemMessage, { SystemMessageProps } from './SystemMessage';\nimport TypeIndicator, { TypeIndicatorProps } from './TypeIndicator';\n\nregisterIcon(caretDownIcon);\n\nexport interface MessageListImperativeHandleProps {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport type MessageListItemProps =\n  | (MessageProps & { type: 'message'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] })\n  | (TypeIndicatorProps & { type: 'typing'; id: RepeatingViewRow['id'] });\n\nexport interface MessageListProps\n  extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {\n  /** Messages Data array */\n  messages: MessageListItemProps[];\n  /** ref to the message list */\n  ref?: Ref<MessageListImperativeHandleProps>;\n  /** Total unread messages */\n  unReadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n}\n\nconst StyledMessageList = styled.div``;\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageListContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh },\n        colors: { white }\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n    > ${StyledMessageList} {\n      overflow-y: auto;\n    }\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n    ${StyledRepeatingView} {\n      overflow-y: hidden;\n    }\n    ${StyledRepeatingViewUL} {\n      padding: 1rem;\n    }\n\n    ${StyledRepeatingViewItem} {\n      padding: 0.125rem 0;\n    }\n  `;\n});\n\nStyledMessageListContainer.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return <></>;\n};\n\nconst MessageList: FunctionComponent<MessageListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageListProps>, ref: MessageListProps['ref']) => {\n    const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;\n\n    const t = useI18n();\n    const conversationRef = useRef<HTMLUListElement>(null);\n    const scrollRef = useRef(false);\n\n    const isScrolledToLatest: MessageListImperativeHandleProps['isScrolledToLatest'] =\n      useCallback(() => {\n        return conversationRef.current\n          ? conversationRef.current.scrollHeight -\n              conversationRef.current.scrollTop -\n              conversationRef.current.offsetHeight <=\n              30\n          : true;\n      }, [conversationRef.current]);\n\n    const scrollToLatestMessage: MessageListImperativeHandleProps['scrollToLatestMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        }\n      }, [conversationRef.current]);\n\n    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n    const onMessageListScroll = useCallback(() => {\n      const isScrolled = isScrolledToLatest();\n      if (scrollRef.current && isScrolled) {\n        scrollRef.current = false;\n        if (unReadMessageCount) {\n          onScrollToButtonClick?.();\n        }\n      }\n\n      if (!scrollRef.current && !isScrolled) {\n        scrollRef.current = true;\n      }\n\n      setDisplayScrollToLatest(!isScrolled);\n    }, [isScrolledToLatest(), unReadMessageCount]);\n\n    const scrollToNewMessage: MessageListImperativeHandleProps['scrollToNewMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          setDisplayScrollToLatest(false);\n          const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n            '[data-new-message-separator]'\n          );\n          if (newMessageIndicatorEle) {\n            conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n          } else {\n            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n          }\n        }\n      }, [conversationRef.current]);\n\n    useImperativeHandle<MessageListImperativeHandleProps, MessageListImperativeHandleProps>(\n      ref,\n      () => ({\n        isScrolledToLatest,\n        scrollToLatestMessage,\n        scrollToNewMessage\n      }),\n      [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n    );\n\n    return (\n      <>\n        <Flex\n          as={StyledMessageListContainer}\n          item={{\n            grow: 1\n          }}\n          container={{\n            direction: 'column'\n          }}\n          {...restProps}\n        >\n          {(unReadMessageCount > 0 || displayScrollLatest) && (\n            <Button\n              aria-label={\n                unReadMessageCount > 0\n                  ? t('scroll_to_unread_messages')\n                  : t('scroll_to_latest_message')\n              }\n              onClick={() => {\n                if (unReadMessageCount > 0) {\n                  scrollToNewMessage();\n                } else {\n                  scrollToLatestMessage();\n                }\n                onScrollToButtonClick?.();\n              }}\n              icon={unReadMessageCount === 0}\n            >\n              <Icon name='caret-down' />\n              {unReadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n          <RepeatingView\n            as={StyledMessageList}\n            container={{ direction: 'column' }}\n            ref={conversationRef}\n            rows={messages}\n            onScroll={debounce(onMessageListScroll, 100)}\n            {...restProps}\n          >\n            {(item: RepeatingViewRow) => {\n              const { id, type, ...messageListItemRestProps } = item as MessageListItemProps;\n              if (type === 'message') {\n                return <Message key={id} {...(messageListItemRestProps as MessageProps)} />;\n              }\n\n              if (type === 'system') {\n                const extraProps: Record<string, string> = {};\n                if (id === NewMessageSeparatorId) {\n                  extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n                }\n                return (\n                  <SystemMessage\n                    key={id}\n                    {...(messageListItemRestProps as SystemMessageProps)}\n                    {...extraProps}\n                  />\n                );\n              }\n              if (type === 'typing') {\n                return (\n                  <TypeIndicator key={id} {...(messageListItemRestProps as TypeIndicatorProps)} />\n                );\n              }\n            }}\n          </RepeatingView>\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default MessageList;\n"]}

package/lib/components/Chat/RepeatingView.d.ts

@@ -1,31 +0,0 @@
-import { FunctionComponent, Ref, ReactNode } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-export interface RepeatingViewRow {
-    id: string | number;
-    ariaLabel?: string;
-}
-export interface RepeatingViewProps {
-    /** ref to the list element */
-    ref?: Ref<HTMLUListElement>;
-    /** Callback to render the view */
-    children: (row: RepeatingViewRow) => ReactNode;
-    /** Data rows */
-    rows?: RepeatingViewRow[];
-    /** Indicates if the data is being currently loading */
-    loading?: boolean;
-    /** Offset of the row item that need to trigger the load more callback */
-    offset?: number;
-    /** Callback to fetch more rows */
-    loadMore?: () => void;
-    /** UI that needs to be shown when list is empty */
-    emptyView?: ReactNode;
-    /** Scroll direction */
-    scrollDirection?: 'top-to-bottom' | 'bottom-to-top';
-}
-export declare const StyledRepeatingViewItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledRepeatingViewUL: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledRepeatingView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledEmptyView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps>;
-export default RepeatingView;
-//# sourceMappingURL=RepeatingView.d.ts.map

package/lib/components/Chat/RepeatingView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RepeatingView.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAML,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,SAAS,CAAC;IAC/C,gBAAgB;IAChB,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,eAAe,GAAG,eAAe,CAAC;CACrD;AACD,eAAO,MAAM,uBAAuB,wGAOlC,CAAC;AAGH,eAAO,MAAM,qBAAqB,wGAKjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAEF,eAAO,MAAM,eAAe,yGAM3B,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA4DvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Chat/RepeatingView.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, Progress, useItemIntersection, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledRepeatingViewItem = styled.li(({ theme }) => {
-    return css `
-    outline: none;
-    &:focus {
-      box-shadow: ${theme.base.shadow.focus};
-    }
-  `;
-});
-StyledRepeatingViewItem.defaultProps = defaultThemeProp;
-export const StyledRepeatingViewUL = styled.ul `
-  list-style-type: none;
-  overflow-y: auto;
-  height: 100%;
-  width: 100%;
-`;
-export const StyledRepeatingView = styled.div `
-  position: relative;
-`;
-export const StyledEmptyView = styled.div `
-  position: absolute;
-  bottom: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-`;
-const RepeatingView = forwardRef((props, ref) => {
-    const { children: renderer, offset = -1, loadMore, loading: isLoading = false, rows = [], emptyView, scrollDirection = 'top-to-bottom', ...restProps } = props;
-    const listRef = useConsolidatedRef(ref);
-    useItemIntersection(listRef, offset, () => {
-        loadMore?.();
-    }, ':scope > li');
-    return (_jsxs(Flex, { container: {
-            alignItems: 'center',
-            justify: 'center'
-        }, as: StyledRepeatingView, ...restProps, children: [_jsxs(Flex, { ...restProps, container: {
-                    direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'
-                }, as: StyledRepeatingViewUL, ref: listRef, children: [rows.map(row => {
-                        const { ariaLabel, ...rowRestProps } = row;
-                        return (_jsx(StyledRepeatingViewItem, { "aria-label": ariaLabel, children: renderer(rowRestProps) }, row.id));
-                    }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }) }, 'loader'))] }), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }))] }));
-});
-export default RepeatingView;
-//# sourceMappingURL=RepeatingView.js.map