@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.90

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

@@ -0,0 +1,41 @@
+import { SCCourseCommentType, SCCourseLessonType } from '@selfcommunity/types';
+export interface LessonCommentActionsMenuProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Lesson obj
+     * @default null
+     */
+    lesson: SCCourseLessonType;
+    /**
+     * Course CommentObject id
+     * @default null
+     */
+    commentObjectId?: number;
+    /**
+     * Course Comment obj
+     * @default null
+     */
+    commentObject: SCCourseCommentType;
+    /**
+     * Handle edit obj
+     */
+    onEdit?: (obj: SCCourseCommentType) => void;
+    /**
+     * Handle delete obj
+     */
+    onDelete?: (obj: SCCourseCommentType) => void;
+    /**
+     * Props to spread to popper
+     * @default empty object
+     */
+    PopperProps?: any;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function LessonCommentActionsMenu(props: LessonCommentActionsMenuProps): JSX.Element;

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

@@ -0,0 +1,191 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useMemo, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import CentralProgress from '../CentralProgress';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import { useSnackbar } from 'notistack';
+import classNames from 'classnames';
+import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
+import { Box, CircularProgress, ClickAwayListener, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, useMediaQuery, useTheme, Icon, styled, Popper } from '@mui/material';
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { SCContext, SCUserContext, UserUtils, useSCFetchLessonCommentObject } from '@selfcommunity/react-core';
+const EDIT_COMMENT = '_edit_comment';
+const DELETE_COMMENT = '_delete_comment';
+const PREFIX = 'SCLessonCommentActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    button: `${PREFIX}-button`,
+    popperRoot: `${PREFIX}-popper-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`,
+    itemText: `${PREFIX}-item-text`,
+    subItem: `${PREFIX}-sub-item`
+};
+const PopperRoot = styled(Popper, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.popperRoot
+})(() => ({}));
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+export default function LessonCommentActionsMenu(props) {
+    // PROPS
+    const { className, lesson, commentObjectId, commentObject, onEdit, onDelete, PopperProps = {} } = props, rest = __rest(props, ["className", "lesson", "commentObjectId", "commentObject", "onEdit", "onDelete", "PopperProps"]);
+    // CONTEXT
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const scContext = useContext(SCContext);
+    const scUserContext = useContext(SCUserContext);
+    const { enqueueSnackbar } = useSnackbar();
+    // COMMENT STATE
+    const { obj: commentObj, setObj: setCommentObj } = useSCFetchLessonCommentObject({ id: commentObjectId, commentObject: commentObject, lesson: lesson });
+    // GENERAL POPPER STATE
+    const [open, setOpen] = useState(false);
+    // CONFIRM ACTION DIALOG STATE
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [currentAction, setCurrentAction] = useState(null);
+    const [currentActionLoading, setCurrentActionLoading] = useState(null);
+    // CONST
+    let popperRef = useRef(null);
+    /**
+     * Handles open popup
+     */
+    function handleOpen() {
+        if (scUserContext.user) {
+            setOpen(true);
+        }
+        else {
+            scContext.settings.handleAnonymousAction();
+        }
+    }
+    /**
+     * Closes popup
+     */
+    function handleClose() {
+        if (popperRef.current && popperRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+        if (rest.onClose) {
+            rest.onClose();
+        }
+    }
+    /**
+     * Perform delete comment
+     */
+    const performDeleteComment = useMemo(() => () => {
+        return http
+            .request({
+            url: Endpoints.DeleteCourseComment.url({
+                id: lesson.course_id,
+                section_id: lesson.section_id,
+                lesson_id: lesson.id,
+                comment_id: commentObject.id
+            }),
+            method: Endpoints.DeleteCourseComment.method
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [commentObj, lesson]);
+    /**
+     * handle action
+     */
+    function handleAction(action) {
+        if (UserUtils.isBlocked(scUserContext.user) && [EDIT_COMMENT].includes(action)) {
+            // if user is blocked, deny edit and moderate
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+                variant: 'warning',
+                autoHideDuration: 3000
+            });
+            return;
+        }
+        if (action === EDIT_COMMENT) {
+            onEdit && onEdit(commentObj);
+            handleClose();
+        }
+        else {
+            setCurrentAction(DELETE_COMMENT);
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     * Perform additional operations at the end of single action
+     */
+    function performPostConfirmAction(success) {
+        if (success) {
+            setCurrentActionLoading(null);
+            setCurrentAction(null);
+            setOpenConfirmDialog(false);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.lessonCommentActionMenu.actionSuccess", defaultMessage: "ui.lessonCommentActionMenu.actionSuccess" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            setCurrentActionLoading(null);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.lessonCommentActionMenu.actionError", defaultMessage: "ui.lessonCommentActionMenu.actionError" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+    }
+    /**
+     * Deletes a comment
+     */
+    function handleConfirmedAction() {
+        if (commentObj && !currentActionLoading) {
+            if (currentAction === DELETE_COMMENT) {
+                setCurrentActionLoading(DELETE_COMMENT);
+                performDeleteComment()
+                    .then(() => {
+                    onDelete && onDelete(commentObj);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    Logger.error(SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
+        }
+    }
+    /**
+     * CIf the authenticated user can modify the comment
+     */
+    function canModifyContribution() {
+        return scUserContext.user && scUserContext.user.id === commentObj.created_by.id;
+    }
+    /**
+     * If the authenticated user can delete the comment
+     */
+    function canDeleteContribution() {
+        return scUserContext.user && scUserContext.user.id === commentObj.created_by.id;
+    }
+    /**
+     * Renders comment menu content
+     */
+    function renderContent() {
+        return (_jsx(Box, { children: !commentObj ? (_jsx(CentralProgress, { size: 30 })) : (_jsxs(MenuList, { children: [canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.lessonCommentActionMenu.edit", defaultMessage: "ui.lessonCommentActionMenu.edit" }), onClick: () => handleAction(EDIT_COMMENT), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_COMMENT ? _jsx(CircularProgress, { size: 20 }) : _jsx(Icon, { children: "delete" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.lessonCommentActionMenu.delete", defaultMessage: "ui.lessonCommentActionMenu.delete" }), onClick: () => handleAction(DELETE_COMMENT), classes: { root: classes.itemText } })] })))] })) }));
+    }
+    /**
+     * 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) => {
+                    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) }))] })));
+}

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

@@ -0,0 +1,12 @@
+export interface LessonFilePreviewProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The media object to show
+     */
+    media: any;
+}
+export default function LessonFilePreview(props: LessonFilePreviewProps): JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Box, Link, Typography, Icon, styled } from '@mui/material';
+import { MEDIA_TYPE_DOCUMENT } from '../../constants/Media';
+const PREFIX = 'SCLessonFilePreview';
+const classes = {
+    root: `${PREFIX}-root`,
+    item: `${PREFIX}-item`,
+    title: `${PREFIX}-title`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+export default function LessonFilePreview(props) {
+    // PROPS
+    const { className, media } = props;
+    /**
+     * Renders component
+     */
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: media.title && (_jsx(Link, Object.assign({ href: media.url, target: "_blank", rel: "noopener noreferrer" }, { children: _jsxs(Typography, Object.assign({ className: classes.title }, { children: [media.type === MEDIA_TYPE_DOCUMENT && _jsx(Icon, { children: "picture_as_pdf" }), media.title] })) }))) }), media.id));
+}

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

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CircularProgress } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled, CircularProgress } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { PhotoSlider } from 'react-photo-view';
 import { PREFIX } from './constants';

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { useCallback } from 'react';
 import BaseLightbox from './BaseLightbox';
 import { PREFIX } from './constants';

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { http } from '@selfcommunity/api-services';
 import LazyLoad from 'react-lazyload';
 import { MIN_PRELOAD_OFFSET_VIEWPORT } from '../../constants/LazyLoad';
+import { useInView } from 'react-intersection-observer';
 const MarkRead = (props) => {
     // PROPS
     const { endpoint, params = {}, callback, data = null } = props;
+    const { ref, inView } = useInView({ threshold: 0.1 });
+    const hasEntered = useRef(false);
     /**
      * Perform request
      */
@@ -22,15 +25,14 @@ const MarkRead = (props) => {
             .catch(() => null);
     };
     useEffect(() => {
-        let _t;
-        if (endpoint) {
-            _t = setTimeout(performRequest);
-            return () => {
-                _t && clearTimeout(_t);
-            };
+        if (inView) {
+            hasEntered.current = true;
         }
-    }, []);
-    return null;
+        else if (hasEntered.current && endpoint && !inView) {
+            performRequest();
+        }
+    }, [inView]);
+    return _jsx("div", { ref: ref });
 };
 export default (props) => {
     return (_jsx(LazyLoad, Object.assign({ once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(MarkRead, Object.assign({}, props)) })));

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

@@ -1,3 +1,4 @@
+import { SCMediaType } from '@selfcommunity/types';
 export interface ImagePreviewComponentProps {
     /**
      * Class name to apply to the root object
@@ -8,7 +9,7 @@ export interface ImagePreviewComponentProps {
      * Medias objs
      * @default []
      */
-    medias: Array<any>;
+    medias: SCMediaType[];
     /**
      * Maximum number of visible media
      * @default 5

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

@@ -1,15 +1,17 @@
+import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Grid, IconButton, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
-import { styled } from '@mui/material/styles';
-import { Link } from '@selfcommunity/react-core';
+import { styled, Grid, Typography, Icon, Stack, IconButton } from '@mui/material';
 import classNames from 'classnames';
-import { MEDIA_TYPE_DOCUMENT } from '../../../constants/Media';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { Lightbox } from '../../Lightbox';
 import { PREFIX } from './constants';
-import filter from './filter';
+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';
 const classes = {
     displayRoot: `${PREFIX}-display-root`,
     background: `${PREFIX}-background`,
@@ -24,21 +26,24 @@ const classes = {
     border: `${PREFIX}-border`,
     gallery: `${PREFIX}-gallery`,
     title: `${PREFIX}-title`,
-    iconFile: `${PREFIX}-icon-file`
+    iconFile: `${PREFIX}-icon-file`,
+    docsWrapper: `${PREFIX}-docs-wrapper`
 };
-const Root = styled(Box, {
+const Root = styled(Stack, {
     name: PREFIX,
     slot: 'DisplayRoot'
-})(({}) => ({}));
+})(() => ({}));
 export default (props) => {
     // 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
-    const _medias = useMemo(() => medias.filter(filter), [medias]);
+    const images = useMemo(() => medias.filter(filteredImages), [medias]);
+    const docs = useMemo(() => medias.filter(filteredDocs), [medias]);
     // HANDLERS
     const handleClose = () => {
         setPreview(-1);
@@ -52,14 +57,17 @@ export default (props) => {
         }
         return image;
     };
-    const openPreviewImage = useCallback((index) => {
+    const openPreviewImage = useCallback((index, type = MEDIA_TYPE_IMAGE) => {
         if (gallery === false) {
             // Prevent gallery
             return;
         }
         setPreview(index);
-        onMediaClick(_medias[index]);
-    }, [_medias]);
+        setMediaType(type);
+        if (type === MEDIA_TYPE_IMAGE) {
+            onMediaClick(images[index]);
+        }
+    }, [gallery, setPreview, setMediaType, images, onMediaClick]);
     // RENDERING
     const renderTitle = (o) => {
         if (!o) {
@@ -76,27 +84,27 @@ export default (props) => {
                     break;
             }
         }
-        return (_jsx(React.Fragment, { children: o.title && (_jsx("div", Object.assign({ className: classes.title }, { children: _jsxs(Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
+        return (_jsx(Fragment, { children: o.title && (_jsx("div", Object.assign({ className: classes.title }, { children: _jsxs(Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
     };
     const renderOne = () => {
-        const overlay = _medias.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
-        const isGif = _medias[0].image_mimetype ? _medias[0].image_mimetype.includes('image/gif') : false;
-        const isLandscape = _medias[0].image_height < _medias[0].image_width;
-        return (_jsx(Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: _jsxs(Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
-                    root: classNames(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: _medias.length > 1 }))
-                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(_medias[0])] })) })));
+        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])] })) })));
     };
     const renderTwo = () => {
-        const overlay = _medias.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
-        const conditionalRender = [3, 4].includes(_medias.length) || (_medias.length > +maxVisible && [3, 4].includes(+maxVisible));
-        return (_jsxs(Grid, Object.assign({ container: true }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 6, classes: { root: classNames(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] })), _jsxs(Grid, Object.assign({ item: true, xs: 6, classes: { root: classNames(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` } }, { children: [overlay, renderTitle(_medias[1])] }))] })));
+        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])] }))] })));
     };
     const renderThree = () => {
-        const conditionalRender = _medias.length == 4 || (_medias.length > +maxVisible && +maxVisible == 4);
-        const overlay = !maxVisible || maxVisible > 5 || (_medias.length > maxVisible && [4, 5].includes(+maxVisible))
+        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 ? _medias[1] : _medias[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] })), _jsxs(Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: classNames(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] })), _jsxs(Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: classNames(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` } }, { children: [overlay, renderTitle(_medias[3])] }))] })));
+        return (_jsxs(Grid, 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])] }))] })));
     };
     const renderOverlay = (id) => {
         if (!gallery) {
@@ -108,31 +116,51 @@ export default (props) => {
         ];
     };
     const renderCountOverlay = (more) => {
-        const extra = _medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
+        const extra = images.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
         return [
             more && _jsx("div", { className: classes.cover }, "count"),
             more && (_jsx("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: _jsxs("p", { children: ["+", extra] }) }), "count-sub"))
         ];
     };
+    const handleDownload = useCallback((index) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const response = yield http.request({ url: docs[index].url, responseType: 'blob' });
+            const blob = new Blob([response.data], { type: 'application/pdf' });
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = docs[index].title;
+            link.click();
+            // Cleanup
+            window.URL.revokeObjectURL(url);
+            onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(docs[index]);
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+        }
+    }), [onMediaClick]);
     const handleIndexChange = useCallback((index) => {
-        if (_medias[index].type === MEDIA_TYPE_DOCUMENT) {
-            setToolbarButtons(_jsx(IconButton, Object.assign({ component: Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: _jsx(Icon, { children: "download" }) })));
+        if (mediaType === MEDIA_TYPE_DOCUMENT) {
+            setToolbarButtons(_jsx(IconButton, Object.assign({ onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) })));
         }
         else {
             setToolbarButtons(undefined);
         }
-    }, [_medias, setToolbarButtons]);
+    }, [mediaType, docs, setToolbarButtons, handleDownload]);
     useEffect(() => {
         if (preview !== -1) {
             handleIndexChange(preview);
         }
+        else {
+            setMediaType(null);
+        }
     }, [preview]);
-    const imagesToShow = [..._medias];
-    if (maxVisible && _medias.length > maxVisible) {
+    const imagesToShow = [...images];
+    if (maxVisible && images.length > maxVisible) {
         imagesToShow.length = maxVisible;
     }
-    if (_medias.length === 0) {
+    if (medias.length === 0) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && (_jsx(Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] })));
+    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))) }))] })));
 };

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

@@ -0,0 +1,11 @@
+import { SCMediaType } from '@selfcommunity/types';
+interface DocComponentProps {
+    doc: 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 {};

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+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`,
+    actionWrapper: `${PREFIX}-action-wrapper`,
+    action: `${PREFIX}-action`
+};
+const Root = styled(Stack, {
+    name: PREFIX,
+    slot: 'DocRoot'
+})(() => ({}));
+function formatBytes(bytes, decimals = 2) {
+    if (!+bytes)
+        return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    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" }) }))] }))] })))] })));
+}

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

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { SCMediaType } from '@selfcommunity/types';
 export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChange'> {
     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: 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>>;
 export default PreviewComponent;