@pega/cosmos-react-social 3.0.0-dev.14.0 → 3.0.0-dev.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/lib/components/Email/Email.d.ts.map +1 -1
  2. package/lib/components/Email/Email.js +32 -18
  3. package/lib/components/Email/Email.js.map +1 -1
  4. package/lib/components/Email/Email.styles.d.ts +12 -0
  5. package/lib/components/Email/Email.styles.d.ts.map +1 -1
  6. package/lib/components/Email/Email.styles.js +55 -0
  7. package/lib/components/Email/Email.styles.js.map +1 -1
  8. package/lib/components/Email/Email.types.d.ts +71 -28
  9. package/lib/components/Email/Email.types.d.ts.map +1 -1
  10. package/lib/components/Email/Email.types.js.map +1 -1
  11. package/lib/components/Email/EmailComposer.d.ts.map +1 -1
  12. package/lib/components/Email/EmailComposer.js +60 -103
  13. package/lib/components/Email/EmailComposer.js.map +1 -1
  14. package/lib/components/Email/EmailManager.d.ts +6 -0
  15. package/lib/components/Email/EmailManager.d.ts.map +1 -0
  16. package/lib/components/Email/EmailManager.js +36 -0
  17. package/lib/components/Email/EmailManager.js.map +1 -0
  18. package/lib/components/Email/EmailSelector.d.ts +3 -1
  19. package/lib/components/Email/EmailSelector.d.ts.map +1 -1
  20. package/lib/components/Email/EmailSelector.js +5 -10
  21. package/lib/components/Email/EmailSelector.js.map +1 -1
  22. package/lib/components/Email/EmailShell.d.ts.map +1 -1
  23. package/lib/components/Email/EmailShell.js +4 -1
  24. package/lib/components/Email/EmailShell.js.map +1 -1
  25. package/lib/components/Email/EmailSummaryList.d.ts.map +1 -1
  26. package/lib/components/Email/EmailSummaryList.js +8 -8
  27. package/lib/components/Email/EmailSummaryList.js.map +1 -1
  28. package/lib/components/Email/EntityList.d.ts.map +1 -1
  29. package/lib/components/Email/EntityList.js +44 -5
  30. package/lib/components/Email/EntityList.js.map +1 -1
  31. package/lib/components/Email/index.d.ts +2 -1
  32. package/lib/components/Email/index.d.ts.map +1 -1
  33. package/lib/components/Email/index.js +1 -0
  34. package/lib/components/Email/index.js.map +1 -1
  35. package/lib/components/Feed/Feed.context.d.ts +9 -1
  36. package/lib/components/Feed/Feed.context.d.ts.map +1 -1
  37. package/lib/components/Feed/Feed.context.js.map +1 -1
  38. package/lib/components/Feed/Feed.d.ts +3 -1
  39. package/lib/components/Feed/Feed.d.ts.map +1 -1
  40. package/lib/components/Feed/Feed.js +2 -1
  41. package/lib/components/Feed/Feed.js.map +1 -1
  42. package/lib/components/Feed/FeedRichText.d.ts.map +1 -1
  43. package/lib/components/Feed/FeedRichText.js +18 -10
  44. package/lib/components/Feed/FeedRichText.js.map +1 -1
  45. package/lib/components/MentionButton/MentionButton.d.ts +2 -0
  46. package/lib/components/MentionButton/MentionButton.d.ts.map +1 -1
  47. package/lib/components/MentionButton/MentionButton.js +21 -5
  48. package/lib/components/MentionButton/MentionButton.js.map +1 -1
  49. package/package.json +4 -4
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, isValidElement, useContext, useRef, useState } from 'react';
3
3
  import styled from 'styled-components';
4
- import { Button, Popover, useConsolidatedRef, useOuterEvent } from '@pega/cosmos-react-core';
4
+ import { Button, Link, Popover, useConsolidatedRef, useOuterEvent } from '@pega/cosmos-react-core';
5
5
  import { FeedContext } from '../Feed/Feed.context';
6
6
  const StyledButton = styled(Button) `
7
7
  &:enabled:focus,
@@ -10,8 +10,15 @@ const StyledButton = styled(Button) `
10
10
  text-decoration: underline;
11
11
  }
12
12
  `;
13
- const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp = '', type: typeProp = '', ...restProps }, ref) => {
14
- const { onMentionClick } = useContext(FeedContext);
13
+ const StyledLink = styled(Link) `
14
+ &:enabled:focus,
15
+ &:not([disabled]):focus {
16
+ box-shadow: none;
17
+ text-decoration: underline;
18
+ }
19
+ `;
20
+ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp = '', type: typeProp = '', component: componentProp = 'button', ...restProps }, ref) => {
21
+ const { onMentionClick, onMentionPreview } = useContext(FeedContext);
15
22
  const [showPopover, setShowPopover] = useState(false);
16
23
  const [mentionContent, setMentionContent] = useState();
17
24
  const mentionRef = useConsolidatedRef(ref);
@@ -24,6 +31,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
24
31
  let id = '';
25
32
  let text = '';
26
33
  let type = '';
34
+ let component = '';
27
35
  if (!isValidElement(children)) {
28
36
  if (!children.groups)
29
37
  return _jsx("span", { children: children[0] });
@@ -31,11 +39,13 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
31
39
  id = children.groups.id;
32
40
  text = children.groups.text;
33
41
  type = children.groups.type;
42
+ component = children.groups.component || 'button';
34
43
  }
35
44
  else {
36
45
  id = idProp;
37
46
  text = textProp;
38
47
  type = typeProp;
48
+ component = componentProp;
39
49
  }
40
50
  const handleClick = () => {
41
51
  const comp = onMentionClick?.({
@@ -47,11 +57,17 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
47
57
  setShowPopover(true);
48
58
  setMentionContent(comp);
49
59
  };
50
- return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }), _jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text }), trailingChar && _jsx("span", { children: trailingChar }), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, children: mentionContent })] }));
60
+ return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }), component === 'button' && (_jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text })), component === 'link' && (_jsx(StyledLink, { ...restProps, ref: mentionRef, href: id, previewable: !!onMentionPreview, onPreview: onMentionPreview
61
+ ? () => onMentionPreview({
62
+ id,
63
+ text,
64
+ type
65
+ })
66
+ : undefined, spellCheck: false, children: isValidElement(children) ? children : text })), trailingChar && _jsx("span", { children: trailingChar }), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, children: mentionContent })] }));
51
67
  });
52
68
  export const MentionButtonConfig = {
53
69
  type: 'mention',
54
- regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\w):(?<text>[^:]+\w):(?<type>[^:]+\w):)/g,
70
+ regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\w):(?<text>[^:]+\w):(?<type>[^:]+\w):(?:(?<component>[^:]+\w):)?)/g,
55
71
  component: MentionButton
56
72
  };
57
73
  export default MentionButton;
@@ -1 +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\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"]}
1
+ {"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n isValidElement,\n PropsWithoutRef,\n ReactElement,\n Ref,\n useContext,\n useRef,\n useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n ForwardProps,\n Link,\n Popover,\n useConsolidatedRef,\n useOuterEvent\n} from '@pega/cosmos-react-core';\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 /** Designates the render component for the mention, either a button or link. */\n component?: 'button' | 'link';\n}\n\nconst StyledButton = styled(Button)`\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst StyledLink = styled(Link)`\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n (\n {\n children,\n id: idProp = '',\n text: textProp = '',\n type: typeProp = '',\n component: componentProp = 'button',\n ...restProps\n }: PropsWithoutRef<MentionButtonProps>,\n ref: Ref<HTMLButtonElement>\n ) => {\n const { onMentionClick, onMentionPreview } = useContext(FeedContext);\n const [showPopover, setShowPopover] = useState(false);\n const [mentionContent, setMentionContent] = useState<JSX.Element | undefined>();\n const mentionRef = useConsolidatedRef(ref);\n const popoverRef = useRef(null);\n\n useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {\n setShowPopover(false);\n });\n\n let leadingChar = '';\n let trailingChar = '';\n let id = '';\n let text = '';\n let type = '';\n let component = '';\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 component = children.groups.component || 'button';\n } else {\n id = idProp;\n text = textProp;\n type = typeProp;\n component = componentProp;\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 {component === 'button' && (\n <StyledButton\n {...restProps}\n ref={mentionRef}\n variant='link'\n onClick={handleClick}\n spellCheck={false}\n >\n {isValidElement(children) ? children : text}\n </StyledButton>\n )}\n {component === 'link' && (\n <StyledLink\n {...restProps}\n ref={mentionRef}\n href={id}\n previewable={!!onMentionPreview}\n onPreview={\n onMentionPreview\n ? () =>\n onMentionPreview({\n id,\n text,\n type\n })\n : undefined\n }\n spellCheck={false}\n >\n {isValidElement(children) ? children : text}\n </StyledLink>\n )}\n {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:\n /(?:^|)(?<match>@(?<id>[^ :]+\\w):(?<text>[^:]+\\w):(?<type>[^:]+\\w):(?:(?<component>[^:]+\\w):)?)/g,\n component: MentionButton\n};\n\nexport default MentionButton;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-social",
3
- "version": "3.0.0-dev.14.0",
3
+ "version": "3.0.0-dev.15.0",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,9 +20,9 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "3.0.0-dev.14.0",
24
- "@pega/cosmos-react-rte": "3.0.0-dev.14.0",
25
- "@pega/cosmos-react-work": "3.0.0-dev.14.0",
23
+ "@pega/cosmos-react-core": "3.0.0-dev.15.0",
24
+ "@pega/cosmos-react-rte": "3.0.0-dev.15.0",
25
+ "@pega/cosmos-react-work": "3.0.0-dev.15.0",
26
26
  "@types/react": "^16.14.24 || ^17.0.38",
27
27
  "@types/react-dom": "^16.9.14 || ^17.0.11",
28
28
  "@types/styled-components": "^5.1.7",