@pega/cosmos-react-social 2.0.0-dev.9.4 → 2.0.0-rc.1

package/lib/components/MentionButton/MentionButton.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, useState } from 'react';
+import { forwardRef, isValidElement, useContext, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Popover, useConsolidatedRef, useOuterEvent } from '@pega/cosmos-react-core';
-import { Glimpse } from '@pega/cosmos-react-work';
 import { FeedContext } from '../Feed/Feed.context';
 const StyledButton = styled(Button) `
   &:enabled:focus,
@@ -11,30 +10,48 @@ const StyledButton = styled(Button) `
     text-decoration: underline;
   }
 `;
-const MentionButton = forwardRef(({ children, ...restProps }, ref) => {
-    const { availableMentions } = useContext(FeedContext);
+const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp = '', type: typeProp = '', ...restProps }, ref) => {
+    const { onMentionClick } = useContext(FeedContext);
     const [showPopover, setShowPopover] = useState(false);
+    const [mentionContent, setMentionContent] = useState();
     const mentionRef = useConsolidatedRef(ref);
     const popoverRef = useRef(null);
     useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {
         setShowPopover(false);
     });
-    if (!children.groups)
-        return _jsx("span", { children: children[0] }, void 0);
-    const getMentionedUser = (id) => {
-        return availableMentions === null || availableMentions === void 0 ? void 0 : availableMentions.find(user => user.id === id);
+    let leadingChar = '';
+    let trailingChar = '';
+    let id = '';
+    let text = '';
+    let type = '';
+    if (!isValidElement(children)) {
+        if (!children.groups)
+            return _jsx("span", { children: children[0] }, void 0);
+        [leadingChar, trailingChar] = children[0].split(children.groups.match);
+        id = children.groups.id;
+        text = children.groups.text;
+        type = children.groups.type;
+    }
+    else {
+        id = idProp;
+        text = textProp;
+        type = typeProp;
+    }
+    const handleClick = () => {
+        const comp = onMentionClick?.({
+            id,
+            text,
+            type
+        });
+        if (comp)
+            setShowPopover(true);
+        setMentionContent(comp);
     };
-    const [leadingChar, trailingChar] = children[0].split(children.groups.match);
-    const id = children.groups.id;
-    const user = getMentionedUser(id) || { id, primary: id };
-    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0),
-            _jsx(StyledButton, Object.assign({}, restProps, { ref: mentionRef, variant: 'link', onClick: () => setShowPopover(true) }, { children: user.primary }), 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: _jsx(Glimpse, Object.assign({}, user), void 0) }), 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',
-    regexPattern: /(?:^|\s)(?<match>@(?<id>\S+\w))/g,
+    regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\w):(?<text>[^:]+\w):(?<type>[^:]+\w):)/g,
     component: MentionButton
 };
 export default MentionButton;

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

@@ -1 +1 @@
-{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,UAAU,EACV,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EAEN,OAAO,EACP,kBAAkB,EAClB,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOnD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAuC,EAC/D,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC,aAAa,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE;QACjE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,MAAM;QAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,WAAQ,CAAC;IAExD,MAAM,gBAAgB,GAAG,CAAC,EAAU,EAA4B,EAAE;QAChE,OAAO,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7E,MAAM,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B,MAAM,IAAI,GAAG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IAEzD,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,WAAQ;YAC1C,KAAC,YAAY,oBACP,SAAS,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,gBAElC,IAAI,CAAC,OAAO,YACA;YACd,YAAY,IAAI,yBAAO,YAAY,WAAQ;YAC5C,KAAC,OAAO,kBACN,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,UAAU,CAAC,OAAO,EAC1B,SAAS,EAAC,cAAc,EACxB,KAAK,QACL,MAAM,sBAEN,KAAC,OAAO,oBAAK,IAAI,UAAI,YACb,YACT,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,SAAS;IACf,YAAY,EAAE,kCAAkC;IAChD,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\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';\nimport { Glimpse, GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the Button. */\n  children: RegExpExecArray;\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    { children, ...restProps }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { availableMentions } = useContext(FeedContext);\n    const [showPopover, setShowPopover] = useState(false);\n    const mentionRef = useConsolidatedRef(ref);\n    const popoverRef = useRef(null);\n\n    useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {\n      setShowPopover(false);\n    });\n\n    if (!children.groups) return <span>{children[0]}</span>;\n\n    const getMentionedUser = (id: string): GlimpseProps | undefined => {\n      return availableMentions?.find(user => user.id === id);\n    };\n\n    const [leadingChar, trailingChar] = children[0].split(children.groups.match);\n    const id = children.groups.id;\n    const user = getMentionedUser(id) || { id, primary: id };\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledButton\n          {...restProps}\n          ref={mentionRef}\n          variant='link'\n          onClick={() => setShowPopover(true)}\n        >\n          {user.primary}\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          <Glimpse {...user} />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  regexPattern: /(?:^|\\s)(?<match>@(?<id>\\S+\\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.9.4",
+  "version": "2.0.0-rc.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,25 +20,24 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.9.4",
-    "@pega/cosmos-react-rte": "2.0.0-dev.9.4",
-    "@pega/cosmos-react-work": "2.0.0-dev.9.4",
+    "@pega/cosmos-react-core": "2.0.0-rc.1",
+    "@pega/cosmos-react-rte": "2.0.0-rc.1",
+    "@pega/cosmos-react-work": "2.0.0-rc.1",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-storysource": "^6.3.7",
-    "@storybook/addon-toolbars": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
-    "@storybook/theming": "^6.3.7",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addon-toolbars": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "typescript": "~4.3.2"
+    "typescript": "~4.5.2"
   }
 }