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

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

@@ -1 +1 @@
-{"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,EAAE,MAAM,yBAAyB,CAAC;AAE/E,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,CAoCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"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,7 +1,7 @@
 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 } from '@pega/cosmos-react-core';
+import { Flex, defaultThemeProp, Text } from '@pega/cosmos-react-core';
 import RepeatingView, { StyledRepeatingViewItem } from './RepeatingView';
 import TranscriptMessage from './TranscriptMessage';
 import SystemMessage, { StyledSystemMessage } from './SystemMessage';
@@ -30,7 +30,7 @@ const ChatTranscript = forwardRef((props, ref) => {
     return (_jsxs(Flex, Object.assign({ ref: ref, as: StyledChatTranscriptContainer, container: {
             direction: 'column',
             gap: 0.5
-        } }, restProps, { children: [title && _jsx(StyledChatTranscriptHeading, { children: title }, void 0), _jsx(RepeatingView, Object.assign({ rows: transcriptItems }, { children: item => {
+        } }, restProps, { children: [title && (_jsx(Text, Object.assign({ variant: 'h4', as: StyledChatTranscriptHeading }, { children: title }), void 0)), _jsx(RepeatingView, Object.assign({ rows: transcriptItems }, { children: item => {
                     const { id, type, ...transcriptItemRestProps } = item;
                     if (type === 'transcript') {
                         return (_jsx(TranscriptMessage, Object.assign({}, transcriptItemRestProps), id));

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

@@ -1 +1 @@
-{"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,MAAM,yBAAyB,CAAC;AAE/E,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,kBACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,IACG,SAAS,eAEZ,KAAK,IAAI,KAAC,2BAA2B,cAAE,KAAK,WAA+B,EAC5E,KAAC,aAAa,kBAAC,IAAI,EAAE,eAAe,gBACjC,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,oBAEX,uBAAkD,GADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,oBAAe,uBAA8C,GAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,2BAAK,CAAC;gBACf,CAAC,YACa,aACX,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 } 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 && <StyledChatTranscriptHeading>{title}</StyledChatTranscriptHeading>}\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"]}
+{"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,kBACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,IACG,SAAS,eAEZ,KAAK,IAAI,CACR,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,2BAA2B,gBAC/C,KAAK,YACD,CACR,EACD,KAAC,aAAa,kBAAC,IAAI,EAAE,eAAe,gBACjC,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,oBAEX,uBAAkD,GADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,oBAAe,uBAA8C,GAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,2BAAK,CAAC;gBACf,CAAC,YACa,aACX,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/Feed/FeedNewPost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAA6C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAaL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAGjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,sBAAsB,yGAYjC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA+IpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAaL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAGjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,sBAAsB,yGAYjC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAiJpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Feed/FeedNewPost.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useContext, useEffect } from 'react';
+import { useState, useRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Avatar, Button, CardContent, Flex, Icon, StyledIcon, StyledCard, StyledPopover, defaultThemeProp, useAutoResize, useElement, useOuterEvent, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
+import { Avatar, Button, CardContent, Flex, Icon, StyledIcon, StyledCard, StyledPopover, defaultThemeProp, useAutoResize, useElement, useOuterEvent, useI18n, ExpandCollapse, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import { StyledRichTextEditor } from '@pega/cosmos-react-rte';
 import FeedNewPostTypeMenu from './FeedNewPostTypeMenu';
 import FeedAttachments from './FeedAttachments';
@@ -56,7 +56,7 @@ const FeedNewPost = (props) => {
     });
     const t = useI18n();
     const handlePost = () => {
-        if (!emptyText || attachments.length > 0) {
+        if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {
             onPost({
                 newPostId: id,
                 value: rteRef.current?.getPlainText() || '',
@@ -70,7 +70,7 @@ const FeedNewPost = (props) => {
             });
         }
     };
-    useEffect(() => {
+    useAfterInitialEffect(() => {
         if (postType === 'post') {
             rteRef.current?.focus();
         }
@@ -78,7 +78,7 @@ const FeedNewPost = (props) => {
             setSelectedRecipients([]);
         }
     }, [postType]);
-    return (_jsx(StyledCard, Object.assign({ ref: setNewPostEl, as: StyledFeedNewPost }, restProps, { children: _jsxs(CardContent, { children: [onRecipientSearch && (_jsx(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) }, void 0)), _jsxs(Flex, Object.assign({ container: { alignItems: 'start', gap: 1 } }, { children: [_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }, void 0), _jsx(StyledTextAreaOverflow, Object.assign({ ref: textAreaRef }, { children: _jsx(FeedRichText, { onChange: () => {
+    return (_jsx(StyledCard, Object.assign({ ref: setNewPostEl, as: StyledFeedNewPost }, restProps, { children: _jsxs(CardContent, { children: [onRecipientSearch && (_jsx(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) }, void 0)), _jsxs(Flex, Object.assign({ container: { alignItems: 'start', gap: 1 } }, { children: [_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }, void 0), _jsx(StyledTextAreaOverflow, Object.assign({ ref: textAreaRef }, { children: _jsx(FeedRichText, { label: t('feed_new_post'), labelHidden: true, onChange: () => {
                                     setEmptyText(rteRef.current?.getPlainText().trim() === '');
                                     resizeTextArea();
                                 }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), ref: rteRef }, void 0) }), void 0), !emptyText && (_jsx(Button, Object.assign({ variant: 'simple', as: FeedButton, onClick: rteRef.current?.clear, icon: true, label: t('feed_cancel_conversation') }, { children: _jsx(Icon, { name: 'times' }, void 0) }), void 0)), onFilesAdded && (_jsx(Button, Object.assign({ variant: 'simple', as: FeedButton, onClick: () => attachmentEl?.click(), icon: true, label: t('attachment') }, { children: _jsx(Icon, { name: 'paper-clip' }, void 0) }), void 0))] }), void 0), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
@@ -89,7 +89,7 @@ const FeedNewPost = (props) => {
                     // Must trick input to believe there is no value when activated so that the same file may be added consecutively.
                     onClick: (event) => {
                         event.target.value = '';
-                    } }, void 0), _jsx(FeedAttachments, { attachments: attachments }, void 0), _jsx(ExpandCollapse, Object.assign({ collapsed: !hasFocus && emptyText && !attachments.length }, { children: _jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'primary', disabled: emptyText && attachments.length === 0, onClick: handlePost }, { children: postLabel }), void 0) }), void 0) }), void 0)] }, void 0) }), void 0));
+                    } }, void 0), _jsx(FeedAttachments, { attachments: attachments }, void 0), _jsx(ExpandCollapse, Object.assign({ collapsed: !hasFocus && emptyText && !attachments.length }, { children: _jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'primary', disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), onClick: handlePost }, { children: postLabel }), void 0) }), void 0) }), void 0)] }, void 0) }), void 0));
 };
 export default FeedNewPost;
 //# sourceMappingURL=FeedNewPost.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FC, MouseEvent, useRef, useContext, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  CardContent,\n  Flex,\n  Icon,\n  StyledIcon,\n  StyledCard,\n  StyledPopover,\n  defaultThemeProp,\n  useAutoResize,\n  useElement,\n  useOuterEvent,\n  ForwardProps,\n  useI18n,\n  ExpandCollapse\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\n\nimport FeedNewPostTypeMenu, {\n  PostType,\n  PostTypeMenuProps,\n  RecipientMenuItem\n} from './FeedNewPostTypeMenu';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedNewPostProps {\n  /** A unique ID for the NewPost */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Information that is used to label buttons and inputs for accessibility purposes */\n  interactionInfo: {\n    textAreaPlaceholder: string;\n    postLabel: string;\n  };\n  /** A callback containing a list of added files that will run whenever files are added to the post. */\n  onFilesAdded?: (files: AttachedFiles[]) => void;\n  /** A callback that will run when the new post button has been clicked */\n  onPost: (event: {\n    newPostId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    recipients: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n  autoFocus?: boolean;\n  /** Array of private recipient options */\n  recipients?: PostTypeMenuProps['recipients'];\n  /** Handler for new search on private recipient options */\n  onRecipientSearch?: (newSearch: string) => void;\n}\n\nexport const StyledTextAreaOverflow = styled.div(({ theme }) => {\n  return css`\n    overflow-y: hidden;\n    margin-top: ${theme.base.spacing};\n    width: 100%;\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledTextAreaOverflow.defaultProps = defaultThemeProp;\n\nexport const StyledFeedNewPost = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon}:not(${StyledPopover} ${StyledIcon}) {\n      font-size: 1.25rem;\n    }\n\n    ${FeedButton} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    interactionInfo,\n    onPost,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const { textAreaPlaceholder, postLabel } = interactionInfo;\n  const [emptyText, setEmptyText] = useState(true);\n  const [hasFocus, setHasFocus] = useState(autoFocus);\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLDivElement>();\n  const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;\n\n  useOuterEvent('mousedown', [newPostEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const t = useI18n();\n\n  const handlePost = () => {\n    if (!emptyText || attachments.length > 0) {\n      onPost({\n        newPostId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        recipients: selectedRecipients,\n        username,\n        clear: () => {\n          rteRef.current?.clear();\n          setResetPostTypeMenu(true);\n        }\n      });\n    }\n  };\n\n  useEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledCard ref={setNewPostEl} as={StyledFeedNewPost} {...restProps}>\n      <CardContent>\n        {onRecipientSearch && (\n          <FeedNewPostTypeMenu\n            recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n            onSetPostType={setPostType}\n            onSelectedRecipientsUpdate={setSelectedRecipients}\n            onRecipientSearch={onRecipientSearch}\n            reset={resetPostTypeMenu}\n            onReset={() => setResetPostTypeMenu(false)}\n          />\n        )}\n\n        <Flex container={{ alignItems: 'start', gap: 1 }}>\n          <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n\n          <StyledTextAreaOverflow ref={textAreaRef}>\n            <FeedRichText\n              onChange={() => {\n                setEmptyText(rteRef.current?.getPlainText().trim() === '');\n                resizeTextArea();\n              }}\n              placeholder={textAreaPlaceholder}\n              autoFocus={autoFocus}\n              onSubmit={handlePost}\n              onFocus={() => setHasFocus(true)}\n              onBlur={() => setHasFocus(false)}\n              ref={rteRef}\n            />\n          </StyledTextAreaOverflow>\n\n          {!emptyText && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={rteRef.current?.clear}\n              icon\n              label={t('feed_cancel_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => attachmentEl?.click()}\n              icon\n              label={t('attachment')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\n        </Flex>\n\n        <HiddenFileInput\n          ref={setAttachmentEl}\n          type='file'\n          multiple\n          onChange={() => {\n            if (attachmentEl?.files) {\n              onFilesAdded?.(Array.from(attachmentEl?.files));\n            }\n          }}\n          // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n          onClick={(event: MouseEvent) => {\n            (event.target as HTMLInputElement).value = '';\n          }}\n        />\n\n        <FeedAttachments attachments={attachments} />\n\n        <ExpandCollapse collapsed={!hasFocus && emptyText && !attachments.length}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='primary'\n              disabled={emptyText && attachments.length === 0}\n              onClick={handlePost}\n            >\n              {postLabel}\n            </Button>\n          </Flex>\n        </ExpandCollapse>\n      </CardContent>\n    </StyledCard>\n  );\n};\n\nexport default FeedNewPost;\n"]}
+{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FC, MouseEvent, useRef, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  CardContent,\n  Flex,\n  Icon,\n  StyledIcon,\n  StyledCard,\n  StyledPopover,\n  defaultThemeProp,\n  useAutoResize,\n  useElement,\n  useOuterEvent,\n  ForwardProps,\n  useI18n,\n  ExpandCollapse,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\n\nimport FeedNewPostTypeMenu, {\n  PostType,\n  PostTypeMenuProps,\n  RecipientMenuItem\n} from './FeedNewPostTypeMenu';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedNewPostProps {\n  /** A unique ID for the NewPost */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Information that is used to label buttons and inputs for accessibility purposes */\n  interactionInfo: {\n    textAreaPlaceholder: string;\n    postLabel: string;\n  };\n  /** A callback containing a list of added files that will run whenever files are added to the post. */\n  onFilesAdded?: (files: AttachedFiles[]) => void;\n  /** A callback that will run when the new post button has been clicked */\n  onPost: (event: {\n    newPostId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    recipients: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n  autoFocus?: boolean;\n  /** Array of private recipient options */\n  recipients?: PostTypeMenuProps['recipients'];\n  /** Handler for new search on private recipient options */\n  onRecipientSearch?: (newSearch: string) => void;\n}\n\nexport const StyledTextAreaOverflow = styled.div(({ theme }) => {\n  return css`\n    overflow-y: hidden;\n    margin-top: ${theme.base.spacing};\n    width: 100%;\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledTextAreaOverflow.defaultProps = defaultThemeProp;\n\nexport const StyledFeedNewPost = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon}:not(${StyledPopover} ${StyledIcon}) {\n      font-size: 1.25rem;\n    }\n\n    ${FeedButton} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    interactionInfo,\n    onPost,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const { textAreaPlaceholder, postLabel } = interactionInfo;\n  const [emptyText, setEmptyText] = useState(true);\n  const [hasFocus, setHasFocus] = useState(autoFocus);\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLDivElement>();\n  const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;\n\n  useOuterEvent('mousedown', [newPostEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const t = useI18n();\n\n  const handlePost = () => {\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onPost({\n        newPostId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        recipients: selectedRecipients,\n        username,\n        clear: () => {\n          rteRef.current?.clear();\n          setResetPostTypeMenu(true);\n        }\n      });\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledCard ref={setNewPostEl} as={StyledFeedNewPost} {...restProps}>\n      <CardContent>\n        {onRecipientSearch && (\n          <FeedNewPostTypeMenu\n            recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n            onSetPostType={setPostType}\n            onSelectedRecipientsUpdate={setSelectedRecipients}\n            onRecipientSearch={onRecipientSearch}\n            reset={resetPostTypeMenu}\n            onReset={() => setResetPostTypeMenu(false)}\n          />\n        )}\n\n        <Flex container={{ alignItems: 'start', gap: 1 }}>\n          <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n\n          <StyledTextAreaOverflow ref={textAreaRef}>\n            <FeedRichText\n              label={t('feed_new_post')}\n              labelHidden\n              onChange={() => {\n                setEmptyText(rteRef.current?.getPlainText().trim() === '');\n                resizeTextArea();\n              }}\n              placeholder={textAreaPlaceholder}\n              autoFocus={autoFocus}\n              onSubmit={handlePost}\n              onFocus={() => setHasFocus(true)}\n              onBlur={() => setHasFocus(false)}\n              ref={rteRef}\n            />\n          </StyledTextAreaOverflow>\n\n          {!emptyText && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={rteRef.current?.clear}\n              icon\n              label={t('feed_cancel_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => attachmentEl?.click()}\n              icon\n              label={t('attachment')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\n        </Flex>\n\n        <HiddenFileInput\n          ref={setAttachmentEl}\n          type='file'\n          multiple\n          onChange={() => {\n            if (attachmentEl?.files) {\n              onFilesAdded?.(Array.from(attachmentEl?.files));\n            }\n          }}\n          // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n          onClick={(event: MouseEvent) => {\n            (event.target as HTMLInputElement).value = '';\n          }}\n        />\n\n        <FeedAttachments attachments={attachments} />\n\n        <ExpandCollapse collapsed={!hasFocus && emptyText && !attachments.length}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='primary'\n              disabled={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n              onClick={handlePost}\n            >\n              {postLabel}\n            </Button>\n          </Flex>\n        </ExpandCollapse>\n      </CardContent>\n    </StyledCard>\n  );\n};\n\nexport default FeedNewPost;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":"AAqBA,oBAAY,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,0BAA0B,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtE,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwLD,QAAA,MAAM,mBAAmB,iGAOtB,iBAAiB,gBAwanB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":"AAsBA,oBAAY,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,0BAA0B,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtE,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwLD,QAAA,MAAM,mBAAmB,iGAOtB,iBAAiB,gBAwanB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Feed/FeedNewPostTypeMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect, useCallback, useReducer } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Text, StyledPrimary, StyledMenuItem, Icon, StyledIcon, useElement, useOuterEvent, Popover, Menu, Status, defaultThemeProp, createUID } from '@pega/cosmos-react-core';
+import { Button, Text, StyledPrimary, StyledMenuItem, Icon, StyledIcon, useElement, useOuterEvent, Popover, Menu, Status, defaultThemeProp, createUID, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import { StyledMenuListHeader } from '@pega/cosmos-react-core/lib/components/Menu/MenuListHeader';
 import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
 const StyledPopoverContent = styled.div(({ theme }) => {
@@ -332,7 +332,7 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
             }
         }
     }, [state.viewingRecipients]);
-    useEffect(() => {
+    useAfterInitialEffect(() => {
         onSetPostType(state.postType);
         dispatch({ type: 'updateTypeMenuItems' });
         if (state.postType === 'private') {

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPostTypeMenu.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useMemo, useEffect, useCallback, useReducer, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Text,\n  StyledPrimary,\n  StyledMenuItem,\n  Icon,\n  StyledIcon,\n  useElement,\n  useOuterEvent,\n  Popover,\n  Menu,\n  Status,\n  defaultThemeProp,\n  createUID\n} from '@pega/cosmos-react-core';\nimport { StyledMenuListHeader } from '@pega/cosmos-react-core/lib/components/Menu/MenuListHeader';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\n\nexport type PostType = 'post' | 'private';\n\nexport interface RecipientOption {\n  /** Pretty printed recipient name */\n  primary: string;\n  /** Functional identifier of unique recipient */\n  value: string;\n}\n\nexport interface RecipientMenuItem {\n  id: string;\n  selected?: boolean;\n  primary: RecipientOption['primary'];\n  value: RecipientOption['value'];\n}\n\nexport interface RecipientMultiSelectData {\n  id: RecipientMenuItem['id'];\n  text: RecipientMenuItem['primary'];\n  value: RecipientMenuItem['value'];\n}\n\nexport interface PostTypeMenuProps {\n  /** Array of private recipient options */\n  recipients: RecipientOption[];\n  /** Post type update handler */\n  onSetPostType: (postType: PostType) => void;\n  /** Private post recipient list update handler */\n  onSelectedRecipientsUpdate: (recipients: RecipientMenuItem[]) => void;\n  /** Handler for new search on private recipient options */\n  onRecipientSearch: (newSearch: string) => void;\n  reset: boolean;\n  onReset: () => void;\n}\n\ninterface PostTypeMenuState {\n  postType: PostType;\n  itemsLoading: boolean;\n  showTypeMenu: boolean;\n  showRecipientMenu: boolean;\n  viewingRecipients: boolean;\n  showCountPopover: boolean;\n  searchValue: string;\n  typeMenuItems: {\n    id: string;\n    primary: string;\n    selected: boolean;\n    value: PostType;\n  }[];\n  recipientMenuItems: RecipientMenuItem[];\n  multiSelectItems: RecipientMultiSelectData[];\n}\n\nconst StyledPopoverContent = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    padding: ${spacing};\n\n    p:not(:last-child) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledPopoverContent.defaultProps = defaultThemeProp;\n\nconst StyledRecipientCount = styled(Status)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    border-radius: 1.25rem;\n    margin: 0 0 0 calc(0.5 * ${spacing});\n  `;\n});\nStyledRecipientCount.defaultProps = defaultThemeProp;\n\nconst StyledMultiSelect = styled(MultiSelectInput)(() => {\n  return css`\n    width: 60vw;\n    min-width: 16rem;\n    max-width: 40rem;\n  `;\n});\n\nconst StyledSelectedInputContainer = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    margin: ${spacing} calc(2 * ${spacing}) calc(2 * ${spacing});\n  `;\n});\nStyledSelectedInputContainer.defaultProps = defaultThemeProp;\n\nconst StyledRecipientBackButton = styled(StyledMenuListHeader)(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    font-weight: ${fontWeight};\n    padding: ${spacing} calc(2 * ${spacing});\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n    }\n\n    && ${StyledIcon} {\n      display: inline-block;\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\nStyledRecipientBackButton.defaultProps = defaultThemeProp;\n\nconst StyledRecipientMenuHeader = styled.div``;\n\nconst StyledTypeMenuToggle = styled(Button)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    margin: ${spacing} 0;\n  `;\n});\nStyledTypeMenuToggle.defaultProps = defaultThemeProp;\n\nconst StyledRecipientMenu = styled(Menu)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    ${StyledMenuItem} > button {\n      padding: ${spacing} calc(2 * ${spacing});\n    }\n  `;\n});\nStyledRecipientMenu.defaultProps = defaultThemeProp;\n\nconst StyledPostTypePopover = styled(Popover)(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { normal: fontWeight }\n    }\n  } = theme;\n  return css`\n    ${StyledPrimary} {\n      font-weight: ${fontWeight};\n    }\n  `;\n});\nStyledPostTypePopover.defaultProps = defaultThemeProp;\n\nconst typeCopy = {\n  post: {\n    primary: 'Public post'\n  },\n  private: {\n    primary: 'Private post'\n  }\n};\n\nconst createRecipientMenuItem = (\n  recipient: RecipientOption,\n  selectedIds?: RecipientMenuItem['id'][]\n) => {\n  const checkIds = selectedIds || [];\n  const id = `option_${recipient.value}`;\n\n  return {\n    ...recipient,\n    id,\n    selected: checkIds.includes(id)\n  };\n};\n\nconst getTypeMenuItems = (type: PostType): PostTypeMenuState['typeMenuItems'] => {\n  return [\n    {\n      id: '1',\n      primary: typeCopy.post.primary,\n      selected: type === 'post',\n      value: 'post'\n    },\n    {\n      id: '2',\n      primary: typeCopy.private.primary,\n      selected: type === 'private',\n      value: 'private'\n    }\n  ];\n};\n\nconst initialState: PostTypeMenuState = {\n  postType: 'post',\n  itemsLoading: false,\n  showTypeMenu: false,\n  showRecipientMenu: false,\n  viewingRecipients: false,\n  showCountPopover: false,\n  searchValue: '',\n  typeMenuItems: getTypeMenuItems('post'),\n  recipientMenuItems: [] as RecipientMenuItem[],\n  multiSelectItems: [] as RecipientMultiSelectData[]\n};\n\nconst FeedNewPostTypeMenu = ({\n  recipients,\n  onSetPostType,\n  onSelectedRecipientsUpdate,\n  onRecipientSearch,\n  reset,\n  onReset\n}: PostTypeMenuProps) => {\n  const menuPopoverId = useMemo(() => createUID(), []);\n\n  const multiSelectInputRef = useRef<HTMLInputElement>(null);\n  const [toggleEl, setToggleEl] = useElement<HTMLButtonElement>();\n  const [recipientCountEl, setRecipientCountEl] = useElement<HTMLElement>();\n  const [typePopoverEl, setTypePopoverEl] = useElement<HTMLElement>(null);\n  const [typeMenuPopoverTarget, setTypeMenuPopoverTarget] = useElement<HTMLButtonElement>(null);\n\n  const reducer = (\n    state: PostTypeMenuState,\n    action: {\n      type:\n        | 'reset'\n        | 'setPostType'\n        | 'setShowTypeMenu'\n        | 'setShowRecipientMenu'\n        | 'setSearchValue'\n        | 'setViewingRecipients'\n        | 'setShowCountPopover'\n        | 'setItemsLoading'\n        | 'updateTypeMenuItems'\n        | 'toggleTypeMenu'\n        | 'removeRecipientViaMultiSelect'\n        | 'selectRecipientViaMenu'\n        | 'updateRecipientMenuItems'\n        | 'resetUnappliedState';\n      payload?: any;\n    }\n  ): PostTypeMenuState => {\n    const type = action.type;\n    const payload = action.payload;\n\n    switch (type) {\n      case 'reset': {\n        return initialState;\n      }\n      case 'setPostType': {\n        const postType = payload;\n        const privateSelected = postType === 'private';\n\n        return {\n          ...state,\n          postType,\n          showTypeMenu: !privateSelected ? false : state.showTypeMenu,\n          viewingRecipients: privateSelected ? true : state.viewingRecipients,\n          multiSelectItems: initialState.multiSelectItems,\n          searchValue: initialState.searchValue\n        };\n      }\n      case 'setShowTypeMenu': {\n        return {\n          ...state,\n          showTypeMenu: payload\n        };\n      }\n      case 'setShowRecipientMenu': {\n        return {\n          ...state,\n          showRecipientMenu: payload\n        };\n      }\n      case 'setSearchValue': {\n        return {\n          ...state,\n          searchValue: payload\n        };\n      }\n      case 'setViewingRecipients': {\n        return {\n          ...state,\n          viewingRecipients: payload\n        };\n      }\n      case 'setShowCountPopover': {\n        return {\n          ...state,\n          showCountPopover: payload\n        };\n      }\n      case 'setItemsLoading': {\n        return {\n          ...state,\n          itemsLoading: payload\n        };\n      }\n      case 'updateTypeMenuItems': {\n        return {\n          ...state,\n          typeMenuItems: getTypeMenuItems(state.postType)\n        };\n      }\n      case 'toggleTypeMenu': {\n        return {\n          ...state,\n          showTypeMenu: !state.showTypeMenu,\n          showCountPopover: false\n        };\n      }\n      case 'removeRecipientViaMultiSelect': {\n        const selectedId = payload;\n\n        const multiSelectItems = state.multiSelectItems.reduce<RecipientMultiSelectData[]>(\n          (acc, recipient) => {\n            if (recipient.id === selectedId) return acc;\n\n            return acc.concat([recipient]);\n          },\n          []\n        );\n\n        const recipientMenuItems = state.recipientMenuItems.map(item => {\n          if (item.id === selectedId) {\n            return {\n              ...item,\n              selected: false\n            };\n          }\n\n          return {\n            ...item\n          };\n        });\n\n        return {\n          ...state,\n          multiSelectItems,\n          recipientMenuItems\n        };\n      }\n      case 'selectRecipientViaMenu': {\n        const selectedId = payload;\n\n        if (!state.multiSelectItems.some(item => item.id === selectedId)) {\n          const selectedFromMenu = state.recipientMenuItems.filter(\n            item => item.id === selectedId\n          )[0];\n\n          const multiSelectItems = state.multiSelectItems.concat([\n            {\n              text: selectedFromMenu.primary,\n              id: selectedFromMenu.id,\n              value: selectedFromMenu.value\n            }\n          ]);\n\n          return {\n            ...state,\n            multiSelectItems,\n            searchValue: ''\n          };\n        }\n\n        return {\n          ...state,\n          searchValue: ''\n        };\n      }\n      case 'updateRecipientMenuItems': {\n        const selectedIds = state.multiSelectItems.map(item => item.id);\n\n        return {\n          ...state,\n          itemsLoading: false,\n          recipientMenuItems: recipients.map(recipient =>\n            createRecipientMenuItem(recipient, selectedIds)\n          )\n        };\n      }\n      case 'resetUnappliedState': {\n        const postType =\n          state.postType === 'private' && state.multiSelectItems.length === 0\n            ? 'post'\n            : state.postType;\n\n        const searchValue = '';\n\n        return {\n          ...state,\n          postType,\n          searchValue\n        };\n      }\n      default:\n        return {\n          ...state\n        };\n    }\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  const onBlur = useCallback((): void => {\n    setTimeout(() => {\n      if (!document.activeElement?.closest(`#${menuPopoverId}`)) {\n        dispatch({ type: 'setShowTypeMenu', payload: false });\n      }\n    }, 200);\n  }, [menuPopoverId]);\n\n  const handleKeydownToggle = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && state.showTypeMenu) dispatch({ type: 'toggleTypeMenu' });\n    },\n    [state.showTypeMenu]\n  );\n\n  useOuterEvent('mousedown', [typePopoverEl, typeMenuPopoverTarget], () => {\n    dispatch({ type: 'setShowTypeMenu', payload: false });\n  });\n\n  useEffect(() => {\n    if (reset) {\n      dispatch({ type: 'reset' });\n      onReset();\n    }\n  }, [reset]);\n\n  useEffect(() => {\n    dispatch({ type: 'updateRecipientMenuItems' });\n  }, [recipients]);\n\n  useEffect(() => {\n    onSelectedRecipientsUpdate(\n      state.multiSelectItems.map(item => ({\n        id: item.id,\n        primary: item.text,\n        value: item.value\n      }))\n    );\n  }, [state.multiSelectItems]);\n\n  useEffect(() => {\n    if (!state.showTypeMenu) {\n      if (state.postType === 'private') {\n        // Timeout to prevent flash of recipients options when closing menu.\n        setTimeout(() => {\n          dispatch({ type: 'setViewingRecipients', payload: true });\n        }, 100);\n      }\n\n      setTimeout(() => {\n        // Timeout to prevent flash of type menu when resetting postType on close\n        dispatch({ type: 'resetUnappliedState' });\n      }, 100);\n    }\n  }, [state.showTypeMenu]);\n\n  useEffect(() => {\n    if (multiSelectInputRef.current) {\n      multiSelectInputRef.current?.focus();\n    }\n  }, [multiSelectInputRef.current]);\n\n  useEffect(() => {\n    if (state.postType === 'private') {\n      if (!state.viewingRecipients) {\n        toggleEl?.focus();\n      } else {\n        multiSelectInputRef.current?.focus();\n      }\n    }\n  }, [state.viewingRecipients]);\n\n  useEffect(() => {\n    onSetPostType(state.postType);\n    dispatch({ type: 'updateTypeMenuItems' });\n\n    if (state.postType === 'private') {\n      multiSelectInputRef.current?.focus();\n    }\n  }, [state.postType]);\n\n  useEffect(() => {\n    const interactionTimeout = setTimeout(() => {\n      onRecipientSearch(state.searchValue);\n      dispatch({ type: 'setItemsLoading', payload: true });\n      dispatch({ type: 'setShowRecipientMenu', payload: !!state.searchValue.length });\n    }, 300);\n\n    return () => {\n      clearTimeout(interactionTimeout);\n    };\n  }, [state.searchValue]);\n\n  useEffect(() => {\n    toggleEl?.addEventListener('keydown', handleKeydownToggle);\n\n    return () => toggleEl?.removeEventListener('keydown', handleKeydownToggle);\n  }, [toggleEl, state.showTypeMenu]);\n\n  useEffect(() => {\n    multiSelectInputRef.current?.addEventListener('keydown', handleKeydownToggle);\n\n    return () => multiSelectInputRef.current?.removeEventListener('keydown', handleKeydownToggle);\n  }, [multiSelectInputRef.current, state.showTypeMenu]);\n\n  return (\n    <div>\n      <StyledTypeMenuToggle\n        onClick={() => {\n          dispatch({ type: 'toggleTypeMenu' });\n        }}\n        ref={setToggleEl}\n        variant='link'\n        aria-haspopup='menu'\n        aria-expanded={state.showTypeMenu}\n      >\n        <span ref={setTypeMenuPopoverTarget}>{typeCopy[state.postType].primary}</span>\n        <Icon name='arrow-micro-down' />\n      </StyledTypeMenuToggle>\n\n      {state.postType === 'private' && state.multiSelectItems.length > 0 && (\n        <>\n          <StyledRecipientCount\n            ref={setRecipientCountEl}\n            aria-describedby='recipients-popover'\n            onMouseEnter={() => {\n              if (!state.showTypeMenu) dispatch({ type: 'setShowCountPopover', payload: true });\n            }}\n            onFocus={() => dispatch({ type: 'setShowCountPopover', payload: true })}\n            onMouseLeave={() => dispatch({ type: 'setShowCountPopover', payload: false })}\n            onBlur={() => dispatch({ type: 'setShowCountPopover', payload: false })}\n          >{`${state.multiSelectItems.length}`}</StyledRecipientCount>\n\n          <Popover\n            show={state.showCountPopover}\n            target={recipientCountEl}\n            id='recipients-popover'\n            onMouseEnter={() => {\n              if (!state.showTypeMenu) dispatch({ type: 'setShowCountPopover', payload: true });\n            }}\n            onMouseLeave={() => dispatch({ type: 'setShowCountPopover', payload: false })}\n            arrow\n          >\n            <StyledPopoverContent>\n              {state.multiSelectItems.map((recipient: RecipientMultiSelectData) => {\n                return (\n                  <p key={recipient.id}>\n                    <Text variant='primary'>{recipient.text}</Text>\n                  </p>\n                );\n              })}\n            </StyledPopoverContent>\n          </Popover>\n        </>\n      )}\n\n      <StyledPostTypePopover\n        id={menuPopoverId}\n        ref={setTypePopoverEl}\n        target={typeMenuPopoverTarget}\n        show={state.showTypeMenu}\n        placement='bottom-start'\n      >\n        {(state.postType !== 'private' || !state.viewingRecipients) && (\n          <Menu\n            items={state.typeMenuItems}\n            focusControlEl={toggleEl || undefined}\n            mode='single-select'\n            onItemClick={selectedId => {\n              const postType = state.typeMenuItems.find(item => item.id === selectedId)!.value;\n              dispatch({ type: 'setPostType', payload: postType });\n            }}\n            onItemExpand={() => {\n              if (state.postType === 'private') {\n                dispatch({ type: 'setViewingRecipients', payload: true });\n              } else {\n                dispatch({ type: 'setPostType', payload: 'private' });\n              }\n            }}\n            onBlur={onBlur}\n          />\n        )}\n\n        {state.postType === 'private' && state.viewingRecipients && (\n          <>\n            <StyledRecipientMenuHeader>\n              <Button\n                as={StyledRecipientBackButton}\n                variant='text'\n                aria-label='close submenu'\n                onClick={() => {\n                  dispatch({ type: 'setViewingRecipients', payload: false });\n                }}\n                onBlur={onBlur}\n              >\n                <Icon name='caret-left' />\n                {typeCopy.private.primary}\n              </Button>\n\n              <StyledSelectedInputContainer>\n                <StyledMultiSelect\n                  ref={multiSelectInputRef}\n                  selected={state.multiSelectItems}\n                  onRemove={(selectedId: RecipientMultiSelectData['id']) => {\n                    dispatch({ type: 'removeRecipientViaMultiSelect', payload: selectedId });\n                  }}\n                  value={state.searchValue}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                    dispatch({ type: 'setSearchValue', payload: e.target.value });\n                  }}\n                />\n              </StyledSelectedInputContainer>\n            </StyledRecipientMenuHeader>\n\n            {state.showRecipientMenu && (\n              <StyledRecipientMenu\n                loading={state.itemsLoading}\n                focusControlEl={multiSelectInputRef.current}\n                items={state.itemsLoading ? [] : state.recipientMenuItems}\n                scrollAt={11}\n                mode='action'\n                emptyText='No items'\n                onItemClick={(selectedId: RecipientMultiSelectData['id']) => {\n                  dispatch({ type: 'selectRecipientViaMenu', payload: selectedId });\n                }}\n                onBlur={onBlur}\n              />\n            )}\n          </>\n        )}\n      </StyledPostTypePopover>\n    </div>\n  );\n};\n\nexport default FeedNewPostTypeMenu;\n"]}
+{"version":3,"file":"FeedNewPostTypeMenu.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useMemo, useEffect, useCallback, useReducer, ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Text,\n  StyledPrimary,\n  StyledMenuItem,\n  Icon,\n  StyledIcon,\n  useElement,\n  useOuterEvent,\n  Popover,\n  Menu,\n  Status,\n  defaultThemeProp,\n  createUID,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport { StyledMenuListHeader } from '@pega/cosmos-react-core/lib/components/Menu/MenuListHeader';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\n\nexport type PostType = 'post' | 'private';\n\nexport interface RecipientOption {\n  /** Pretty printed recipient name */\n  primary: string;\n  /** Functional identifier of unique recipient */\n  value: string;\n}\n\nexport interface RecipientMenuItem {\n  id: string;\n  selected?: boolean;\n  primary: RecipientOption['primary'];\n  value: RecipientOption['value'];\n}\n\nexport interface RecipientMultiSelectData {\n  id: RecipientMenuItem['id'];\n  text: RecipientMenuItem['primary'];\n  value: RecipientMenuItem['value'];\n}\n\nexport interface PostTypeMenuProps {\n  /** Array of private recipient options */\n  recipients: RecipientOption[];\n  /** Post type update handler */\n  onSetPostType: (postType: PostType) => void;\n  /** Private post recipient list update handler */\n  onSelectedRecipientsUpdate: (recipients: RecipientMenuItem[]) => void;\n  /** Handler for new search on private recipient options */\n  onRecipientSearch: (newSearch: string) => void;\n  reset: boolean;\n  onReset: () => void;\n}\n\ninterface PostTypeMenuState {\n  postType: PostType;\n  itemsLoading: boolean;\n  showTypeMenu: boolean;\n  showRecipientMenu: boolean;\n  viewingRecipients: boolean;\n  showCountPopover: boolean;\n  searchValue: string;\n  typeMenuItems: {\n    id: string;\n    primary: string;\n    selected: boolean;\n    value: PostType;\n  }[];\n  recipientMenuItems: RecipientMenuItem[];\n  multiSelectItems: RecipientMultiSelectData[];\n}\n\nconst StyledPopoverContent = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    padding: ${spacing};\n\n    p:not(:last-child) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledPopoverContent.defaultProps = defaultThemeProp;\n\nconst StyledRecipientCount = styled(Status)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    border-radius: 1.25rem;\n    margin: 0 0 0 calc(0.5 * ${spacing});\n  `;\n});\nStyledRecipientCount.defaultProps = defaultThemeProp;\n\nconst StyledMultiSelect = styled(MultiSelectInput)(() => {\n  return css`\n    width: 60vw;\n    min-width: 16rem;\n    max-width: 40rem;\n  `;\n});\n\nconst StyledSelectedInputContainer = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    margin: ${spacing} calc(2 * ${spacing}) calc(2 * ${spacing});\n  `;\n});\nStyledSelectedInputContainer.defaultProps = defaultThemeProp;\n\nconst StyledRecipientBackButton = styled(StyledMenuListHeader)(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    font-weight: ${fontWeight};\n    padding: ${spacing} calc(2 * ${spacing});\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n    }\n\n    && ${StyledIcon} {\n      display: inline-block;\n      margin-inline-end: ${spacing};\n    }\n  `;\n});\nStyledRecipientBackButton.defaultProps = defaultThemeProp;\n\nconst StyledRecipientMenuHeader = styled.div``;\n\nconst StyledTypeMenuToggle = styled(Button)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    margin: ${spacing} 0;\n  `;\n});\nStyledTypeMenuToggle.defaultProps = defaultThemeProp;\n\nconst StyledRecipientMenu = styled(Menu)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    ${StyledMenuItem} > button {\n      padding: ${spacing} calc(2 * ${spacing});\n    }\n  `;\n});\nStyledRecipientMenu.defaultProps = defaultThemeProp;\n\nconst StyledPostTypePopover = styled(Popover)(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { normal: fontWeight }\n    }\n  } = theme;\n  return css`\n    ${StyledPrimary} {\n      font-weight: ${fontWeight};\n    }\n  `;\n});\nStyledPostTypePopover.defaultProps = defaultThemeProp;\n\nconst typeCopy = {\n  post: {\n    primary: 'Public post'\n  },\n  private: {\n    primary: 'Private post'\n  }\n};\n\nconst createRecipientMenuItem = (\n  recipient: RecipientOption,\n  selectedIds?: RecipientMenuItem['id'][]\n) => {\n  const checkIds = selectedIds || [];\n  const id = `option_${recipient.value}`;\n\n  return {\n    ...recipient,\n    id,\n    selected: checkIds.includes(id)\n  };\n};\n\nconst getTypeMenuItems = (type: PostType): PostTypeMenuState['typeMenuItems'] => {\n  return [\n    {\n      id: '1',\n      primary: typeCopy.post.primary,\n      selected: type === 'post',\n      value: 'post'\n    },\n    {\n      id: '2',\n      primary: typeCopy.private.primary,\n      selected: type === 'private',\n      value: 'private'\n    }\n  ];\n};\n\nconst initialState: PostTypeMenuState = {\n  postType: 'post',\n  itemsLoading: false,\n  showTypeMenu: false,\n  showRecipientMenu: false,\n  viewingRecipients: false,\n  showCountPopover: false,\n  searchValue: '',\n  typeMenuItems: getTypeMenuItems('post'),\n  recipientMenuItems: [] as RecipientMenuItem[],\n  multiSelectItems: [] as RecipientMultiSelectData[]\n};\n\nconst FeedNewPostTypeMenu = ({\n  recipients,\n  onSetPostType,\n  onSelectedRecipientsUpdate,\n  onRecipientSearch,\n  reset,\n  onReset\n}: PostTypeMenuProps) => {\n  const menuPopoverId = useMemo(() => createUID(), []);\n\n  const multiSelectInputRef = useRef<HTMLInputElement>(null);\n  const [toggleEl, setToggleEl] = useElement<HTMLButtonElement>();\n  const [recipientCountEl, setRecipientCountEl] = useElement<HTMLElement>();\n  const [typePopoverEl, setTypePopoverEl] = useElement<HTMLElement>(null);\n  const [typeMenuPopoverTarget, setTypeMenuPopoverTarget] = useElement<HTMLButtonElement>(null);\n\n  const reducer = (\n    state: PostTypeMenuState,\n    action: {\n      type:\n        | 'reset'\n        | 'setPostType'\n        | 'setShowTypeMenu'\n        | 'setShowRecipientMenu'\n        | 'setSearchValue'\n        | 'setViewingRecipients'\n        | 'setShowCountPopover'\n        | 'setItemsLoading'\n        | 'updateTypeMenuItems'\n        | 'toggleTypeMenu'\n        | 'removeRecipientViaMultiSelect'\n        | 'selectRecipientViaMenu'\n        | 'updateRecipientMenuItems'\n        | 'resetUnappliedState';\n      payload?: any;\n    }\n  ): PostTypeMenuState => {\n    const type = action.type;\n    const payload = action.payload;\n\n    switch (type) {\n      case 'reset': {\n        return initialState;\n      }\n      case 'setPostType': {\n        const postType = payload;\n        const privateSelected = postType === 'private';\n\n        return {\n          ...state,\n          postType,\n          showTypeMenu: !privateSelected ? false : state.showTypeMenu,\n          viewingRecipients: privateSelected ? true : state.viewingRecipients,\n          multiSelectItems: initialState.multiSelectItems,\n          searchValue: initialState.searchValue\n        };\n      }\n      case 'setShowTypeMenu': {\n        return {\n          ...state,\n          showTypeMenu: payload\n        };\n      }\n      case 'setShowRecipientMenu': {\n        return {\n          ...state,\n          showRecipientMenu: payload\n        };\n      }\n      case 'setSearchValue': {\n        return {\n          ...state,\n          searchValue: payload\n        };\n      }\n      case 'setViewingRecipients': {\n        return {\n          ...state,\n          viewingRecipients: payload\n        };\n      }\n      case 'setShowCountPopover': {\n        return {\n          ...state,\n          showCountPopover: payload\n        };\n      }\n      case 'setItemsLoading': {\n        return {\n          ...state,\n          itemsLoading: payload\n        };\n      }\n      case 'updateTypeMenuItems': {\n        return {\n          ...state,\n          typeMenuItems: getTypeMenuItems(state.postType)\n        };\n      }\n      case 'toggleTypeMenu': {\n        return {\n          ...state,\n          showTypeMenu: !state.showTypeMenu,\n          showCountPopover: false\n        };\n      }\n      case 'removeRecipientViaMultiSelect': {\n        const selectedId = payload;\n\n        const multiSelectItems = state.multiSelectItems.reduce<RecipientMultiSelectData[]>(\n          (acc, recipient) => {\n            if (recipient.id === selectedId) return acc;\n\n            return acc.concat([recipient]);\n          },\n          []\n        );\n\n        const recipientMenuItems = state.recipientMenuItems.map(item => {\n          if (item.id === selectedId) {\n            return {\n              ...item,\n              selected: false\n            };\n          }\n\n          return {\n            ...item\n          };\n        });\n\n        return {\n          ...state,\n          multiSelectItems,\n          recipientMenuItems\n        };\n      }\n      case 'selectRecipientViaMenu': {\n        const selectedId = payload;\n\n        if (!state.multiSelectItems.some(item => item.id === selectedId)) {\n          const selectedFromMenu = state.recipientMenuItems.filter(\n            item => item.id === selectedId\n          )[0];\n\n          const multiSelectItems = state.multiSelectItems.concat([\n            {\n              text: selectedFromMenu.primary,\n              id: selectedFromMenu.id,\n              value: selectedFromMenu.value\n            }\n          ]);\n\n          return {\n            ...state,\n            multiSelectItems,\n            searchValue: ''\n          };\n        }\n\n        return {\n          ...state,\n          searchValue: ''\n        };\n      }\n      case 'updateRecipientMenuItems': {\n        const selectedIds = state.multiSelectItems.map(item => item.id);\n\n        return {\n          ...state,\n          itemsLoading: false,\n          recipientMenuItems: recipients.map(recipient =>\n            createRecipientMenuItem(recipient, selectedIds)\n          )\n        };\n      }\n      case 'resetUnappliedState': {\n        const postType =\n          state.postType === 'private' && state.multiSelectItems.length === 0\n            ? 'post'\n            : state.postType;\n\n        const searchValue = '';\n\n        return {\n          ...state,\n          postType,\n          searchValue\n        };\n      }\n      default:\n        return {\n          ...state\n        };\n    }\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  const onBlur = useCallback((): void => {\n    setTimeout(() => {\n      if (!document.activeElement?.closest(`#${menuPopoverId}`)) {\n        dispatch({ type: 'setShowTypeMenu', payload: false });\n      }\n    }, 200);\n  }, [menuPopoverId]);\n\n  const handleKeydownToggle = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && state.showTypeMenu) dispatch({ type: 'toggleTypeMenu' });\n    },\n    [state.showTypeMenu]\n  );\n\n  useOuterEvent('mousedown', [typePopoverEl, typeMenuPopoverTarget], () => {\n    dispatch({ type: 'setShowTypeMenu', payload: false });\n  });\n\n  useEffect(() => {\n    if (reset) {\n      dispatch({ type: 'reset' });\n      onReset();\n    }\n  }, [reset]);\n\n  useEffect(() => {\n    dispatch({ type: 'updateRecipientMenuItems' });\n  }, [recipients]);\n\n  useEffect(() => {\n    onSelectedRecipientsUpdate(\n      state.multiSelectItems.map(item => ({\n        id: item.id,\n        primary: item.text,\n        value: item.value\n      }))\n    );\n  }, [state.multiSelectItems]);\n\n  useEffect(() => {\n    if (!state.showTypeMenu) {\n      if (state.postType === 'private') {\n        // Timeout to prevent flash of recipients options when closing menu.\n        setTimeout(() => {\n          dispatch({ type: 'setViewingRecipients', payload: true });\n        }, 100);\n      }\n\n      setTimeout(() => {\n        // Timeout to prevent flash of type menu when resetting postType on close\n        dispatch({ type: 'resetUnappliedState' });\n      }, 100);\n    }\n  }, [state.showTypeMenu]);\n\n  useEffect(() => {\n    if (multiSelectInputRef.current) {\n      multiSelectInputRef.current?.focus();\n    }\n  }, [multiSelectInputRef.current]);\n\n  useEffect(() => {\n    if (state.postType === 'private') {\n      if (!state.viewingRecipients) {\n        toggleEl?.focus();\n      } else {\n        multiSelectInputRef.current?.focus();\n      }\n    }\n  }, [state.viewingRecipients]);\n\n  useAfterInitialEffect(() => {\n    onSetPostType(state.postType);\n    dispatch({ type: 'updateTypeMenuItems' });\n\n    if (state.postType === 'private') {\n      multiSelectInputRef.current?.focus();\n    }\n  }, [state.postType]);\n\n  useEffect(() => {\n    const interactionTimeout = setTimeout(() => {\n      onRecipientSearch(state.searchValue);\n      dispatch({ type: 'setItemsLoading', payload: true });\n      dispatch({ type: 'setShowRecipientMenu', payload: !!state.searchValue.length });\n    }, 300);\n\n    return () => {\n      clearTimeout(interactionTimeout);\n    };\n  }, [state.searchValue]);\n\n  useEffect(() => {\n    toggleEl?.addEventListener('keydown', handleKeydownToggle);\n\n    return () => toggleEl?.removeEventListener('keydown', handleKeydownToggle);\n  }, [toggleEl, state.showTypeMenu]);\n\n  useEffect(() => {\n    multiSelectInputRef.current?.addEventListener('keydown', handleKeydownToggle);\n\n    return () => multiSelectInputRef.current?.removeEventListener('keydown', handleKeydownToggle);\n  }, [multiSelectInputRef.current, state.showTypeMenu]);\n\n  return (\n    <div>\n      <StyledTypeMenuToggle\n        onClick={() => {\n          dispatch({ type: 'toggleTypeMenu' });\n        }}\n        ref={setToggleEl}\n        variant='link'\n        aria-haspopup='menu'\n        aria-expanded={state.showTypeMenu}\n      >\n        <span ref={setTypeMenuPopoverTarget}>{typeCopy[state.postType].primary}</span>\n        <Icon name='arrow-micro-down' />\n      </StyledTypeMenuToggle>\n\n      {state.postType === 'private' && state.multiSelectItems.length > 0 && (\n        <>\n          <StyledRecipientCount\n            ref={setRecipientCountEl}\n            aria-describedby='recipients-popover'\n            onMouseEnter={() => {\n              if (!state.showTypeMenu) dispatch({ type: 'setShowCountPopover', payload: true });\n            }}\n            onFocus={() => dispatch({ type: 'setShowCountPopover', payload: true })}\n            onMouseLeave={() => dispatch({ type: 'setShowCountPopover', payload: false })}\n            onBlur={() => dispatch({ type: 'setShowCountPopover', payload: false })}\n          >{`${state.multiSelectItems.length}`}</StyledRecipientCount>\n\n          <Popover\n            show={state.showCountPopover}\n            target={recipientCountEl}\n            id='recipients-popover'\n            onMouseEnter={() => {\n              if (!state.showTypeMenu) dispatch({ type: 'setShowCountPopover', payload: true });\n            }}\n            onMouseLeave={() => dispatch({ type: 'setShowCountPopover', payload: false })}\n            arrow\n          >\n            <StyledPopoverContent>\n              {state.multiSelectItems.map((recipient: RecipientMultiSelectData) => {\n                return (\n                  <p key={recipient.id}>\n                    <Text variant='primary'>{recipient.text}</Text>\n                  </p>\n                );\n              })}\n            </StyledPopoverContent>\n          </Popover>\n        </>\n      )}\n\n      <StyledPostTypePopover\n        id={menuPopoverId}\n        ref={setTypePopoverEl}\n        target={typeMenuPopoverTarget}\n        show={state.showTypeMenu}\n        placement='bottom-start'\n      >\n        {(state.postType !== 'private' || !state.viewingRecipients) && (\n          <Menu\n            items={state.typeMenuItems}\n            focusControlEl={toggleEl || undefined}\n            mode='single-select'\n            onItemClick={selectedId => {\n              const postType = state.typeMenuItems.find(item => item.id === selectedId)!.value;\n              dispatch({ type: 'setPostType', payload: postType });\n            }}\n            onItemExpand={() => {\n              if (state.postType === 'private') {\n                dispatch({ type: 'setViewingRecipients', payload: true });\n              } else {\n                dispatch({ type: 'setPostType', payload: 'private' });\n              }\n            }}\n            onBlur={onBlur}\n          />\n        )}\n\n        {state.postType === 'private' && state.viewingRecipients && (\n          <>\n            <StyledRecipientMenuHeader>\n              <Button\n                as={StyledRecipientBackButton}\n                variant='text'\n                aria-label='close submenu'\n                onClick={() => {\n                  dispatch({ type: 'setViewingRecipients', payload: false });\n                }}\n                onBlur={onBlur}\n              >\n                <Icon name='caret-left' />\n                {typeCopy.private.primary}\n              </Button>\n\n              <StyledSelectedInputContainer>\n                <StyledMultiSelect\n                  ref={multiSelectInputRef}\n                  selected={state.multiSelectItems}\n                  onRemove={(selectedId: RecipientMultiSelectData['id']) => {\n                    dispatch({ type: 'removeRecipientViaMultiSelect', payload: selectedId });\n                  }}\n                  value={state.searchValue}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                    dispatch({ type: 'setSearchValue', payload: e.target.value });\n                  }}\n                />\n              </StyledSelectedInputContainer>\n            </StyledRecipientMenuHeader>\n\n            {state.showRecipientMenu && (\n              <StyledRecipientMenu\n                loading={state.itemsLoading}\n                focusControlEl={multiSelectInputRef.current}\n                items={state.itemsLoading ? [] : state.recipientMenuItems}\n                scrollAt={11}\n                mode='action'\n                emptyText='No items'\n                onItemClick={(selectedId: RecipientMultiSelectData['id']) => {\n                  dispatch({ type: 'selectRecipientViaMenu', payload: selectedId });\n                }}\n                onBlur={onBlur}\n              />\n            )}\n          </>\n        )}\n      </StyledPostTypePopover>\n    </div>\n  );\n};\n\nexport default FeedNewPostTypeMenu;\n"]}

package/lib/components/Feed/FeedRichText.js

@@ -68,8 +68,8 @@ const FeedRichText = forwardRef((props, ref) => {
         }
     };
     return (_jsx(RichTextEditor, Object.assign({}, restProps, { markdownOnly: true, onKeyDown: onKeyDown, ref: ref, height: height, searchTriggers: [
-            { trigger: '@', regex: String.raw `[a-zA-Z]*(?: [a-zA-Z]*)?` },
-            { trigger: '#', regex: String.raw `[a-zA-Z0-9_]*?` }
+            { trigger: '@', regex: String.raw `\S* ?(?:\S+ ?)*` },
+            { trigger: '#', regex: String.raw `[^\s,]*` }
         ], getSearchItemReplacement: (id) => {
             const item = searchResults?.find(({ id: itemId }) => itemId === id);
             if (!item)

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

@@ -1 +1 @@
-{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, forwardRef, Ref, useState, useRef } from 'react';\n\nimport { cap, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedRichTextProps\n  extends Pick<RichTextEditorProps, 'onChange' | 'onFocus' | 'onBlur' | 'placeholder' | 'height'> {\n  onSubmit: () => void;\n}\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(\n  (props: FeedRichTextProps, ref: Ref<RichTextEditorState>) => {\n    const { onSubmit, height = { min: 'auto' }, ...restProps } = props;\n    const { searchTypes = [], onSearch, searchResults = [] } = useContext(FeedContext);\n    const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n    const [showMentionType, setShowMentionType] = useState(false);\n    const searchType = useRef('');\n\n    const onDecoSearch = (event: { search: string; trigger: string }) => {\n      const trigger = event.trigger === '@' ? 'mention' : 'tag';\n      setTriggerType(trigger);\n      if (trigger === 'mention' && event.search === '') {\n        setShowMentionType(true);\n      } else {\n        setShowMentionType(false);\n        onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current });\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') onSubmit();\n    };\n\n    const typesMenu = {\n      onItemActive: (id: string) => {\n        searchType.current = id;\n      },\n      onItemClick: (id: string) => {\n        searchType.current = id;\n        setShowMentionType(false);\n        onSearch?.({ type: 'mention', search: '', mentionType: id });\n      },\n      items: searchTypes.map(type => {\n        return { id: type, primary: cap(type) };\n      })\n    };\n\n    const searchMenu = searchResults.length\n      ? {\n          header: triggerType === 'mention' ? `Mention a ${searchType.current}` : '',\n          items: searchResults\n        }\n      : undefined;\n\n    const getSearchAttributes = (searchResult: RegExpExecArray) => {\n      if (searchResult.groups) {\n        if (searchResult.groups.tag) {\n          const tag = searchResult.groups.tag;\n\n          return {\n            markdown: searchResult.groups.match,\n            component: HashtagButtonConfig.component,\n            props: { tag },\n            text: tag\n          };\n        }\n\n        const id = searchResult.groups.id;\n        const text = searchResult.groups.text;\n        const type = searchResult.groups.type;\n\n        return {\n          markdown: searchResult.groups.match,\n          component: MentionButtonConfig.component,\n          props: { id, text, type },\n          text\n        };\n      }\n    };\n\n    return (\n      <RichTextEditor\n        {...restProps}\n        markdownOnly\n        onKeyDown={onKeyDown}\n        ref={ref}\n        height={height}\n        searchTriggers={[\n          { trigger: '@', regex: String.raw`[a-zA-Z]*(?: [a-zA-Z]*)?` },\n          { trigger: '#', regex: String.raw`[a-zA-Z0-9_]*?` }\n        ]}\n        getSearchItemReplacement={(id: string) => {\n          const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown:\n              triggerType === 'mention'\n                ? `@${item.id}:${item.primary}:${searchType.current}:`\n                : `#${item.id}:`,\n            component:\n              triggerType === 'mention'\n                ? MentionButtonConfig.component\n                : HashtagButtonConfig.component,\n            props:\n              triggerType === 'mention'\n                ? { id: item.id, text: item.primary, type: searchType.current }\n                : { tag: item.primary },\n            text: item.primary\n          };\n        }}\n        searchRenderers={[\n          { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },\n          { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }\n        ]}\n        onSearch={onDecoSearch}\n        menu={showMentionType ? typesMenu : searchMenu}\n      />\n    );\n  }\n);\n\nexport default FeedRichText;\n"]}
+{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, forwardRef, Ref, useState, useRef } from 'react';\n\nimport { cap, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedRichTextProps\n  extends Pick<RichTextEditorProps, 'onChange' | 'onFocus' | 'onBlur' | 'placeholder' | 'height'> {\n  onSubmit: () => void;\n}\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(\n  (props: FeedRichTextProps, ref: Ref<RichTextEditorState>) => {\n    const { onSubmit, height = { min: 'auto' }, ...restProps } = props;\n    const { searchTypes = [], onSearch, searchResults = [] } = useContext(FeedContext);\n    const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n    const [showMentionType, setShowMentionType] = useState(false);\n    const searchType = useRef('');\n\n    const onDecoSearch = (event: { search: string; trigger: string }) => {\n      const trigger = event.trigger === '@' ? 'mention' : 'tag';\n      setTriggerType(trigger);\n      if (trigger === 'mention' && event.search === '') {\n        setShowMentionType(true);\n      } else {\n        setShowMentionType(false);\n        onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current });\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') onSubmit();\n    };\n\n    const typesMenu = {\n      onItemActive: (id: string) => {\n        searchType.current = id;\n      },\n      onItemClick: (id: string) => {\n        searchType.current = id;\n        setShowMentionType(false);\n        onSearch?.({ type: 'mention', search: '', mentionType: id });\n      },\n      items: searchTypes.map(type => {\n        return { id: type, primary: cap(type) };\n      })\n    };\n\n    const searchMenu = searchResults.length\n      ? {\n          header: triggerType === 'mention' ? `Mention a ${searchType.current}` : '',\n          items: searchResults\n        }\n      : undefined;\n\n    const getSearchAttributes = (searchResult: RegExpExecArray) => {\n      if (searchResult.groups) {\n        if (searchResult.groups.tag) {\n          const tag = searchResult.groups.tag;\n\n          return {\n            markdown: searchResult.groups.match,\n            component: HashtagButtonConfig.component,\n            props: { tag },\n            text: tag\n          };\n        }\n\n        const id = searchResult.groups.id;\n        const text = searchResult.groups.text;\n        const type = searchResult.groups.type;\n\n        return {\n          markdown: searchResult.groups.match,\n          component: MentionButtonConfig.component,\n          props: { id, text, type },\n          text\n        };\n      }\n    };\n\n    return (\n      <RichTextEditor\n        {...restProps}\n        markdownOnly\n        onKeyDown={onKeyDown}\n        ref={ref}\n        height={height}\n        searchTriggers={[\n          { trigger: '@', regex: String.raw`\\S* ?(?:\\S+ ?)*` },\n          { trigger: '#', regex: String.raw`[^\\s,]*` }\n        ]}\n        getSearchItemReplacement={(id: string) => {\n          const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown:\n              triggerType === 'mention'\n                ? `@${item.id}:${item.primary}:${searchType.current}:`\n                : `#${item.id}:`,\n            component:\n              triggerType === 'mention'\n                ? MentionButtonConfig.component\n                : HashtagButtonConfig.component,\n            props:\n              triggerType === 'mention'\n                ? { id: item.id, text: item.primary, type: searchType.current }\n                : { tag: item.primary },\n            text: item.primary\n          };\n        }}\n        searchRenderers={[\n          { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },\n          { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }\n        ]}\n        onSearch={onDecoSearch}\n        menu={showMentionType ? typesMenu : searchMenu}\n      />\n    );\n  }\n);\n\nexport default FeedRichText;\n"]}

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/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

@@ -47,7 +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.12.1",
+  "version": "2.0.0-dev.13.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,23 +20,23 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.12.1",
-    "@pega/cosmos-react-rte": "2.0.0-dev.12.1",
-    "@pega/cosmos-react-work": "2.0.0-dev.12.1",
+    "@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.4.2"