@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.0-live.40

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

@@ -1,28 +1,24 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
-import { PhotoSlider } from 'react-photo-view';
-import { CircularProgress } from '@mui/material';
-const PREFIX = 'SCLightbox';
+import { useCallback } from 'react';
+import BaseLightbox from './BaseLightbox';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-lightbox-root`
 };
-const Root = styled(PhotoSlider, {
+const Root = styled(BaseLightbox, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'LightboxRoot'
 })(() => ({}));
-const ReactImageLightbox = (props) => {
-    const { images = [], index, onClose, visible = true, afterClose, onIndexChange, toolbarRender, toolbarButtons = [] } = props, rest = __rest(props, ["images", "index", "onClose", "visible", "afterClose", "onIndexChange", "toolbarRender", "toolbarButtons"]);
-    // STATE
-    const [currentImages] = useState(images || []);
-    const [currentImageIndex, setCurrentImageIndex] = useState(index || 0);
+export default function Lightbox(props) {
+    // PROPS
+    const { medias = [], index = 0, toolbarButtons, onClose, onIndexChange } = props, rest = __rest(props, ["medias", "index", "toolbarButtons", "onClose", "onIndexChange"]);
+    const mediaToDataTypeMap = useCallback((media, index) => {
+        return { src: media.image, width: media.image_width, height: media.image_height, key: index };
+    }, []);
     /**
      * Renders root object
      */
-    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;
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarButtons: toolbarButtons })));
+}

package/lib/esm/shared/Lightbox/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLightbox";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCLightbox';

package/lib/esm/shared/Lightbox/index.d.ts

@@ -1,2 +1,4 @@
-import Lightbox from './Lightbox';
-export default Lightbox;
+import BaseLightbox, { BaseLightboxProps } from './BaseLightbox';
+import Lightbox, { LightboxProps } from './Lightbox';
+export default BaseLightbox;
+export { BaseLightboxProps, Lightbox, LightboxProps };

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

@@ -1,2 +1,4 @@
+import BaseLightbox from './BaseLightbox';
 import Lightbox from './Lightbox';
-export default Lightbox;
+export default BaseLightbox;
+export { Lightbox };

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

@@ -33,5 +33,5 @@ const MarkRead = (props) => {
     return null;
 };
 export default (props) => {
-    return (_jsx(LazyLoad, Object.assign({ once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(MarkRead, Object.assign({}, props)) })));
+    return (_jsx(LazyLoad, { once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT, children: _jsx(MarkRead, Object.assign({}, props)) }));
 };

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Grid, IconButton, Typography } from '@mui/material';
+import Icon from '@mui/material/Icon';
 import { styled } from '@mui/material/styles';
-import Lightbox from './Lightbox';
-import { Box, Grid, Typography } from '@mui/material';
+import { Link } from '@selfcommunity/react-core';
 import classNames from 'classnames';
-import Icon from '@mui/material/Icon';
+import { MEDIA_TYPE_DOCUMENT } from '../../../constants/Media';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { Lightbox } from '../../Lightbox';
 import { PREFIX } from './constants';
 import filter from './filter';
 const classes = {
@@ -27,18 +29,20 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'DisplayRoot'
-})(({ theme }) => ({}));
+})(({}) => ({}));
 export default (props) => {
     // PROPS
     const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
     // STATE
     const [preview, setPreview] = useState(-1);
+    const [toolbarButtons, setToolbarButtons] = useState(undefined);
     const { ref, inView } = useInView({ triggerOnce: false });
     // MEMO
     const _medias = useMemo(() => medias.filter(filter), [medias]);
     // HANDLERS
     const handleClose = () => {
         setPreview(-1);
+        setToolbarButtons(undefined);
     };
     // UTILS
     const getImageUrl = (image, original = false) => {
@@ -65,34 +69,34 @@ export default (props) => {
         if (o.type) {
             switch (o.type) {
                 case 'doc':
-                    startAdornment = _jsx(Icon, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
+                    startAdornment = _jsx(Icon, { className: classes.iconFile, children: "picture_as_pdf" });
                     break;
                 default:
-                    startAdornment = _jsx(Icon, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
+                    startAdornment = _jsx(Icon, { className: classes.iconFile, children: "insert_drive_file" });
                     break;
             }
         }
-        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] })) }))) }));
+        return (_jsx(React.Fragment, { children: o.title && (_jsx("div", { className: classes.title, children: _jsxs(Typography, { 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 (_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: {
+        return (_jsx(Grid, { container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})), children: _jsxs(Grid, { 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}%` } : {})) }, { children: [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 (_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])] }))] })));
+        return (_jsxs(Grid, { container: true, children: [_jsxs(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])})` }, children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] }), _jsxs(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])})` }, 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 (_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])] }))] })));
+        return (_jsxs(Grid, { container: true, children: [_jsxs(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])})` }, children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] }), _jsxs(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])})` }, children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] }), _jsxs(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])})` }, children: [overlay, renderTitle(_medias[3])] })] }));
     };
     const renderOverlay = (id) => {
         if (!gallery) {
@@ -100,16 +104,29 @@ export default (props) => {
         }
         return [
             _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}`)
+            _jsx("div", { 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 && _jsx("div", { className: classes.cover }, "count"),
-            more && (_jsx("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: _jsxs("p", { children: ["+", extra] }) }), "count-sub"))
+            more && (_jsx("div", { className: classes.coverText, style: { fontSize: '200%' }, children: _jsxs("p", { children: ["+", extra] }) }, "count-sub"))
         ];
     };
+    const handleIndexChange = useCallback((index) => {
+        if (_medias[index].type === MEDIA_TYPE_DOCUMENT) {
+            setToolbarButtons(_jsx(IconButton, { component: Link, to: medias[index].url, target: "_blank", color: "inherit", children: _jsx(Icon, { children: "download" }) }));
+        }
+        else {
+            setToolbarButtons(undefined);
+        }
+    }, [_medias, setToolbarButtons]);
+    useEffect(() => {
+        if (preview !== -1) {
+            handleIndexChange(preview);
+        }
+    }, [preview]);
     const imagesToShow = [..._medias];
     if (maxVisible && _medias.length > maxVisible) {
         imagesToShow.length = maxVisible;
@@ -117,5 +134,5 @@ export default (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    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 })] })));
+    return (_jsxs(Root, { 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, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] }));
 };

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

@@ -44,9 +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) => (_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]);
+    const mediaElements = useMemo(() => medias.map((media) => (_jsxs(Box, { 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, { className: classes.delete, onClick: handleDelete(media.id), size: "small", children: _jsx(Icon, { children: "delete" }) }), media.title && _jsxs(Typography, { 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 }))) }));
+            _jsx(Box, { id: SORTABLE_ID, children: mediaElements }) :
+            _jsx(ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort, children: mediaElements })) }));
 });
 export default PreviewComponent;

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

@@ -80,20 +80,20 @@ export default (_a) => {
     const list = useMemo(() => {
         if (isMobile) {
             return [
-                _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")
+                _jsx(ListItem, { className: classes.item, children: _jsx(PhotoUploadListItemButton, { inputFieldName: "image", children: _jsx(FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }) }) }, "photo"),
+                _jsx(ListItem, { className: classes.item, children: _jsx(GalleryUploadListItemButton, { inputFieldName: "image", children: _jsx(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }) }, "gallery"),
+                _jsx(ListItem, { className: classes.item, children: _jsx(DocumentUploadListItemButton, { inputFieldName: "document", children: _jsx(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }) }, "document")
             ];
         }
         else {
             return [
-                _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")
+                _jsx(GalleryUploadMenuItem, { extraProps: { className: classes.item }, inputFieldName: "image", children: _jsx(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }, "gallery"),
+                _jsx(DocumentUploadMenuItem, { 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 (_jsxs(ChunkedUploady, Object.assign({ destination: {
+    return (_jsxs(ChunkedUploady, { destination: {
             url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
             method: Endpoints.ComposerChunkUploadMedia.method
-        }, 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 })))] })));
+        }, 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, { 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, { 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.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from "react";
-declare type FileInputProps = {
+type FileInputProps = {
     capture?: string;
     accept: string;
 };

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

@@ -47,11 +47,11 @@ export default (props) => {
      * @param key
      */
     const renderPreview = (media, key) => {
-        if (media.embed.metadata.html) {
-            return renderHtml(media, key);
-        }
+        // if (media.embed.metadata.html) {
+        // 	return renderHtml(media, key);
+        // }
         const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
-        return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] })));
+        return (_jsxs(Box, { className: classes.displayLink, children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, { className: classes.snippet, children: [_jsx("b", { className: classes.snippetTitle, children: media.embed.metadata.title }), _jsx("br", {}), _jsx("p", { className: classes.snippetDescription, children: media.embed.metadata.description }), _jsx("a", { href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media), children: domain })] }), _jsx("div", { style: { clear: 'both' } })] }, key));
     };
     /**
      * Render html embed
@@ -59,7 +59,7 @@ export default (props) => {
      * @param key
      */
     const renderHtml = (media, key) => {
-        return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] })));
+        return (_jsxs(Box, { className: classes.displayHtmlWrap, children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", { className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height }, children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) })] }, key));
     };
     /**
      * Renders component
@@ -69,7 +69,7 @@ export default (props) => {
     }
     return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
             if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
-                return (_jsx(LazyLoad, Object.assign({ className: classes.displayVideo, placeholder: _jsx(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(AutoPlayer, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }), i));
+                return (_jsx(LazyLoad, { className: classes.displayVideo, placeholder: _jsx(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT, children: _jsx(AutoPlayer, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }, i));
             }
             return _jsx(React.Fragment, { children: renderPreview(l, i) }, i);
         }) })));

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

@@ -30,6 +30,6 @@ const LayerComponent = React.forwardRef((props, ref) => {
     const handleSave = useCallback(() => onSave(value), [value]);
     const handleAdd = useCallback((media) => setValue([...value, media]), [value]);
     const handleChange = useCallback((medias) => setValue(medias), []);
-    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(UrlTextField, { id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), _jsx(PreviewComponent, { onChange: handleChange, value: value })] }))] }));
+    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest, { children: [_jsxs(DialogTitle, { className: classes.title, children: [_jsx(IconButton, { onClick: onClose, children: _jsx(Icon, { children: "arrow_back" }) }), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" }) }), _jsx(Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave, children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) })] }), _jsxs(DialogContent, { className: classes.content, children: [_jsx(UrlTextField, { id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), _jsx(PreviewComponent, { onChange: handleChange, value: value })] })] }));
 });
 export default LayerComponent;

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

@@ -30,6 +30,6 @@ const PreviewComponent = React.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => (_jsxs(Box, Object.assign({ className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) }, { children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))] }), media.id))) }))) })));
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, { list: medias, setList: handleSort, children: medias.map((media) => (_jsxs(Box, { className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }), children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small", children: _jsx(Icon, { children: "delete" }) })] }, media.id))) })) })));
 });
 export default PreviewComponent;

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

@@ -14,5 +14,5 @@ const Root = styled(IconButton, {
 })(() => ({}));
 export default (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (_jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }, { children: _jsx(Icon, { children: "link" }) })));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add link", children: _jsx(Icon, { children: "link" }) })));
 };

package/lib/esm/shared/Media/Link/UrlTextField/index.d.ts

@@ -75,6 +75,6 @@ export interface OutlinedUrlTextFieldProps extends BaseUrlTextFieldProps {
      */
     InputProps?: Partial<OutlinedInputProps>;
 }
-export declare type UrlTextFieldProps = StandardUrlTextFieldProps | FilledUrlTextFieldProps | OutlinedUrlTextFieldProps;
+export type UrlTextFieldProps = StandardUrlTextFieldProps | FilledUrlTextFieldProps | OutlinedUrlTextFieldProps;
 declare const _default: (props: UrlTextFieldProps) => JSX.Element;
 export default _default;

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

@@ -72,8 +72,8 @@ export default (props) => {
     /**
      * Renders url text field
      */
-    return (_jsx("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: _jsx(TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
+    return (_jsx("form", { method: "post", onSubmit: handleSubmit, children: _jsx(TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
                 (urlError && (_jsx(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || _jsx(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
-                endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Fade, Object.assign({ in: urlError === null && url !== '' }, { children: _jsx(IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? _jsx(CircularProgress, { color: "primary", size: 20 }) : _jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) })) })) })))
-            } })) })));
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Fade, { in: urlError === null && url !== '', children: _jsx(IconButton, { size: "small", disabled: isCreating, type: "submit", children: isCreating ? _jsx(CircularProgress, { color: "primary", size: 20 }) : _jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) }) }) }))
+            } })) }));
 };

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

@@ -28,5 +28,5 @@ export default (_a) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, { className: classes.sharePreview, onClick: onMediaClick, children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }, i))) })));
 };

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

@@ -1,14 +1,14 @@
 import { __awaiter } from "tslib";
-import { useChunkFinishListener, useChunkStartListener, useItemErrorListener, useItemFinishListener, useRequestPreSend, } from '@rpldy/chunked-uploady';
+import { useChunkFinishListener, useChunkStartListener, useItemErrorListener, useItemFinishListener, useRequestPreSend } from '@rpldy/chunked-uploady';
+import { useItemProgressListener, useItemStartListener } from '@rpldy/uploady';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { useSCContext, useSCUser } from '@selfcommunity/react-core';
-import { useItemProgressListener, useItemStartListener } from '@rpldy/uploady';
-import { md5 } from '../../utils/hash';
+import { Logger, resizeImage } from '@selfcommunity/utils';
 import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import messages from '../../messages/common';
-import { Logger, resizeImage } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import messages from '../../messages/common';
+import { md5 } from '../../utils/hash';
 export default (props) => {
     // PROPS
     const { type = null, onSuccess = null, onProgress = null, onError = null } = props;
@@ -53,7 +53,7 @@ export default (props) => {
             // @ts-ignore
             reader.readAsDataURL(item.file);
         }
-        chunkStateRef.current.setChunk({ id: item.id, [`upload_id`]: null, completed: 0, name: item.file.name });
+        chunkStateRef.current.setChunk({ id: item.id, ['upload_id']: null, completed: 0, name: item.file.name });
     });
     useItemProgressListener((item) => {
         chunkStateRef.current.setChunk({ id: item.id, completed: item.completed });
@@ -100,7 +100,7 @@ export default (props) => {
             sendOptions: {
                 paramName: 'image',
                 method: Endpoints.ComposerChunkUploadMedia.method,
-                formatServerResponse: (response, status, headers) => __awaiter(void 0, void 0, void 0, function* () {
+                formatServerResponse: (response, status, _headers) => __awaiter(void 0, void 0, void 0, function* () {
                     if (status === 401) {
                         yield refreshSession();
                     }
@@ -109,7 +109,7 @@ export default (props) => {
             }
         };
         if (chunkStateRef.current.chunks[data.item.id].upload_id) {
-            res.sendOptions.params = { [`upload_id`]: chunkStateRef.current.chunks[data.item.id].upload_id };
+            res.sendOptions.params = { ['upload_id']: chunkStateRef.current.chunks[data.item.id].upload_id };
         }
         else {
             chunkStateRef.current.setChunk({ id: data.item.id, type: type || data.sendOptions.paramName });
@@ -118,12 +118,14 @@ export default (props) => {
     });
     useChunkFinishListener((data) => __awaiter(void 0, void 0, void 0, function* () {
         const _data = yield data.uploadData.response.data;
-        chunkStateRef.current.setChunk({ id: data.item.id, [`upload_id`]: _data.upload_id });
+        chunkStateRef.current.setChunk({ id: data.item.id, ['upload_id']: _data.upload_id });
     }));
     useRequestPreSend(({ items, options }) => __awaiter(void 0, void 0, void 0, function* () {
-        const destination = ['JWT', 'OAuth'].includes(scContext.settings.session.type) ? {
-            headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` }
-        } : {};
+        const destination = ['JWT', 'OAuth'].includes(scContext.settings.session.type)
+            ? {
+                headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` }
+            }
+            : {};
         if (items.length == 0) {
             return Promise.resolve({ options, destination });
         }

package/lib/esm/shared/MetadataField/MetadataField.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '@mui/material';
 import { SCMetadataType } from '@selfcommunity/types';
-export declare type MetadataFieldProps = TextFieldProps & {
+export type MetadataFieldProps = TextFieldProps & {
     metadata: SCMetadataType;
 };
 declare const MetadataField: (props: MetadataFieldProps) => JSX.Element;

package/lib/esm/shared/MetadataField/MetadataField.js

@@ -23,7 +23,7 @@ const MetadataField = (props) => {
             component = _jsx(PhoneTextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case SCMetadataTypeFieldType.ENUM:
-            component = (_jsx(TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }, { children: metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => (_jsx(MenuItem, Object.assign({ value: option }, { children: option }), option))) })));
+            component = (_jsx(TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true, children: metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => (_jsx(MenuItem, { value: option, children: option }, option))) })));
             break;
         case SCMetadataTypeFieldType.CHECKBOX:
             const { value } = rest;

package/lib/esm/shared/NotificationItem/NotificationItem.js

@@ -70,5 +70,5 @@ export default function NotificationItem(inProps) {
     // RENDER
     return (_jsxs(Root, Object.assign({ id: id }, rest, { className: classNames(classes.root, className, `${PREFIX}-${template}`, {
             [classes.new]: isNew
-        }), elevation: elevation }, { children: [_jsxs(Box, Object.assign({ className: classes.header }, { children: [image && _jsx(Box, Object.assign({ className: classNames(classes.image) }, { children: image })), _jsxs(Box, Object.assign({ className: classes.title }, { children: [primary && (_jsxs(Box, Object.assign({ className: classes.primary }, { children: [template === SCNotificationObjectTemplateType.DETAIL && isNew && _jsx(NewChip, { className: classes.newChip }), disableTypography ? primary : _jsx(Typography, Object.assign({}, primaryTypographyProps, { children: primary }))] }))), secondary && (_jsx(Box, Object.assign({ className: classes.secondary }, { children: disableTypography ? secondary : _jsx(Typography, Object.assign({}, secondaryTypographyProps, { children: secondary })) })))] }))] })), actions && _jsx(Box, Object.assign({ className: classes.actions }, { children: actions })), footer && _jsx(Box, Object.assign({ className: classes.footer }, { children: footer }))] })));
+        }), elevation: elevation, children: [_jsxs(Box, { className: classes.header, children: [image && _jsx(Box, { className: classNames(classes.image), children: image }), _jsxs(Box, { className: classes.title, children: [primary && (_jsxs(Box, { className: classes.primary, children: [template === SCNotificationObjectTemplateType.DETAIL && isNew && _jsx(NewChip, { className: classes.newChip }), disableTypography ? primary : _jsx(Typography, Object.assign({}, primaryTypographyProps, { children: primary }))] })), secondary && (_jsx(Box, { className: classes.secondary, children: disableTypography ? secondary : _jsx(Typography, Object.assign({}, secondaryTypographyProps, { children: secondary })) }))] })] }), actions && _jsx(Box, { className: classes.actions, children: actions }), footer && _jsx(Box, { className: classes.footer, children: footer })] })));
 }

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

@@ -19,6 +19,6 @@ export default function PasswordTextField(props) {
     };
     // RENDER
     return (_jsx(Root, Object.assign({ type: showPassword ? 'text' : 'password' }, props, { InputProps: {
-            endAdornment: (_jsxs(_Fragment, { children: [(_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment, _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "toggle password visibility", onClick: handleClick, edge: "end" }, { children: showPassword ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "visibility" }) })) }))] }))
+            endAdornment: (_jsxs(_Fragment, { children: [(_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment, _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "toggle password visibility", onClick: handleClick, edge: "end", children: showPassword ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "visibility" }) }) })] }))
         } })));
 }

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

@@ -18,5 +18,5 @@ const Root = styled(Box, {
 })(() => ({}));
 export default function ProgressBar(props) {
     const { className, value, loadingMessage = null, hideBar = false } = props, rest = __rest(props, ["className", "value", "loadingMessage", "hideBar"]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Box, Object.assign({ className: classes.message }, { children: loadingMessage })), !hideBar && _jsx(LinearProgress, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), _jsx(Box, Object.assign({ className: classes.progress }, { children: _jsx(Typography, Object.assign({ variant: "h4", color: "secondary" }, { children: `${Math.round(value)}%` })) }))] })));
+    return (_jsxs(Root, { className: classNames(classes.root, className), children: [_jsx(Box, { className: classes.message, children: loadingMessage }), !hideBar && _jsx(LinearProgress, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), _jsx(Box, { className: classes.progress, children: _jsx(Typography, { variant: "h4", color: "secondary", children: `${Math.round(value)}%` }) })] }));
 }

package/lib/esm/shared/StickyBox/index.d.ts

@@ -32,18 +32,18 @@ import React from 'react';
 /**
  * Types/interfaces
  */
-export declare type UseStickyBoxProps = {
+export type UseStickyBoxProps = {
     offsetTop?: number;
     offsetBottom?: number;
     bottom?: boolean;
 };
-export declare type StickyBoxProps = UseStickyBoxProps & {
+export type StickyBoxProps = UseStickyBoxProps & {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
 };
-export declare type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
-export declare type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
+export type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
+export type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
 /**
  * useStickyBox
  * @param offsetTop

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

@@ -350,6 +350,6 @@ export const useStickyBox = ({ offsetTop = 0, offsetBottom = 0, bottom = false }
  */
 const StickyBox = ({ offsetTop, offsetBottom, bottom, children, className, style }) => {
     const ref = useStickyBox({ offsetTop, offsetBottom, bottom });
-    return (_jsx("div", Object.assign({ className: className, style: style, ref: ref }, { children: children })));
+    return (_jsx("div", { className: className, style: style, ref: ref, children: children }));
 };
 export default StickyBox;

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

@@ -93,7 +93,7 @@ export default function Tags(props) {
      * Renders tag title
      */
     function renderTitle() {
-        return (_jsx(_Fragment, { children: title && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ sx: { padding: 1, fontWeight: 600 } }, { children: title })), _jsx(Divider, {})] })) }));
+        return (_jsx(_Fragment, { children: title && (_jsxs(_Fragment, { children: [_jsx(Typography, { sx: { padding: 1, fontWeight: 600 }, children: title }), _jsx(Divider, {})] })) }));
     }
     /**
      * Returns focus to the button when we transitioned from !open -> open
@@ -108,13 +108,13 @@ export default function Tags(props) {
     /**
      * Renders component
      */
-    return (_jsx(_Fragment, { children: tags.length && (_jsx(React.Fragment, { children: type === TagsComponentType.POPPER ? (_jsxs(TagsPopperRoot, Object.assign({}, rest, { children: [_jsx(Icon, Object.assign({ ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true" }, { children: "label" })), _jsx(TagsPopper, Object.assign({ open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
+    return (_jsx(_Fragment, { children: tags.length && (_jsx(React.Fragment, { children: type === TagsComponentType.POPPER ? (_jsxs(TagsPopperRoot, Object.assign({}, rest, { children: [_jsx(Icon, { ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true", children: "label" }), _jsx(TagsPopper, { open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
                             {
                                 name: 'preventOverflow',
                                 enabled: true
                             }
-                        ] }, { children: (_a) => {
+                        ], children: (_a) => {
                             var { TransitionProps, placement } = _a, rest = __rest(_a, ["TransitionProps", "placement"]);
-                            return (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(_Fragment, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 2 }, rest, { children: tags.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
-                        } }))] }))) : (_jsxs(ListRoot, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
+                            return (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }, children: _jsx(Paper, { variant: 'outlined', className: classes.paper, children: _jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsxs(_Fragment, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 2 }, rest, { children: tags.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) }) }) })));
+                        } })] }))) : (_jsxs(ListRoot, { children: [renderTitle(), _jsx(StackList, { spacing: 1, direction: rest.direction ? rest.direction : 'column', children: tags.map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) })] })) })) }));
 }

package/lib/esm/shared/UserDeletedSnackBar/UserDeletedSnackBar.js

@@ -24,5 +24,5 @@ export default function UserDeletedSnackBar(inProps) {
     return (_jsx(Root, Object.assign({ className: classNames(className, classes.root), open: open, autoHideDuration: 3000, onClose: handleClose, anchorOrigin: {
             vertical: 'top',
             horizontal: 'center'
-        } }, rest, { children: _jsx(Alert, Object.assign({ severity: "info", onClose: handleClose }, { children: _jsx(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }) })) })));
+        } }, rest, { children: _jsx(Alert, { severity: "info", onClose: handleClose, children: _jsx(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }) }) })));
 }

package/lib/esm/shared/UsernameTextField/index.d.ts

@@ -1,5 +1,5 @@
 import { TextFieldProps } from '@mui/material';
-export declare type UsernameTextFieldProps = {
+export type UsernameTextFieldProps = {
     /**
      * Allows the field to accept an email format as well
      */

package/lib/esm/shared/VirtualizedScroller/VirtualScrollerChild.js

@@ -23,6 +23,6 @@ const VirtualScrollChild = ({ children, onHeightChange }) => {
             }
         }
     });
-    return _jsx("div", Object.assign({ ref: ref }, { children: children }));
+    return _jsx("div", { ref: ref, children: children });
 };
 export default VirtualScrollChild;

package/lib/esm/types/composer.d.ts

@@ -10,6 +10,6 @@ export interface ComposerLayerProps {
     onSave: (value: any) => void;
     defaultValue: any;
 }
-export declare type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
+export type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
     title?: string;
 };