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

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

@@ -1,7 +1,7 @@
 "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 throttle_debounce_1 = require("throttle-debounce");
 const threshold_1 = require("../../utils/threshold");
 class InfiniteScroll extends react_1.Component {
@@ -225,23 +225,12 @@ class InfiniteScroll extends react_1.Component {
         // because heighted infiniteScroll visualy breaks
         // on drag down as overflow becomes visible
         const outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: 'auto' } : {};
-        return (react_1.default.createElement("div", { style: outerDivStyle, className: "infinite-scroll-component__outerdiv" },
-            react_1.default.createElement("div", { className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style },
-                this.props.header,
-                this.props.pullDownToRefresh && (react_1.default.createElement("div", { style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) },
-                    react_1.default.createElement("div", { style: {
-                            position: 'absolute',
-                            left: 0,
-                            right: 0,
-                            top: -1 * this.maxPullDownDistance
-                        } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent))),
-                !this.props.inverse && this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious,
-                this.props.children,
-                this.props.inverse && this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious,
-                !this.state.showLoaderNext && !hasChildren && this.props.hasMoreNext && this.props.loaderNext,
-                this.state.showLoaderNext && this.props.hasMoreNext && this.props.loaderNext,
-                !this.props.hasMoreNext && this.props.endMessage,
-                this.props.footer)));
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                top: -1 * this.maxPullDownDistance
+                            } }, { children: this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent })) }))), !this.props.inverse && this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious, this.props.children, this.props.inverse && this.state.showLoaderPrevious && this.props.hasMorePrevious && this.props.loaderPrevious, !this.state.showLoaderNext && !hasChildren && this.props.hasMoreNext && this.props.loaderNext, this.state.showLoaderNext && this.props.hasMoreNext && this.props.loaderNext, !this.props.hasMoreNext && this.props.endMessage, this.props.footer] })) })));
     }
 }
 exports.default = InfiniteScroll;

package/lib/cjs/shared/InfiniteScroll/stories/InfiniteScrollWithHeight.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"));
 const style = {
     height: 30,
@@ -23,12 +24,6 @@ function InfiniteScrollWithHeight() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll with fixed height"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement(index_1.default, { dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: react_1.default.createElement("h4", null, "Loading..."), height: 400, endMessage: react_1.default.createElement("p", { style: { textAlign: 'center' } },
-                react_1.default.createElement("b", null, "Yay! You have seen it all")) }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-            "div - #",
-            index))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with fixed height" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), height: 400, endMessage: (0, jsx_runtime_1.jsx)("p", Object.assign({ style: { textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)("b", { children: "Yay! You have seen it all" }) })) }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
 }
 exports.default = InfiniteScrollWithHeight;

package/lib/cjs/shared/InfiniteScroll/stories/PullDownToRefreshInfScroll.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"));
 const style = {
     height: 30,
@@ -18,11 +19,6 @@ function PullDownToRefreshInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Pull down to refresh"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement(index_1.default, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: react_1.default.createElement("h4", null, "Loading..."), pullDownToRefresh: true, pullDownToRefreshContent: react_1.default.createElement("h3", { style: { textAlign: 'center' } }, "\u2193 Pull down to refresh"), releaseToRefreshContent: react_1.default.createElement("h3", { style: { textAlign: 'center' } }, "\u2191 Release to refresh"), refreshFunction: fetchMoreData }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-            "div - #",
-            index))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Pull down to refresh" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), pullDownToRefresh: true, pullDownToRefreshContent: (0, jsx_runtime_1.jsx)("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2193 Pull down to refresh" })), releaseToRefreshContent: (0, jsx_runtime_1.jsx)("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2191 Release to refresh" })), refreshFunction: fetchMoreData }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
 }
 exports.default = PullDownToRefreshInfScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrollableTargetFixedInfScroll.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"));
 const style = {
     height: 30,
@@ -18,22 +19,16 @@ function ScrollableTargetFixedInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll with scrollable target FIXED"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement("div", { id: "scrollableDiv", style: {
-                position: 'fixed',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 170,
-                zIndex: 1000,
-                maxWidth: '100% !important',
-                height: '50vh',
-                overflowY: 'scroll'
-            } },
-            react_1.default.createElement(index_1.default, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: react_1.default.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with scrollable target FIXED" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    top: 170,
+                    zIndex: 1000,
+                    maxWidth: '100% !important',
+                    height: '50vh',
+                    overflowY: 'scroll'
+                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrollableTargetFixedInfScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrollableTargetInfScroll.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"));
 const style = {
     height: 30,
@@ -18,12 +19,6 @@ function ScrollableTargetInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll with scrollable target"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement("div", { id: "scrollableDiv", style: { height: 300, overflow: 'auto' } },
-            react_1.default.createElement(index_1.default, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: react_1.default.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with scrollable target" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: { height: 300, overflow: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrollableTargetInfScroll;

package/lib/cjs/shared/InfiniteScroll/stories/ScrolleableTop.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"));
 const style = {
     height: 30,
@@ -18,15 +19,9 @@ function ScrolleableTop() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null, "demo: Infinite Scroll on top"),
-        react_1.default.createElement("hr", null),
-        react_1.default.createElement("div", { id: "scrollableDiv", style: {
-                height: 300,
-                overflow: 'auto'
-            } },
-            react_1.default.createElement(index_1.default, { dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: react_1.default.createElement("h4", null, "Loading prev..."), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, items.map((_, index) => (react_1.default.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll on top" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
+                    height: 300,
+                    overflow: 'auto'
+                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: (0, jsx_runtime_1.jsx)("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrolleableTop;

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);