@selfcommunity/react-ui 0.7.50-event.30 → 0.7.50-events.101

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

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
 import { throttle } from 'throttle-debounce';
 import { ThresholdUnits, parseThreshold } from '../../utils/threshold';
 class InfiniteScroll extends Component {
@@ -222,23 +223,12 @@ class InfiniteScroll extends 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.createElement("div", { style: outerDivStyle, className: "infinite-scroll-component__outerdiv" },
-            React.createElement("div", { className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style },
-                this.props.header,
-                this.props.pullDownToRefresh && (React.createElement("div", { style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) },
-                    React.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 (_jsx("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: _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 && (_jsx("div", Object.assign({ style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: _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] })) })));
     }
 }
 export default InfiniteScroll;

package/lib/esm/shared/InfiniteScroll/stories/InfiniteScrollWithHeight.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import InfiniteScroll from '../index';
 const style = {
     height: 30,
@@ -20,11 +21,5 @@ export default function InfiniteScrollWithHeight() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "demo: Infinite Scroll with fixed height"),
-        React.createElement("hr", null),
-        React.createElement(InfiniteScroll, { dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: React.createElement("h4", null, "Loading..."), height: 400, endMessage: React.createElement("p", { style: { textAlign: 'center' } },
-                React.createElement("b", null, "Yay! You have seen it all")) }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
-            "div - #",
-            index))))));
+    return (_jsxs("div", { children: [_jsx("h1", { children: "demo: Infinite Scroll with fixed height" }), _jsx("hr", {}), _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: _jsx("h4", { children: "Loading..." }), height: 400, endMessage: _jsx("p", Object.assign({ style: { textAlign: 'center' } }, { children: _jsx("b", { children: "Yay! You have seen it all" }) })) }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
 }

package/lib/esm/shared/InfiniteScroll/stories/PullDownToRefreshInfScroll.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import InfiniteScroll from '../index';
 const style = {
     height: 30,
@@ -15,10 +16,5 @@ export default function PullDownToRefreshInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "demo: Pull down to refresh"),
-        React.createElement("hr", null),
-        React.createElement(InfiniteScroll, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: React.createElement("h4", null, "Loading..."), pullDownToRefresh: true, pullDownToRefreshContent: React.createElement("h3", { style: { textAlign: 'center' } }, "\u2193 Pull down to refresh"), releaseToRefreshContent: React.createElement("h3", { style: { textAlign: 'center' } }, "\u2191 Release to refresh"), refreshFunction: fetchMoreData }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
-            "div - #",
-            index))))));
+    return (_jsxs("div", { children: [_jsx("h1", { children: "demo: Pull down to refresh" }), _jsx("hr", {}), _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: _jsx("h4", { children: "Loading..." }), pullDownToRefresh: true, pullDownToRefreshContent: _jsx("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2193 Pull down to refresh" })), releaseToRefreshContent: _jsx("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2191 Release to refresh" })), refreshFunction: fetchMoreData }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
 }

package/lib/esm/shared/InfiniteScroll/stories/ScrollableTargetFixedInfScroll.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import InfiniteScroll from '../index';
 const style = {
     height: 30,
@@ -15,21 +16,15 @@ export default function ScrollableTargetFixedInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "demo: Infinite Scroll with scrollable target FIXED"),
-        React.createElement("hr", null),
-        React.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.createElement(InfiniteScroll, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: React.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return (_jsxs("div", { children: [_jsx("h1", { children: "demo: Infinite Scroll with scrollable target FIXED" }), _jsx("hr", {}), _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: _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: _jsx("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }

package/lib/esm/shared/InfiniteScroll/stories/ScrollableTargetInfScroll.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import InfiniteScroll from '../index';
 const style = {
     height: 30,
@@ -15,11 +16,5 @@ export default function ScrollableTargetInfScroll() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 1500);
     };
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "demo: Infinite Scroll with scrollable target"),
-        React.createElement("hr", null),
-        React.createElement("div", { id: "scrollableDiv", style: { height: 300, overflow: 'auto' } },
-            React.createElement(InfiniteScroll, { dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: React.createElement("h4", null, "Loading..."), scrollableTarget: "scrollableDiv" }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return (_jsxs("div", { children: [_jsx("h1", { children: "demo: Infinite Scroll with scrollable target" }), _jsx("hr", {}), _jsx("div", Object.assign({ id: "scrollableDiv", style: { height: 300, overflow: 'auto' } }, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: _jsx("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }

package/lib/esm/shared/InfiniteScroll/stories/ScrolleableTop.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import InfiniteScroll from '../index';
 const style = {
     height: 30,
@@ -15,14 +16,8 @@ export default function ScrolleableTop() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "demo: Infinite Scroll on top"),
-        React.createElement("hr", null),
-        React.createElement("div", { id: "scrollableDiv", style: {
-                height: 300,
-                overflow: 'auto'
-            } },
-            React.createElement(InfiniteScroll, { dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: React.createElement("h4", null, "Loading prev..."), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, items.map((_, index) => (React.createElement("div", { style: style, key: index },
-                "div - #",
-                index)))))));
+    return (_jsxs("div", { children: [_jsx("h1", { children: "demo: Infinite Scroll on top" }), _jsx("hr", {}), _jsx("div", Object.assign({ id: "scrollableDiv", style: {
+                    height: 300,
+                    overflow: 'auto'
+                } }, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: _jsx("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import InfiniteScroll from '../index';
 export default function WindowInfiniteScrollComponent() {
     const [data, setData] = useState(Array.from({ length: 30 }, (_, i) => i));
@@ -21,9 +22,5 @@ export default function WindowInfiniteScrollComponent() {
             setData(newData);
         }, 500);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InfiniteScroll, { hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: React.createElement("h1", null, "Loading next..."), loaderPrevious: React.createElement("h1", null, "Loading prev..."), dataLength: data.length, scrollThreshold: 1 }, data.map((e) => (React.createElement("div", { key: e, style: { height: 200, margin: 4, border: '1px solid hotpink' } },
-            "#",
-            e,
-            " row"))))));
+    return (_jsx(_Fragment, { children: _jsx(InfiniteScroll, Object.assign({ hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: _jsx("h1", { children: "Loading next..." }), loaderPrevious: _jsx("h1", { children: "Loading prev..." }), dataLength: data.length, scrollThreshold: 1 }, { children: data.map((e) => (_jsxs("div", Object.assign({ style: { height: 200, margin: 4, border: '1px solid hotpink' } }, { children: ["#", e, " row"] }), e))) })) }));
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -74,8 +75,5 @@ export default function LanguageSwitcher(inProps) {
             }
         }
     };
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
-        React.createElement(Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps),
-            React.createElement(FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" })),
-        React.createElement(Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps), languages.map((l) => (React.createElement(MenuItem, { value: l, key: l }, minimized ? l.toUpperCase() : React.createElement(FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` })))))));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps, { children: _jsx(FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" }) })), _jsx(Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps, { children: languages.map((l) => (_jsx(MenuItem, Object.assign({ value: l }, { children: minimized ? l.toUpperCase() : _jsx(FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` }) }), l))) }))] })));
 }

package/lib/esm/shared/Lightbox/Lightbox.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { PhotoSlider } from 'react-photo-view';
 import { CircularProgress } from '@mui/material';
@@ -20,8 +21,8 @@ const ReactImageLightbox = (props) => {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: React.createElement(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
-            return React.createElement(React.Fragment, null, toolbarButtons);
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
+            return _jsx(_Fragment, { children: toolbarButtons });
         } })));
 };
 export default ReactImageLightbox;

package/lib/esm/shared/MarkRead/MarkRead.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { http } from '@selfcommunity/api-services';
 import LazyLoad from 'react-lazyload';
 import { MIN_PRELOAD_OFFSET_VIEWPORT } from '../../constants/LazyLoad';
@@ -32,6 +33,5 @@ const MarkRead = (props) => {
     return null;
 };
 export default (props) => {
-    return (React.createElement(LazyLoad, { once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT },
-        React.createElement(MarkRead, Object.assign({}, props))));
+    return (_jsx(LazyLoad, Object.assign({ once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(MarkRead, Object.assign({}, props)) })));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Lightbox from './Lightbox';
@@ -64,75 +65,49 @@ export default (props) => {
         if (o.type) {
             switch (o.type) {
                 case 'doc':
-                    startAdornment = React.createElement(Icon, { className: classes.iconFile }, "picture_as_pdf");
+                    startAdornment = _jsx(Icon, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
                     break;
                 default:
-                    startAdornment = React.createElement(Icon, { className: classes.iconFile }, "insert_drive_file");
+                    startAdornment = _jsx(Icon, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
                     break;
             }
         }
-        return (React.createElement(React.Fragment, null, o.title && (React.createElement("div", { className: classes.title },
-            React.createElement(Typography, { variant: "subtitle2" },
-                startAdornment,
-                " ",
-                o.title)))));
+        return (_jsx(React.Fragment, { children: o.title && (_jsx("div", Object.assign({ className: classes.title }, { children: _jsxs(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.createElement(Grid, { container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) },
-            React.createElement(Grid, { item: true, ref: ref, xs: 12, classes: {
+        return (_jsx(Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: _jsxs(Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
                     root: classNames(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.createElement(Grid, { container: true },
-            React.createElement(Grid, { item: true, xs: 6, classes: { root: classNames(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.createElement(Grid, { item: true, xs: 6, classes: { root: classNames(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 (_jsxs(Grid, Object.assign({ container: true }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 6, classes: { root: classNames(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])] })), _jsxs(Grid, Object.assign({ item: true, xs: 6, classes: { root: classNames(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.createElement(Grid, { container: true },
-            React.createElement(Grid, { item: true, xs: 4, md: 4, classes: { root: classNames(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.createElement(Grid, { item: true, xs: 4, md: 4, classes: { root: classNames(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.createElement(Grid, { item: true, xs: 4, md: 4, classes: { root: classNames(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 (_jsxs(Grid, Object.assign({ container: true }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: classNames(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])] })), _jsxs(Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: classNames(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])] })), _jsxs(Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: classNames(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.createElement("div", { key: `cover-${id}`, className: classNames(classes.cover, classes.slide) }),
-            React.createElement("div", { key: `cover-text-${id}`, className: classNames(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } },
-                React.createElement(Icon, null, "zoom_out_map"))
+            _jsx("div", { className: classNames(classes.cover, classes.slide) }, `cover-${id}`),
+            _jsx("div", Object.assign({ className: classNames(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } }, { children: _jsx(Icon, { children: "zoom_out_map" }) }), `cover-text-${id}`)
         ];
     };
     const renderCountOverlay = (more) => {
         const extra = _medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
         return [
-            more && React.createElement("div", { key: "count", className: classes.cover }),
-            more && (React.createElement("div", { key: "count-sub", className: classes.coverText, style: { fontSize: '200%' } },
-                React.createElement("p", null,
-                    "+",
-                    extra)))
+            more && _jsx("div", { className: classes.cover }, "count"),
+            more && (_jsx("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: _jsxs("p", { children: ["+", extra] }) }), "count-sub"))
         ];
     };
     const imagesToShow = [..._medias];
@@ -142,9 +117,5 @@ export default (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (React.createElement(Root, { className: classNames(classes.displayRoot, className) },
-        [1, 3, 4].includes(imagesToShow.length) && renderOne(),
-        imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(),
-        imagesToShow.length >= 4 && renderThree(),
-        preview !== -1 && React.createElement(Lightbox, { onClose: handleClose, index: preview, medias: _medias })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && _jsx(Lightbox, { onClose: handleClose, index: preview, medias: _medias })] })));
 };

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { styled } from '@mui/material/styles';
 import BaseLightbox from '../../../Lightbox';
 import { PREFIX } from '../constants';
@@ -22,13 +23,12 @@ export default function Lightbox(props) {
     }, []);
     const toolbarRender = useCallback((props) => {
         if (medias[props.index].type === MEDIA_TYPE_DOCUMENT) {
-            return React.createElement(IconButton, { component: Link, to: medias[props.index].url, target: "_blank", color: "inherit" },
-                React.createElement(Icon, null, "download"));
+            return _jsx(IconButton, Object.assign({ component: Link, to: medias[props.index].url, target: "_blank", color: "inherit" }, { children: _jsx(Icon, { children: "download" }) }));
         }
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }, [medias]);
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarRender: toolbarRender })));
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarRender: toolbarRender })));
 }

package/lib/esm/shared/Media/File/PreviewComponent.d.ts

@@ -5,5 +5,5 @@ export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChang
     onChange: (value: SCMediaType[]) => void;
     value: SCMediaType[];
 }
-declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "id" | "role" | "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "value"> & React.RefAttributes<unknown>>;
+declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "id" | "role" | "className" | "style" | "classes" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "value"> & React.RefAttributes<unknown>>;
 export default PreviewComponent;

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { Box, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -43,14 +44,9 @@ const PreviewComponent = React.forwardRef((props, ref) => {
     }, [onChange, value]);
     const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
-    const mediaElements = useMemo(() => medias.map((media) => (React.createElement(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.createElement(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
-            React.createElement(Icon, null, "delete")),
-        media.title && React.createElement(Typography, { className: classes.title },
-            media.type === MEDIA_TYPE_DOCUMENT && React.createElement(Icon, null, "picture_as_pdf"),
-            media.title)))), [medias]);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (isMobile ?
-        React.createElement(Box, { id: SORTABLE_ID }, mediaElements) :
-        React.createElement(ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, mediaElements)));
+    const mediaElements = useMemo(() => medias.map((media) => (_jsxs(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: [_jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })), media.title && _jsxs(Typography, Object.assign({ className: classes.title }, { children: [media.type === MEDIA_TYPE_DOCUMENT && _jsx(Icon, { children: "picture_as_pdf" }), media.title] }))] }), media.id))), [medias]);
+    return _jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (isMobile ?
+            _jsx(Box, Object.assign({ id: SORTABLE_ID }, { children: mediaElements })) :
+            _jsx(ReactSortable, Object.assign({ id: SORTABLE_ID, list: medias, setList: handleSort }, { children: mediaElements }))) }));
 });
 export default PreviewComponent;

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { CircularProgress, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, } from '@mui/material';
 import Icon from '@mui/material/Icon';
 import { PREFIX } from './constants';
@@ -31,11 +32,11 @@ const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => (React.createElement(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => (React.createElement(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => (React.createElement(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => (React.createElement(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => (React.createElement(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
+const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
+const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => (_jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
+const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => (_jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
 export default (_a) => {
     var { className, onAdd = null } = _a, rest = __rest(_a, ["className", "onAdd"]);
     // STATE
@@ -79,32 +80,20 @@ export default (_a) => {
     const list = useMemo(() => {
         if (isMobile) {
             return [
-                React.createElement(ListItem, { className: classes.item, key: "photo" },
-                    React.createElement(PhotoUploadListItemButton, { inputFieldName: "image" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }))),
-                React.createElement(ListItem, { className: classes.item, key: "gallery" },
-                    React.createElement(GalleryUploadListItemButton, { inputFieldName: "image" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }))),
-                React.createElement(ListItem, { className: classes.item, key: "document" },
-                    React.createElement(DocumentUploadListItemButton, { inputFieldName: "document" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" })))
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(PhotoUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }) })) }), "photo"),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(GalleryUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) })) }), "gallery"),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(DocumentUploadListItemButton, Object.assign({ inputFieldName: "document" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) })) }), "document")
             ];
         }
         else {
             return [
-                React.createElement(GalleryUploadMenuItem, { extraProps: { className: classes.item }, inputFieldName: "image", key: "gallery" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" })),
-                React.createElement(DocumentUploadMenuItem, { extraProps: { className: classes.item }, key: "document", inputFieldName: "document" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }))
+                _jsx(GalleryUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "image" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }), "gallery"),
+                _jsx(DocumentUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "document" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }), "document")
             ];
         }
     }, [isMobile, handleFilterByMime, handleSuccess, handleProgress, handleError]);
-    return (React.createElement(ChunkedUploady, { destination: {
+    return (_jsxs(ChunkedUploady, Object.assign({ destination: {
             url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
             method: Endpoints.ComposerChunkUploadMedia.method
-        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true },
-        React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-        React.createElement(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }), isUploading ? React.createElement(CircularProgress, { size: 20 }) : React.createElement(Icon, null, "photo_file")),
-        isMobile ? (React.createElement(SwipeableDrawerRoot, { onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
-            React.createElement(List, null, list))) : (React.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: [_jsx(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), _jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }, { children: isUploading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Icon, { children: "photo_file" }) })), isMobile ? (_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: _jsx(List, { children: list }) }))) : (_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/esm/shared/Media/File/asUploadButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from "react";
 import { markAsUploadOptionsComponent, useUploadyContext } from "@rpldy/shared-ui";
 const asUploadButton = (Component, InputProps) => {
     const AsUploadButton = (props, ref) => {
@@ -20,7 +21,7 @@ const asUploadButton = (Component, InputProps) => {
             showFileUpload(uploadOptionsRef.current);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, [getInternalFileInput, showFileUpload, uploadOptionsRef, onClick]);
-        return React.createElement(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
+        return _jsx(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
     };
     markAsUploadOptionsComponent(AsUploadButton);
     return forwardRef(AsUploadButton);