@selfcommunity/react-ui 0.11.0-alpha.83 → 0.11.0-alpha.85

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

@@ -15,7 +15,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
     slot: 'AttributesRoot'
 })(() => ({}));
 exports.default = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     // PROPS
     const { className = null, value = null, onChange = null, onClick = null } = props;
     // HANDLERS
@@ -49,13 +49,16 @@ exports.default = (props) => {
     const handleClickLocation = (0, react_1.useCallback)(() => {
         onClick && onClick('location');
     }, [onClick]);
-    const handleDeleteRecipient = (0, react_1.useCallback)((id) => () => {
-        onChange && onChange(Object.assign(Object.assign({}, value), { recipients: value.recipients.filter((r) => r.id !== id) }));
+    const handleDeleteRecipient = (0, react_1.useCallback)((identifier) => () => {
+        if (!(value === null || value === void 0 ? void 0 : value.recipients))
+            return;
+        onChange &&
+            onChange(Object.assign(Object.assign({}, value), { recipients: value.recipients.filter((r) => typeof r === 'object' ? r.id !== identifier : r !== identifier) }));
     }, [value, onChange]);
     const handleClickRecipient = (0, react_1.useCallback)(() => {
         onClick && onClick('recipients');
     }, [onClick]);
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                 (value === null || value === void 0 ? void 0 : value.categories.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) }, value === null || value === void 0 ? void 0 : value.group.id)), (value === null || value === void 0 ? void 0 : value.event) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), onClick: handleClickEvent, disabled: !((_c = value === null || value === void 0 ? void 0 : value.event) === null || _c === void 0 ? void 0 : _c.subscription_status) }, value === null || value === void 0 ? void 0 : value.event.id)), ((_d = value === null || value === void 0 ? void 0 : value.addressing) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, onDelete: handleDeleteTag(t.id), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (value === null || value === void 0 ? void 0 : value.recipients.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value.recipients.slice(0, 3).map((r) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: r.username, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), onClick: handleClickRecipient, onDelete: handleDeleteRecipient(r.id) }, r.id))), value.recipients.length > 3 && (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `+${value.recipients.length - 3}` })] })) }), (value === null || value === void 0 ? void 0 : value.location) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
+                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, onDelete: handleDeleteTag(t.id), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_e = value === null || value === void 0 ? void 0 : value.recipients) === null || _e === void 0 ? void 0 : _e.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value.recipients.slice(0, 3).map((r) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: typeof r === 'object' ? r.username : r, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), onClick: handleClickRecipient, onDelete: handleDeleteRecipient(typeof r === 'object' ? r.id : r) }, typeof r === 'object' ? r.id : r))), value.recipients.length > 3 && (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `+${value.recipients.length - 3}` })] })) }), (value === null || value === void 0 ? void 0 : value.location) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
 };

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

@@ -159,6 +159,11 @@ function Composer(inProps) {
     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 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 destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === types_1.SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -319,27 +324,31 @@ function Composer(inProps) {
     const handleChangeType = (0, react_1.useCallback)((value) => {
         dispatch({ type: 'type', value });
     }, []);
+    const getAddressingError = (content) => {
+        var _a, _b;
+        const isMissing = addressingRequiredEnabled && !((_a = content.addressing) === null || _a === void 0 ? void 0 : _a.length) && !((_b = content.recipients) === null || _b === void 0 ? void 0 : _b.length);
+        if (!isMissing)
+            return null;
+        return usersTaggingEnabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressingRecipients.error.missing", defaultMessage: "ui.composer.addressingRecipients.error.missing" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" }));
+    };
     const handleChangePoll = (0, react_1.useCallback)((content) => {
         dispatch({
             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, addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.length === 0) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null })
+                    : null, addressingError: getAddressingError(content) })
         });
     }, []);
     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, addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.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 })
+            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: getAddressingError(content), 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(Object.assign({}, content), { addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.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 })
+            value: Object.assign(Object.assign({}, content), { addressingError: getAddressingError(content), 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) => {
@@ -368,7 +377,8 @@ function Composer(inProps) {
         else if (event || (value && Object.prototype.hasOwnProperty.call(value, 'recurring'))) {
             dispatch({ type: 'event', value });
         }
-        else if ((recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 || (value && Array.isArray(value) && value.some((obj) => !('color' in obj)))) {
+        else if ((recipients === null || recipients === void 0 ? void 0 : recipients.length) > 0 ||
+            (Array.isArray(value) && value.some((item) => typeof item === 'object' && item !== null && !('color' in item)))) {
             dispatch({
                 type: 'multiple',
                 value: {
@@ -399,7 +409,7 @@ function Composer(inProps) {
                     ? group
                     : event || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'recurring'))
                         ? event
-                        : (recipients === null || recipients === void 0 ? void 0 : recipients.length) && !recipients.some((r) => 'color' in r)
+                        : (recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 || ((recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 && !recipients.some((r) => 'color' in r))
                             ? recipients
                             : addressing
             }
@@ -464,8 +474,7 @@ function Composer(inProps) {
     const handleChangeAttributes = (0, react_1.useCallback)((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.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 })
+            value: Object.assign(Object.assign({}, content), { addressingError: getAddressingError(content), 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) => {
@@ -476,6 +485,9 @@ function Composer(inProps) {
             case 'addressing':
                 handleAddAudienceLayer();
                 break;
+            case 'recipients':
+                handleAddAudienceLayer();
+                break;
             case 'location':
                 handleAddLocationLayer();
                 break;

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

@@ -83,7 +83,12 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
             ? AudienceTypes.AUDIENCE_EVENT
             : Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
                 ? AudienceTypes.AUDIENCE_GROUP
-                : Array.isArray(defaultValue) && defaultValue.length && ((_a = defaultValue[0]) === null || _a === void 0 ? void 0 : _a.username)
+                : Array.isArray(defaultValue) &&
+                    defaultValue.length > 0 &&
+                    // case: array of user objects
+                    (((_a = defaultValue[0]) === null || _a === void 0 ? void 0 : _a.username) !== undefined ||
+                        // case: array of strings
+                        typeof defaultValue[0] === 'string')
                     ? AudienceTypes.AUDIENCE_USERS
                     : AudienceTypes.AUDIENCE_TAG);
     // HANDLERS
@@ -107,11 +112,19 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
                                     (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)(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: (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)(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: value &&
-                                    ((Array.isArray(value) && value.some((v) => v === null || v === void 0 ? void 0 : v.username)) ||
-                                        (!Array.isArray(value) && Object.prototype.hasOwnProperty.call(value, 'managed_by'))), 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: value &&
-                                    ((Array.isArray(value) && value.length && !value.some((v) => v === null || v === void 0 ? void 0 : v.username)) ||
-                                        (!Array.isArray(value) && Object.keys(value).length && Object.prototype.hasOwnProperty.call(value, 'managed_by')) ||
-                                        (!Array.isArray(value) && Object.keys(value).length && Object.prototype.hasOwnProperty.call(value, 'recurring'))), 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) => {
+                                    ((Array.isArray(value) &&
+                                        (value.some((v) => v === null || v === void 0 ? void 0 : v.username) || // user tagging
+                                            value.some((v) => typeof v === 'string'))) ||
+                                        (!Array.isArray(value) && Object.prototype.hasOwnProperty.call(value, 'managed_by'))) // group object
+                                , 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: value &&
+                                    ((Array.isArray(value) &&
+                                        value.length > 0 &&
+                                        // disable only if NOT user objects and NOT strings
+                                        !value.some((v) => v === null || v === void 0 ? void 0 : v.username) &&
+                                        !value.every((v) => typeof v === 'string')) ||
+                                        (!Array.isArray(value) &&
+                                            Object.keys(value).length > 0 &&
+                                            (Object.prototype.hasOwnProperty.call(value, 'managed_by') || Object.prototype.hasOwnProperty.call(value, 'recurring')))), 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);

package/lib/cjs/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -24,9 +24,9 @@ const Root = (0, material_1.styled)(BaseDialog_1.default, {
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
+};
 function PdfPreviewDialog(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({

package/lib/cjs/components/UserAutocomplete/UserAutocomplete.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const react_intl_1 = require("react-intl");
 const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
 const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
@@ -36,27 +36,42 @@ const UserAutocomplete = (inProps) => {
     } } = props, rest = tslib_1.__rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
     // State
     const [open, setOpen] = (0, react_1.useState)(false);
-    // const [value, setValue] = useState<string | SCUserAutocompleteType | (string | SCUserAutocompleteType)[]>(
-    //   typeof defaultValue === 'string' ? null : defaultValue
-    // );
-    const [value, setValue] = (0, react_1.useState)(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [usersMap, setUsersMap] = (0, react_1.useState)({});
+    const [value, setValue] = (0, react_1.useState)([]);
     const [textAreaValue, setTextAreaValue] = (0, react_1.useState)('');
     // Fetch users
     const { users, isLoading } = (0, react_core_1.useSCFetchUsers)();
+    // Build map for quick lookup by username
     (0, react_1.useEffect)(() => {
-        if (value === null) {
+        const map = {};
+        users === null || users === void 0 ? void 0 : users.forEach((u) => {
+            map[u.username] = u;
+        });
+        setUsersMap(map);
+    }, [users]);
+    // Initialize value from defaultValue (string or object)
+    (0, react_1.useEffect)(() => {
+        if (!defaultValue)
             return;
-        }
+        const initial = (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
+            if (typeof v === 'string') {
+                // Use fetched user if available, otherwise fallback object
+                return usersMap[v] || { id: `fallback-${v}`, username: v, avatar: '' };
+            }
+            return v;
+        });
+        setValue(initial);
+        setTextAreaValue(initial.map((u) => u.username).join('\n'));
+    }, [defaultValue, usersMap]);
+    // Trigger onChange and sync textarea
+    (0, react_1.useEffect)(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         setTextAreaValue(value.map((u) => u.username).join('\n'));
     }, [value]);
     // Handlers
-    const handleOpen = () => {
-        setOpen(true);
-    };
-    const handleClose = () => {
-        setOpen(false);
-    };
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
     const handleChange = (_event, newValue) => {
         setValue(newValue);
     };
@@ -65,14 +80,13 @@ const UserAutocomplete = (inProps) => {
             .split(/\s|,|\n/)
             .map((s) => s.trim())
             .filter(Boolean);
-        const matched = users.filter((u) => names.includes(u.username));
+        const matched = names.map((n) => usersMap[n] || { id: `fallback-${n}`, username: n, avatar: '' });
         setValue(matched);
         setTextAreaValue(e.target.value);
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: users || [], getOptionLabel: (option) => option.username || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => val.id === option.id, renderTags: (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({ avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: option.avatar }), label: option.username }, getTagProps({ index })), option.id))), renderOption: (props, option, { inputValue }) => {
-                    const matches = (0, match_1.default)(option.username, inputValue);
-                    const parts = (0, parse_1.default)(option.username, matches);
-                    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: users || [], getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_e, newInput) => setInputValue(newInput), selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => option.id === val.id, renderTags: (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({ avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: option.avatar }), label: option.username }, getTagProps({ index })), option.id))), renderOption: (props, option, { inputValue }) => {
+                    const parts = (0, parse_1.default)(option.username, (0, match_1.default)(option.username, inputValue));
+                    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar, sx: { mr: 1 } }), parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index)))] })));
                 }, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) }))) }, rest)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore

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

@@ -12,7 +12,7 @@ const Root = styled(Box, {
     slot: 'AttributesRoot'
 })(() => ({}));
 export default (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     // PROPS
     const { className = null, value = null, onChange = null, onClick = null } = props;
     // HANDLERS
@@ -46,13 +46,16 @@ export default (props) => {
     const handleClickLocation = useCallback(() => {
         onClick && onClick('location');
     }, [onClick]);
-    const handleDeleteRecipient = useCallback((id) => () => {
-        onChange && onChange(Object.assign(Object.assign({}, value), { recipients: value.recipients.filter((r) => r.id !== id) }));
+    const handleDeleteRecipient = useCallback((identifier) => () => {
+        if (!(value === null || value === void 0 ? void 0 : value.recipients))
+            return;
+        onChange &&
+            onChange(Object.assign(Object.assign({}, value), { recipients: value.recipients.filter((r) => typeof r === 'object' ? r.id !== identifier : r !== identifier) }));
     }, [value, onChange]);
     const handleClickRecipient = useCallback(() => {
         onClick && onClick('recipients');
     }, [onClick]);
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                 (value === null || value === void 0 ? void 0 : value.categories.map((c) => (_jsx(Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: _jsx(Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: _jsx(Icon, { children: "groups" }), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) }, value === null || value === void 0 ? void 0 : value.group.id)), (value === null || value === void 0 ? void 0 : value.event) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: _jsx(Icon, { children: "CalendarIcon" }), onClick: handleClickEvent, disabled: !((_c = value === null || value === void 0 ? void 0 : value.event) === null || _c === void 0 ? void 0 : _c.subscription_status) }, value === null || value === void 0 ? void 0 : value.event.id)), ((_d = value === null || value === void 0 ? void 0 : value.addressing) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), _jsx(_Fragment, { children: (value === null || value === void 0 ? void 0 : value.recipients.length) > 0 && (_jsxs(_Fragment, { children: [value.recipients.slice(0, 3).map((r) => (_jsx(Chip, { label: r.username, icon: _jsx(Icon, { children: "people_alt" }), onClick: handleClickRecipient, onDelete: handleDeleteRecipient(r.id) }, r.id))), value.recipients.length > 3 && _jsx(Chip, { label: `+${value.recipients.length - 3}` })] })) }), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
+                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), _jsx(_Fragment, { children: ((_e = value === null || value === void 0 ? void 0 : value.recipients) === null || _e === void 0 ? void 0 : _e.length) > 0 && (_jsxs(_Fragment, { children: [value.recipients.slice(0, 3).map((r) => (_jsx(Chip, { label: typeof r === 'object' ? r.username : r, icon: _jsx(Icon, { children: "people_alt" }), onClick: handleClickRecipient, onDelete: handleDeleteRecipient(typeof r === 'object' ? r.id : r) }, typeof r === 'object' ? r.id : r))), value.recipients.length > 3 && _jsx(Chip, { label: `+${value.recipients.length - 3}` })] })) }), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
 };

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

@@ -157,6 +157,11 @@ export default function Composer(inProps) {
     const categoryRequiredEnabled = useMemo(() => preferences &&
         SCPreferences.CONFIGURATIONS_POST_CATEGORY_REQUIRED_ENABLED in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_POST_CATEGORY_REQUIRED_ENABLED].value, [preferences]);
+    const usersTaggingEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_POST_USER_ADDRESSING_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_POST_USER_ADDRESSING_ENABLED].value, [preferences, features]);
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -317,27 +322,31 @@ export default function Composer(inProps) {
     const handleChangeType = useCallback((value) => {
         dispatch({ type: 'type', value });
     }, []);
+    const getAddressingError = (content) => {
+        var _a, _b;
+        const isMissing = addressingRequiredEnabled && !((_a = content.addressing) === null || _a === void 0 ? void 0 : _a.length) && !((_b = content.recipients) === null || _b === void 0 ? void 0 : _b.length);
+        if (!isMissing)
+            return null;
+        return usersTaggingEnabled ? (_jsx(FormattedMessage, { id: "ui.composer.addressingRecipients.error.missing", defaultMessage: "ui.composer.addressingRecipients.error.missing" })) : (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" }));
+    };
     const handleChangePoll = useCallback((content) => {
         dispatch({
             type: 'multiple',
             value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > COMPOSER_TITLE_MAX_LENGTH
                     ? { titleError: _jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
-                    : null, addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null })
+                    : null, addressingError: getAddressingError(content) })
         });
     }, []);
     const handleChangeDiscussion = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null, addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null, addressingError: getAddressingError(content), categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleChangePost = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
+            value: Object.assign(Object.assign({}, content), { addressingError: getAddressingError(content), categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleChangeCategories = useCallback((value) => {
@@ -366,7 +375,8 @@ export default function Composer(inProps) {
         else if (event || (value && Object.prototype.hasOwnProperty.call(value, 'recurring'))) {
             dispatch({ type: 'event', value });
         }
-        else if ((recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 || (value && Array.isArray(value) && value.some((obj) => !('color' in obj)))) {
+        else if ((recipients === null || recipients === void 0 ? void 0 : recipients.length) > 0 ||
+            (Array.isArray(value) && value.some((item) => typeof item === 'object' && item !== null && !('color' in item)))) {
             dispatch({
                 type: 'multiple',
                 value: {
@@ -397,7 +407,7 @@ export default function Composer(inProps) {
                     ? group
                     : event || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'recurring'))
                         ? event
-                        : (recipients === null || recipients === void 0 ? void 0 : recipients.length) && !recipients.some((r) => 'color' in r)
+                        : (recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 || ((recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 && !recipients.some((r) => 'color' in r))
                             ? recipients
                             : addressing
             }
@@ -462,8 +472,7 @@ export default function Composer(inProps) {
     const handleChangeAttributes = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled &&
-                    (!content.addressing || content.addressing.length === 0 || !content.recipients || content.recipients.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
+            value: Object.assign(Object.assign({}, content), { addressingError: getAddressingError(content), categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleClickAttributes = useCallback((attr) => {
@@ -474,6 +483,9 @@ export default function Composer(inProps) {
             case 'addressing':
                 handleAddAudienceLayer();
                 break;
+            case 'recipients':
+                handleAddAudienceLayer();
+                break;
             case 'location':
                 handleAddLocationLayer();
                 break;

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

@@ -80,7 +80,12 @@ const AudienceLayer = React.forwardRef((props, ref) => {
             ? AudienceTypes.AUDIENCE_EVENT
             : Object.prototype.hasOwnProperty.call(defaultValue, 'managed_by')
                 ? AudienceTypes.AUDIENCE_GROUP
-                : Array.isArray(defaultValue) && defaultValue.length && ((_a = defaultValue[0]) === null || _a === void 0 ? void 0 : _a.username)
+                : Array.isArray(defaultValue) &&
+                    defaultValue.length > 0 &&
+                    // case: array of user objects
+                    (((_a = defaultValue[0]) === null || _a === void 0 ? void 0 : _a.username) !== undefined ||
+                        // case: array of strings
+                        typeof defaultValue[0] === 'string')
                     ? AudienceTypes.AUDIENCE_USERS
                     : AudienceTypes.AUDIENCE_TAG);
     // HANDLERS
@@ -104,11 +109,19 @@ const AudienceLayer = React.forwardRef((props, ref) => {
                                     (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: _jsx(Icon, { children: "CalendarIcon" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && (_jsx(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: _jsx(Icon, { children: "groups" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), _jsx(Tab, { disabled: value &&
-                                    ((Array.isArray(value) && value.some((v) => v === null || v === void 0 ? void 0 : v.username)) ||
-                                        (!Array.isArray(value) && Object.prototype.hasOwnProperty.call(value, 'managed_by'))), value: AudienceTypes.AUDIENCE_TAG, icon: _jsx(Icon, { children: "label" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) }), usersTaggingEnabled && (_jsx(Tab, { disabled: value &&
-                                    ((Array.isArray(value) && value.length && !value.some((v) => v === null || v === void 0 ? void 0 : v.username)) ||
-                                        (!Array.isArray(value) && Object.keys(value).length && Object.prototype.hasOwnProperty.call(value, 'managed_by')) ||
-                                        (!Array.isArray(value) && Object.keys(value).length && Object.prototype.hasOwnProperty.call(value, 'recurring'))), value: AudienceTypes.AUDIENCE_USERS, icon: _jsx(Icon, { children: "people_alt" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.users", defaultMessage: "ui.composer.layer.audience.users" }) }))] })), _jsxs(Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && !taggingRequiredEnabled && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.layer.audience.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.layer.audience.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.layer.audience.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.layer.audience.tag.message" })), audience === AudienceTypes.AUDIENCE_USERS && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.users.message", defaultMessage: "ui.composer.layer.audience.users.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(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: _jsx(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) => {
+                                    ((Array.isArray(value) &&
+                                        (value.some((v) => v === null || v === void 0 ? void 0 : v.username) || // user tagging
+                                            value.some((v) => typeof v === 'string'))) ||
+                                        (!Array.isArray(value) && Object.prototype.hasOwnProperty.call(value, 'managed_by'))) // group object
+                                , value: AudienceTypes.AUDIENCE_TAG, icon: _jsx(Icon, { children: "label" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) }), usersTaggingEnabled && (_jsx(Tab, { disabled: value &&
+                                    ((Array.isArray(value) &&
+                                        value.length > 0 &&
+                                        // disable only if NOT user objects and NOT strings
+                                        !value.some((v) => v === null || v === void 0 ? void 0 : v.username) &&
+                                        !value.every((v) => typeof v === 'string')) ||
+                                        (!Array.isArray(value) &&
+                                            Object.keys(value).length > 0 &&
+                                            (Object.prototype.hasOwnProperty.call(value, 'managed_by') || Object.prototype.hasOwnProperty.call(value, 'recurring')))), value: AudienceTypes.AUDIENCE_USERS, icon: _jsx(Icon, { children: "people_alt" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.users", defaultMessage: "ui.composer.layer.audience.users" }) }))] })), _jsxs(Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && !taggingRequiredEnabled && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.layer.audience.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.layer.audience.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.layer.audience.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.layer.audience.tag.message" })), audience === AudienceTypes.AUDIENCE_USERS && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.users.message", defaultMessage: "ui.composer.layer.audience.users.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(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: _jsx(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) => _jsx(TagChip, Object.assign({ tag: option }, getTagProps({ index })), option.id));
                         }, renderOption: (props, option, { selected, inputValue }) => {
                             const matches = match(option.name, inputValue);

package/lib/esm/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -22,9 +22,9 @@ const Root = styled(BaseDialog, {
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props) {
-    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
 export default function PdfPreviewDialog(inProps) {
     // PROPS
     const props = useThemeProps({

package/lib/esm/components/UserAutocomplete/UserAutocomplete.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
@@ -34,27 +34,42 @@ const UserAutocomplete = (inProps) => {
     } } = props, rest = __rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
     // State
     const [open, setOpen] = useState(false);
-    // const [value, setValue] = useState<string | SCUserAutocompleteType | (string | SCUserAutocompleteType)[]>(
-    //   typeof defaultValue === 'string' ? null : defaultValue
-    // );
-    const [value, setValue] = useState(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
+    const [inputValue, setInputValue] = useState('');
+    const [usersMap, setUsersMap] = useState({});
+    const [value, setValue] = useState([]);
     const [textAreaValue, setTextAreaValue] = useState('');
     // Fetch users
     const { users, isLoading } = useSCFetchUsers();
+    // Build map for quick lookup by username
     useEffect(() => {
-        if (value === null) {
+        const map = {};
+        users === null || users === void 0 ? void 0 : users.forEach((u) => {
+            map[u.username] = u;
+        });
+        setUsersMap(map);
+    }, [users]);
+    // Initialize value from defaultValue (string or object)
+    useEffect(() => {
+        if (!defaultValue)
             return;
-        }
+        const initial = (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
+            if (typeof v === 'string') {
+                // Use fetched user if available, otherwise fallback object
+                return usersMap[v] || { id: `fallback-${v}`, username: v, avatar: '' };
+            }
+            return v;
+        });
+        setValue(initial);
+        setTextAreaValue(initial.map((u) => u.username).join('\n'));
+    }, [defaultValue, usersMap]);
+    // Trigger onChange and sync textarea
+    useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         setTextAreaValue(value.map((u) => u.username).join('\n'));
     }, [value]);
     // Handlers
-    const handleOpen = () => {
-        setOpen(true);
-    };
-    const handleClose = () => {
-        setOpen(false);
-    };
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
     const handleChange = (_event, newValue) => {
         setValue(newValue);
     };
@@ -63,14 +78,13 @@ const UserAutocomplete = (inProps) => {
             .split(/\s|,|\n/)
             .map((s) => s.trim())
             .filter(Boolean);
-        const matched = users.filter((u) => names.includes(u.username));
+        const matched = names.map((n) => usersMap[n] || { id: `fallback-${n}`, username: n, avatar: '' });
         setValue(matched);
         setTextAreaValue(e.target.value);
     };
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: users || [], getOptionLabel: (option) => option.username || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => val.id === option.id, renderTags: (value, getTagProps) => value.map((option, index) => (_jsx(Chip, Object.assign({ avatar: _jsx(Avatar, { src: option.avatar }), label: option.username }, getTagProps({ index })), option.id))), renderOption: (props, option, { inputValue }) => {
-                    const matches = match(option.username, inputValue);
-                    const parts = parse(option.username, matches);
-                    return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) })] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: users || [], getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_e, newInput) => setInputValue(newInput), selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => option.id === val.id, renderTags: (value, getTagProps) => value.map((option, index) => (_jsx(Chip, Object.assign({ avatar: _jsx(Avatar, { src: option.avatar }), label: option.username }, getTagProps({ index })), option.id))), renderOption: (props, option, { inputValue }) => {
+                    const parts = parse(option.username, match(option.username, inputValue));
+                    return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar, sx: { mr: 1 } }), parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index)))] })));
                 }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: (_jsxs(Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) }))) }, rest)), _jsx(Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore