@selfcommunity/react-ui 0.7.0-alpha.98 → 0.7.0

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
@@ -21,12 +11,11 @@ import { useThemeProps } from '@mui/system';
 import CommentsObjectSkeleton from './Skeleton';
 import { InView } from 'react-intersection-observer';
 import { getContributionRouteName, getRouteData } from '../../utils/contribution';
-import { SCCustomAdvPosition, SCFeedObjectTypologyType } from '@selfcommunity/types';
+import { SCContributionType, SCCustomAdvPosition } from '@selfcommunity/types';
 import { appendURLSearchParams, CacheStrategies } from '@selfcommunity/utils';
-import { scrollIntoView } from 'seamless-scroll-polyfill';
 import { DEFAULT_PAGINATION_QUERY_PARAM_NAME } from '../../constants/Pagination';
 import { Link, SCPreferences, useSCFetchFeedObject, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-const PREFIX = 'SCCommentsObject';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     loadNextCommentsButton: `${PREFIX}-load-more-comments-button`,
@@ -39,33 +28,11 @@ const classes = {
 };
 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'
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 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.
+ * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -96,7 +63,7 @@ export default function CommentsObject(inProps) {
         name: PREFIX
     });
     // PROPS
-    const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = SCFeedObjectTypologyType.POST, CommentComponent = CommentObject, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);
+    const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, CommentComponent = CommentObject, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, inPlaceLoadMoreContents = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "inPlaceLoadMoreContents", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const scPreferences = useSCPreferences();
@@ -133,7 +100,7 @@ export default function CommentsObject(inProps) {
         setTimeout(() => {
             const element = document.getElementById(`reply-${comment.id}`);
             if (element) {
-                scrollIntoView(element, { behavior: 'smooth', block: 'center', inline: 'center' });
+                element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
             }
         }, 200);
     }
@@ -160,7 +127,12 @@ export default function CommentsObject(inProps) {
         return (React.createElement(Box, { className: classes.pagination },
             isLoadingPrevious && React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })),
             !isLoadingPrevious && (React.createElement(React.Fragment, null,
-                React.createElement(Button, { variant: "text", onClick: handlePrevious, disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } },
+                React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                    ? { onClick: handlePrevious }
+                    : {
+                        component: Link,
+                        to: `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                    }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }),
                     React.createElement(FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" })),
                 !disablePaginationLinks && previousPage && previous && (React.createElement(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
                         { [paginationLinksPageQueryParam]: previousPage }
@@ -174,7 +146,16 @@ export default function CommentsObject(inProps) {
         return (React.createElement(Box, { className: classes.pagination }, isLoadingNext ? (React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (React.createElement(React.Fragment, null,
             React.createElement(InView, { as: "div", onChange: handleScrollEnd, threshold: 0.5 },
                 React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Button, { variant: "text", onClick: handleNext, disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } },
+                    React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                        ? { onClick: handleNext }
+                        : {
+                            component: Link,
+                            to: nextPage && next
+                                ? `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                                    { [paginationLinksPageQueryParam]: nextPage }
+                                ])}`
+                                : `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                        }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }),
                         React.createElement(FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" })),
                     showCommentsCounter() && (React.createElement(Typography, { variant: "body1", classes: { root: classes.commentsCounter } },
                         React.createElement(FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }))))),
@@ -231,4 +212,3 @@ export default function CommentsObject(inProps) {
         commentsRendered,
         renderComments(getFilteredComments(endComments))));
 }
-//# sourceMappingURL=CommentsObject.js.map

package/lib/esm/components/CommentsObject/Skeleton.d.ts

@@ -9,13 +9,13 @@
 
  #### Component Name
 
- The name `SCCommentsObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentsObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentsObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentsObject-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CommentsObjectSkeleton(props: {
@@ -23,4 +23,3 @@ export default function CommentsObjectSkeleton(props: {
     CommentObjectSkeletonProps?: any;
     [p: string]: any;
 }): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,25 +1,16 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { CommentObjectSkeleton } from '../CommentObject';
 import { Box } from '@mui/material';
-const PREFIX = 'SCCommentsObjectSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
-const Root = styled(Box)(({ theme }) => ({
-    width: '100%'
-}));
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Comments Object Skeleton component. Learn about the available props and the CSS API.
 
@@ -31,17 +22,16 @@ const Root = styled(Box)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCCommentsObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentsObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentsObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentsObject-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CommentsObjectSkeleton(props) {
     const { count = 3, CommentObjectSkeletonProps = {} } = props, rest = __rest(props, ["count", "CommentObjectSkeletonProps"]);
     return (React.createElement(Root, Object.assign({ className: classes.root }, rest), [...Array(count)].map((comment, index) => (React.createElement(CommentObjectSkeleton, Object.assign({ key: index }, CommentObjectSkeletonProps))))));
 }
-//# sourceMappingURL=Skeleton.js.map

package/lib/esm/components/CommentsObject/constants.d.ts

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

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCCommentsObject';

package/lib/esm/components/CommentsObject/index.d.ts

@@ -2,4 +2,3 @@ import CommentsObject, { CommentsObjectProps } from './CommentsObject';
 import CommentsObjectSkeleton from './Skeleton';
 export default CommentsObject;
 export { CommentsObjectProps, CommentsObjectSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -2,4 +2,3 @@ import CommentsObject from './CommentsObject';
 import CommentsObjectSkeleton from './Skeleton';
 export default CommentsObject;
 export { CommentsObjectSkeleton };
-//# sourceMappingURL=index.js.map

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' | 'location') => void;
+}
+declare const _default: (props: AttributesProps) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,44 @@
+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]);
+    const handleDeleteLocation = useCallback(() => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { location: null }));
+    }, [value, onChange]);
+    const handleClickLocation = useCallback(() => {
+        onClick && onClick('location');
+    }, [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: handleDeleteLocation, onClick: handleClickLocation }))));
+};

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;

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

@@ -1,72 +1,73 @@
-import React, { SyntheticEvent } from 'react';
-import { SCCategoryType, SCFeedDiscussionType, SCFeedObjectTypologyType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
+import { SyntheticEvent } from 'react';
+import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
 import { DialogProps } from '@mui/material';
+import { EditorProps } from '../Editor';
 import { SCMediaObjectType } from '../../types/media';
-import { DistributiveOmit } from '@mui/types';
-import { OverrideProps } from '@mui/material/OverridableComponent';
-export interface ComposerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & DistributiveOmit<DialogProps, 'defaultValue'> & {
-        /**
-         * Id of feed object
-         * @default null
-         */
-        feedObjectId?: number;
-        /**
-         * Type of feed object
-         * @default null
-         */
-        feedObjectType?: SCFeedObjectTypologyType;
-        /**
-         * Feed object
-         * @default null
-         */
-        feedObject?: SCFeedDiscussionType | SCFeedPostType | SCFeedStatusType | null;
-        /**
-         * Initialization Data for the Composer, this is a hook to generate custom posts
-         * @default null
-         */
-        defaultValue?: {
-            title?: string;
-            text?: string;
-            categories?: SCCategoryType[];
-            audience?: string;
-            addressing?: SCTagType[];
-            medias?: SCMediaType[];
-            poll?: SCPollType;
-            location?: string;
-        };
-        /**
-         * Initial view to render
-         * @default 'main'
-         */
-        view?: string;
-        /**
-         * Media objects available
-         * @default Image, Document, Link
-         */
-        mediaObjectTypes?: SCMediaObjectType[];
-        /**
-         * Callback triggered on success contribution creation
-         * @default null
-         */
-        onSuccess?: (res: any) => void;
-        /**
-         * Callback triggered on close click
-         * @default null
-         */
-        onClose?: (event: SyntheticEvent) => void;
+export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scroll'> {
+    /**
+     * Id of feed object
+     * @default null
+     */
+    feedObjectId?: number;
+    /**
+     * Type of feed object
+     * @default null
+     */
+    feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
+    /**
+     * Feed object
+     * @default null
+     */
+    feedObject?: SCFeedDiscussionType | SCFeedPostType | SCFeedStatusType | null;
+    /**
+     * Initialization Data for the Composer, this is a hook to generate custom posts
+     * @default null
+     */
+    defaultValue?: {
+        title?: string;
+        text?: string;
+        categories?: SCCategoryType[];
+        audience?: string;
+        addressing?: SCTagType[];
+        medias?: SCMediaType[];
+        poll?: SCPollType;
+        location?: string;
     };
-    defaultComponent: D;
+    /**
+     * Media objects available
+     * @default File, Document, Link
+     */
+    mediaObjectTypes?: SCMediaObjectType[];
+    /**
+     * Editor props
+     * @default {}
+     */
+    EditorProps?: Omit<EditorProps, 'onFocus'>;
+    /**
+     * Callback triggered on success contribution creation
+     * @default null
+     */
+    onSuccess?: (res: any) => void;
+    /**
+     * Callback triggered on close click
+     * @default null
+     */
+    onClose?: (event: SyntheticEvent) => void;
 }
-export declare type ComposerProps<D extends React.ElementType = ComposerTypeMap['defaultComponent'], P = {}> = OverrideProps<ComposerTypeMap<P, D>, D>;
-export declare const MAIN_VIEW = "main";
-export declare const AUDIENCE_VIEW = "audience";
-export declare const POLL_VIEW = "poll";
-export declare const LOCATION_VIEW = "location";
 /**
- > API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
- > The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ * > API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
  *
+ *
+ * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
+
  #### Import
  ```jsx
  import {Composer} from '@selfcommunity/react-ui';
@@ -79,29 +80,16 @@ export declare const LOCATION_VIEW = "location";
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposer-root|Styles applied to the root element.|
+ |ios|.SCComposer-ios|Styles applied to the root element when the device is ios.|
  |title|.SCComposer-title|Styles applied to the title element.|
  |types|.SCComposer-types|Styles applied to the types element.|
- |avatar|.SCComposer-avatar|Styles applied to the avatar element.|
  |content|.SCComposer-content|Styles applied to the content.|
- |mediaContent|.SCComposer-mediaContent|Styles applied to the media content.|
- |audienceContent|.SCComposer-audienceContent|Styles applied to the audience content.|
- |locationContent|.SCComposer-locationContent|Styles applied to the location content.|
- |block|.SCComposer-block|Styles applied to the block element.|
- |editor|.SCComposer-editor|Styles applied to the editor element.|
- |divider|.SCComposer-divider|Styles applied to the divider element.|
+ |attributes|.SCComposer-attributes|Styles applied to the attributes.|
  |medias|.SCComposer-medias|Styles applied to the medias.|
- |location|.SCComposer-location|Styles applied to the location element.|
- |audience|.SCComposer-audience|Styles applied to the audience element.|
- |mediasActions|.SCComposer-mediasActions|Styles applied to the medias actions section.|
- |sortableMedia|.SCComposer-sortableMedia|Styles applied to the sortable media element.|
- |sortableMediaCover|.SCComposer-sortableMediaCover|Styles applied to the sortable media cover element.|
- |links|.SCComposer-links|Styles applied to the links element.|
  |actions|.SCComposer-actions|Styles applied to the actions section.|
- |actionInput|.SCComposer-actionInput|Styles applied to the action input element.|
- |badgeError|.SCComposer-badgeError|Styles applied to the badge error element.|
+ |layerTransitionRoot|.SCComposer-layer-transition-root|Styles applied to the overlay layers (eg. location).|
 
 
  * @param inProps
  */
 export default function Composer(inProps: ComposerProps): JSX.Element;
-//# sourceMappingURL=Composer.d.ts.map