@selfcommunity/react-ui 0.11.0-alpha.11 → 0.11.0-alpha.111

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 }) => ({}));
@@ -33,12 +32,13 @@ const DEFAULT_DISCUSSION = {
     event: null,
     medias: [],
     html: '',
-    addressing: []
+    addressing: [],
+    recipients: []
 };
 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
@@ -79,7 +79,7 @@ exports.default = (props) => {
         computeEditorContentHeight();
     }, [value, isContentSwitchButtonVisible, computeEditorContentHeight, isMobile]);
     // 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)(material_1.TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
+    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)(material_1.TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
                     id: 'ui.composer.content.discussion.title.label',
                     defaultMessage: 'ui.composer.content.discussion.title.label'
                 }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {

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 }) => ({}));
@@ -27,13 +26,14 @@ const DEFAULT_POST = {
     medias: [],
     html: '',
     addressing: [],
+    recipients: [],
     event: null,
     group: null
 };
 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 +45,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,14 +1,14 @@
 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 {
     AUDIENCE_ALL = "all",
     AUDIENCE_TAG = "tag",
     AUDIENCE_GROUP = "group",
-    AUDIENCE_EVENT = "event"
+    AUDIENCE_EVENT = "event",
+    AUDIENCE_USERS = "users"
 }
 export interface AudienceLayerProps extends Omit<BoxProps, 'defaultValue'>, ComposerLayerProps {
     defaultValue: SCTagType[] | SCGroupType | any;

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

@@ -5,26 +5,24 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
 const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
 const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const TagChip_1 = tslib_1.__importDefault(require("../../../../shared/TagChip"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const react_core_1 = require("@selfcommunity/react-core");
 const constants_1 = require("../../constants");
 const GroupAutocomplete_1 = tslib_1.__importDefault(require("../../../GroupAutocomplete"));
 const types_1 = require("@selfcommunity/types");
 const EventAutocomplete_1 = tslib_1.__importDefault(require("../../../EventAutocomplete"));
+const UserAutocomplete_1 = tslib_1.__importDefault(require("../../../UserAutocomplete"));
 var AudienceTypes;
 (function (AudienceTypes) {
     AudienceTypes["AUDIENCE_ALL"] = "all";
     AudienceTypes["AUDIENCE_TAG"] = "tag";
     AudienceTypes["AUDIENCE_GROUP"] = "group";
     AudienceTypes["AUDIENCE_EVENT"] = "event";
+    AudienceTypes["AUDIENCE_USERS"] = "users";
 })(AudienceTypes = exports.AudienceTypes || (exports.AudienceTypes = {}));
 const classes = {
     root: `${constants_1.PREFIX}-layer-audience-root`,
@@ -33,28 +31,19 @@ const classes = {
     message: `${constants_1.PREFIX}-layer-audience-message`,
     autocomplete: `${constants_1.PREFIX}-layer-audience-autocomplete`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerAudienceRoot'
 })(() => ({}));
 const AudienceLayer = react_1.default.forwardRef((props, ref) => {
+    var _a;
     // Props
-    const { className, onClose, onSave, defaultValue = AudienceTypes.AUDIENCE_TAG ? [] : null, TextFieldProps = {
+    const { className, onClose, onSave, defaultValue = AudienceTypes.AUDIENCE_TAG || AudienceTypes.AUDIENCE_USERS ? [] : null, TextFieldProps = {
         variant: 'outlined',
         label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.label", defaultMessage: "ui.composer.layer.audience.tags.label" })
     } } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue", "TextFieldProps"]);
     // STATE
     const [autocompleteOpen, setAutocompleteOpen] = (0, react_1.useState)(false);
-    const [audience, setAudience] = (0, react_1.useState)(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    defaultValue === null || defaultValue.length === 0
-        ? AudienceTypes.AUDIENCE_ALL
-        : defaultValue && Object.prototype.hasOwnProperty.call(defaultValue, 'recurring')
-            ? AudienceTypes.AUDIENCE_EVENT
-            : defaultValue && Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
-                ? AudienceTypes.AUDIENCE_GROUP
-                : AudienceTypes.AUDIENCE_TAG);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const [value, setValue] = (0, react_1.useState)(defaultValue || undefined);
@@ -73,30 +62,78 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
         features.includes(types_1.SCFeatureName.TAGGING) &&
         react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const usersTaggingEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_POST_USER_ADDRESSING_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_USER_ADDRESSING_ENABLED].value, [preferences, features]);
+    const taggingRequiredEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_POST_ADDRESSING_REQUIRED_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ADDRESSING_REQUIRED_ENABLED].value, [preferences, features]);
+    const [audience, setAudience] = (0, react_1.useState)(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    defaultValue === null || defaultValue.length === 0
+        ? taggingRequiredEnabled
+            ? AudienceTypes.AUDIENCE_TAG
+            : AudienceTypes.AUDIENCE_ALL
+        : Object.prototype.hasOwnProperty.call(defaultValue, 'recurring')
+            ? AudienceTypes.AUDIENCE_EVENT
+            : Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
+                ? AudienceTypes.AUDIENCE_GROUP
+                : Array.isArray(defaultValue) && defaultValue.length > 0 && ((_a = defaultValue[0]) === null || _a === void 0 ? void 0 : _a.username) !== undefined
+                    ? AudienceTypes.AUDIENCE_USERS
+                    : AudienceTypes.AUDIENCE_TAG);
     // HANDLERS
     const handleSave = (0, react_1.useCallback)(() => {
-        audience === AudienceTypes.AUDIENCE_GROUP || audience === AudienceTypes.AUDIENCE_EVENT
-            ? onSave(value)
-            : onSave((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) > 0 ? value : null);
-    }, [value, onSave, audience]);
-    const handleChange = (0, react_1.useCallback)((event, tags) => setValue(tags), []);
+        if (audience === AudienceTypes.AUDIENCE_GROUP || audience === AudienceTypes.AUDIENCE_EVENT) {
+            onSave(value);
+        }
+        else {
+            onSave((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) > 0 ? value : null);
+        }
+    }, [audience, value, onSave]);
+    const handleChange = (0, react_1.useCallback)((_event, tags) => setValue(tags), []);
     const handleEventChange = (0, react_1.useCallback)((event) => setValue(event), []);
     const handleGroupChange = (0, react_1.useCallback)((group) => setValue(group), []);
-    const handleChangeAudience = (0, react_1.useCallback)((event, data) => setAudience(data), []);
+    const handleUsersChange = (0, react_1.useCallback)((users) => setValue(users), []);
+    const handleChangeAudience = (0, react_1.useCallback)((_event, data) => setAudience(data), []);
     const handleAutocompleteOpen = (0, react_1.useCallback)(() => setAutocompleteOpen(true), []);
     const handleAutocompleteClose = (0, react_1.useCallback)(() => setAutocompleteOpen(false), []);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "public" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) }), eventsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'recurring')) ||
-                                    (value !== undefined && Boolean(!(value === null || value === void 0 ? void 0 : value.length)) && audience !== AudienceTypes.AUDIENCE_ALL) ||
-                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_EVENT, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'managed_by')) ||
-                                    (value !== undefined && Boolean(!(value === null || value === void 0 ? void 0 : value.length)) && audience !== AudienceTypes.AUDIENCE_ALL) ||
-                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_GROUP, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), (0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "label" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.audience.layer.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.audience.layer.tag.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, open: autocompleteOpen, onOpen: handleAutocompleteOpen, onClose: handleAutocompleteClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
+    const isAudienceTypeSelected = (type) => {
+        // "ALL" tab is never disabled
+        if (type === AudienceTypes.AUDIENCE_ALL)
+            return false;
+        // Empty value → nothing is disabled
+        if (!value || (Array.isArray(value) && value.length === 0))
+            return false;
+        const valueType = (() => {
+            if (Array.isArray(value)) {
+                if (value.some((v) => 'color' in v))
+                    return AudienceTypes.AUDIENCE_TAG;
+                return AudienceTypes.AUDIENCE_USERS;
+            }
+            else {
+                if ('recurring' in value)
+                    return AudienceTypes.AUDIENCE_EVENT;
+                if ('managed_by' in value)
+                    return AudienceTypes.AUDIENCE_GROUP;
+                return AudienceTypes.AUDIENCE_USERS;
+            }
+        })();
+        // Disable all tabs except the currently selected type
+        return type !== valueType;
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [!taggingRequiredEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) })), eventsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_EVENT), value: AudienceTypes.AUDIENCE_EVENT, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_GROUP), value: AudienceTypes.AUDIENCE_GROUP, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), (0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_TAG), value: AudienceTypes.AUDIENCE_TAG, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) }), usersTaggingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_USERS), value: AudienceTypes.AUDIENCE_USERS, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.users", defaultMessage: "ui.composer.layer.audience.users" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && !taggingRequiredEnabled && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.layer.audience.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.layer.audience.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.layer.audience.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.layer.audience.tag.message" })), audience === AudienceTypes.AUDIENCE_USERS && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.users.message", defaultMessage: "ui.composer.layer.audience.users.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, open: autocompleteOpen, onOpen: handleAutocompleteOpen, onClose: handleAutocompleteClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
                             return value.map((option, index) => (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option }, getTagProps({ index })), option.id));
                         }, renderOption: (props, option, { selected, inputValue }) => {
                             const matches = (0, match_1.default)(option.name, inputValue);
                             const parts = (0, parse_1.default)(option.name, matches);
-                            return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, option.id) })));
+                            return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, { disposable: false, tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, option.id) })));
                         }, renderInput: (params) => {
-                            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: params.InputProps.endAdornment }) }) })));
-                        } })), audience === AudienceTypes.AUDIENCE_GROUP && (0, jsx_runtime_1.jsx)(GroupAutocomplete_1.default, { onChange: handleGroupChange, defaultValue: defaultValue }), audience === AudienceTypes.AUDIENCE_EVENT && (0, jsx_runtime_1.jsx)(EventAutocomplete_1.default, { onChange: handleEventChange, defaultValue: defaultValue })] }))] })));
+                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: params.InputProps.endAdornment }) }) })));
+                        } })), audience === AudienceTypes.AUDIENCE_USERS && (0, jsx_runtime_1.jsx)(UserAutocomplete_1.default, { onChange: handleUsersChange, defaultValue: value }), audience === AudienceTypes.AUDIENCE_GROUP && (0, jsx_runtime_1.jsx)(GroupAutocomplete_1.default, { onChange: handleGroupChange, defaultValue: value }), audience === AudienceTypes.AUDIENCE_EVENT && (0, jsx_runtime_1.jsx)(EventAutocomplete_1.default, { onChange: handleEventChange, defaultValue: value })] }))] })));
 });
 exports.default = AudienceLayer;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@mui/material';
-import { SCCategoryType } from '@selfcommunity/types/src/index';
+import { SCCategoryType } from '@selfcommunity/types';
 import { ComposerLayerProps } from '../../../../types/composer';
 export interface CategoryLayerProps extends Omit<BoxProps, 'defaultValue'>, ComposerLayerProps {
     defaultValue: SCCategoryType[];

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

@@ -5,10 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const react_core_1 = require("@selfcommunity/react-core");
 const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../../../CategoryAutocomplete"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const classes = {
@@ -16,7 +14,7 @@ const classes = {
     title: `${constants_1.PREFIX}-layer-title`,
     content: `${constants_1.PREFIX}-layer-content`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerCategoryRoot'
 })(() => ({}));
@@ -25,9 +23,11 @@ const CategoryLayer = react_1.default.forwardRef((props, ref) => {
     const { className, onClose, onSave, defaultValue = [] } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue"]);
     // STATE
     const [value, setValue] = (0, react_1.useState)(defaultValue);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
     // HANDLERS
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
     const handleChange = (0, react_1.useCallback)((categories) => setValue(categories), []);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { multiple: true, onChange: handleChange, defaultValue: defaultValue }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, Object.assign({ multiple: true, onChange: handleChange, defaultValue: defaultValue }, (!react_core_1.UserUtils.isStaff(scUserContext.user) && { endpointQueryParams: { can_create_content: true } }))) }))] })));
 });
 exports.default = CategoryLayer;

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

@@ -5,9 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const classes = {
@@ -15,13 +12,13 @@ const classes = {
     title: `${constants_1.PREFIX}-layer-title`,
     content: `${constants_1.PREFIX}-layer-content`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerCloseRoot'
 })(() => ({}));
 const CloseLayer = react_1.default.forwardRef((props, ref) => {
     // Props
     const { className, onClose, onSave, defaultValue = [] } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue"]);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }) })] })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" }) }), (0, jsx_runtime_1.jsxs)(material_1.List, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }) })) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onSave }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }) })) })] })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" }) }), (0, jsx_runtime_1.jsxs)(material_1.List, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }) })) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onSave }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }) })) })] })] }))] })));
 });
 exports.default = CloseLayer;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@mui/material';
-import { SCContributionLocation } from '@selfcommunity/types/src/index';
+import { SCContributionLocation } from '@selfcommunity/types';
 import { ComposerLayerProps } from '../../../../types/composer';
 export interface LocationLayerProps extends Omit<BoxProps, 'defaultValue'>, Omit<ComposerLayerProps, 'defaultValue'> {
     defaultValue: SCContributionLocation;

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

@@ -5,10 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const LocationAutocomplete_1 = tslib_1.__importDefault(require("../../../LocationAutocomplete"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const classes = {
@@ -16,7 +13,7 @@ const classes = {
     title: `${constants_1.PREFIX}-layer-title`,
     content: `${constants_1.PREFIX}-layer-content`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerLocationRoot'
 })(() => ({}));
@@ -28,6 +25,6 @@ const LocationLayer = react_1.default.forwardRef((props, ref) => {
     // HANDLERS
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
     const handleChange = (0, react_1.useCallback)((location) => setValue(location), []);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { 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: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' }) }))] })));
 });
 exports.default = LocationLayer;