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

package/lib/cjs/shared/InfiniteScroll/stories/WindowInfiniteScrollComponent.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const index_1 = tslib_1.__importDefault(require("../index"));
 function WindowInfiniteScrollComponent() {
     const [data, setData] = (0, react_1.useState)(Array.from({ length: 30 }, (_, i) => i));
@@ -24,10 +25,6 @@ function WindowInfiniteScrollComponent() {
             setData(newData);
         }, 500);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.default, { hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: react_1.default.createElement("h1", null, "Loading next..."), loaderPrevious: react_1.default.createElement("h1", null, "Loading prev..."), dataLength: data.length, scrollThreshold: 1 }, data.map((e) => (react_1.default.createElement("div", { key: e, style: { height: 200, margin: 4, border: '1px solid hotpink' } },
-            "#",
-            e,
-            " row"))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: (0, jsx_runtime_1.jsx)("h1", { children: "Loading next..." }), loaderPrevious: (0, jsx_runtime_1.jsx)("h1", { children: "Loading prev..." }), dataLength: data.length, scrollThreshold: 1 }, { children: data.map((e) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { height: 200, margin: 4, border: '1px solid hotpink' } }, { children: ["#", e, " row"] }), e))) })) }));
 }
 exports.default = WindowInfiniteScrollComponent;

package/lib/cjs/shared/LanguageSwitcher/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -76,9 +77,6 @@ function LanguageSwitcher(inProps) {
             }
         }
     };
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
-        react_1.default.createElement(material_1.Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps),
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" })),
-        react_1.default.createElement(material_1.Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps), languages.map((l) => (react_1.default.createElement(material_1.MenuItem, { value: l, key: l }, minimized ? l.toUpperCase() : react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` })))))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps, { children: languages.map((l) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: l }, { children: minimized ? l.toUpperCase() : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` }) }), l))) }))] })));
 }
 exports.default = LanguageSwitcher;

package/lib/cjs/shared/Lightbox/Lightbox.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const react_photo_view_1 = require("react-photo-view");
 const material_1 = require("@mui/material");
@@ -22,8 +23,8 @@ const ReactImageLightbox = (props) => {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: react_1.default.createElement(material_1.CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
-            return react_1.default.createElement(react_1.default.Fragment, null, toolbarButtons);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: toolbarButtons });
         } })));
 };
 exports.default = ReactImageLightbox;

package/lib/cjs/shared/MarkRead/MarkRead.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
 const LazyLoad_1 = require("../../constants/LazyLoad");
@@ -35,6 +36,5 @@ const MarkRead = (props) => {
     return null;
 };
 exports.default = (props) => {
-    return (react_1.default.createElement(react_lazyload_1.default, { once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT },
-        react_1.default.createElement(MarkRead, Object.assign({}, props))));
+    return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(MarkRead, Object.assign({}, props)) })));
 };

package/lib/cjs/shared/Media/File/DisplayComponent.js

@@ -1,6 +1,7 @@
 "use strict";
 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 styles_1 = require("@mui/material/styles");
 const Lightbox_1 = tslib_1.__importDefault(require("./Lightbox"));
@@ -67,75 +68,49 @@ exports.default = (props) => {
         if (o.type) {
             switch (o.type) {
                 case 'doc':
-                    startAdornment = react_1.default.createElement(Icon_1.default, { className: classes.iconFile }, "picture_as_pdf");
+                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
                     break;
                 default:
-                    startAdornment = react_1.default.createElement(Icon_1.default, { className: classes.iconFile }, "insert_drive_file");
+                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
                     break;
             }
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null, o.title && (react_1.default.createElement("div", { className: classes.title },
-            react_1.default.createElement(material_1.Typography, { variant: "subtitle2" },
-                startAdornment,
-                " ",
-                o.title)))));
+        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
     };
     const renderOne = () => {
         const overlay = _medias.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
         const isGif = _medias[0].image_mimetype ? _medias[0].image_mimetype.includes('image/gif') : false;
         const isLandscape = _medias[0].image_height < _medias[0].image_width;
-        return (react_1.default.createElement(material_1.Grid, { container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) },
-            react_1.default.createElement(material_1.Grid, { item: true, ref: ref, xs: 12, classes: {
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
                     root: (0, classnames_1.default)(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: _medias.length > 1 }))
-                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})) },
-                overlay,
-                renderTitle(_medias[0]))));
+                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(_medias[0])] })) })));
     };
     const renderTwo = () => {
         const overlay = _medias.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
         const conditionalRender = [3, 4].includes(_medias.length) || (_medias.length > +maxVisible && [3, 4].includes(+maxVisible));
-        return (react_1.default.createElement(material_1.Grid, { container: true },
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` } },
-                renderOverlay(conditionalRender ? 1 : 0),
-                renderTitle(_medias[0])),
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` } },
-                overlay,
-                renderTitle(_medias[1]))));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` } }, { children: [overlay, renderTitle(_medias[1])] }))] })));
     };
     const renderThree = () => {
         const conditionalRender = _medias.length == 4 || (_medias.length > +maxVisible && +maxVisible == 4);
         const overlay = !maxVisible || maxVisible > 5 || (_medias.length > maxVisible && [4, 5].includes(+maxVisible))
             ? renderCountOverlay(true)
             : renderOverlay(conditionalRender ? 3 : 4);
-        return (react_1.default.createElement(material_1.Grid, { container: true },
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[2])})` } },
-                renderOverlay(conditionalRender ? 1 : 2),
-                renderTitle(_medias[1])),
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` } },
-                renderOverlay(conditionalRender ? 2 : 3),
-                renderTitle(_medias[2])),
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` } },
-                overlay,
-                renderTitle(_medias[3]))));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` } }, { children: [overlay, renderTitle(_medias[3])] }))] })));
     };
     const renderOverlay = (id) => {
         if (!gallery) {
             return null;
         }
         return [
-            react_1.default.createElement("div", { key: `cover-${id}`, className: (0, classnames_1.default)(classes.cover, classes.slide) }),
-            react_1.default.createElement("div", { key: `cover-text-${id}`, className: (0, classnames_1.default)(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } },
-                react_1.default.createElement(Icon_1.default, null, "zoom_out_map"))
+            (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(classes.cover, classes.slide) }, `cover-${id}`),
+            (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "zoom_out_map" }) }), `cover-text-${id}`)
         ];
     };
     const renderCountOverlay = (more) => {
         const extra = _medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
         return [
-            more && react_1.default.createElement("div", { key: "count", className: classes.cover }),
-            more && (react_1.default.createElement("div", { key: "count-sub", className: classes.coverText, style: { fontSize: '200%' } },
-                react_1.default.createElement("p", null,
-                    "+",
-                    extra)))
+            more && (0, jsx_runtime_1.jsx)("div", { className: classes.cover }, "count"),
+            more && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["+", extra] }) }), "count-sub"))
         ];
     };
     const imagesToShow = [..._medias];
@@ -145,9 +120,5 @@ exports.default = (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(classes.displayRoot, className) },
-        [1, 3, 4].includes(imagesToShow.length) && renderOne(),
-        imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(),
-        imagesToShow.length >= 4 && renderThree(),
-        preview !== -1 && react_1.default.createElement(Lightbox_1.default, { onClose: handleClose, index: preview, medias: _medias })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && (0, jsx_runtime_1.jsx)(Lightbox_1.default, { onClose: handleClose, index: preview, medias: _medias })] })));
 };

package/lib/cjs/shared/Media/File/Lightbox/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const Lightbox_1 = tslib_1.__importDefault(require("../../../Lightbox"));
 const constants_1 = require("../constants");
@@ -24,14 +25,13 @@ function Lightbox(props) {
     }, []);
     const toolbarRender = (0, react_1.useCallback)((props) => {
         if (medias[props.index].type === Media_1.MEDIA_TYPE_DOCUMENT) {
-            return react_1.default.createElement(material_1.IconButton, { component: react_core_1.Link, to: medias[props.index].url, target: "_blank", color: "inherit" },
-                react_1.default.createElement(Icon_1.default, null, "download"));
+            return (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: medias[props.index].url, target: "_blank", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) }));
         }
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }, [medias]);
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarRender: toolbarRender })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarRender: toolbarRender })));
 }
 exports.default = Lightbox;

package/lib/cjs/shared/Media/File/PreviewComponent.js

@@ -1,6 +1,7 @@
 "use strict";
 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 material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
@@ -45,14 +46,9 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
     }, [onChange, value]);
     const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
-    const mediaElements = (0, react_1.useMemo)(() => medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } },
-        react_1.default.createElement(material_1.IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
-            react_1.default.createElement(Icon_1.default, null, "delete")),
-        media.title && react_1.default.createElement(material_1.Typography, { className: classes.title },
-            media.type === Media_1.MEDIA_TYPE_DOCUMENT && react_1.default.createElement(Icon_1.default, null, "picture_as_pdf"),
-            media.title)))), [medias]);
-    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (isMobile ?
-        react_1.default.createElement(material_1.Box, { id: SORTABLE_ID }, mediaElements) :
-        react_1.default.createElement(react_sortablejs_1.ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, mediaElements)));
+    const mediaElements = (0, react_1.useMemo)(() => medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })), media.title && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "picture_as_pdf" }), media.title] }))] }), media.id))), [medias]);
+    return (0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (isMobile ?
+            (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: SORTABLE_ID }, { children: mediaElements })) :
+            (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ id: SORTABLE_ID, list: medias, setList: handleSort }, { children: mediaElements }))) }));
 });
 exports.default = PreviewComponent;

package/lib/cjs/shared/Media/File/TriggerButton.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const constants_1 = require("./constants");
@@ -33,11 +34,11 @@ const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
     name: constants_1.PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const PhotoUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
+const GalleryUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
+const DocumentUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const GalleryUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
+const DocumentUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
 exports.default = (_a) => {
     var { className, onAdd = null } = _a, rest = tslib_1.__rest(_a, ["className", "onAdd"]);
     // STATE
@@ -81,32 +82,20 @@ exports.default = (_a) => {
     const list = (0, react_1.useMemo)(() => {
         if (isMobile) {
             return [
-                react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "photo" },
-                    react_1.default.createElement(PhotoUploadListItemButton, { inputFieldName: "image" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }))),
-                react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "gallery" },
-                    react_1.default.createElement(GalleryUploadListItemButton, { inputFieldName: "image" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }))),
-                react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "document" },
-                    react_1.default.createElement(DocumentUploadListItemButton, { inputFieldName: "document" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" })))
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(PhotoUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }) })) }), "photo"),
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(GalleryUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) })) }), "gallery"),
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(DocumentUploadListItemButton, Object.assign({ inputFieldName: "document" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) })) }), "document")
             ];
         }
         else {
             return [
-                react_1.default.createElement(GalleryUploadMenuItem, { extraProps: { className: classes.item }, inputFieldName: "image", key: "gallery" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" })),
-                react_1.default.createElement(DocumentUploadMenuItem, { extraProps: { className: classes.item }, key: "document", inputFieldName: "document" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }))
+                (0, jsx_runtime_1.jsx)(GalleryUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "image" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }), "gallery"),
+                (0, jsx_runtime_1.jsx)(DocumentUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "document" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }), "document")
             ];
         }
     }, [isMobile, handleFilterByMime, handleSuccess, handleProgress, handleError]);
-    return (react_1.default.createElement(chunked_uploady_1.default, { destination: {
+    return ((0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
             url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
             method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true },
-        react_1.default.createElement(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }), isUploading ? react_1.default.createElement(material_1.CircularProgress, { size: 20 }) : react_1.default.createElement(Icon_1.default, null, "photo_file")),
-        isMobile ? (react_1.default.createElement(SwipeableDrawerRoot, { onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
-            react_1.default.createElement(material_1.List, null, list))) : (react_1.default.createElement(MenuRoot, { onClick: () => setAnchorEl(null), className: classes.triggerMenuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, list))));
+        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }, { children: isUploading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_file" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: list }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerMenuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: list })))] })));
 };

package/lib/cjs/shared/Media/File/asUploadButton.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const shared_ui_1 = require("@rpldy/shared-ui");
 const asUploadButton = (Component, InputProps) => {
     const AsUploadButton = (props, ref) => {
@@ -22,7 +23,7 @@ const asUploadButton = (Component, InputProps) => {
             showFileUpload(uploadOptionsRef.current);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, [getInternalFileInput, showFileUpload, uploadOptionsRef, onClick]);
-        return react_1.default.createElement(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
     };
     (0, shared_ui_1.markAsUploadOptionsComponent)(AsUploadButton);
     return (0, react_1.forwardRef)(AsUploadButton);

package/lib/cjs/shared/Media/Link/DisplayComponent.js

@@ -1,6 +1,7 @@
 "use strict";
 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 styles_1 = require("@mui/material/styles");
 const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
@@ -44,14 +45,7 @@ exports.default = (props) => {
      */
     const renderPreview = (link, key) => {
         const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return (react_1.default.createElement(Box_1.default, { className: classes.displayLink, key: key },
-            link.embed.metadata.images && link.embed.metadata.images.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null, fullWidth ? (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })))),
-            react_1.default.createElement(Box_1.default, { className: classes.snippet },
-                react_1.default.createElement("b", { className: classes.snippetTitle }, link.embed.metadata.title),
-                react_1.default.createElement("br", null),
-                react_1.default.createElement("p", { className: classes.snippetDescription }, link.embed.metadata.description),
-                react_1.default.createElement("a", { href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, domain)),
-            react_1.default.createElement("div", { style: { clear: 'both' } })));
+        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [link.embed.metadata.images && link.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: link.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: link.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
     };
     /**
      * Renders component
@@ -59,11 +53,10 @@ exports.default = (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest), _medias.map((l, i) => {
-        if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
-            return (react_1.default.createElement(react_lazyload_1.default, { className: classes.displayVideo, placeholder: react_1.default.createElement(Skeleton_1.default, { variant: "rectangular", height: 360, width: '100%' }), key: i, once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT },
-                react_1.default.createElement(AutoPlayer_1.default, { url: l.url, width: '100%', key: i, onVideoWatch: () => handleLinkClick(l) })));
-        }
-        return react_1.default.createElement(react_1.default.Fragment, { key: i }, renderPreview(l, i));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
+            if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
+                return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ className: classes.displayVideo, placeholder: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }), i));
+            }
+            return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderPreview(l, i) }, i);
+        }) })));
 };

package/lib/cjs/shared/Media/Link/LayerComponent.js

@@ -1,6 +1,7 @@
 "use strict";
 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_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
@@ -31,16 +32,6 @@ const LayerComponent = react_1.default.forwardRef((props, ref) => {
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value]);
     const handleAdd = (0, react_1.useCallback)((media) => setValue([...value, media]), [value]);
     const handleChange = (0, react_1.useCallback)((medias) => setValue(medias), []);
-    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.layerRoot) }, rest),
-        react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-            react_1.default.createElement(material_1.IconButton, { onClick: onClose },
-                react_1.default.createElement(Icon_1.default, null, "arrow_back")),
-            react_1.default.createElement(material_1.Typography, null,
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" })),
-            react_1.default.createElement(material_1.Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
-        react_1.default.createElement(DialogContent_1.default, { className: classes.content },
-            react_1.default.createElement(UrlTextField_1.default, { id: "page", name: "page", label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }),
-            react_1.default.createElement(PreviewComponent_1.default, { onChange: handleChange, value: value })));
+    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.layerRoot) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(UrlTextField_1.default, { id: "page", name: "page", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), (0, jsx_runtime_1.jsx)(PreviewComponent_1.default, { onChange: handleChange, value: value })] }))] }));
 });
 exports.default = LayerComponent;

package/lib/cjs/shared/Media/Link/PreviewComponent.js

@@ -1,6 +1,7 @@
 "use strict";
 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 material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
@@ -31,9 +32,6 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (react_1.default.createElement(react_sortablejs_1.ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: (0, classnames_1.default)(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) },
-        react_1.default.createElement(DisplayComponent_1.default, { medias: [media] }),
-        react_1.default.createElement(material_1.IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
-            react_1.default.createElement(Icon_1.default, null, "delete"))))))));
+    return (0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) }, { children: [(0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }))] }), media.id))) }))) }));
 });
 exports.default = PreviewComponent;

package/lib/cjs/shared/Media/Link/TriggerButton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const constants_1 = require("./constants");
@@ -16,6 +16,5 @@ const Root = (0, styles_1.styled)(material_1.IconButton, {
 })(() => ({}));
 exports.default = (_a) => {
     var { className } = _a, rest = tslib_1.__rest(_a, ["className"]);
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }),
-        react_1.default.createElement(Icon_1.default, null, "link")));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) })));
 };

package/lib/cjs/shared/Media/Link/UrlTextField/index.js

@@ -1,6 +1,7 @@
 "use strict";
 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 InputAdornment_1 = tslib_1.__importDefault(require("@mui/material/InputAdornment"));
 const IconButton_1 = tslib_1.__importDefault(require("@mui/material/IconButton"));
@@ -73,11 +74,8 @@ exports.default = (props) => {
     /**
      * Renders url text field
      */
-    return (react_1.default.createElement("form", { method: "post", onSubmit: handleSubmit },
-        react_1.default.createElement(TextField_1.default, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
-                (urlError && (react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
-                endAdornment: (react_1.default.createElement(InputAdornment_1.default, { position: "end" },
-                    react_1.default.createElement(material_1.Fade, { in: urlError === null && url !== '' },
-                        react_1.default.createElement(IconButton_1.default, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? react_1.default.createElement(material_1.CircularProgress, { color: "primary", size: 20 }) : react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })))))
-            } }))));
+    return ((0, jsx_runtime_1.jsx)("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
+                (urlError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
+                endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: urlError === null && url !== '' }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary", size: 20 }) : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) })) })) })))
+            } })) })));
 };

package/lib/cjs/shared/Media/Share/DisplayComponent.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const FeedObject_1 = tslib_1.__importDefault(require("../../../components/FeedObject"));
@@ -26,6 +27,5 @@ exports.default = (_a) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest), _medias.map((media, i) => (react_1.default.createElement(Box_1.default, { className: classes.sharePreview, key: i, onClick: onMediaClick },
-        react_1.default.createElement(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST }))))));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => ((0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST }) }), i))) })));
 };

package/lib/cjs/shared/MetadataField/MetadataField.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
@@ -15,25 +16,25 @@ const MetadataField = (props) => {
     const _label = label !== null && label !== void 0 ? label : metadata.label;
     switch (metadata === null || metadata === void 0 ? void 0 : metadata.type) {
         case types_1.SCMetadataTypeFieldType.EMAIL:
-            component = react_1.default.createElement(EmailTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = (0, jsx_runtime_1.jsx)(EmailTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.URL:
-            component = react_1.default.createElement(UrlTextField_1.default, Object.assign({}, rest, { type: "url", className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = (0, jsx_runtime_1.jsx)(UrlTextField_1.default, Object.assign({}, rest, { type: "url", className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.PHONE_NUMBER:
-            component = react_1.default.createElement(PhoneTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = (0, jsx_runtime_1.jsx)(PhoneTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.ENUM:
-            component = (react_1.default.createElement(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }), metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => (react_1.default.createElement(material_1.MenuItem, { key: option, value: option }, option)))));
+            component = ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }, { children: metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: option }), option))) })));
             break;
         case types_1.SCMetadataTypeFieldType.CHECKBOX:
             const { value } = rest;
-            component = (react_1.default.createElement(material_1.FormControlLabel, { className: className, control: react_1.default.createElement(material_1.Checkbox, { required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, checked: Boolean(value) }), label: _label }));
+            component = ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: className, control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, checked: Boolean(value) }), label: _label }));
             break;
         default:
-            component = react_1.default.createElement(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
     }
-    return react_1.default.createElement(react_1.default.Fragment, null, component);
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: component });
 };
 exports.default = MetadataField;

package/lib/cjs/shared/NewChip/NewChip.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
@@ -33,6 +33,6 @@ function NewChip(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.notification.notificationNewChip.label", defaultMessage: "ui.notification.notificationNewChip.label" }), size: "small", color: "error" }, props)));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.notificationNewChip.label", defaultMessage: "ui.notification.notificationNewChip.label" }), size: "small", color: "error" }, props)));
 }
 exports.default = NewChip;