@pega/cosmos-react-social 2.0.0-dev.18.0 → 2.0.0-dev.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReplyInput.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReplyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, useEffect, MutableRefObject, MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  StyledAvatar,\n  Flex,\n  Icon,\n  registerIcon,\n  defaultThemeProp,\n  ForwardProps,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as sendIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedRichText from './FeedRichText';\nimport FeedButton from './FeedButton';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(sendIcon, paperClipIcon);\n\nexport interface FeedReplyInputProps {\n  /** Unique ID for this Reply Input  */\n  id: string;\n  /** Label text for the reply submit button. */\n  commentLabel: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Placeholder string for the input */\n  placeholder: string;\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  /** Callback that runs when the submit button has been pressed */\n  onSubmit: (event: {\n    replyId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    clear: () => void;\n  }) => void;\n  /** Callback that sets returns a shared ref to the RTE component */\n  onSetInputRef?: (event: { ref: MutableRefObject<RichTextEditorState | undefined> }) => void;\n}\n\nexport const StyledReplyInputContainer = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    ${StyledAvatar} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledReplyInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFeedReply = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(2.5 * ${theme.base['border-radius']});\n    padding: 0 calc(2 * ${theme.base.spacing});\n    cursor: text;\n  `;\n});\n\nStyledFeedReply.defaultProps = defaultThemeProp;\n\nconst StyledFeedReplyInput = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    padding-top: calc(0.5 * ${theme.base.spacing});\n    padding-bottom: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledFeedReplyInput.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst ReplyFeedButton = styled.button`\n  align-items: start;\n`;\n\nconst FeedReplyInput: FC<ForwardProps & FeedReplyInputProps> = (\n  props: ForwardProps & FeedReplyInputProps\n) => {\n  const rteRef = useRef<RichTextEditorState>();\n  const {\n    id,\n    commentLabel,\n    attachments = [],\n    placeholder,\n    onAddAttachment,\n    onSubmit,\n    onSetInputRef,\n    onFilesAdded,\n    ...restProps\n  } = props;\n\n  const [emptyText, setEmptyText] = useState(true);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const attachmentListRef = useRef<HTMLUListElement>(null);\n  const attachmentsButtonRef = useRef<HTMLButtonElement>(null);\n  const submitButtonRef = useRef<HTMLButtonElement>(null);\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname } = useContext(FeedContext).userInfo;\n\n  useEffect(() => {\n    onSetInputRef?.({ ref: rteRef });\n  }, [rteRef]);\n\n  const t = useI18n();\n\n  const handleSubmit = () => {\n    setShowSearchResults?.(false);\n    if (!emptyText || attachments.length > 0) {\n      onSubmit({\n        replyId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        clear: () => {\n          rteRef.current?.clear();\n        }\n      });\n    }\n  };\n\n  return (\n    <Flex container as={StyledReplyInputContainer} {...restProps}>\n      <Avatar name={fullname} size='m' imageSrc={avatarSrc} />\n      <Flex\n        container={{ alignItems: 'start' }}\n        item={{ grow: 1 }}\n        as={StyledFeedReply}\n        onClick={(event: MouseEvent) => {\n          if (\n            attachmentListRef.current &&\n            event.target !== attachmentListRef.current &&\n            attachmentListRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          if (\n            attachmentsButtonRef.current?.contains(event.target as Node) ||\n            submitButtonRef.current?.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          rteRef.current?.focus();\n        }}\n      >\n        <Flex as={StyledFeedReplyInput} container={{ direction: 'column' }} item={{ grow: 1 }}>\n          <FeedRichText\n            ref={rteRef}\n            placeholder={placeholder}\n            onChange={() => {\n              setEmptyText(rteRef.current?.getPlainText().trim() === '');\n            }}\n            onSubmit={handleSubmit}\n          />\n          <FeedAttachments ref={attachmentListRef} attachments={attachments} />\n        </Flex>\n        {onFilesAdded && (\n          <>\n            <HiddenFileInput\n              ref={hiddenInputRef}\n              type='file'\n              multiple\n              onChange={() => {\n                if (hiddenInputRef.current?.files) {\n                  onFilesAdded?.(Array.from(hiddenInputRef.current?.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            <Button\n              ref={attachmentsButtonRef}\n              as={FeedButton}\n              variant='simple'\n              forwardedAs={ReplyFeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                hiddenInputRef.current?.click();\n              }}\n              icon\n              label={t('attachment')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          </>\n        )}\n        <Button\n          ref={submitButtonRef}\n          as={FeedButton}\n          disabled={emptyText && attachments.length === 0}\n          variant='simple'\n          forwardedAs={ReplyFeedButton}\n          onClick={handleSubmit}\n          icon\n          label={commentLabel}\n        >\n          <Icon name='send' />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedReplyInput;\n"]}
+{"version":3,"file":"FeedReplyInput.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReplyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, useEffect, MutableRefObject, MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  StyledAvatar,\n  Flex,\n  Icon,\n  registerIcon,\n  defaultThemeProp,\n  ForwardProps,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as sendIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedRichText from './FeedRichText';\nimport FeedButton from './FeedButton';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(sendIcon, paperClipIcon);\n\nexport interface FeedReplyInputProps {\n  /** Unique ID for this Reply Input  */\n  id: string;\n  /** Label text for the reply submit button. */\n  commentLabel: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Placeholder string for the input */\n  placeholder: string;\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  /** Callback that runs when the submit button has been pressed */\n  onSubmit: (event: {\n    replyId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    clear: () => void;\n  }) => void;\n  /** Callback that sets returns a shared ref to the RTE component */\n  onSetInputRef?: (event: { ref: MutableRefObject<RichTextEditorState | undefined> }) => void;\n}\n\nexport const StyledReplyInputContainer = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    ${StyledAvatar} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledReplyInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFeedReply = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(2.5 * ${theme.base['border-radius']});\n    padding: 0 calc(2 * ${theme.base.spacing});\n    cursor: text;\n  `;\n});\n\nStyledFeedReply.defaultProps = defaultThemeProp;\n\nconst StyledFeedReplyInput = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    padding-top: calc(0.5 * ${theme.base.spacing});\n    padding-bottom: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledFeedReplyInput.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst ReplyFeedButton = styled.button`\n  align-items: start;\n`;\n\nconst FeedReplyInput: FC<ForwardProps & FeedReplyInputProps> = (\n  props: ForwardProps & FeedReplyInputProps\n) => {\n  const rteRef = useRef<RichTextEditorState>();\n  const {\n    id,\n    commentLabel,\n    attachments = [],\n    placeholder,\n    onAddAttachment,\n    onSubmit,\n    onSetInputRef,\n    onFilesAdded,\n    ...restProps\n  } = props;\n\n  const [emptyText, setEmptyText] = useState(true);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const attachmentListRef = useRef<HTMLUListElement>(null);\n  const attachmentsButtonRef = useRef<HTMLButtonElement>(null);\n  const submitButtonRef = useRef<HTMLButtonElement>(null);\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname } = useContext(FeedContext).userInfo;\n\n  useEffect(() => {\n    onSetInputRef?.({ ref: rteRef });\n  }, [rteRef]);\n\n  const t = useI18n();\n\n  const handleSubmit = () => {\n    setShowSearchResults?.(false);\n    if (!emptyText || attachments.length > 0) {\n      onSubmit({\n        replyId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        clear: () => {\n          rteRef.current?.clear();\n        }\n      });\n    }\n  };\n\n  return (\n    <Flex container as={StyledReplyInputContainer} {...restProps}>\n      <Avatar name={fullname} size='m' imageSrc={avatarSrc} />\n      <Flex\n        container={{ alignItems: 'start' }}\n        item={{ grow: 1 }}\n        as={StyledFeedReply}\n        onClick={(event: MouseEvent) => {\n          if (\n            attachmentListRef.current &&\n            event.target !== attachmentListRef.current &&\n            attachmentListRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          if (\n            attachmentsButtonRef.current?.contains(event.target as Node) ||\n            submitButtonRef.current?.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          rteRef.current?.focus();\n        }}\n      >\n        <Flex as={StyledFeedReplyInput} container={{ direction: 'column' }} item={{ grow: 1 }}>\n          <FeedRichText\n            ref={rteRef}\n            placeholder={placeholder}\n            onChange={() => {\n              setEmptyText(rteRef.current?.getPlainText().trim() === '');\n            }}\n            onSubmit={handleSubmit}\n          />\n          <FeedAttachments ref={attachmentListRef} attachments={attachments} />\n        </Flex>\n        {onFilesAdded && (\n          <>\n            <HiddenFileInput\n              ref={hiddenInputRef}\n              type='file'\n              multiple\n              onChange={() => {\n                if (hiddenInputRef.current?.files) {\n                  onFilesAdded?.(Array.from(hiddenInputRef.current?.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            <Button\n              ref={attachmentsButtonRef}\n              as={FeedButton}\n              variant='simple'\n              forwardedAs={ReplyFeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                hiddenInputRef.current?.click();\n              }}\n              icon\n              label={t('attachment')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          </>\n        )}\n        <Button\n          ref={submitButtonRef}\n          as={FeedButton}\n          disabled={emptyText && attachments.length === 0}\n          variant='simple'\n          forwardedAs={ReplyFeedButton}\n          onClick={handleSubmit}\n          icon\n          label={commentLabel}\n        >\n          <Icon name='send' />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedReplyInput;\n"]}

package/lib/components/Feed/FeedRichText.js

@@ -68,7 +68,7 @@ const FeedRichText = forwardRef((props, ref) => {
             };
         }
     };
-    return (_jsx(RichTextEditor, Object.assign({}, restProps, { markdownOnly: true, onKeyDown: onKeyDown, ref: ref, height: height, searchTriggers: [
+    return (_jsx(RichTextEditor, { ...restProps, markdownOnly: true, onKeyDown: onKeyDown, ref: ref, height: height, searchTriggers: [
             { trigger: '@', regex: String.raw `(?:\S+(?:[^\n\S][^@#\s]\S*)*[^\n\S]?|)` },
             { trigger: '#', regex: String.raw `[^\s,]*` }
         ], getSearchItemReplacement: (id) => {
@@ -90,7 +90,7 @@ const FeedRichText = forwardRef((props, ref) => {
         }, searchRenderers: [
             { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },
             { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }
-        ], onSearch: onDecoSearch, menu: showMentionType ? typesMenu : searchMenu }), void 0));
+        ], onSearch: onDecoSearch, menu: showMentionType ? typesMenu : searchMenu }, void 0));
 });
 export default FeedRichText;
 //# sourceMappingURL=FeedRichText.js.map

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 {\n      searchTypes = [],\n      onSearch,\n      searchResults = [],\n      showSearchResults,\n      setShowSearchResults\n    } = 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      setShowSearchResults?.(true);\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 =\n      searchResults.length && showSearchResults\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+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\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, tabIndex: -1 }\n                : { tag: item.primary, tabIndex: -1 },\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":";AAAA,OAAO,EAAM,UAAU,EAAE,UAAU,EAAO,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAA4C,MAAM,wBAAwB,CAAC;AAElG,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,KAAwB,EAAE,GAA6B,EAAE,EAAE;IAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,EACJ,WAAW,GAAG,EAAE,EAChB,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,iBAAiB,EACjB,oBAAoB,EACrB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAoB,SAAS,CAAC,CAAC;IAC7E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IAE9B,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;QAC1D,cAAc,CAAC,OAAO,CAAC,CAAC;QACxB,IAAI,OAAO,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;YAChD,kBAAkB,CAAC,IAAI,CAAC,CAAC;SAC1B;aAAM;YACL,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;SACtF;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;QACzC,oBAAoB,EAAE,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;YAAE,QAAQ,EAAE,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,YAAY,EAAE,CAAC,EAAU,EAAE,EAAE;YAC3B,UAAU,CAAC,OAAO,GAAG,EAAE,CAAC;QAC1B,CAAC;QACD,WAAW,EAAE,CAAC,EAAU,EAAE,EAAE;YAC1B,UAAU,CAAC,OAAO,GAAG,EAAE,CAAC;YACxB,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;QAC/D,CAAC;QACD,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC5B,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1C,CAAC,CAAC;KACH,CAAC;IAEF,MAAM,UAAU,GACd,aAAa,CAAC,MAAM,IAAI,iBAAiB;QACvC,CAAC,CAAC;YACE,MAAM,EAAE,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;YAC1E,KAAK,EAAE,aAAa;SACrB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,mBAAmB,GAAG,CAAC,YAA6B,EAAE,EAAE;QAC5D,IAAI,YAAY,CAAC,MAAM,EAAE;YACvB,IAAI,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE;gBAC3B,MAAM,GAAG,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC;gBAEpC,OAAO;oBACL,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK;oBACnC,SAAS,EAAE,mBAAmB,CAAC,SAAS;oBACxC,KAAK,EAAE,EAAE,GAAG,EAAE;oBACd,IAAI,EAAE,GAAG;iBACV,CAAC;aACH;YAED,MAAM,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;YACtC,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC;YAEtC,OAAO;gBACL,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK;gBACnC,SAAS,EAAE,mBAAmB,CAAC,SAAS;gBACxC,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;gBACzB,IAAI;aACL,CAAC;SACH;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,YAAY,QACZ,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;YACd,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAA,wCAAwC,EAAE;YAC3E,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAA,SAAS,EAAE;SAC7C,EACD,wBAAwB,EAAE,CAAC,EAAU,EAAE,EAAE;YACvC,MAAM,IAAI,GAAG,aAAa,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;YAEpE,IAAI,CAAC,IAAI;gBAAE,OAAO,SAAS,CAAC;YAE5B,OAAO;gBACL,QAAQ,EACN,WAAW,KAAK,SAAS;oBACvB,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,GAAG;oBACtD,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE,GAAG;gBACpB,SAAS,EACP,WAAW,KAAK,SAAS;oBACvB,CAAC,CAAC,mBAAmB,CAAC,SAAS;oBAC/B,CAAC,CAAC,mBAAmB,CAAC,SAAS;gBACnC,KAAK,EACH,WAAW,KAAK,SAAS;oBACvB,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;oBAC7E,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;gBACzC,IAAI,EAAE,IAAI,CAAC,OAAO;aACnB,CAAC;QACJ,CAAC,EACD,eAAe,EAAE;YACf,EAAE,YAAY,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,EAAE;YACvE,EAAE,YAAY,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,EAAE;SACxE,EACD,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,WAC9C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","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 {\n      searchTypes = [],\n      onSearch,\n      searchResults = [],\n      showSearchResults,\n      setShowSearchResults\n    } = 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      setShowSearchResults?.(true);\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 =\n      searchResults.length && showSearchResults\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+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\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, tabIndex: -1 }\n                : { tag: item.primary, tabIndex: -1 },\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/HashtagButton/HashtagButton.js

@@ -20,7 +20,7 @@ const HashtagButton = forwardRef(({ children, tag: tagProp = '', ...restProps },
     else {
         tag = tagProp;
     }
-    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledTag, Object.assign({}, restProps, { ref: ref, onClick: () => onTagClick?.(tag) }, { children: isValidElement(children) ? children : tag }), void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledTag, { ...restProps, ref: ref, onClick: () => onTagClick?.(tag), spellCheck: false, children: isValidElement(children) ? children : tag }, void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0)] }, void 0));
 });
 export const HashtagButtonConfig = {
     type: 'tag',

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

@@ -1 +1 @@
-{"version":3,"file":"HashtagButton.js","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,SAAS,EAAuC,EAClF,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,WAAQ,CAAC;QAExD,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;KAC3B;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,WAAQ,EAC1C,KAAC,SAAS,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,gBACjE,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,YAChC,EACX,YAAY,IAAI,yBAAO,YAAY,WAAQ,YAC3C,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Tag, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\n\nconst HashtagButton: FunctionComponent<HashtagButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, tag: tagProp = '', ...restProps }: PropsWithoutRef<HashtagButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onTagClick } = useContext(FeedContext);\n\n    let leadingChar = '';\n    let trailingChar = '';\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      tag = children.groups.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n        {trailingChar && <span>{trailingChar}</span>}\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  regexPattern: /(?:^|)(?<match>#(?<tag>[^ :]+\\w):)/g,\n  component: HashtagButton\n};\n\nexport default HashtagButton;\n"]}
+{"version":3,"file":"HashtagButton.js","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,SAAS,EAAuC,EAClF,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,WAAQ,CAAC;QAExD,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;KAC3B;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,WAAQ,EAC1C,KAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,YACpF,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,WAChC,EACX,YAAY,IAAI,yBAAO,YAAY,WAAQ,YAC3C,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Tag, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\n\nconst HashtagButton: FunctionComponent<HashtagButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, tag: tagProp = '', ...restProps }: PropsWithoutRef<HashtagButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onTagClick } = useContext(FeedContext);\n\n    let leadingChar = '';\n    let trailingChar = '';\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      tag = children.groups.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)} spellCheck={false}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n        {trailingChar && <span>{trailingChar}</span>}\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  regexPattern: /(?:^|)(?<match>#(?<tag>[^ :]+\\w):)/g,\n  component: HashtagButton\n};\n\nexport default HashtagButton;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqEvE,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,CA2EvE,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 }, { children: mentionContent }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text }, void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0), _jsx(Popover, { 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        >\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\n          {...restProps}\n          ref={mentionRef}\n          variant='link'\n          onClick={handleClick}\n          spellCheck={false}\n        >\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.18.0",
+  "version": "2.0.0-dev.20.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,9 +20,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.18.0",
-    "@pega/cosmos-react-rte": "2.0.0-dev.18.0",
-    "@pega/cosmos-react-work": "2.0.0-dev.18.0",
+    "@pega/cosmos-react-core": "2.0.0-dev.20.0",
+    "@pega/cosmos-react-rte": "2.0.0-dev.20.0",
+    "@pega/cosmos-react-work": "2.0.0-dev.20.0",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
@@ -38,6 +38,6 @@
     "@storybook/react": "^6.3.8",
     "@storybook/theming": "^6.3.8",
     "enzyme": "^3.11.0",
-    "typescript": "~4.4.2"
+    "typescript": "~4.5.2"
   }
 }

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

@@ -1,3 +0,0 @@
-import { SummaryListItem, TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';
-export declare const generateFeedLabel: (t: TranslationFunction<TranslationPack>, locale: string, list: SummaryListItem[], count: number, separatorChar?: string | undefined) => string;
-//# sourceMappingURL=utils.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAGhG,eAAO,MAAM,iBAAiB,MACzB,oBAAoB,eAAe,CAAC,UAC/B,MAAM,QACR,eAAe,EAAE,SAChB,MAAM,+CAoBd,CAAC"}

package/lib/components/Feed/utils.js

@@ -1,19 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export const generateFeedLabel = (t, locale, list, count, separatorChar) => {
-    if (list.length < 1) {
-        return '';
-    }
-    const listFormat = new Intl.ListFormat(locale, { style: separatorChar ? 'narrow' : 'long' });
-    const items = list.slice(0, 10).map(x => x.primary);
-    if (count > 10) {
-        items.push(t('feed_more_count', [count - 10], { count: count - 10 }));
-    }
-    // eslint-disable-next-line sonarjs/prefer-immediate-return
-    const text = separatorChar
-        ? listFormat.formatToParts(items).reduce((result, part) => {
-            return result + (part.type === 'literal' ? separatorChar : part.value);
-        }, '')
-        : listFormat.format(items);
-    return text;
-};
-//# sourceMappingURL=utils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Feed/utils.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,CAAuC,EACvC,MAAc,EACd,IAAuB,EACvB,KAAa,EACb,aAAsB,EACtB,EAAE;IACF,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IAE7F,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,IAAI,KAAK,GAAG,EAAE,EAAE;QACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;KACvE;IACD,2DAA2D;IAC3D,MAAM,IAAI,GAAG,aAAa;QACxB,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;YACtD,OAAO,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzE,CAAC,EAAE,EAAE,CAAC;QACR,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["import { SummaryListItem, TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';\n\n// eslint-disable-next-line import/prefer-default-export\nexport const generateFeedLabel = (\n  t: TranslationFunction<TranslationPack>,\n  locale: string,\n  list: SummaryListItem[],\n  count: number,\n  separatorChar?: string\n) => {\n  if (list.length < 1) {\n    return '';\n  }\n\n  const listFormat = new Intl.ListFormat(locale, { style: separatorChar ? 'narrow' : 'long' });\n\n  const items = list.slice(0, 10).map(x => x.primary);\n  if (count > 10) {\n    items.push(t('feed_more_count', [count - 10], { count: count - 10 }));\n  }\n  // eslint-disable-next-line sonarjs/prefer-immediate-return\n  const text = separatorChar\n    ? listFormat.formatToParts(items).reduce((result, part) => {\n        return result + (part.type === 'literal' ? separatorChar : part.value);\n      }, '')\n    : listFormat.format(items);\n  return text;\n};\n"]}