@selfcommunity/react-ui 0.7.0-alpha.334 → 0.7.0-alpha.336

package/lib/cjs/shared/Media/Link/PreviewComponent.js

@@ -1,65 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
-const Media_1 = require("../../../constants/Media");
-const AutoPlayer_1 = tslib_1.__importDefault(require("../../AutoPlayer"));
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
-const LazyLoad_1 = require("../../../constants/LazyLoad");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const PREFIX = 'SCPreviewMediaLink';
+const react_sortablejs_1 = require("react-sortablejs");
+const DisplayComponent_1 = tslib_1.__importDefault(require("./DisplayComponent"));
+const constants_1 = require("./constants");
+const filter_1 = tslib_1.__importDefault(require("./filter"));
 const classes = {
-    previewLink: `${PREFIX}-preview-link`,
-    previewVideo: `${PREFIX}-preview-video`,
-    thumbnail: `${PREFIX}-thumbnail`,
-    thumbnailFullWidth: `${PREFIX}-thumbnail`,
-    image: `${PREFIX}-image`,
-    snippet: `${PREFIX}-snippet`,
-    snippetTitle: `${PREFIX}-snippet-title`,
-    snippetDescription: `${PREFIX}-snippet-description`
+    previewRoot: `${constants_1.PREFIX}-preview-root`,
+    media: `${constants_1.PREFIX}-media`,
+    delete: `${constants_1.PREFIX}-delete`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
-exports.default = (props) => {
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'PreviewRoot'
+})(() => ({}));
+const PreviewComponent = react_1.default.forwardRef((props, ref) => {
     // PROPS
-    const { medias, fullWidth = false, adornment = null, onMediaClick = null } = props;
+    const { className, onChange, value = [] } = props, rest = tslib_1.__rest(props, ["className", "onChange", "value"]);
+    // MEMO
+    const medias = (0, react_1.useMemo)(() => value.filter(filter_1.default), [value]);
     // HANDLERS
-    const handleLinkClick = (link) => {
-        onMediaClick && onMediaClick(link);
-    };
-    // RENDER
-    /**
-     * Renders link preview
-     * @param (link)
-     * @param(key)
-     */
-    const renderPreview = (link, key) => {
-        const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return (react_1.default.createElement(Box_1.default, { className: classes.previewLink, key: key },
-            link.embed.metadata.images && link.embed.metadata.images.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null, fullWidth ? (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })))),
-            react_1.default.createElement(Box_1.default, { className: classes.snippet },
-                react_1.default.createElement("b", { className: classes.snippetTitle }, link.embed.metadata.title),
-                react_1.default.createElement("br", null),
-                react_1.default.createElement("p", { className: classes.snippetDescription }, link.embed.metadata.description),
-                react_1.default.createElement("a", { href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, domain)),
-            react_1.default.createElement("div", { style: { clear: 'both' } })));
-    };
-    /**
-     * Renders component
-     */
-    return (react_1.default.createElement(react_1.default.Fragment, null, medias.length > 0 && (react_1.default.createElement(Root, null,
-        adornment,
-        medias.map((l, i) => {
-            if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
-                return (react_1.default.createElement(react_lazyload_1.default, { className: classes.previewVideo, placeholder: react_1.default.createElement(Skeleton_1.default, { variant: "rectangular", height: 360, width: '100%' }), key: i, once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT },
-                    react_1.default.createElement(AutoPlayer_1.default, { url: l.url, width: '100%', key: i, onVideoWatch: () => handleLinkClick(l) })));
-            }
-            return react_1.default.createElement(react_1.default.Fragment, { key: i }, renderPreview(l, i));
-        })))));
-};
+    const handleSort = (0, react_1.useCallback)((medias) => {
+        onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
+    }, [onChange]);
+    const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
+    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (react_1.default.createElement(react_sortablejs_1.ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: classes.media },
+        react_1.default.createElement(DisplayComponent_1.default, { medias: [media] }),
+        react_1.default.createElement(material_1.IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
+            react_1.default.createElement(Icon_1.default, null, "delete"))))))));
+});
+exports.default = PreviewComponent;

package/lib/cjs/shared/Media/Link/TriggerButton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { IconButtonProps } from '@mui/material';
+declare const _default: ({ className, ...rest }: IconButtonProps) => ReactElement;
+export default _default;

package/lib/cjs/shared/Media/Link/TriggerButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const constants_1 = require("./constants");
+const styles_1 = require("@mui/material/styles");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const classes = {
+    triggerRoot: `${constants_1.PREFIX}-trigger-root`
+};
+const Root = (0, styles_1.styled)(material_1.IconButton, {
+    name: constants_1.PREFIX,
+    slot: 'TriggerRoot'
+})(() => ({}));
+exports.default = (_a) => {
+    var { className } = _a, rest = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }),
+        react_1.default.createElement(Icon_1.default, null, "link")));
+};

package/lib/cjs/shared/Media/Link/UrlTextField/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const InputAdornment_1 = tslib_1.__importDefault(require("@mui/material/InputAdornment"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const IconButton_1 = tslib_1.__importDefault(require("@mui/material/IconButton"));
 const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
 const api_services_1 = require("@selfcommunity/api-services");
@@ -79,6 +78,6 @@ exports.default = (props) => {
                 (urlError && (react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
                 endAdornment: (react_1.default.createElement(InputAdornment_1.default, { position: "end" },
                     react_1.default.createElement(material_1.Fade, { in: urlError === null && url !== '' },
-                        react_1.default.createElement(IconButton_1.default, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? react_1.default.createElement(material_1.CircularProgress, { color: "primary", size: 20 }) : react_1.default.createElement(Icon_1.default, null, "play_arrow")))))
+                        react_1.default.createElement(IconButton_1.default, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? react_1.default.createElement(material_1.CircularProgress, { color: "primary", size: 20 }) : react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })))))
             } }))));
 };

package/lib/cjs/shared/Media/Link/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaLink";

package/lib/cjs/shared/Media/Link/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCMediaLink';

package/lib/cjs/shared/Media/Link/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/cjs/shared/Media/Link/filter.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Media_1 = require("../../../constants/Media");
+exports.default = (media) => media.type === Media_1.MEDIA_TYPE_URL && media.embed && media.embed.embed_type === Media_1.MEDIA_EMBED_SC_LINK_TYPE;

package/lib/cjs/shared/Media/Link/index.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const DisplayComponent_1 = tslib_1.__importDefault(require("./DisplayComponent"));
+const TriggerButton_1 = tslib_1.__importDefault(require("./TriggerButton"));
+const LayerComponent_1 = tslib_1.__importDefault(require("./LayerComponent"));
 const PreviewComponent_1 = tslib_1.__importDefault(require("./PreviewComponent"));
-const EditButton_1 = tslib_1.__importDefault(require("./EditButton"));
-const EditComponent_1 = tslib_1.__importDefault(require("./EditComponent"));
-const Media_1 = require("../../../constants/Media");
+const filter_1 = tslib_1.__importDefault(require("./filter"));
 const Link = {
     name: 'link',
-    previewComponent: (props) => react_1.default.createElement(PreviewComponent_1.default, Object.assign({}, props)),
-    editButton: (props) => react_1.default.createElement(EditButton_1.default, Object.assign({}, props)),
-    editComponent: (props) => react_1.default.createElement(EditComponent_1.default, Object.assign({}, props)),
-    filter: (media) => media.type === Media_1.MEDIA_TYPE_URL && media.embed && media.embed.embed_type === Media_1.MEDIA_EMBED_SC_LINK_TYPE
+    displayComponent: DisplayComponent_1.default,
+    triggerButton: TriggerButton_1.default,
+    layerComponent: LayerComponent_1.default,
+    previewComponent: PreviewComponent_1.default,
+    filter: filter_1.default
 };
 exports.default = Link;

package/lib/cjs/shared/Media/Share/DisplayComponent.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { SCMediaType } from '@selfcommunity/types/src/types';
+import { BoxProps } from '@mui/material';
+export interface DisplayComponentProps extends BoxProps {
+    /**
+     * Medias
+     */
+    medias: SCMediaType[];
+}
+declare const _default: ({ className, medias, ...rest }: DisplayComponentProps) => ReactElement;
+export default _default;

package/lib/cjs/shared/Media/Share/DisplayComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
+const FeedObject_1 = tslib_1.__importDefault(require("../../../components/FeedObject"));
+const feedObject_1 = require("../../../types/feedObject");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const filter_1 = tslib_1.__importDefault(require("./filter"));
+const constants_1 = require("./constants");
+const classes = {
+    displayRoot: `${constants_1.PREFIX}-display-root`,
+    sharePreview: `${constants_1.PREFIX}-share-preview`,
+    sharePlaceholder: `${constants_1.PREFIX}-share-placeholder`
+};
+const Root = (0, styles_1.styled)(Box_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'DisplayRoot'
+})(({ theme }) => ({}));
+exports.default = (_a) => {
+    var { className, medias = [] } = _a, rest = tslib_1.__rest(_a, ["className", "medias"]);
+    // MEMO
+    const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [medias]);
+    if (_medias.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest), _medias.map((media, i) => (react_1.default.createElement(Box_1.default, { className: classes.sharePreview, key: i },
+        react_1.default.createElement(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST }))))));
+};

package/lib/cjs/shared/Media/Share/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaShare";

package/lib/cjs/shared/Media/Share/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCMediaShare';

package/lib/cjs/shared/Media/Share/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/cjs/shared/Media/Share/filter.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Media_1 = require("../../../constants/Media");
+exports.default = (media) => media.type === Media_1.MEDIA_TYPE_SHARE;

package/lib/cjs/shared/Media/Share/index.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const PreviewComponent_1 = tslib_1.__importDefault(require("./PreviewComponent"));
-const Media_1 = require("../../../constants/Media");
+const DisplayComponent_1 = tslib_1.__importDefault(require("./DisplayComponent"));
+const filter_1 = tslib_1.__importDefault(require("./filter"));
 const Share = {
     name: 'share',
-    previewComponent: (props) => react_1.default.createElement(PreviewComponent_1.default, Object.assign({}, props)),
-    editButton: null,
-    editComponent: null,
-    filter: (media) => media.type === Media_1.MEDIA_TYPE_SHARE
+    displayComponent: DisplayComponent_1.default,
+    triggerButton: null,
+    layerComponent: null,
+    previewComponent: null,
+    filter: filter_1.default
 };
 exports.default = Share;

package/lib/cjs/shared/Media/index.d.ts

@@ -1,7 +1,5 @@
-import Image from './Image';
-import Document from './Document';
+import File from './File';
 import Link from './Link';
-import Video from './Video';
 import Share from './Share';
 import { EditMediaProps } from './types';
-export { Image, Document, Link, Video, Share, EditMediaProps };
+export { File, Link, Share, EditMediaProps };

package/lib/cjs/shared/Media/index.js

@@ -1,14 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Share = exports.Video = exports.Link = exports.Document = exports.Image = void 0;
+exports.Share = exports.Link = exports.File = void 0;
 const tslib_1 = require("tslib");
-const Image_1 = tslib_1.__importDefault(require("./Image"));
-exports.Image = Image_1.default;
-const Document_1 = tslib_1.__importDefault(require("./Document"));
-exports.Document = Document_1.default;
+const File_1 = tslib_1.__importDefault(require("./File"));
+exports.File = File_1.default;
 const Link_1 = tslib_1.__importDefault(require("./Link"));
 exports.Link = Link_1.default;
-const Video_1 = tslib_1.__importDefault(require("./Video"));
-exports.Video = Video_1.default;
 const Share_1 = tslib_1.__importDefault(require("./Share"));
 exports.Share = Share_1.default;

package/lib/cjs/types/composer.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { SCFeedPostType } from '@selfcommunity/types/src/types';
+export interface ComposerLayerType {
+    name: string;
+    Component: (props: any) => ReactElement;
+    ComponentProps: any;
+}
+export interface ComposerLayerProps {
+    onClose: () => void;
+    onSave: (value: any) => void;
+    defaultValue: any;
+}
+export declare type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
+    title?: string;
+};

package/lib/cjs/types/composer.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/types/media.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 /**
  * Interface MediaObject
  */
@@ -10,19 +10,23 @@ export interface SCMediaObjectType {
     /**
      * The component used to display media
      */
-    previewComponent: React.ElementType;
+    displayComponent: (props: any) => ReactElement;
     /**
      * Hook for insert custom props to preview component
      */
-    previewProps?: any;
+    displayProps?: any;
     /**
      * The button used to trigger the action
      */
-    editButton: React.ElementType | null;
+    triggerButton: (props: any) => ReactElement;
+    /**
+     * The component used to preview the list of media of this type in the composer
+     */
+    previewComponent: (props: any) => ReactElement;
     /**
      * The component used to interact with the list of media of this type
      */
-    editComponent: React.ElementType | null;
+    layerComponent: (props: any) => ReactElement;
     /**
      * The function used to filter media objects for rendering purpose
      */

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -6,18 +6,19 @@ import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { SCFeatureName } from '@selfcommunity/types';
 import { iOS } from '@selfcommunity/utils';
+import ComposerIconButton from '../ComposerIconButton';
 const PREFIX = 'SCBottomNavigation';
 const classes = {
     root: `${PREFIX}-root`,
     ios: `${PREFIX}-ios`,
-    action: `${PREFIX}-action`
+    action: `${PREFIX}-action`,
+    composer: `${PREFIX}-composer`,
 };
 const Root = styled(MuiBottomNavigation, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-const PREFERENCES = [SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED, SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY];
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *
@@ -56,22 +57,18 @@ export default function BottomNavigation(inProps) {
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
     // PREFERENCES
-    const scPreferences = useSCPreferences();
-    const preferences = useMemo(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferences.preferences]);
+    const { preferences, features } = useSCPreferences();
     // MEMO
-    const privateMessagingEnabled = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = useMemo(() => features.includes(SCFeatureName.PRIVATE_MESSAGING), [features]);
     const isIOS = useMemo(() => iOS(), []);
     // RENDER
     return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
         ? children
         : [
             React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
-            (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
-                preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
+            (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
+                preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
+            React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton }),
             scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     React.createElement(Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },

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/Composer/Attributes/Attributes.d.ts

@@ -0,0 +1,22 @@
+import { BoxProps } from '@mui/material';
+import { ComposerContentType } from '../../../types/composer';
+export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | 'onClick'> {
+    /**
+     * Value of the component
+     */
+    value?: Omit<ComposerContentType, 'title' | 'html'> | null;
+    /**
+     * Callback for change event on attributes object
+     * @param value
+     * @default empty object
+     */
+    onChange?: (value: Omit<ComposerContentType, 'title' | 'html'>) => void;
+    /**
+     * Callback for click event on single attribute
+     * @param value
+     * @default empty object
+     */
+    onClick?: (attribute: 'categories' | 'addressing') => void;
+}
+declare const _default: (props: AttributesProps) => JSX.Element;
+export default _default;

package/lib/esm/components/Composer/Attributes/Attributes.js

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { Box, Chip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import TagChip from '../../../shared/TagChip';
+import { PREFIX } from '../constants';
+const classes = {
+    root: `${PREFIX}-attributes-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'AttributesRoot'
+})(() => ({}));
+export default (props) => {
+    var _a, _b;
+    // PROPS
+    const { className = null, value = null, onChange = null, onClick = null } = props;
+    // HANDLERS
+    const handleDeleteCategory = useCallback((id) => () => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { categories: value.categories.filter((cat) => cat.id !== id) }));
+    }, [value, onChange]);
+    const handleClickCategory = useCallback(() => {
+        onClick && onClick('categories');
+    }, [onClick]);
+    const handleDeleteTag = useCallback((id) => () => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
+    }, [value, onChange]);
+    const handleClickTag = useCallback(() => {
+        onClick && onClick('addressing');
+    }, [onClick]);
+    return (React.createElement(Root, { className: classNames(classes.root, className) },
+        ((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (value === null || value === void 0 ? void 0 : value.categories.map((c) => (React.createElement(Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: React.createElement(Icon, null, "category"), onClick: handleClickCategory })))),
+        ((_b = value === null || value === void 0 ? void 0 : value.addressing) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+            (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleClickTag })))),
+        (value === null || value === void 0 ? void 0 : value.location) && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: () => null, onClick: () => null }))));
+};

package/lib/esm/components/Composer/Attributes/index.d.ts

@@ -0,0 +1,3 @@
+import Attributes, { AttributesProps } from './Attributes';
+export default Attributes;
+export { AttributesProps };

package/lib/esm/components/Composer/Attributes/index.js

@@ -0,0 +1,2 @@
+import Attributes from './Attributes';
+export default Attributes;