@selfcommunity/react-ui 0.7.0-alpha.333 → 0.7.0-alpha.335

package/lib/cjs/components/BroadcastMessages/Message.js

@@ -37,7 +37,16 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
         objectFit: 'fill'
     },
     [`& .${classes.title}`]: {
-        padding: '4px 16px'
+        padding: `${theme.spacing(2)}`,
+        paddingBottom: `${theme.spacing()}`,
+        paddingTop: 0
+    },
+    [`& .${classes.media}`]: {
+        paddingBottom: `${theme.spacing(2)}`
+    },
+    [`& .${classes.content}`]: {
+        padding: theme.spacing(2),
+        paddingTop: 0
     },
     [`& .${classes.listItemSnippet}`]: {
         padding: '0px 5px',
@@ -116,10 +125,10 @@ function Message(props) {
             react_1.default.createElement(material_1.CardContent, { className: classes.title },
                 react_1.default.createElement(material_1.Typography, { variant: "h6" }, banner.title)),
             banner.image && react_1.default.createElement(material_1.CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
-            react_1.default.createElement(material_1.CardContent, { className: classes.content },
-                react_1.default.createElement(material_1.Typography, { variant: "body2", color: "text.secondary" }, banner.body_text),
-                react_1.default.createElement(material_1.Typography, { variant: "body2", color: "text.secondary" },
-                    react_1.default.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))));
+            (banner.body_text || banner.link_text) && (react_1.default.createElement(material_1.CardContent, { className: classes.content },
+                banner.body_text && (react_1.default.createElement(material_1.Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
+                banner.link_text && (react_1.default.createElement(material_1.Typography, { variant: "body1", color: "text.secondary" },
+                    react_1.default.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
     };
     // Banner
     const { banner } = message;

package/lib/cjs/components/CommentsObject/CommentsObject.js

@@ -32,28 +32,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    boxShadow: 'none',
-    position: 'relative',
-    display: 'flex',
-    flexWrap: 'wrap',
-    width: '100%',
-    [`& .${classes.loadNextCommentsButton}`]: {
-        textTransform: 'initial'
-    },
-    [`& .${classes.loadPreviousCommentsButton}`]: {
-        textTransform: 'initial'
-    },
-    [`& .${classes.commentsCounter}`]: {
-        paddingRight: theme.spacing()
-    },
-    [`& .${classes.pagination}`]: {
-        width: '100%'
-    },
-    [`& .${classes.paginationLink}`]: {
-        display: 'none'
-    }
-}));
+})(({ theme }) => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
 /**
  * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.

package/lib/cjs/components/Editor/plugins/MentionsPlugin.js

@@ -7,12 +7,12 @@ const react_core_1 = require("@selfcommunity/react-core");
 const lexical_1 = require("lexical");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const utils_1 = require("@lexical/utils");
-const react_dom_1 = require("react-dom");
 const MentionNode_1 = require("../nodes/MentionNode");
 const api_services_1 = require("@selfcommunity/api-services");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
+const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentMentionsRegex = {
@@ -528,7 +528,9 @@ function useMentions(editor, anchorClassName = null) {
     if (resolution === null || editor === null) {
         return null;
     }
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }), anchorElementRef.current);
+    return (react_1.default.createElement(ClickAwayListener_1.default, { onClickAway: closeTypeahead },
+        react_1.default.createElement(material_1.Portal, { container: anchorElementRef.current },
+            react_1.default.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
 }
 function MentionsPlugin() {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();

package/lib/cjs/components/FeedObject/FeedObject.js

@@ -55,6 +55,7 @@ const classes = {
     tag: `${PREFIX}-tag`,
     location: `${PREFIX}-location`,
     content: `${PREFIX}-content`,
+    showMore: `${PREFIX}-show-more`,
     error: `${PREFIX}-error`,
     titleSection: `${PREFIX}-title-section`,
     title: `${PREFIX}-title`,
@@ -394,7 +395,7 @@ function FeedObject(inProps) {
                     react_1.default.createElement(material_1.Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: summaryHtml
                         } })),
-                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
+                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
         else if (template === feedObject_1.SCFeedObjectTemplateType.DETAIL) {
@@ -407,7 +408,7 @@ function FeedObject(inProps) {
                 react_1.default.createElement(material_1.Typography, { component: "span", dangerouslySetInnerHTML: {
                         __html: summaryHtml
                     } }),
-                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
+                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
     }, [obj, template, expanded]);

package/lib/esm/components/BroadcastMessages/Message.js

@@ -35,7 +35,16 @@ const Root = styled(Widget, {
         objectFit: 'fill'
     },
     [`& .${classes.title}`]: {
-        padding: '4px 16px'
+        padding: `${theme.spacing(2)}`,
+        paddingBottom: `${theme.spacing()}`,
+        paddingTop: 0
+    },
+    [`& .${classes.media}`]: {
+        paddingBottom: `${theme.spacing(2)}`
+    },
+    [`& .${classes.content}`]: {
+        padding: theme.spacing(2),
+        paddingTop: 0
     },
     [`& .${classes.listItemSnippet}`]: {
         padding: '0px 5px',
@@ -114,10 +123,10 @@ export default function Message(props) {
             React.createElement(CardContent, { className: classes.title },
                 React.createElement(Typography, { variant: "h6" }, banner.title)),
             banner.image && React.createElement(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
-            React.createElement(CardContent, { className: classes.content },
-                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, banner.body_text),
-                React.createElement(Typography, { variant: "body2", color: "text.secondary" },
-                    React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))));
+            (banner.body_text || banner.link_text) && (React.createElement(CardContent, { className: classes.content },
+                banner.body_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
+                banner.link_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" },
+                    React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
     };
     // Banner
     const { banner } = message;

package/lib/esm/components/CommentsObject/CommentsObject.js

@@ -30,28 +30,7 @@ const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    boxShadow: 'none',
-    position: 'relative',
-    display: 'flex',
-    flexWrap: 'wrap',
-    width: '100%',
-    [`& .${classes.loadNextCommentsButton}`]: {
-        textTransform: 'initial'
-    },
-    [`& .${classes.loadPreviousCommentsButton}`]: {
-        textTransform: 'initial'
-    },
-    [`& .${classes.commentsCounter}`]: {
-        paddingRight: theme.spacing()
-    },
-    [`& .${classes.pagination}`]: {
-        width: '100%'
-    },
-    [`& .${classes.paginationLink}`]: {
-        display: 'none'
-    }
-}));
+})(({ theme }) => ({}));
 const PREFERENCES = [SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
 /**
  * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.

package/lib/esm/components/Editor/plugins/MentionsPlugin.js

@@ -3,12 +3,12 @@ import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
-import { createPortal } from 'react-dom';
 import { createMentionNode, MentionNode } from '../nodes/MentionNode';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import classNames from 'classnames';
-import { Avatar } from '@mui/material';
+import { Avatar, Portal } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentMentionsRegex = {
@@ -521,7 +521,9 @@ function useMentions(editor, anchorClassName = null) {
     if (resolution === null || editor === null) {
         return null;
     }
-    return createPortal(React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }), anchorElementRef.current);
+    return (React.createElement(ClickAwayListener, { onClickAway: closeTypeahead },
+        React.createElement(Portal, { container: anchorElementRef.current },
+            React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
 }
 export default function MentionsPlugin() {
     const [editor] = useLexicalComposerContext();

package/lib/esm/components/FeedObject/FeedObject.js

@@ -53,6 +53,7 @@ const classes = {
     tag: `${PREFIX}-tag`,
     location: `${PREFIX}-location`,
     content: `${PREFIX}-content`,
+    showMore: `${PREFIX}-show-more`,
     error: `${PREFIX}-error`,
     titleSection: `${PREFIX}-title-section`,
     title: `${PREFIX}-title`,
@@ -392,7 +393,7 @@ export default function FeedObject(inProps) {
                     React.createElement(Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: summaryHtml
                         } })),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
+                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
                     React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
         else if (template === SCFeedObjectTemplateType.DETAIL) {
@@ -405,7 +406,7 @@ export default function FeedObject(inProps) {
                 React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: {
                         __html: summaryHtml
                     } }),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
+                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
                     React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
     }, [obj, template, expanded]);