@selfcommunity/react-ui 0.11.0-alpha.7 → 0.11.0-alpha.71

package/lib/cjs/components/Composer/Composer.js

@@ -7,9 +7,7 @@ const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const Composer_1 = require("../../constants/Composer");
 const Media_1 = require("../../constants/Media");
 const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
@@ -32,6 +30,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const CloseLayer_1 = tslib_1.__importDefault(require("./Layer/CloseLayer"));
 const BackdropScrollDisabled_1 = tslib_1.__importDefault(require("../../shared/BackdropScrollDisabled"));
 const body_scroll_lock_1 = require("body-scroll-lock");
+const ScheduledLayer_1 = tslib_1.__importDefault(require("./Layer/ScheduledLayer"));
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ ref: ref }, props));
 });
@@ -44,13 +43,15 @@ const classes = {
     attributes: `${constants_1.PREFIX}-attributes`,
     medias: `${constants_1.PREFIX}-medias`,
     actions: `${constants_1.PREFIX}-actions`,
+    selectedAction: `${constants_1.PREFIX}-selected-action`,
+    actionSelectedIcon: `${constants_1.PREFIX}-action-selected-icon`,
     layerTransitionRoot: `${constants_1.PREFIX}-layer-transition-root`
 };
-const Root = (0, styles_1.styled)(material_1.Dialog, {
+const Root = (0, material_1.styled)(material_1.Dialog, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const LayerTransitionRoot = (0, styles_1.styled)(material_1.Slide, {
+const LayerTransitionRoot = (0, material_1.styled)(material_1.Slide, {
     name: constants_1.PREFIX,
     slot: 'LayerTransitionRoot'
 })(({ theme }) => ({}));
@@ -62,15 +63,16 @@ const COMPOSER_INITIAL_STATE = {
     html: '',
     htmlError: null,
     categories: [],
+    categoriesError: null,
     group: null,
     event: null,
-    categoriesError: null,
     groupsError: null,
     addressing: null,
     addressingError: null,
     medias: [],
     poll: null,
     location: null,
+    scheduled_at: null,
     error: null
 };
 const reducer = (state, action) => {
@@ -139,13 +141,23 @@ function Composer(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // HOOKS
-    const theme = (0, styles_1.useTheme)();
+    const theme = (0, material_1.useTheme)();
     const fullScreen = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'), { noSsr: (0, utils_1.isClientSideRendering)() });
     // State variables
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [layer, setLayer] = (0, react_1.useState)();
     const [state, dispatch] = (0, react_1.useReducer)(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: (0, utils_1.random)() }));
-    const { key, id, type, title, titleError, html, categories, event, group, addressing, audience, medias, poll, pollError, location, error } = state;
+    const { key, id, type, title, titleError, html, categories, categoriesError, event, group, addressing, addressingError, audience, medias, poll, pollError, location, scheduled_at, error } = state;
+    //MEMO
+    const scheduledPostsEnabled = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value, [preferences]);
+    const addressingRequiredEnabled = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_POST_ADDRESSING_REQUIRED_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ADDRESSING_REQUIRED_ENABLED].value, [preferences]);
+    const categoryRequiredEnabled = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_POST_CATEGORY_REQUIRED_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_CATEGORY_REQUIRED_ENABLED].value, [preferences]);
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === types_1.SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -170,7 +182,8 @@ function Composer(inProps) {
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
-                    location: _feedObject.location
+                    location: _feedObject.location,
+                    scheduled_at: _feedObject.scheduled_at
                 }
             });
             setIsLoading(false);
@@ -198,8 +211,10 @@ function Composer(inProps) {
         return (!isLoading &&
             ((type === types_1.SCContributionType.DISCUSSION && title.length > 0 && title.length < Composer_1.COMPOSER_TITLE_MAX_LENGTH) ||
                 (type === types_1.SCContributionType.POST && ((0, utils_1.stripHtml)(html).length > 0 || medias.length > 0 || hasPoll)) ||
-                (type === Composer_1.COMPOSER_TYPE_POLL && hasPoll)));
-    }, [isLoading, type, title, html, medias, hasPoll]);
+                (type === Composer_1.COMPOSER_TYPE_POLL && hasPoll)) &&
+            (!addressingRequiredEnabled || (addressing && addressing.length > 0)) &&
+            (!categoryRequiredEnabled || (categories && categories.length > 0)));
+    }, [isLoading, type, title, html, medias, hasPoll, addressing, addressingRequiredEnabled, categories, categoryRequiredEnabled]);
     const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // Load feed object
     (0, react_1.useEffect)(() => {
@@ -307,23 +322,29 @@ function Composer(inProps) {
             type: 'multiple',
             value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH
                     ? { titleError: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
-                    : null })
+                    : null, addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null })
         });
     }, []);
     const handleChangeDiscussion = (0, react_1.useCallback)((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null, addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleChangePost = (0, react_1.useCallback)((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign({}, content)
+            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleChangeCategories = (0, react_1.useCallback)((value) => {
-        dispatch({ type: 'categories', value });
+        dispatch({
+            type: 'multiple',
+            value: {
+                categories: value,
+                categoriesError: categoryRequiredEnabled && (!value || value.length === 0) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null
+            }
+        });
         setLayer(null);
     }, []);
     const handleAddCategoryLayer = (0, react_1.useCallback)(() => handleAddLayer({
@@ -343,7 +364,13 @@ function Composer(inProps) {
             dispatch({ type: 'event', value });
         }
         else {
-            dispatch({ type: 'addressing', value });
+            dispatch({
+                type: 'multiple',
+                value: {
+                    addressing: value,
+                    addressingError: addressingRequiredEnabled && !value ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null
+                }
+            });
         }
         setLayer(null);
     }, [group]);
@@ -373,6 +400,19 @@ function Composer(inProps) {
             defaultValue: location
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeLocation, location]);
+    const handleChangeScheduled = (0, react_1.useCallback)((value) => {
+        dispatch({ type: 'scheduled_at', value });
+        setLayer(null);
+    }, []);
+    const handleAddScheduledLayer = (0, react_1.useCallback)(() => handleAddLayer({
+        name: 'scheduled_at',
+        Component: ScheduledLayer_1.default,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeScheduled,
+            defaultValue: scheduled_at
+        }
+    }), [handleAddLayer, handleRemoveLayer, handleChangeScheduled, scheduled_at]);
     const handleChangeMedias = (0, react_1.useCallback)((value) => {
         const _medias = [...value];
         dispatch({
@@ -406,7 +446,7 @@ function Composer(inProps) {
     const handleChangeAttributes = (0, react_1.useCallback)((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign({}, content)
+            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleClickAttributes = (0, react_1.useCallback)((attr) => {
@@ -420,8 +460,11 @@ function Composer(inProps) {
             case 'location':
                 handleAddLocationLayer();
                 break;
+            case 'scheduled_at':
+                handleAddScheduledLayer();
+                break;
         }
-    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
+    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer, handleAddScheduledLayer]);
     const handleSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -447,6 +490,9 @@ function Composer(inProps) {
         if (preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && location) {
             data.location = location;
         }
+        if (preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value && scheduled_at) {
+            data.scheduled_at = scheduled_at;
+        }
         if (features.includes(types_1.SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
@@ -495,7 +541,24 @@ function Composer(inProps) {
             dispatch({ type: 'multiple', value: (0, api_services_1.formatHttpErrorCode)(error) });
         })
             .then(() => setIsSubmitting(false));
-    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, event, group, addressing, audience, medias, poll, location, hasPoll]);
+    }, [
+        scUserContext.user,
+        feedObjectType,
+        id,
+        type,
+        title,
+        html,
+        categories,
+        event,
+        group,
+        addressing,
+        audience,
+        medias,
+        poll,
+        location,
+        scheduled_at,
+        hasPoll
+    ]);
     //edited here
     const handleClose = (0, react_1.useCallback)((e, reason) => {
         if (unloadRef.current) {
@@ -560,11 +623,11 @@ function Composer(inProps) {
         }
         switch (type) {
             case Composer_1.COMPOSER_TYPE_POLL:
-                return ((0, jsx_runtime_1.jsx)(ContentPoll_1.default, { onChange: handleChangePoll, value: { html, event, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }, key));
+                return ((0, jsx_runtime_1.jsx)(ContentPoll_1.default, { onChange: handleChangePoll, value: { html, event, group, addressing, medias, poll, location, scheduled_at }, error: { pollError, categoriesError, addressingError }, disabled: isSubmitting }, key));
             case types_1.SCContributionType.DISCUSSION:
-                return ((0, jsx_runtime_1.jsx)(ContentDiscussion_1.default, { value: { title, html, categories, event, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, isContentSwitchButtonVisible: !canSubmit && !editMode, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
+                return ((0, jsx_runtime_1.jsx)(ContentDiscussion_1.default, { value: { title, html, categories, event, group, addressing, medias, poll, location, scheduled_at }, error: { titleError, categoriesError, addressingError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, isContentSwitchButtonVisible: !canSubmit && !editMode, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
             default:
-                return ((0, jsx_runtime_1.jsx)(ContentPost_1.default, { value: { html, categories, event, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
+                return ((0, jsx_runtime_1.jsx)(ContentPost_1.default, { value: { html, categories, event, group, addressing, medias, poll, location, scheduled_at }, error: { error, categoriesError, addressingError }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
         }
     }, [
         key,
@@ -579,6 +642,7 @@ function Composer(inProps) {
         poll,
         pollError,
         location,
+        scheduled_at,
         error,
         handleChangePoll,
         handleChangePost,
@@ -589,7 +653,7 @@ function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, slots: { backdrop: BackdropScrollDisabled_1.default }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [(0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClosePrompt }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Attributes_1.default, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, slots: { backdrop: BackdropScrollDisabled_1.default }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [(0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClosePrompt }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: scheduledPostsEnabled && !scheduled_at ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.submit.now", defaultMessage: "ui.composer.submit.now" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Attributes_1.default, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
                                     if (mediaObjectType.previewComponent) {
                                         return (0, jsx_runtime_1.jsx)(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
                                     }
@@ -601,6 +665,6 @@ function Composer(inProps) {
                                 .map((mediaObjectType) => {
                                 const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
                                 return ((0, jsx_runtime_1.jsx)(mediaObjectType.triggerButton, Object.assign({ disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props), mediaObjectType.name));
-                            }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddCategoryLayer }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "category" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isSubmitting || !features.includes(types_1.SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.event), onClick: handleAddAudienceLayer }, { children: (!group && addressing === null) || (!event && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "public" })) : group ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" })) : event ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "label" })) })), preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })))] }))] })), layer && ((0, jsx_runtime_1.jsx)(LayerTransitionRoot, Object.assign({ className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" }, { children: (0, jsx_runtime_1.jsx)(layer.Component, Object.assign({}, layer.ComponentProps)) })))] })));
+                            }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddCategoryLayer, color: (categories === null || categories === void 0 ? void 0 : categories.length) !== 0 ? 'primary' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "category" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: group || event || (addressing !== null && (addressing === null || addressing === void 0 ? void 0 : addressing.length) > 0) ? 'primary' : 'default', disabled: isSubmitting || !features.includes(types_1.SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.event), onClick: handleAddAudienceLayer }, { children: group ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" })) : event ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" })) : addressing === null || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? (addressingRequiredEnabled ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" })) })), preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isSubmitting || (Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.scheduled_at) && Boolean(!(feedObject === null || feedObject === void 0 ? void 0 : feedObject.draft))), onClick: handleAddScheduledLayer, color: scheduled_at !== null ? 'primary' : 'default' }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.selectedAction }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }), scheduled_at !== null && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "primary", className: classes.actionSelectedIcon }, { children: "fiber_manual_record" })))] })) })))] }))] })), layer && ((0, jsx_runtime_1.jsx)(LayerTransitionRoot, Object.assign({ className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" }, { children: (0, jsx_runtime_1.jsx)(layer.Component, Object.assign({}, layer.ComponentProps)) })))] })));
 }
 exports.default = Composer;

package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const react_intl_1 = require("react-intl");
@@ -19,7 +18,7 @@ const classes = {
     medias: `${constants_1.PREFIX}-content-discussion-medias`,
     editor: `${constants_1.PREFIX}-content-discussion-editor`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentDiscussionRoot'
 })(({ theme }) => ({}));
@@ -38,7 +37,7 @@ const DEFAULT_DISCUSSION = {
 exports.default = (props) => {
     // PROPS
     const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), defaultInitialMaxHeightContentEditor = constants_1.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR, defaultExtraSpaceContentEditor = constants_1.DEFAULT_EXTRA_SPACE_CONTENT_EDITOR, isContentSwitchButtonVisible = true, error = {}, disabled = false, onChange, EditorProps = {} } = props;
-    const { titleError = null, error: generalError = null } = Object.assign({}, error);
+    const { titleError = null, categoriesError = null, addressingError = null, error: generalError = null } = Object.assign({}, error);
     const titleRef = (0, react_1.useRef)(null);
     const [editorMaxHeight, setEditorMaxHeight] = (0, react_1.useState)(defaultInitialMaxHeightContentEditor + (isContentSwitchButtonVisible ? 0 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE));
     // HOOKS
@@ -84,5 +83,5 @@ exports.default = (props) => {
                     defaultMessage: 'ui.composer.content.discussion.title.label'
                 }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {
                     endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
-                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { [`& .${constants_2.PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
+                }, error: Boolean(titleError) || Boolean(categoriesError) || Boolean(addressingError), helperText: titleError || categoriesError || addressingError, disabled: disabled }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { [`& .${constants_2.PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
 };

package/lib/cjs/components/Composer/Content/ContentLesson/ContentLesson.d.ts

@@ -0,0 +1,38 @@
+import { BoxProps } from '@mui/material';
+import { EditorProps } from '../../../Editor';
+import { SCMediaType } from '@selfcommunity/types';
+export interface ContentLessonProps extends Omit<BoxProps, 'value' | 'onChange'> {
+    /**
+     * Value of the component
+     */
+    value?: any;
+    /**
+     * Widgets to insert into the feed
+     * @default empty array
+     */
+    error?: any;
+    /**
+     * All the inputs should be disabled?
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback for change html
+     * @param value
+     * @default empty object
+     */
+    onChange: (html: string) => void;
+    /**
+     * Callback for media change
+     * @param media
+     * @default null
+     */
+    onMediaChange: (medias: SCMediaType[]) => void;
+    /**
+     * Props to spread into the editor object
+     * @default empty object
+     */
+    EditorProps?: EditorProps;
+}
+declare const _default: (props: ContentLessonProps) => JSX.Element;
+export default _default;

package/lib/cjs/components/Composer/Content/ContentLesson/ContentLesson.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
+const react_intl_1 = require("react-intl");
+const constants_1 = require("../../constants");
+const Media_1 = require("../../../../shared/Media");
+const UrlTextField_1 = tslib_1.__importDefault(require("../../../../shared/Media/Link/UrlTextField"));
+const classes = {
+    root: `${constants_1.PREFIX}-content-lesson-root`,
+    generalError: `${constants_1.PREFIX}-general-error`,
+    title: `${constants_1.PREFIX}-content-lesson-title`,
+    medias: `${constants_1.PREFIX}-content-lesson-medias`,
+    editor: `${constants_1.PREFIX}-content-lesson-editor`,
+    link: `${constants_1.PREFIX}-content-lesson-link`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'ContentLessonRoot'
+})(({ theme }) => ({}));
+exports.default = (props) => {
+    // PROPS
+    const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
+    const { error: generalError = null } = Object.assign({}, error);
+    const mediaObjectTypes = [Media_1.File, Media_1.Link];
+    const [medias, setMedias] = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.medias) || []);
+    const [openLink, setOpenLink] = (0, react_1.useState)();
+    const linkInputRef = (0, react_1.useRef)(null);
+    // HANDLERS
+    const handleChangeHtml = (0, react_1.useCallback)((html) => {
+        onChange(html);
+    }, [value]);
+    const handleChangeMedias = (0, react_1.useCallback)((value) => {
+        setMedias([...value]);
+        onMediaChange([...value]);
+    }, []);
+    const handleChangeMedia = (value) => {
+        setMedias((prev) => [...prev, value]);
+        onMediaChange([...medias, value]);
+    };
+    const handleLinkAdd = (0, react_1.useCallback)((media) => {
+        setMedias([...medias, media]);
+        setOpenLink(false);
+    }, [medias]);
+    (0, react_1.useEffect)(() => {
+        if (openLink && linkInputRef.current) {
+            linkInputRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [openLink]);
+    // RENDER
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html, ToolBarProps: {
+                    customLink: (0, jsx_runtime_1.jsx)(Media_1.Link.triggerButton, { color: "default", onClick: () => setOpenLink(true) }, Media_1.Link.name),
+                    uploadImage: false,
+                    uploadFile: true
+                } })), openLink && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { inputRef: linkInputRef, className: classes.link, id: "page", name: "page", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleLinkAdd, InputProps: {
+                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenLink(false) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })))
+                } })), medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return (0, jsx_runtime_1.jsx)(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
+                    }
+                }) })))] })));
+};

package/lib/cjs/components/Composer/Content/ContentLesson/index.d.ts

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

package/lib/cjs/components/Composer/Content/ContentLesson/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const ContentLesson_1 = tslib_1.__importDefault(require("./ContentLesson"));
+exports.default = ContentLesson_1.default;

package/lib/cjs/components/Composer/Content/ContentPoll/ContentPoll.js

@@ -4,11 +4,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_sortablejs_1 = require("react-sortablejs");
-const InputAdornment_1 = tslib_1.__importDefault(require("@mui/material/InputAdornment"));
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
 const Composer_1 = require("../../../../constants/Composer");
@@ -30,7 +27,7 @@ const classes = {
     choiceNew: `${constants_1.PREFIX}-content-poll-choice-new`,
     metadata: `${constants_1.PREFIX}-content-poll-metadata`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentPollRoot'
 })(({ theme }) => ({}));
@@ -61,9 +58,9 @@ exports.default = (inProps) => {
         name: constants_1.PREFIX
     });
     const { className = null, value = { poll: Object.assign({}, DEFAULT_POLL) }, error = {}, disabled, onChange } = props;
-    const { titleError = null, error: generalError = null } = Object.assign({}, error);
+    const { titleError = null, categoriesError = null, addressingError = null, error: generalError = null } = Object.assign({}, error);
     // MEMO
-    const poll = (0, react_1.useMemo)(() => value.poll ? value.poll : Object.assign({}, DEFAULT_POLL), [value, DEFAULT_POLL]);
+    const poll = (0, react_1.useMemo)(() => (value.poll ? value.poll : Object.assign({}, DEFAULT_POLL)), [value, DEFAULT_POLL]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // HANDLERS
@@ -102,10 +99,10 @@ exports.default = (inProps) => {
         minDate.setDate(minDate.getDate() + Composer_1.COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
         return minDate;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(generalError || categoriesError || addressingError) && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: [generalError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })), categoriesError && categoriesError, (0, jsx_runtime_1.jsx)("br", {}), addressingError && addressingError] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
                         endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
                     } }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choices }, { children: (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
-                            startAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "drag" }) }))),
-                            endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) }) })) })))
-                        } }, index))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choiceNew }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.metadata }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? (0, date_fns_1.parseISO)(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
+                            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "drag" }) }))),
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) })) }) })) })))
+                        } }, index))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choiceNew }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.metadata }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? (0, date_fns_1.parseISO)(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
 };

package/lib/cjs/components/Composer/Content/ContentPost/ContentPost.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const constants_1 = require("../../constants");
@@ -15,7 +14,7 @@ const classes = {
     medias: `${constants_1.PREFIX}-content-post-medias`,
     editor: `${constants_1.PREFIX}-content-post-editor`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentPostRoot'
 })(({ theme }) => ({}));
@@ -33,7 +32,7 @@ const DEFAULT_POST = {
 exports.default = (props) => {
     // PROPS
     const { className = null, value = Object.assign({}, DEFAULT_POST), error = {}, disabled = false, onChange, EditorProps = {} } = props;
-    const { error: generalError = null } = Object.assign({}, error);
+    const { categoriesError = null, addressingError = null, error: generalError = null } = Object.assign({}, error);
     // REF
     const editorRef = (0, react_1.useRef)();
     // EFFECTS
@@ -45,5 +44,5 @@ exports.default = (props) => {
         onChange(Object.assign(Object.assign({}, value), { html }));
     }, [value]);
     // RENDER
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(generalError || categoriesError || addressingError) && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: [generalError && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }), categoriesError && categoriesError, (0, jsx_runtime_1.jsx)("br", {}), addressingError && addressingError] }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
 };

package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
-import { BoxProps } from '@mui/material';
-import { SCTagType } from '@selfcommunity/types/src/index';
+import { BoxProps, TextFieldProps } from '@mui/material';
+import { SCTagType } from '@selfcommunity/types';
 import { ComposerLayerProps } from '../../../../types/composer';
 import { SCGroupType } from '@selfcommunity/types';
 export declare enum AudienceTypes {