@selfcommunity/react-ui 0.11.0 → 1.0.0

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

@@ -13,8 +13,8 @@ const classes = {
 const Root = styled(SnackbarContent, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * Custom Snackbar for notistack messages
  * Use this component:

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

@@ -11,7 +11,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root]
+    overridesResolver: (_props, styles) => [styles.root]
 })(() => ({
     width: 'auto',
     display: 'inline-flex',
@@ -35,7 +35,7 @@ export default function DateTimeAgo(props) {
      */
     if (date) {
         const formattedDate = getRelativeTime(date);
-        return (_jsxs(Root, Object.assign({ component: "span", className: classNames(classes.root, className) }, rest, { children: [showStartIcon && _jsx(Icon, { children: "access_time" }), _jsx(Tooltip, Object.assign({ title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', component: 'span' }, { children: _jsx(FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" }) })) }))] })));
+        return (_jsxs(Root, Object.assign({ as: "span", className: classNames(classes.root, className) }, rest, { children: [showStartIcon && _jsx(Icon, { children: "access_time" }), _jsx(Tooltip, Object.assign({ title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 }, { children: _jsx(Typography, Object.assign({ variant: "body2", component: "span" }, { children: _jsx(FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" }) })) }))] })));
     }
     return null;
 }

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

@@ -1,6 +1,5 @@
 import { PickerProps } from 'emoji-picker-react';
-interface EmojiPickerProps extends PickerProps {
+export interface EmojiPickerProps extends PickerProps {
     className?: string;
 }
 export default function EmojiPicker(inProps: EmojiPickerProps): JSX.Element;
-export {};

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

@@ -6,6 +6,6 @@ export interface EmptyStatusProps {
     actions?: ReactNode;
     className?: HTMLAttributes<HTMLDivElement>['className'];
 }
-declare function EmptyStatus(props: EmptyStatusProps): JSX.Element;
+declare function EmptyStatus(props: EmptyStatusProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof EmptyStatus>;
 export default _default;

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

@@ -163,5 +163,13 @@ export default function EventActionsMenu(inProps) {
     if (!scEvent) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(EventForm, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, slotProps: {
+                    paper: {
+                        className: classes.paper
+                    }
+                }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, slotProps: {
+                    paper: {
+                        className: classes.paper
+                    }
+                } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(EventForm, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
 }

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

@@ -20,4 +20,4 @@ export interface EventInfoDetailsProps {
     beforeLocationInfo?: ReactNode | null;
     beforeCreatedInfo?: ReactNode | null;
 }
-export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;
+export default function EventInfoDetails(inProps: EventInfoDetailsProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/shared/HiddenPurchasableContent/HiddenPurchasableContent.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import Widget from '../../components/Widget';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -14,8 +13,8 @@ const classes = {
 const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS HiddenPurchasableContent component. Learn about the available props and the CSS API.
 

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

@@ -1,5 +1,5 @@
 import { Component, ReactNode, CSSProperties } from 'react';
-declare type Fn = () => any;
+type Fn = () => any;
 export interface InfiniteScrollProps {
     next?: Fn;
     hasMoreNext?: boolean;
@@ -62,6 +62,6 @@ declare class InfiniteScroll extends Component<InfiniteScrollProps, State> {
     isElementAtTop(target: HTMLElement, scrollThreshold?: string | number): boolean;
     isElementAtBottom(target: HTMLElement, scrollThreshold?: string | number): boolean;
     onScrollListener: (event: MouseEvent) => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default InfiniteScroll;

package/lib/esm/shared/InfiniteScroll/stories/InfiniteScrollWithHeight.d.ts

@@ -1 +1 @@
-export default function InfiniteScrollWithHeight(): JSX.Element;
+export default function InfiniteScrollWithHeight(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/shared/InfiniteScroll/stories/PullDownToRefreshInfScroll.d.ts

@@ -1 +1 @@
-export default function PullDownToRefreshInfScroll(): JSX.Element;
+export default function PullDownToRefreshInfScroll(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/shared/InfiniteScroll/stories/ScrollableTargetFixedInfScroll.d.ts

@@ -1 +1 @@
-export default function ScrollableTargetFixedInfScroll(): JSX.Element;
+export default function ScrollableTargetFixedInfScroll(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/shared/InfiniteScroll/stories/ScrollableTargetInfScroll.d.ts

@@ -1 +1 @@
-export default function ScrollableTargetInfScroll(): JSX.Element;
+export default function ScrollableTargetInfScroll(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/shared/InfiniteScroll/stories/ScrolleableTop.d.ts

@@ -1 +1 @@
-export default function ScrolleableTop(): JSX.Element;
+export default function ScrolleableTop(): import("react/jsx-runtime").JSX.Element;

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

@@ -19,5 +19,5 @@ export default function ScrolleableTop() {
     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))) })) }))] }));
+                } }, { 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.d.ts

@@ -1 +1 @@
-export default function WindowInfiniteScrollComponent(): JSX.Element;
+export default function WindowInfiniteScrollComponent(): import("react/jsx-runtime").JSX.Element;

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

@@ -179,13 +179,7 @@ export default function LessonCommentActionsMenu(props) {
     /**
      * Renders component
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-            // @ts-ignore
-            , Object.assign({ 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
-                ref: (ref) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton, Object.assign({ ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: _jsx(Icon, { children: "more_vert" }) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_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: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: _jsx(Icon, { children: "more_vert" }) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_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: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
 }

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

@@ -15,5 +15,5 @@ export interface BaseLightboxProps extends PhotoProviderBase {
     afterClose?: () => void;
     toolbarButtons?: JSX.Element;
 }
-declare const BaseLightbox: (props: BaseLightboxProps) => JSX.Element;
+declare const BaseLightbox: (props: BaseLightboxProps) => import("react/jsx-runtime").JSX.Element;
 export default BaseLightbox;

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

@@ -23,7 +23,7 @@ const BaseLightbox = (props) => {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: "primary" }), toolbarRender: toolbarRender
             ? toolbarRender
             : () => {
                 return toolbarButtons;

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

@@ -30,4 +30,4 @@ export interface LightboxProps {
      */
     [p: string]: any;
 }
-export default function Lightbox(props: LightboxProps): JSX.Element;
+export default function Lightbox(props: LightboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,4 +14,4 @@ export interface LiveStreamInfoDetailsProps {
     beforeLocationInfo?: ReactNode | null;
     beforeCreatedInfo?: ReactNode | null;
 }
-export default function LiveStreamInfoDetails(inProps: LiveStreamInfoDetailsProps): JSX.Element;
+export default function LiveStreamInfoDetails(inProps: LiveStreamInfoDetailsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -61,7 +61,7 @@ export default (props) => {
             return;
         }
         setPreview(index);
-        onMediaClick(images[index]);
+        onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(images[index]);
     }, [gallery, setPreview, images, onMediaClick]);
     // RENDERING
     const renderTitle = (o) => {
@@ -85,21 +85,19 @@ export default (props) => {
         const overlay = images.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
         const isGif = images[0]['image_mimetype'] ? images[0]['image_mimetype'].includes('image/gif') : false;
         const isLandscape = images[0].image_height < images[0].image_width;
-        return (_jsx(Grid, Object.assign({ container: true, style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[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]: images.length > 1 }))
-                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(images[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
+        return (_jsx(Grid, Object.assign({ container: true, width: "100%", style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: _jsxs(Grid, Object.assign({ ref: ref, size: 12, className: classNames(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: images.length > 1 })), onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(images[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
     };
     const renderTwo = () => {
         const overlay = images.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
         const conditionalRender = [3, 4].includes(images.length) || (images.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 ? images[1] : images[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(images[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 ? images[2] : images[1])})` } }, { children: [overlay, renderTitle(images[1])] }))] })));
+        return (_jsxs(Grid, Object.assign({ container: true, width: "100%" }, { children: [_jsxs(Grid, Object.assign({ size: 6, className: classNames(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? images[1] : images[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(images[0])] })), _jsxs(Grid, Object.assign({ size: 6, className: classNames(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? images[2] : images[1])})` } }, { children: [overlay, renderTitle(images[1])] }))] })));
     };
     const renderThree = () => {
         const conditionalRender = images.length == 4 || (images.length > +maxVisible && +maxVisible == 4);
         const overlay = !maxVisible || maxVisible > 5 || (images.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 ? images[1] : images[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(images[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 ? images[2] : images[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(images[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 ? images[3] : images[4])})` } }, { children: [overlay, renderTitle(images[3])] }))] })));
+        return (_jsxs(Grid, Object.assign({ container: true, width: "100%" }, { children: [_jsxs(Grid, Object.assign({ size: 4, className: classNames(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? images[1] : images[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(images[1])] })), _jsxs(Grid, Object.assign({ size: 4, className: classNames(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? images[2] : images[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(images[2])] })), _jsxs(Grid, Object.assign({ size: 4, className: classNames(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? images[3] : images[4])})` } }, { children: [overlay, renderTitle(images[3])] }))] })));
     };
     const renderOverlay = (id) => {
         if (!gallery) {

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

@@ -1,10 +1,12 @@
 import { SCMediaType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
 interface DocComponentProps {
     document: SCMediaType;
     index?: number;
     onDelete?: (id: number) => void;
     handleDownload?: (id: number) => void;
     onMediaClick?: (media: SCMediaType) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
 }
-export default function DocComponent(props: DocComponentProps): JSX.Element;
+export default function DocComponent(props: DocComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ import { PREFIX } from './constants';
 import { Link } from '@selfcommunity/react-core';
 import { SCMimeTypes } from '@selfcommunity/types';
 import { useCallback } from 'react';
+import classNames from 'classnames';
 import txt from '../../../assets/composer/txt';
 import pdf from '../../../assets/composer/pdf';
 import doc from '../../../assets/composer/doc';
@@ -33,7 +34,7 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 export default function DocComponent(props) {
-    const { document, index, onDelete, handleDownload, onMediaClick } = props;
+    const { document, index, onDelete, handleDownload, onMediaClick, className } = props;
     const getImage = useCallback(() => {
         switch (document.mimetype) {
             case SCMimeTypes.PLAIN_TEXT:
@@ -68,5 +69,5 @@ export default function DocComponent(props) {
                 return fallback;
         }
     }, [document.mimetype]);
-    return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
 }

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: import("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"> & import("react").RefAttributes<unknown>>;
+declare const PreviewComponent: import("react").ForwardRefExoticComponent<Omit<PreviewComponentProps, "ref"> & import("react").RefAttributes<unknown>>;
 export default PreviewComponent;

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

@@ -12,7 +12,8 @@ const classes = {
     media: `${PREFIX}-media`,
     delete: `${PREFIX}-delete`,
     title: `${PREFIX}-title`,
-    docsWrapper: `${PREFIX}-docs-wrapper`
+    docsWrapper: `${PREFIX}-docs-wrapper`,
+    doc: `${PREFIX}-doc`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -41,7 +42,7 @@ const PreviewComponent = forwardRef((props, ref) => {
     const handleDelete = useCallback((id) => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
     const imageElements = useMemo(() => images.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 && _jsx(Typography, Object.assign({ className: classes.title }, { children: media.title }))] }), media.id))), [images]);
-    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { document: doc, onDelete: handleDelete }, doc.id)), [docs]);
-    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
+    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { document: doc, onDelete: handleDelete, className: classes.doc }, doc.id)), [docs]);
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(classes.previewRoot, className) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
 });
 export default PreviewComponent;

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

@@ -122,5 +122,13 @@ export default (_a) => {
     return (_jsxs(ChunkedUploady, Object.assign({ 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, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, slotProps: {
+                    paper: {
+                        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, slotProps: {
+                    paper: {
+                        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 = {
+import type { ComponentType } from 'react';
+type FileInputProps = {
     capture?: string;
     accept: string;
 };

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from "react";
-import { markAsUploadOptionsComponent, useUploadyContext } from "@rpldy/shared-ui";
+import { forwardRef, useCallback, useRef } from 'react';
+import { markAsUploadOptionsComponent, useUploadyContext } from '@rpldy/shared-ui';
 const asUploadButton = (Component, InputProps) => {
     const AsUploadButton = (props, ref) => {
         const { showFileUpload, getInternalFileInput } = useUploadyContext();
@@ -21,7 +21,7 @@ const asUploadButton = (Component, InputProps) => {
             showFileUpload(uploadOptionsRef.current);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, [getInternalFileInput, showFileUpload, uploadOptionsRef, onClick]);
-        return _jsx(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);

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

@@ -5,7 +5,7 @@ import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
 import AutoPlayer from '../../AutoPlayer';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
-import { styled, CircularProgress, Box } from '@mui/material';
+import { styled, Box } from '@mui/material';
 import filter from './filter';
 const classes = {
     displayRoot: `${PREFIX}-display-root`,
@@ -25,13 +25,13 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'DisplayRoot'
-})(({ theme }) => ({}));
+})();
 export default (props) => {
     // PROPS
     const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = __rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
     // HANDLERS
     const handleLinkClick = (link) => {
-        onMediaClick && onMediaClick(link);
+        onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(link);
     };
     // MEMO
     const _medias = useMemo(() => medias.filter(filter), [medias]);
@@ -46,15 +46,7 @@ export default (props) => {
         // 	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' } })] }), key));
-    };
-    /**
-     * Render html embed
-     * @param media
-     * @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 }) }))] }), key));
+        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' } })] }), key));
     };
     /**
      * Renders component
@@ -64,7 +56,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(AutoPlayer, { url: l.url, width: '100%', height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
+                return _jsx(AutoPlayer, { url: l.url, width: "100%", height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
             }
             return _jsx(React.Fragment, { children: renderPreview(l, i) }, i);
         }) })));

package/lib/esm/shared/Media/Link/LayerComponent.d.ts

@@ -5,5 +5,5 @@ import { ComposerLayerProps } from '../../../types/composer';
 export interface LayerComponentProps extends Omit<BoxProps, 'defaultValue'>, ComposerLayerProps {
     defaultValue: SCMediaType[];
 }
-declare const LayerComponent: React.ForwardRefExoticComponent<Pick<LayerComponentProps, "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" | "onClose" | "onSave"> & React.RefAttributes<unknown>>;
+declare const LayerComponent: React.ForwardRefExoticComponent<Omit<LayerComponentProps, "ref"> & React.RefAttributes<unknown>>;
 export default LayerComponent;

package/lib/esm/shared/Media/Link/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" | "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>>;
+declare const PreviewComponent: React.ForwardRefExoticComponent<Omit<PreviewComponentProps, "ref"> & React.RefAttributes<unknown>>;
 export default PreviewComponent;

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

@@ -72,6 +72,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

@@ -71,5 +71,7 @@ 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 ||
-                (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: Object.assign(Object.assign({}, rest.InputProps), { endAdornment: (_jsx(_Fragment, { children: url === '' && ((_a = rest.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment) ? ((_b = rest.InputProps) === null || _b === void 0 ? void 0 : _b.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" })) })) })) }))) })) }) })) })));
+                (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, { slotProps: {
+                input: Object.assign(Object.assign({}, rest.InputProps), { endAdornment: (_jsx(_Fragment, { children: url === '' && ((_a = rest.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment) ? ((_b = rest.InputProps) === null || _b === void 0 ? void 0 : _b.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" })) })) })) }))) })) })
+            } })) })));
 };

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

@@ -176,7 +176,7 @@ export default (props) => {
             return Promise.resolve({ options });
         }
         else if (isImageType(items[0].file.type)) {
-            return new Promise((resolve, reject) => {
+            return new Promise((resolve) => {
                 Promise.all(items.map((item) => __awaiter(void 0, void 0, void 0, function* () {
                     return Object.assign(Object.assign({}, item), { file: item.file.type === 'image/gif' ? item.file : yield createThumbnail(item.file) });
                 })))

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/PasswordTextField/index.js

@@ -5,10 +5,10 @@ const PREFIX = 'SCPasswordTextField';
 const Root = styled(TextField, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 export default function PasswordTextField(props) {
-    var _a;
+    var _a, _b;
     // STATE
     const [showPassword, setShowPassword] = useState(false);
     // HANDLERS
@@ -16,7 +16,9 @@ export default function PasswordTextField(props) {
         setShowPassword(!showPassword);
     };
     // 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" }) })) }))] }))
+    return (_jsx(Root, Object.assign({ type: showPassword ? 'text' : 'password' }, props, { slotProps: {
+            input: {
+                endAdornment: (_jsxs(_Fragment, { children: [(_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b['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" }) })) }))] }))
+            }
         } })));
 }

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

@@ -25,4 +25,4 @@ export interface ProgressBarProps extends LinearProgressProps {
      */
     [p: string]: any;
 }
-export default function ProgressBar(props: ProgressBarProps): JSX.Element;
+export default function ProgressBar(props: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material';
 import classNames from 'classnames';
-import { Scrollbars } from 'react-custom-scrollbars-2';
+import { Scrollbars } from 'react-custom-scrollbars-4';
 import { AUTO_HIDE, AUTO_HIDE_TIMEOUT } from '../../constants/ScrollContainer';
 const PREFIX = 'SCScrollContainer';
 const classes = {