@pega/cosmos-react-social 2.0.0-dev.10.0 → 2.0.0-dev.13.0

package/lib/components/Feed/mocks/Feed.mocks.d.ts

@@ -0,0 +1,33 @@
+export declare const userMentions: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    fields: ({
+        name: string;
+        value: string;
+    } | {
+        name: string;
+        value: JSX.Element;
+    })[];
+    visual: JSX.Element;
+}[];
+export declare const caseMentions: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    visual: JSX.Element;
+}[];
+export declare const generatedLikes: {
+    primary: string;
+    secondary: string[];
+    visual: JSX.Element;
+    id: string;
+}[];
+export declare const availableRecipients: {
+    primary: string;
+    secondary: string[];
+    visual: JSX.Element;
+    value: string;
+    id: string;
+}[];
+//# sourceMappingURL=Feed.mocks.d.ts.map

package/lib/components/Feed/mocks/Feed.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feed.mocks.d.ts","sourceRoot":"","sources":["../../../../src/components/Feed/mocks/Feed.mocks.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;GAyHxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;GA+BxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;GA6D1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;GAyD/B,CAAC"}

package/lib/components/Feed/mocks/Feed.mocks.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, EmailDisplay, PhoneDisplay } from '@pega/cosmos-react-core';
+// cspell: disable
+export const userMentions = [
+    {
+        id: 'turnc',
+        primary: 'Cindy Turner',
+        secondary: ['Lead Engineer'],
+        fields: [
+            {
+                name: 'Project',
+                value: 'Cosmos Demo'
+            },
+            {
+                name: 'Phone number',
+                value: _jsx(PhoneDisplay, { value: '(111) 111-1111' }, void 0)
+            },
+            {
+                name: 'Email',
+                value: _jsx(EmailDisplay, { value: 'turnc@pega.com' }, void 0)
+            },
+            {
+                name: 'Reports to',
+                value: 'Helen Bush'
+            }
+        ],
+        visual: _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }, void 0)
+    },
+    {
+        id: 'deans',
+        primary: 'Seth DeAngelo',
+        secondary: ['Senior Software Engineer', 'Backend Developer'],
+        fields: [
+            {
+                name: 'Project',
+                value: 'Cosmos Demo'
+            },
+            {
+                name: 'Phone number',
+                value: _jsx(PhoneDisplay, { value: '(222) 222-2222' }, void 0)
+            },
+            {
+                name: 'Email',
+                value: _jsx(EmailDisplay, { value: 'deans@pega.com' }, void 0)
+            },
+            {
+                name: 'Reports to',
+                value: 'Helen Bush'
+            }
+        ],
+        visual: _jsx(Avatar, { size: 'l', name: 'Seth DeAngelo' }, void 0)
+    },
+    {
+        id: 'moorj',
+        primary: 'Janet Moore',
+        secondary: ['Backend Developer'],
+        fields: [
+            {
+                name: 'Project',
+                value: 'Cosmos Demo'
+            },
+            {
+                name: 'Phone number',
+                value: _jsx(PhoneDisplay, { value: '(333) 333-3333' }, void 0)
+            },
+            {
+                name: 'Email',
+                value: _jsx(EmailDisplay, { value: 'moorj@pega.com' }, void 0)
+            },
+            {
+                name: 'Reports to',
+                value: 'Helen Bush'
+            }
+        ],
+        visual: _jsx(Avatar, { size: 'l', name: 'Janet Moore' }, void 0)
+    },
+    {
+        id: 'thomd',
+        primary: 'Dean Thomas',
+        secondary: ['Designer'],
+        fields: [
+            {
+                name: 'Project',
+                value: 'Cosmos Demo'
+            },
+            {
+                name: 'Phone number',
+                value: _jsx(PhoneDisplay, { value: '(444) 444-4444' }, void 0)
+            },
+            {
+                name: 'Email',
+                value: _jsx(EmailDisplay, { value: 'thomd@pega.com' }, void 0)
+            },
+            {
+                name: 'Reports to',
+                value: 'Bob Hathoway'
+            }
+        ],
+        visual: _jsx(Avatar, { size: 'l', name: 'Dean Thomas' }, void 0)
+    },
+    {
+        id: 'hathb',
+        primary: 'Bob Hathoway',
+        secondary: ['Lead Designer', 'Product Owner'],
+        fields: [
+            {
+                name: 'Project',
+                value: 'Cosmos Demo'
+            },
+            {
+                name: 'Phone number',
+                value: _jsx(PhoneDisplay, { value: '(555) 555-5555' }, void 0)
+            },
+            {
+                name: 'Email',
+                value: _jsx(EmailDisplay, { value: 'hathb@pega.com' }, void 0)
+            },
+            {
+                name: 'Reports to',
+                value: ''
+            }
+        ],
+        visual: _jsx(Avatar, { size: 'l', name: 'Bob Hathoway' }, void 0)
+    }
+];
+export const caseMentions = [
+    {
+        id: 'c-001',
+        primary: 'Complete user sign up form',
+        secondary: ['US-111111'],
+        visual: _jsx(Avatar, { size: 'l', name: 'c-001', icon: 'case' }, void 0)
+    },
+    {
+        id: 'c-002',
+        primary: 'Button missing on home page',
+        secondary: ['BUG-222222'],
+        visual: _jsx(Avatar, { size: 'l', name: 'c-002', icon: 'case' }, void 0)
+    },
+    {
+        id: 'c-003',
+        primary: 'Set up transaction broker',
+        secondary: ['US-333333'],
+        visual: _jsx(Avatar, { size: 'l', name: 'c-03', icon: 'case' }, void 0)
+    },
+    {
+        id: 'c-004',
+        primary: 'Check in with security team',
+        secondary: ['TASK-444444'],
+        visual: _jsx(Avatar, { size: 'l', name: 'c-004', icon: 'case' }, void 0)
+    },
+    {
+        id: 'c-005',
+        primary: 'Error occurs upon submitting form',
+        secondary: ['BUG-555555'],
+        visual: _jsx(Avatar, { size: 'l', name: 'c-005', icon: 'case' }, void 0)
+    }
+];
+export const generatedLikes = [
+    {
+        primary: 'Cindy Turner',
+        secondary: ['Lead Engineer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }, void 0),
+        id: 'turnc'
+    },
+    {
+        primary: 'Helen Bush',
+        secondary: ['Product Manager', 'Product Owner'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Helen Bush' }, void 0),
+        id: 'bushh'
+    },
+    {
+        primary: 'Randy Paul',
+        secondary: ['Frontend Developer', 'Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Randy Paul' }, void 0),
+        id: 'paulr'
+    },
+    {
+        primary: 'Janet Moore',
+        secondary: ['Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Janet Moore' }, void 0),
+        id: 'moorj'
+    },
+    {
+        primary: 'Kate Mirin',
+        secondary: ['Quality Engineer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Kate Mirin' }, void 0),
+        id: 'mirik'
+    },
+    {
+        primary: 'Bob Hathoway',
+        secondary: ['Lead Designer', 'Product Owner'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Bob Hathoway' }, void 0),
+        id: 'hathb'
+    },
+    {
+        primary: 'Seth DeAngelo',
+        secondary: ['Senior Software Engineer', 'Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Seth DeAngelo' }, void 0),
+        id: 'deans'
+    },
+    {
+        primary: 'Dean Thomas',
+        secondary: ['Designer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Dean Thomas' }, void 0),
+        id: 'thomd'
+    },
+    {
+        primary: 'Louie Santos',
+        secondary: ['Marketing Specialist'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Louie Santos' }, void 0),
+        id: 'santl'
+    },
+    {
+        primary: 'Margaret Foster',
+        secondary: ['Architect', 'Designer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Margaret Foster' }, void 0),
+        id: 'fostm'
+    }
+];
+export const availableRecipients = [
+    {
+        primary: 'Cindy Turner',
+        secondary: ['Lead Engineer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }, void 0),
+        value: 'turnc',
+        id: 'turnc'
+    },
+    {
+        primary: 'Helen Bush',
+        secondary: ['Product Manager', 'Product Owner'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Helen Bush' }, void 0),
+        value: 'bushh',
+        id: 'bushh'
+    },
+    {
+        primary: 'Randy Paul',
+        secondary: ['Frontend Developer', 'Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Randy Paul' }, void 0),
+        value: 'paulr',
+        id: 'paulr'
+    },
+    {
+        primary: 'Janet Moore',
+        secondary: ['Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Janet Moore' }, void 0),
+        value: 'moorj',
+        id: 'moorj'
+    },
+    {
+        primary: 'Kate Mirin',
+        secondary: ['Quality Engineer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Kate Mirin' }, void 0),
+        value: 'mirik',
+        id: 'mirik'
+    },
+    {
+        primary: 'Bob Hathoway',
+        secondary: ['Lead Designer', 'Product Owner'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Bob Hathoway' }, void 0),
+        value: 'hathb',
+        id: 'hathb'
+    },
+    {
+        primary: 'Seth DeAngelo',
+        secondary: ['Senior Software Engineer', 'Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Seth DeAngelo' }, void 0),
+        value: 'deans',
+        id: 'deans'
+    },
+    {
+        primary: 'Dean Thomas',
+        secondary: ['Designer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Dean Thomas' }, void 0),
+        value: 'thomd',
+        id: 'thomd'
+    }
+];
+//# sourceMappingURL=Feed.mocks.js.map

package/lib/components/Feed/mocks/Feed.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feed.mocks.js","sourceRoot":"","sources":["../../../../src/components/Feed/mocks/Feed.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Avatar, EmailDisplay, PhoneDisplay } from '@pega/cosmos-react-core';\n\n// cspell: disable\nexport const userMentions = [\n  {\n    id: 'turnc',\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(111) 111-1111' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='turnc@pega.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Cindy Turner' />\n  },\n  {\n    id: 'deans',\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(222) 222-2222' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='deans@pega.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Seth DeAngelo' />\n  },\n  {\n    id: 'moorj',\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(333) 333-3333' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='moorj@pega.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Janet Moore' />\n  },\n  {\n    id: 'thomd',\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(444) 444-4444' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='thomd@pega.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Bob Hathoway'\n      }\n    ],\n    visual: <Avatar size='l' name='Dean Thomas' />\n  },\n  {\n    id: 'hathb',\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(555) 555-5555' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='hathb@pega.com' />\n      },\n      {\n        name: 'Reports to',\n        value: ''\n      }\n    ],\n    visual: <Avatar size='l' name='Bob Hathoway' />\n  }\n];\n\nexport const caseMentions = [\n  {\n    id: 'c-001',\n    primary: 'Complete user sign up form',\n    secondary: ['US-111111'],\n    visual: <Avatar size='l' name='c-001' icon='case' />\n  },\n  {\n    id: 'c-002',\n    primary: 'Button missing on home page',\n    secondary: ['BUG-222222'],\n    visual: <Avatar size='l' name='c-002' icon='case' />\n  },\n  {\n    id: 'c-003',\n    primary: 'Set up transaction broker',\n    secondary: ['US-333333'],\n    visual: <Avatar size='l' name='c-03' icon='case' />\n  },\n  {\n    id: 'c-004',\n    primary: 'Check in with security team',\n    secondary: ['TASK-444444'],\n    visual: <Avatar size='l' name='c-004' icon='case' />\n  },\n  {\n    id: 'c-005',\n    primary: 'Error occurs upon submitting form',\n    secondary: ['BUG-555555'],\n    visual: <Avatar size='l' name='c-005' icon='case' />\n  }\n];\n\nexport const generatedLikes = [\n  {\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />,\n    id: 'turnc'\n  },\n  {\n    primary: 'Helen Bush',\n    secondary: ['Product Manager', 'Product Owner'],\n    visual: <Avatar size='l' name='Helen Bush' />,\n    id: 'bushh'\n  },\n  {\n    primary: 'Randy Paul',\n    secondary: ['Frontend Developer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Randy Paul' />,\n    id: 'paulr'\n  },\n  {\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />,\n    id: 'moorj'\n  },\n  {\n    primary: 'Kate Mirin',\n    secondary: ['Quality Engineer'],\n    visual: <Avatar size='l' name='Kate Mirin' />,\n    id: 'mirik'\n  },\n  {\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />,\n    id: 'hathb'\n  },\n  {\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />,\n    id: 'deans'\n  },\n  {\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />,\n    id: 'thomd'\n  },\n  {\n    primary: 'Louie Santos',\n    secondary: ['Marketing Specialist'],\n    visual: <Avatar size='l' name='Louie Santos' />,\n    id: 'santl'\n  },\n  {\n    primary: 'Margaret Foster',\n    secondary: ['Architect', 'Designer'],\n    visual: <Avatar size='l' name='Margaret Foster' />,\n    id: 'fostm'\n  }\n];\n\nexport const availableRecipients = [\n  {\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />,\n    value: 'turnc',\n    id: 'turnc'\n  },\n  {\n    primary: 'Helen Bush',\n    secondary: ['Product Manager', 'Product Owner'],\n    visual: <Avatar size='l' name='Helen Bush' />,\n    value: 'bushh',\n    id: 'bushh'\n  },\n  {\n    primary: 'Randy Paul',\n    secondary: ['Frontend Developer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Randy Paul' />,\n    value: 'paulr',\n    id: 'paulr'\n  },\n  {\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />,\n    value: 'moorj',\n    id: 'moorj'\n  },\n  {\n    primary: 'Kate Mirin',\n    secondary: ['Quality Engineer'],\n    visual: <Avatar size='l' name='Kate Mirin' />,\n    value: 'mirik',\n    id: 'mirik'\n  },\n  {\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />,\n    value: 'hathb',\n    id: 'hathb'\n  },\n  {\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />,\n    value: 'deans',\n    id: 'deans'\n  },\n  {\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />,\n    value: 'thomd',\n    id: 'thomd'\n  }\n];\n"]}

package/lib/components/HashtagButton/HashtagButton.js

@@ -20,9 +20,7 @@ const HashtagButton = forwardRef(({ children, tag: tagProp = '', ...restProps },
     else {
         tag = tagProp;
     }
-    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0),
-            _jsx(StyledTag, Object.assign({}, restProps, { ref: ref, onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(tag) }, { children: isValidElement(children) ? children : tag }), void 0),
-            trailingChar && _jsx("span", { children: trailingChar }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledTag, Object.assign({}, restProps, { ref: ref, onClick: () => onTagClick?.(tag) }, { children: isValidElement(children) ? children : tag }), void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0)] }, void 0));
 });
 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;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,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,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,WAAQ,CAAC;QAExD,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;KAC3B;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,WAAQ;YAC1C,KAAC,SAAS,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,GAAG,CAAC,gBACjE,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,YAChC;YACX,YAAY,IAAI,yBAAO,YAAY,WAAQ,YAC3C,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,aAAa;CACzB,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';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\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 leadingChar = '';\n    let trailingChar = '';\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      tag = children.groups.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n        {trailingChar && <span>{trailingChar}</span>}\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  regexPattern: /(?:^|)(?<match>#(?<tag>[^ :]+\\w):)/g,\n  component: HashtagButton\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;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,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,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,WAAQ,CAAC;QAExD,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;KAC3B;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,WAAQ,EAC1C,KAAC,SAAS,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,gBACjE,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,YAChC,EACX,YAAY,IAAI,yBAAO,YAAY,WAAQ,YAC3C,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,aAAa;CACzB,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';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\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 leadingChar = '';\n    let trailingChar = '';\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      tag = children.groups.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n        {trailingChar && <span>{trailingChar}</span>}\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  regexPattern: /(?:^|)(?<match>#(?<tag>[^ :]+\\w):)/g,\n  component: HashtagButton\n};\n\nexport default HashtagButton;\n"]}

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,EAIb,MAAM,yBAAyB,CAAC;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsEvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;CAI/B,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;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqEvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/MentionButton/MentionButton.js

@@ -38,7 +38,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
         type = typeProp;
     }
     const handleClick = () => {
-        const comp = onMentionClick === null || onMentionClick === void 0 ? void 0 : onMentionClick({
+        const comp = onMentionClick?.({
             id,
             text,
             type
@@ -47,10 +47,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
             setShowPopover(true);
         setMentionContent(comp);
     };
-    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0),
-            _jsx(StyledButton, Object.assign({}, restProps, { ref: mentionRef, variant: 'link', onClick: handleClick }, { children: isValidElement(children) ? children : text }), void 0),
-            trailingChar && _jsx("span", { children: trailingChar }, void 0),
-            _jsx(Popover, Object.assign({ ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, portal: true }, { children: mentionContent }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledButton, Object.assign({}, restProps, { ref: mentionRef, variant: 'link', onClick: handleClick }, { children: isValidElement(children) ? children : text }), void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0), _jsx(Popover, Object.assign({ ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true }, { children: mentionContent }), void 0)] }, void 0));
 });
 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  Popover,\n  useConsolidatedRef,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | 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}\n\nconst StyledButton = styled(Button)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      id: idProp = '',\n      text: textProp = '',\n      type: typeProp = '',\n      ...restProps\n    }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onMentionClick } = 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 leadingChar = '';\n    let trailingChar = '';\n    let id = '';\n    let text = '';\n    let type = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      id = children.groups.id;\n      text = children.groups.text;\n      type = children.groups.type;\n    } else {\n      id = idProp;\n      text = textProp;\n      type = typeProp;\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        {leadingChar && <span>{leadingChar}</span>}\n        <StyledButton {...restProps} ref={mentionRef} variant='link' onClick={handleClick}>\n          {isValidElement(children) ? children : text}\n        </StyledButton>\n        {trailingChar && <span>{trailingChar}</span>}\n        <Popover\n          ref={popoverRef}\n          show={showPopover}\n          target={mentionRef.current}\n          placement='bottom-start'\n          arrow\n          portal\n        >\n          {mentionContent}\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\\w):(?<text>[^:]+\\w):(?<type>[^:]+\\w):)/g,\n  component: MentionButton\n};\n\nexport default MentionButton;\n"]}
+{"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  Popover,\n  useConsolidatedRef,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | 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}\n\nconst StyledButton = styled(Button)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      id: idProp = '',\n      text: textProp = '',\n      type: typeProp = '',\n      ...restProps\n    }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onMentionClick } = 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 leadingChar = '';\n    let trailingChar = '';\n    let id = '';\n    let text = '';\n    let type = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      id = children.groups.id;\n      text = children.groups.text;\n      type = children.groups.type;\n    } else {\n      id = idProp;\n      text = textProp;\n      type = typeProp;\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        {leadingChar && <span>{leadingChar}</span>}\n        <StyledButton {...restProps} ref={mentionRef} variant='link' onClick={handleClick}>\n          {isValidElement(children) ? children : text}\n        </StyledButton>\n        {trailingChar && <span>{trailingChar}</span>}\n        <Popover\n          ref={popoverRef}\n          show={showPopover}\n          target={mentionRef.current}\n          placement='bottom-start'\n          arrow\n        >\n          {mentionContent}\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\\w):(?<text>[^:]+\\w):(?<type>[^:]+\\w):)/g,\n  component: MentionButton\n};\n\nexport default MentionButton;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "2.0.0-dev.10.0",
+  "version": "2.0.0-dev.13.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,25 +20,25 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.10.0",
-    "@pega/cosmos-react-rte": "2.0.0-dev.10.0",
-    "@pega/cosmos-react-work": "2.0.0-dev.10.0",
+    "@pega/cosmos-react-core": "2.0.0-dev.13.0",
+    "@pega/cosmos-react-rte": "2.0.0-dev.13.0",
+    "@pega/cosmos-react-work": "2.0.0-dev.13.0",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-storysource": "^6.3.7",
-    "@storybook/addon-toolbars": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
-    "@storybook/theming": "^6.3.7",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addon-toolbars": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
-    "typescript": "~4.3.2"
+    "typescript": "~4.4.2"
   }
 }