@selfcommunity/react-ui 0.7.50-events.41 → 0.7.50-events.43

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CommentsObjectSkeleton } from '../CommentsObject';
 import { PREFIX } from './constants';
 import { styled } from '@mui/material/styles';
@@ -10,5 +10,5 @@ const Root = styled(CommentsObjectSkeleton, {
     slot: 'SkeletonRoot'
 })(() => ({}));
 export default function CommentsFeedObjectSkeleton(props) {
-    return React.createElement(Root, Object.assign({ className: classes.root }, props));
+    return _jsx(Root, Object.assign({ className: classes.root }, props));
 }

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
@@ -88,7 +89,7 @@ export default function CommentsObject(inProps) {
             preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] &&
             ((preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null) ||
                 !preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED])) {
-            return (React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_IN_COMMENTS }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
+            return (_jsx(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_IN_COMMENTS }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
         }
         return null;
     }, [JSON.stringify(obj)]);
@@ -124,45 +125,31 @@ export default function CommentsObject(inProps) {
      * Render button load previous comments
      */
     function renderLoadPreviousComments() {
-        return (React.createElement(Box, { className: classes.pagination },
-            isLoadingPrevious && React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })),
-            !isLoadingPrevious && (React.createElement(React.Fragment, null,
-                React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
-                    ? { onClick: handlePrevious }
-                    : {
-                        component: Link,
-                        to: `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
-                    }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }),
-                    React.createElement(FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" })),
-                !disablePaginationLinks && previousPage && previous && (React.createElement(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
-                        { [paginationLinksPageQueryParam]: previousPage }
-                    ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps),
-                    React.createElement(FormattedMessage, { id: "ui.commentsObject.previousComments", defaultMessage: "ui.commentsObject.previousComments" })))))));
+        return (_jsxs(Box, Object.assign({ className: classes.pagination }, { children: [isLoadingPrevious && _jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })), !isLoadingPrevious && (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                            ? { onClick: handlePrevious }
+                            : {
+                                component: Link,
+                                to: `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                            }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" }) })), !disablePaginationLinks && previousPage && previous && (_jsx(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                                { [paginationLinksPageQueryParam]: previousPage }
+                            ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.previousComments", defaultMessage: "ui.commentsObject.previousComments" }) })))] }))] })));
     }
     /**
      * Footer with n comments of, only for load more pagination mode
      */
     function renderLoadNextComments() {
-        return (React.createElement(Box, { className: classes.pagination }, isLoadingNext ? (React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (React.createElement(React.Fragment, null,
-            React.createElement(InView, { as: "div", onChange: handleScrollEnd, threshold: 0.5 },
-                React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
-                        ? { onClick: handleNext }
-                        : {
-                            component: Link,
-                            to: nextPage && next
-                                ? `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
-                                    { [paginationLinksPageQueryParam]: nextPage }
-                                ])}`
-                                : `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
-                        }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }),
-                        React.createElement(FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" })),
-                    showCommentsCounter() && (React.createElement(Typography, { variant: "body1", classes: { root: classes.commentsCounter } },
-                        React.createElement(FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }))))),
-            !disablePaginationLinks && nextPage && next && (React.createElement(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
-                    { [paginationLinksPageQueryParam]: nextPage }
-                ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps),
-                React.createElement(FormattedMessage, { id: "ui.commentsObject.nextComments", defaultMessage: "ui.commentsObject.nextComments" })))))));
+        return (_jsx(Box, Object.assign({ className: classes.pagination }, { children: isLoadingNext ? (_jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (_jsxs(_Fragment, { children: [_jsx(InView, Object.assign({ as: "div", onChange: handleScrollEnd, threshold: 0.5 }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                                    ? { onClick: handleNext }
+                                    : {
+                                        component: Link,
+                                        to: nextPage && next
+                                            ? `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                                                { [paginationLinksPageQueryParam]: nextPage }
+                                            ])}`
+                                            : `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                                    }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" }) })), showCommentsCounter() && (_jsx(Typography, Object.assign({ variant: "body1", classes: { root: classes.commentsCounter } }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }) })))] })) })), !disablePaginationLinks && nextPage && next && (_jsx(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                            { [paginationLinksPageQueryParam]: nextPage }
+                        ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.nextComments", defaultMessage: "ui.commentsObject.nextComments" }) })))] })) })));
     }
     /**
      * Remove duplicate comments (from header or footer)
@@ -175,20 +162,18 @@ export default function CommentsObject(inProps) {
      * Render comments and load others with load more button
      */
     function renderComments(comments) {
-        return (React.createElement(React.Fragment, null, comments.map((comment, index) => (React.createElement(React.Fragment, { key: index },
-            React.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps })),
-            advPosition === index && renderAdvertising())))));
+        return (_jsx(_Fragment, { children: comments.map((comment, index) => (_jsxs(React.Fragment, { children: [_jsx(CommentComponent, Object.assign({ commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), comment.id), advPosition === index && renderAdvertising()] }, index))) }));
     }
     /**
      * Render comments
      */
-    let commentsRendered = React.createElement(React.Fragment, null);
+    let commentsRendered = _jsx(_Fragment, {});
     if (!obj || ((isLoadingPrevious || isLoadingNext) && !comments.length)) {
         /**
          * Until the contribution has not been founded and there are
          * no comments during loading render skeletons
          */
-        commentsRendered = React.createElement(CommentsObjectSkeleton, Object.assign({ CommentObjectSkeletonProps: CommentObjectSkeletonProps }, CommentsObjectSkeletonProps));
+        commentsRendered = _jsx(CommentsObjectSkeleton, Object.assign({ CommentObjectSkeletonProps: CommentObjectSkeletonProps }, CommentsObjectSkeletonProps));
     }
     else {
         /**
@@ -199,16 +184,10 @@ export default function CommentsObject(inProps) {
          *  the component will switch to 'load more pagination' mode automatically
          *  in case it needs to display a single comment or newComments
          */
-        commentsRendered = (React.createElement(React.Fragment, null,
-            previous && renderLoadPreviousComments(),
-            renderComments(comments),
-            next && renderLoadNextComments()));
+        commentsRendered = (_jsxs(_Fragment, { children: [previous && renderLoadPreviousComments(), renderComments(comments), next && renderLoadNextComments()] }));
     }
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        renderComments(getFilteredComments(startComments)),
-        commentsRendered,
-        renderComments(getFilteredComments(endComments))));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [renderComments(getFilteredComments(startComments)), commentsRendered, renderComments(getFilteredComments(endComments))] })));
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { CommentObjectSkeleton } from '../CommentObject';
 import { Box } from '@mui/material';
@@ -33,5 +33,5 @@ const Root = styled(Box, {
  */
 export default function CommentsObjectSkeleton(props) {
     const { count = 3, CommentObjectSkeletonProps = {} } = props, rest = __rest(props, ["count", "CommentObjectSkeletonProps"]);
-    return (React.createElement(Root, Object.assign({ className: classes.root }, rest), [...Array(count)].map((comment, index) => (React.createElement(CommentObjectSkeleton, Object.assign({ key: index }, CommentObjectSkeletonProps))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count)].map((comment, index) => (_jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps), index))) })));
 }

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Box, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
@@ -41,11 +42,7 @@ export default (props) => {
     const handleClickLocation = useCallback(() => {
         onClick && onClick('location');
     }, [onClick]);
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        ((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-            (value === null || value === void 0 ? void 0 : value.categories.map((c) => (React.createElement(Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: React.createElement(Icon, null, "category"), onClick: handleClickCategory })))),
-        (value === null || value === void 0 ? void 0 : value.group) && (React.createElement(Chip, { key: value === null || value === void 0 ? void 0 : value.group.id, label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: React.createElement(Icon, null, "groups"), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) })),
-        ((_c = value === null || value === void 0 ? void 0 : value.addressing) === null || _c === void 0 ? void 0 : _c.length) > 0 &&
-            (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleClickTag })))),
-        (value === null || value === void 0 ? void 0 : value.location) && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))));
+    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)), ((_c = value === null || value === void 0 ? void 0 : value.addressing) === null || _c === void 0 ? void 0 : _c.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)))), (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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { SCContributionType, SCFeatureName, SCFeedTypologyType } from '@selfcommunity/types';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -28,7 +29,7 @@ import { PREFIX } from './constants';
 import ComposerSkeleton from './Skeleton';
 import CloseLayer from './Layer/CloseLayer';
 const DialogTransition = forwardRef(function Transition(props, ref) {
-    return React.createElement(Fade, Object.assign({ ref: ref }, props));
+    return _jsx(Fade, Object.assign({ ref: ref }, props));
 });
 const classes = {
     root: `${PREFIX}-root`,
@@ -279,14 +280,14 @@ export default function Composer(inProps) {
         dispatch({
             type: 'multiple',
             value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > COMPOSER_TITLE_MAX_LENGTH
-                    ? { titleError: React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
+                    ? { titleError: _jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
                     : null })
         });
     }, []);
     const handleChangeDiscussion = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
         });
     }, []);
     const handleChangePost = useCallback((content) => {
@@ -393,7 +394,7 @@ export default function Composer(inProps) {
         event.stopPropagation();
         if (UserUtils.isBlocked(scUserContext.user)) {
             // deny submit action if authenticated user is blocked
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -505,21 +506,18 @@ export default function Composer(inProps) {
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);
     const content = useMemo(() => {
         if (editMode && isLoading) {
-            return React.createElement(ComposerSkeleton, null);
+            return _jsx(ComposerSkeleton, {});
         }
         else if (editMode && loadError) {
-            return (React.createElement(Alert, { severity: "error", onClose: handleClose },
-                React.createElement(AlertTitle, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
-                React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
+            return (_jsxs(Alert, Object.assign({ severity: "error", onClose: handleClose }, { children: [_jsx(AlertTitle, { children: _jsx(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" }) }), _jsx(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })] })));
         }
         switch (type) {
             case COMPOSER_TYPE_POLL:
-                return (React.createElement(ContentPoll, { key: key, onChange: handleChangePoll, value: { html, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
+                return (_jsx(ContentPoll, { onChange: handleChangePoll, value: { html, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }, key));
             case SCContributionType.DISCUSSION:
-                return (React.createElement(ContentDiscussion, { key: key, value: { title, html, categories, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
+                return (_jsx(ContentDiscussion, { value: { title, html, categories, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
             default:
-                return (React.createElement(ContentPost, { key: key, value: { html, categories, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
+                return (_jsx(ContentPost, { value: { html, categories, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
         }
     }, [
         key,
@@ -541,37 +539,17 @@ export default function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }),
-        React.createElement("form", { onSubmit: handleSubmit, method: "post" },
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(IconButton, { onClick: handleClosePrompt },
-                    React.createElement(Icon, null, "close")),
-                React.createElement(LoadingButton, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
-                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
-            React.createElement(DialogContent, { className: classes.content },
-                React.createElement(Attributes, { value: { categories, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
-                content,
-                medias && medias.length > 0 && (React.createElement(Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
-                    if (mediaObjectType.previewComponent) {
-                        return React.createElement(mediaObjectType.previewComponent, { key: mediaObjectType.name, value: medias, onChange: handleChangeMedias });
-                    }
-                    else if (mediaObjectType.displayComponent) {
-                        return React.createElement(mediaObjectType.displayComponent, { key: mediaObjectType.name, medias: medias });
-                    }
-                })))),
-            !canSubmit && !editMode && React.createElement(TypeSwitchButtonGroup, { className: classes.types, onChange: handleChangeType, size: "small", value: type }),
-            React.createElement(DialogActions, { className: classes.actions },
-                mediaObjectTypes
-                    .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
-                    .map((mediaObjectType) => {
-                    const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
-                    return (React.createElement(mediaObjectType.triggerButton, Object.assign({ key: mediaObjectType.name, disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props)));
-                }),
-                React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
-                    React.createElement(Icon, null, "category")),
-                React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group), onClick: handleAddAudienceLayer }, (!group && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? React.createElement(Icon, null, "public") : group ? React.createElement(Icon, null, "groups") : React.createElement(Icon, null, "label")),
-                preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
-                    React.createElement(Icon, null, "add_location_alt"))))),
-        layer && (React.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
-            React.createElement(layer.Component, Object.assign({}, layer.ComponentProps))))));
+    return (_jsxs(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(LoadingButton, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+                                    if (mediaObjectType.previewComponent) {
+                                        return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
+                                    }
+                                    else if (mediaObjectType.displayComponent) {
+                                        return _jsx(mediaObjectType.displayComponent, { medias: medias }, mediaObjectType.name);
+                                    }
+                                }) })))] })), !canSubmit && !editMode && _jsx(TypeSwitchButtonGroup, { className: classes.types, onChange: handleChangeType, size: "small", value: type }), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [mediaObjectTypes
+                                .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
+                                .map((mediaObjectType) => {
+                                const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
+                                return (_jsx(mediaObjectType.triggerButton, Object.assign({ disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props), mediaObjectType.name));
+                            }), _jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddCategoryLayer }, { children: _jsx(Icon, { children: "category" }) })), _jsx(IconButton, Object.assign({ disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group), onClick: handleAddAudienceLayer }, { children: (!group && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? _jsx(Icon, { children: "public" }) : group ? _jsx(Icon, { children: "groups" }) : _jsx(Icon, { children: "label" }) })), preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (_jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' }, { children: _jsx(Icon, { children: "add_location_alt" }) })))] }))] })), layer && (_jsx(LayerTransitionRoot, Object.assign({ className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" }, { children: _jsx(layer.Component, Object.assign({}, layer.ComponentProps)) })))] })));
 }

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Box, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
@@ -42,14 +43,10 @@ export default (props) => {
         onChange(Object.assign(Object.assign({}, value), { html }));
     }, [value]);
     // RENDER
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        generalError && (React.createElement(Typography, { className: classes.generalError },
-            React.createElement(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }))),
-        React.createElement(TextField, { className: classes.title, 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, multiline: true, onChange: handleChangeTitle, InputProps: {
-                endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_TITLE_MAX_LENGTH - value.title.length)
-            }, error: Boolean(titleError), helperText: titleError, disabled: disabled }),
-        React.createElement(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(TextField, { className: classes.title, 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, multiline: true, onChange: handleChangeTitle, InputProps: {
+                    endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
+                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
 };

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from 'react';
 import { Box, Button, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, TextField, Tooltip, Typography, } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -39,7 +40,7 @@ const messages = defineMessages({
 });
 const SortableComponent = forwardRef((_a, ref) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(FormGroup, Object.assign({ direction: "column", ref: ref }, props), children));
+    return (_jsx(FormGroup, Object.assign({ direction: "column", ref: ref }, props, { children: children })));
 });
 /**
  * Default poll
@@ -99,30 +100,10 @@ export default (inProps) => {
         minDate.setDate(minDate.getDate() + COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
         return minDate;
     }, []);
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        generalError && React.createElement(Typography, { className: classes.generalError },
-            React.createElement(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })),
-        React.createElement(Box, { className: classes.title },
-            React.createElement(TextField, { autoFocus: true, disabled: disabled, label: React.createElement(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: React.createElement(Typography, { variant: "body2" }, COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length)
-                } })),
-        React.createElement(Box, { className: classes.choices },
-            React.createElement(ReactSortable, { list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, poll.choices.map((choice, index) => (React.createElement(TextField, { key: index, placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
-                    startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                        React.createElement(Icon, null, "drag"))),
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        React.createElement(Tooltip, { title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (React.createElement(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (React.createElement(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" },
-                                    React.createElement(Icon, null, "delete"))))))
-                } }))))),
-        React.createElement(Box, { className: classes.choiceNew },
-            React.createElement(Button, { color: "inherit", variant: "text", onClick: handleAddChoice },
-                React.createElement(Icon, null, "add"),
-                React.createElement(FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" }))),
-        React.createElement(Divider, null),
-        React.createElement(FormGroup, { className: classes.metadata },
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: React.createElement(FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }),
-            React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] },
-                React.createElement(DatePicker, { disabled: disabled, label: React.createElement(FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? parseISO(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate })))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && _jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(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: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
+                    } }) })), _jsx(Box, Object.assign({ className: classes.choices }, { children: _jsx(ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => (_jsx(TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
+                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "drag" }) }))),
+                            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Tooltip, Object.assign({ title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: _jsx(Icon, { children: "delete" }) })) }) })) })))
+                        } }, index))) })) })), _jsx(Box, Object.assign({ className: classes.choiceNew }, { children: _jsxs(Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [_jsx(Icon, { children: "add" }), _jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), _jsx(Divider, {}), _jsxs(FormGroup, Object.assign({ className: classes.metadata }, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: _jsx(DatePicker, { disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? parseISO(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
 };

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
@@ -40,8 +41,5 @@ export default (props) => {
         onChange(Object.assign(Object.assign({}, value), { html }));
     }, [value]);
     // RENDER
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        generalError && (React.createElement(Typography, { className: classes.generalError },
-            React.createElement(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }))),
-        React.createElement(Editor, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
 };

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import TextField from '@mui/material/TextField';
@@ -35,7 +36,7 @@ const AudienceLayer = React.forwardRef((props, ref) => {
     // Props
     const { className, onClose, onSave, defaultValue = AudienceTypes.AUDIENCE_TAG ? [] : null, TextFieldProps = {
         variant: 'outlined',
-        label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.tags.label", defaultMessage: "ui.composer.layer.audience.tags.label" })
+        label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.label", defaultMessage: "ui.composer.layer.audience.tags.label" })
     } } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue", "TextFieldProps"]);
     // STATE
     const [autocompleteOpen, setAutocompleteOpen] = useState(false);
@@ -64,35 +65,16 @@ const AudienceLayer = React.forwardRef((props, ref) => {
     const handleChangeAudience = useCallback((event, data) => setAudience(data), []);
     const handleAutocompleteOpen = useCallback(() => setAutocompleteOpen(true), []);
     const handleAutocompleteClose = useCallback(() => setAutocompleteOpen(false), []);
-    return (React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest),
-        React.createElement(DialogTitle, { className: classes.title },
-            React.createElement(IconButton, { onClick: onClose },
-                React.createElement(Icon, null, "arrow_back")),
-            React.createElement(Typography, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" })),
-            React.createElement(Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
-        React.createElement(DialogContent, { className: classes.content },
-            React.createElement(Tabs, { value: audience, onChange: handleChangeAudience, "aria-label": "audience type" },
-                React.createElement(Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: React.createElement(Icon, null, "public"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) }),
-                groupsEnabled && (React.createElement(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: React.createElement(Icon, null, "groups"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })),
-                React.createElement(Tab, { disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: React.createElement(Icon, null, "label"), label: React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })),
-            React.createElement(Typography, { className: classes.message },
-                audience === AudienceTypes.AUDIENCE_ALL && (React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })),
-                audience === AudienceTypes.AUDIENCE_GROUP && (React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })),
-                audience === AudienceTypes.AUDIENCE_TAG && (React.createElement(FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.audience.layer.tag.message" }))),
-            audience === AudienceTypes.AUDIENCE_TAG && (React.createElement(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: React.createElement(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) => React.createElement(TagChip, Object.assign({ key: option.id, tag: option }, getTagProps({ index }))));
-                }, renderOption: (props, option, { selected, inputValue }) => {
-                    const matches = match(option.name, inputValue);
-                    const parts = parse(option.name, matches);
-                    return (React.createElement("li", Object.assign({}, props),
-                        React.createElement(TagChip, { key: option.id, tag: option, label: React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement("span", { key: index, style: { fontWeight: part.highlight ? 700 : 400 } }, part.text)))) })));
-                }, renderInput: (params) => {
-                    return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: React.createElement(React.Fragment, null, params.InputProps.endAdornment) }) })));
-                } })),
-            audience === AudienceTypes.AUDIENCE_GROUP && React.createElement(GroupAutocomplete, { onChange: handleGroupChange, defaultValue: defaultValue }))));
+    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsxs(Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [_jsx(Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: _jsx(Icon, { children: "public" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) }), 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 && 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" }) })] })), _jsxs(Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })), audience === AudienceTypes.AUDIENCE_GROUP && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.audience.layer.tag.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);
+                            const parts = parse(option.name, matches);
+                            return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, { tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, option.id) })));
+                        }, renderInput: (params) => {
+                            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: _jsx(React.Fragment, { children: params.InputProps.endAdornment }) }) })));
+                        } })), audience === AudienceTypes.AUDIENCE_GROUP && _jsx(GroupAutocomplete, { onChange: handleGroupChange, defaultValue: defaultValue })] }))] })));
 });
 export default AudienceLayer;

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
@@ -25,15 +26,6 @@ const CategoryLayer = React.forwardRef((props, ref) => {
     // HANDLERS
     const handleSave = useCallback(() => onSave(value), [value, onSave]);
     const handleChange = useCallback((categories) => setValue(categories), []);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest),
-        React.createElement(DialogTitle, { className: classes.title },
-            React.createElement(IconButton, { onClick: onClose },
-                React.createElement(Icon, null, "arrow_back")),
-            React.createElement(Typography, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" })),
-            React.createElement(Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
-        React.createElement(DialogContent, { className: classes.content },
-            React.createElement(CategoryAutocomplete, { multiple: true, onChange: handleChange, defaultValue: defaultValue })));
+    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsx(DialogContent, Object.assign({ className: classes.content }, { children: _jsx(CategoryAutocomplete, { multiple: true, onChange: handleChange, defaultValue: defaultValue }) }))] }));
 });
 export default CategoryLayer;

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, DialogTitle, IconButton, List, ListItem, ListItemButton, ListItemText, Typography, } from '@mui/material';
@@ -19,21 +20,6 @@ const Root = styled(Box, {
 const CloseLayer = React.forwardRef((props, ref) => {
     // Props
     const { className, onClose, onSave, defaultValue = [] } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest),
-        React.createElement(DialogTitle, { className: classes.title },
-            React.createElement(IconButton, { onClick: onClose },
-                React.createElement(Icon, null, "arrow_back")),
-            React.createElement(Typography, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }))),
-        React.createElement(DialogContent, { className: classes.content },
-            React.createElement(Typography, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" })),
-            React.createElement(List, null,
-                React.createElement(ListItem, null,
-                    React.createElement(ListItemButton, { onClick: onClose },
-                        React.createElement(ListItemText, { primary: React.createElement(FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }))),
-                React.createElement(ListItem, null,
-                    React.createElement(ListItemButton, { onClick: onSave },
-                        React.createElement(ListItemText, { primary: React.createElement(FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }))))));
+    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }) })] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" }) }), _jsxs(List, { children: [_jsx(ListItem, { children: _jsx(ListItemButton, Object.assign({ onClick: onClose }, { children: _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }) })) }), _jsx(ListItem, { children: _jsx(ListItemButton, Object.assign({ onClick: onSave }, { children: _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }) })) })] })] }))] }));
 });
 export default CloseLayer;