@selfcommunity/react-ui 0.11.0-alpha.98 → 0.11.0-mui7.13

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

@@ -1,14 +1,13 @@
 import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, Grid, Typography, Icon, Stack, IconButton } from '@mui/material';
+import { styled, Grid, Typography, Icon, Stack } from '@mui/material';
 import classNames from 'classnames';
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useMemo, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { Lightbox } from '../../Lightbox';
 import { PREFIX } from './constants';
 import DocComponent from './DocComponent';
 import { filteredDocs, filteredImages } from './filter';
-import { MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_IMAGE } from '../../../constants/Media';
 import { http } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
@@ -38,7 +37,6 @@ export default (props) => {
     const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
     // STATE
     const [preview, setPreview] = useState(-1);
-    const [mediaType, setMediaType] = useState(null);
     const [toolbarButtons, setToolbarButtons] = useState(undefined);
     const { ref, inView } = useInView({ triggerOnce: false });
     // MEMO
@@ -57,17 +55,14 @@ export default (props) => {
         }
         return image;
     };
-    const openPreviewImage = useCallback((index, type = MEDIA_TYPE_IMAGE) => {
+    const openPreviewImage = useCallback((index) => {
         if (gallery === false) {
             // Prevent gallery
             return;
         }
         setPreview(index);
-        setMediaType(type);
-        if (type === MEDIA_TYPE_IMAGE) {
-            onMediaClick(images[index]);
-        }
-    }, [gallery, setPreview, setMediaType, images, onMediaClick]);
+        onMediaClick(images[index]);
+    }, [gallery, setPreview, images, onMediaClick]);
     // RENDERING
     const renderTitle = (o) => {
         if (!o) {
@@ -90,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, 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: { xs: 4, md: 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: { xs: 4, md: 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: { xs: 4, md: 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) {
@@ -139,22 +132,6 @@ export default (props) => {
             Logger.error(SCOPE_SC_UI, error);
         }
     }), [onMediaClick]);
-    const handleIndexChange = useCallback((index) => {
-        if (mediaType === MEDIA_TYPE_DOCUMENT) {
-            setToolbarButtons(_jsx(IconButton, Object.assign({ onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) })));
-        }
-        else {
-            setToolbarButtons(undefined);
-        }
-    }, [mediaType, docs, setToolbarButtons, handleDownload]);
-    useEffect(() => {
-        if (preview !== -1) {
-            handleIndexChange(preview);
-        }
-        else {
-            setMediaType(null);
-        }
-    }, [preview]);
     const imagesToShow = [...images];
     if (maxVisible && images.length > maxVisible) {
         imagesToShow.length = maxVisible;
@@ -162,5 +139,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: mediaType === MEDIA_TYPE_IMAGE ? images : docs, toolbarButtons: toolbarButtons })), _jsx(Stack, Object.assign({ className: classes.docsWrapper }, { children: docs.map((doc, i) => (_jsx(DocComponent, { doc: doc, index: i, openPreviewImage: openPreviewImage, handleDownload: handleDownload, onMediaClick: onMediaClick }, doc.id))) }))] })));
+    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: images, toolbarButtons: toolbarButtons }), _jsx(Stack, Object.assign({ className: classes.docsWrapper }, { children: docs.map((doc, i) => (_jsx(DocComponent, { document: doc, index: i, handleDownload: handleDownload, onMediaClick: onMediaClick }, doc.id))) }))] })));
 };

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

@@ -1,11 +1,10 @@
 import { SCMediaType } from '@selfcommunity/types';
 interface DocComponentProps {
-    doc: SCMediaType;
+    document: SCMediaType;
     index?: number;
     onDelete?: (id: number) => void;
-    openPreviewImage?: (index: number, type: string) => void;
     handleDownload?: (id: number) => void;
     onMediaClick?: (media: SCMediaType) => void;
 }
-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

@@ -2,12 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Icon, IconButton, Stack, styled, Typography } from '@mui/material';
 import { PREFIX } from './constants';
 import { Link } from '@selfcommunity/react-core';
-import { MEDIA_TYPE_DOCUMENT } from '../../../constants/Media';
+import { SCMimeTypes } from '@selfcommunity/types';
+import { useCallback } from 'react';
+import txt from '../../../assets/composer/txt';
+import pdf from '../../../assets/composer/pdf';
+import doc from '../../../assets/composer/doc';
+import xls from '../../../assets/composer/xls';
+import ppt from '../../../assets/composer/ppt';
+import fallback from '../../../assets/composer/fallback';
 const classes = {
     docRoot: `${PREFIX}-doc-root`,
     imageWrapper: `${PREFIX}-image-wrapper`,
-    badgePdf: `${PREFIX}-badge-pdf`,
-    pdf: `${PREFIX}-pdf`,
     textWrapper: `${PREFIX}-text-wrapper`,
     title: `${PREFIX}-title`,
     subtitle: `${PREFIX}-subtitle`,
@@ -28,6 +33,40 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 export default function DocComponent(props) {
-    const { doc, index, onDelete, openPreviewImage, handleDownload, onMediaClick } = props;
-    return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsxs(Box, Object.assign({ onClick: () => openPreviewImage === null || openPreviewImage === void 0 ? void 0 : openPreviewImage(index, MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined }, className: classes.imageWrapper }, { children: [_jsx("img", { alt: "pdf preview", src: doc.image_thumbnail ? doc.image_thumbnail.url : doc.image, width: "100%", height: "100%" }), _jsx(Box, Object.assign({ className: classes.badgePdf }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.pdf }, { children: "PDF" })) }))] })), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: doc.title })), doc.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(doc.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(doc.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: doc.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(doc) }, { children: _jsx(Icon, { children: "visibility" }) })), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
+    const { document, index, onDelete, handleDownload, onMediaClick } = props;
+    const getImage = useCallback(() => {
+        switch (document.mimetype) {
+            case SCMimeTypes.PLAIN_TEXT:
+            case SCMimeTypes.CSV:
+                return txt;
+            case SCMimeTypes.PDF:
+                return pdf;
+            case SCMimeTypes.DOC:
+            case SCMimeTypes.DOCX:
+            case SCMimeTypes.DOTX:
+            case SCMimeTypes.DOCM:
+            case SCMimeTypes.DOTM:
+                return doc;
+            case SCMimeTypes.XLS:
+            case SCMimeTypes.XLSX:
+            case SCMimeTypes.XLTX:
+            case SCMimeTypes.XLSM:
+            case SCMimeTypes.XLTM:
+            case SCMimeTypes.XLAM:
+            case SCMimeTypes.XLSB:
+                return xls;
+            case SCMimeTypes.PPT:
+            case SCMimeTypes.PPTX:
+            case SCMimeTypes.POTX:
+            case SCMimeTypes.PPSX:
+            case SCMimeTypes.PPAM:
+            case SCMimeTypes.PPTM:
+            case SCMimeTypes.POTM:
+            case SCMimeTypes.PPSM:
+                return ppt;
+            default:
+                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" }) }))] }))] })))] })));
 }

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

@@ -41,7 +41,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, { doc: doc, onDelete: handleDelete }, doc.id)), [docs]);
+    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 }))] })) })));
 });
 export default PreviewComponent;

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

@@ -4,7 +4,7 @@ import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { CircularProgress, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, Icon, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import classNames from 'classnames';
-import { useSCContext } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import MediaChunkUploader from '../../MediaChunkUploader';
 import ChunkedUploady from '@rpldy/chunked-uploady';
@@ -30,11 +30,6 @@ const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
 export default (_a) => {
     var { className, onAdd = null } = _a, rest = __rest(_a, ["className", "onAdd"]);
     // STATE
@@ -42,10 +37,31 @@ export default (_a) => {
     const [isUploading, setIsUploading] = useState(false);
     // CONTEXT
     const scContext = useSCContext();
+    const { preferences } = useSCPreferences();
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const acceptedMediaMimetypes = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES].value, [preferences]);
+    const mimeTypesArray = useMemo(() => acceptedMediaMimetypes.split(','), [acceptedMediaMimetypes]);
+    const { imageMimeTypes, documentMimeTypes } = useMemo(() => mimeTypesArray.reduce((acc, type) => {
+        if (type.startsWith('image/')) {
+            acc = Object.assign(Object.assign({}, acc), { imageMimeTypes: acc.imageMimeTypes.concat(`${type},`) });
+        }
+        else {
+            acc = Object.assign(Object.assign({}, acc), { documentMimeTypes: acc.documentMimeTypes.concat(`${type},`) });
+        }
+        return acc;
+    }, { imageMimeTypes: '', documentMimeTypes: '' }), [mimeTypesArray]);
+    const formattedImageMimeTypes = useMemo(() => imageMimeTypes.substring(0, imageMimeTypes.length - 1), [imageMimeTypes]);
+    const formattedDocumentMimeTypes = useMemo(() => documentMimeTypes.substring(0, documentMimeTypes.length - 1), [documentMimeTypes]);
+    const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes, capture: 'camera' });
+    const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes });
+    const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedDocumentMimeTypes });
+    const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes });
+    const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedDocumentMimeTypes });
     // HANDLERS
     const handleOpen = useCallback((event) => {
         setAnchorEl(event.currentTarget);
@@ -54,7 +70,7 @@ export default (_a) => {
         setAnchorEl(null);
     }, []);
     const handleFilterByMime = useCallback((file) => {
-        if (file.type.startsWith('image/') || file.type === 'application/pdf') {
+        if (acceptedMediaMimetypes.includes(file.type)) {
             return true;
         }
         const _snackBar = enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composer.media.file.error", defaultMessage: "ui.composer.media.file.error" }), {
@@ -68,7 +84,7 @@ export default (_a) => {
             }
         });
         return false;
-    }, []);
+    }, [acceptedMediaMimetypes]);
     const handleSuccess = useCallback((media) => {
         onAdd && onAdd(media);
     }, [onAdd]);
@@ -106,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 = {
+type FileInputProps = {
     capture?: string;
     accept: string;
 };

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/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,8 +5,8 @@ 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;
     // STATE
@@ -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: [(_a = props === null || props === void 0 ? void 0 : props.slotProps.input) === 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" }) })) }))] }))
+            }
         } })));
 }

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/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/TagChip/index.d.ts

@@ -1,22 +1,8 @@
 import React from 'react';
-import { ChipClasses, Theme, ChipPropsSizeOverrides, ChipPropsVariantOverrides } from '@mui/material';
+import { ChipProps } from '@mui/material';
 import { SCTagType } from '@selfcommunity/types';
-import { OverridableStringUnion } from '@mui/types';
-import { SxProps } from '@mui/system';
-export interface TagChipProps {
+export interface TagChipProps extends Omit<ChipProps, 'avatar' | 'children' | 'color' | 'deleteIcon' | 'skipFocusWhenDisabled' | 'tabIndex'> {
     className?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     */
-    classes?: Partial<ChipClasses>;
-    /**
-     * If `true`, the chip will appear clickable, and will raise when pressed,
-     * even if the onClick prop is not defined.
-     * If `false`, the chip will not appear clickable, even if onClick prop is defined.
-     * This can be used, for example, along with the component prop to indicate an anchor Chip is clickable.
-     * @default true
-     */
-    clickable?: boolean;
     /**
      * If `true`, the chip will appear disposable, and will raise when pressed,
      * even if the onDelete prop is not defined.
@@ -25,43 +11,11 @@ export interface TagChipProps {
      * @default true
      */
     disposable?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Icon element.
-     */
-    icon?: React.ReactElement;
-    /**
-     * The content of the component.
-     */
-    label?: React.ReactNode;
     /**
      * Callback fired when the delete icon is clicked.
      * If set, the delete icon will be shown.
      */
     onClick?: React.EventHandler<any>;
-    /**
-     * Callback fired when the delete icon is clicked.
-     * If set, the delete icon will be shown.
-     */
-    onDelete?: React.EventHandler<any>;
-    /**
-     * The size of the component.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'filled'
-     */
-    variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
     /**
      * The tag to use.
      * @default null
@@ -72,5 +26,10 @@ export interface TagChipProps {
      * @default false
      */
     ellipsis?: boolean;
+    /**
+     * If `true`, shows the description of the tag on hover (desktop) or long press (mobile).
+     * @default false
+     */
+    showDescription?: boolean;
 }
 export default function TagChip(props: TagChipProps): JSX.Element;

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled, Chip } from '@mui/material';
+import { styled, Chip, Tooltip } from '@mui/material';
 import classNames from 'classnames';
 const PREFIX = 'SCTagChip';
 const classes = {
@@ -9,8 +9,8 @@ const classes = {
 const Root = styled(Chip, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root]
-})(({ theme }) => ({
+    overridesResolver: (_props, styles) => [styles.root]
+})(() => ({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -21,7 +21,7 @@ const Root = styled(Chip, {
 }));
 export default function TagChip(props) {
     // PROPS
-    const { tag, clickable = true, disposable = true, label = null, ellipsis = false, onClick = null, onDelete = null, className = null } = props, rest = __rest(props, ["tag", "clickable", "disposable", "label", "ellipsis", "onClick", "onDelete", "className"]);
+    const { tag, clickable = true, disposable = true, label = null, ellipsis = false, onClick = null, onDelete = null, className = null, showDescription = false } = props, rest = __rest(props, ["tag", "clickable", "disposable", "label", "ellipsis", "onClick", "onDelete", "className", "showDescription"]);
     // HANDLERS
     const handleClick = () => {
         onClick && onClick(tag.id);
@@ -29,8 +29,12 @@ export default function TagChip(props) {
     const handleDelete = () => {
         onDelete && onDelete(tag.id);
     };
+    const root = (_jsx(Root, Object.assign({ className: classNames(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
+    if (showDescription && tag.description) {
+        return (_jsx(Tooltip, Object.assign({ title: tag.description, placement: "right", arrow: true }, { children: root })));
+    }
+    return root;
 }

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

@@ -111,8 +111,8 @@ export default function Tags(props) {
                             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
                                                         .filter((tag) => tag.visible)
-                                                        .map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
+                                                        .map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps, { showDescription: true })) }, tag.id))) }))] }) })) })) })));
                         } }))] }))) : (_jsxs(ListRoot, { children: [renderTitle(), _jsx(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags
                             .filter((tag) => tag.visible)
-                            .map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
+                            .map((tag) => (_jsx(ItemList, { children: _jsx(TagChip, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps, { showDescription: true })) }, tag.id))) }))] })) })) }));
 }