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

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/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;

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

@@ -1,74 +1,59 @@
-import React, { SyntheticEvent } from 'react';
+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 = any, 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?: 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;
-        };
-        /**
-         * Initial view to render
-         * @default 'main'
-         */
-        view?: string;
-        /**
-         * Media objects available
-         * @default Image, Document, Link
-         */
-        mediaObjectTypes?: SCMediaObjectType[];
-        /**
-         * Editor props
-         * @default {toolbar: false}
-         */
-        EditorProps?: EditorProps;
-        /**
-         * 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 = any> = 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.
  *
@@ -87,30 +72,14 @@ export declare const LOCATION_VIEW = "location";
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposer-root|Styles applied to the root element.|
- |writing|.SCComposer-writing|Styles applied to the root element when user is writing in the editor.|
+ |ios|.SCComposer-ios|Styles applied to the root element when the device is ios.|
  |title|.SCComposer-title|Styles applied to the title element.|
- |titleDense|.SCComposer-title-dense|Styles applied to the dense 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.|
- |mediaActions|.SCComposer-media-actions|Styles applied to the media actions section.|
- |filterActions|.SCComposer-filter-actions|Styles applied to the filter 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