@selfcommunity/react-ui 0.11.0-alpha.67 → 0.11.0-alpha.68

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

@@ -12,9 +12,9 @@ import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
 import { Badge, Box, CircularProgress, ClickAwayListener, Collapse, Divider, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, Typography, useMediaQuery, useTheme, styled, Popper, Icon } from '@mui/material';
 import { MODERATION_CONTRIBUTION_STATE_DELETED, MODERATION_CONTRIBUTION_STATE_HIDDEN, MODERATION_TYPE_ACTION_DELETE, MODERATION_TYPE_ACTION_HIDE, REPORT_AGGRESSIVE, REPORT_OFFTOPIC, REPORT_POORCONTENT, REPORT_SPAM, REPORT_VULGAR, REPORTS } from '../../constants/Flagging';
 import { Endpoints, http } from '@selfcommunity/api-services';
-import { SCContext, SCUserContext, UserUtils, useSCFetchCommentObject, useSCFetchFeedObject, useSCRouting } from '@selfcommunity/react-core';
+import { SCContext, SCPreferences, SCUserContext, UserUtils, useSCFetchCommentObject, useSCFetchFeedObject, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { SCContributionType } from '@selfcommunity/types';
-import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION, SUSPEND_NOTIFICATION_EVENT } from '../../constants/ContributionsActionsMenu';
+import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, PUBLISH_CONTRIBUTION, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION, SUSPEND_NOTIFICATION_EVENT } from '../../constants/ContributionsActionsMenu';
 const PREFIX = 'SCContributionActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -73,7 +73,7 @@ const messages = defineMessages({
 });
 export default function ContributionActionsMenu(props) {
     // PROPS
-    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
+    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onPublishContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onPublishContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
     // INTL
     const intl = useIntl();
     // CONTEXT
@@ -84,6 +84,7 @@ export default function ContributionActionsMenu(props) {
     const scUserId = scUserContext.user ? scUserContext.user.id : null;
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
+    const { preferences } = useSCPreferences();
     // CONTRIBUTION STATE
     const { obj: feedObj, setObj: setFeedObj } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
     const { obj: commentObj, setObj: setCommentObj } = useSCFetchCommentObject({ id: commentObjectId, commentObject });
@@ -107,6 +108,9 @@ export default function ContributionActionsMenu(props) {
     // CONST
     const contributionObj = commentObj ? commentObj : feedObj;
     let popperRef = useRef(null);
+    const scheduledPostsEnabled = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value, [preferences]);
     /**
      * Intial extra sections to render, in addition to the GENERAL_SECTION
      * @return {array}
@@ -121,7 +125,7 @@ export default function ContributionActionsMenu(props) {
             _extra.push(FLAG_CONTRIBUTION_SECTION);
         }
         // Enable when backend is ready
-        if (UserUtils.isStaff(scUserContext.user)) {
+        if (UserUtils.isAdmin(scUserContext.user) || UserUtils.isModerator(scUserContext.user)) {
             // admin or moderator
             _extra.push(HIDE_CONTRIBUTION_SECTION);
             _extra.push(DELETE_CONTRIBUTION_SECTION);
@@ -332,6 +336,22 @@ export default function ContributionActionsMenu(props) {
             return Promise.resolve(res.data);
         });
     }, [contributionObj]);
+    /**
+     * Perform publish contribution
+     */
+    const performPublishContribution = useMemo(() => () => {
+        return http
+            .request({
+            url: Endpoints.PublishFeedObject.url({ type: contributionObj.type, id: contributionObj.id }),
+            method: Endpoints.PublishFeedObject.method
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [contributionObj]);
     /**
      * Fetch initial flag status
      */
@@ -468,6 +488,11 @@ export default function ContributionActionsMenu(props) {
             setOpenConfirmDialog(true);
             handleClose();
         }
+        else if (action === PUBLISH_CONTRIBUTION) {
+            setCurrentAction(PUBLISH_CONTRIBUTION);
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
         else if (action === RESTORE_CONTRIBUTION) {
             setCurrentAction(RESTORE_CONTRIBUTION);
             setOpenConfirmDialog(true);
@@ -557,6 +582,19 @@ export default function ContributionActionsMenu(props) {
                     performPostConfirmAction(false);
                 });
             }
+            else if (currentAction === PUBLISH_CONTRIBUTION) {
+                setCurrentActionLoading(PUBLISH_CONTRIBUTION);
+                performPublishContribution()
+                    .then(() => {
+                    const _contributionObj = Object.assign({}, contributionObj, { deleted: false });
+                    onPublishContribution && onPublishContribution(_contributionObj);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    Logger.error(SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
             else if (currentAction === MODERATE_CONTRIBUTION_HIDDEN) {
                 setCurrentActionLoading(MODERATE_CONTRIBUTION_HIDDEN);
                 performModerationContribution(MODERATION_TYPE_ACTION_HIDE, hideFlagType)
@@ -680,7 +718,16 @@ export default function ContributionActionsMenu(props) {
      * Can authenticated user delete the contribution
      */
     function canDeleteContribution() {
-        return scUserContext.user && scUserContext.user.id === contributionObj.author.id && !deleteType;
+        return scUserContext.user && scUserContext.user.id === contributionObj.author.id;
+    }
+    /**
+     * Can authenticated user publish the contribution
+     */
+    function canPublishContribution() {
+        const user = scUserContext.user;
+        if (!user || contributionObj.deleted || !scheduledPostsEnabled || !feedObj.draft)
+            return false;
+        return user.id === contributionObj.author.id || (scheduledPostsEnabled && (UserUtils.isAdmin(user) || UserUtils.isModerator(user)));
     }
     /**
      * Can authenticated user suspend notification for the contribution
@@ -706,7 +753,7 @@ export default function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(Icon, { children: "delete" })) }), contributionObj.deleted ? (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canSuspendNotificationContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: contributionObj['suspended'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_EVENT ? (_jsx(CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: !contributionObj.event['show_on_feed'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, GENERAL_SECTION));
+        return (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(Icon, { children: "delete" })) }), contributionObj.deleted ? (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canPublishContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "upload" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.publishContribution", defaultMessage: "ui.contributionActionMenu.publishContribution" }), onClick: () => handleAction(PUBLISH_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: contributionObj['suspended'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_EVENT ? (_jsx(CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: !contributionObj.event['show_on_feed'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, GENERAL_SECTION));
     }
     /**
      * Renders contribution menu content
@@ -729,5 +776,9 @@ export default function ContributionActionsMenu(props) {
                 ? {
                     content: (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContributionInfo", defaultMessage: "ui.contributionActionMenu.deleteContributionInfo" }))
                 }
-                : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+                : currentAction === PUBLISH_CONTRIBUTION
+                    ? {
+                        content: (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.publishContributionInfo", defaultMessage: "ui.contributionActionMenu.publishContributionInfo" }))
+                    }
+                    : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
 }

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

@@ -2,7 +2,7 @@ import { Dispatch } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
 import { EndpointType } from '@selfcommunity/api-services';
 import { SCCourseUsersTableModeType } from '../../types/course';
-type HeaderCellsType = {
+declare type HeaderCellsType = {
     id?: string;
 };
 export interface CourseUsersTableProps {

package/lib/esm/shared/CourseUsersTable/SeeProgressButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Button, Icon, IconButton, Skeleton, Stack, styled, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { Fragment, memo, useCallback, useEffect, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import BaseDialog from '../BaseDialog';
-import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
 import AccordionLessons from '../AccordionLessons';
 import { CourseService } from '@selfcommunity/api-services';
@@ -31,9 +31,11 @@ function SeeProgressButton(props) {
     const [student, setStudent] = useState(null);
     // CONTEXTS
     const scRoutingContext = useSCRouting();
+    const { preferences } = useSCPreferences();
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const privateMessagingEnabled = useMemo(() => SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in preferences && preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [preferences]);
     // EFFECTS
     useEffect(() => {
         if (open && !student) {
@@ -48,6 +50,6 @@ function SeeProgressButton(props) {
     }, [setOpen]);
     return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: _jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
                                                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
-                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
+                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), privateMessagingEnabled && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
 }
 export default memo(SeeProgressButton);

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { WidgetProps } from '../../components/Widget';
+export interface HiddenPurchasableContentProps extends Pick<WidgetProps, Exclude<keyof WidgetProps, 'id'>> {
+    /**
+     * Id of user object
+     * @default null
+     */
+    id?: string;
+    /**
+     * Title
+     */
+    title?: string;
+    /**
+     * Content
+     */
+    content?: React.ReactNode;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS HiddenPurchasableContent component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {HiddenPurchasableContent} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `HiddenPurchasableContent` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCHiddenPurchasableContent-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function HiddenPurchasableContent(inProps: HiddenPurchasableContentProps): JSX.Element;

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

@@ -0,0 +1,50 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { Typography } from '@mui/material';
+import Widget from '../../components/Widget';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+const PREFIX = 'SCHiddenPurchasableContent';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS HiddenPurchasableContent component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {HiddenPurchasableContent} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `HiddenPurchasableContent` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCHiddenPurchasableContent-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function HiddenPurchasableContent(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = null, className = null, title, content, elevation } = props, rest = __rest(props, ["id", "className", "title", "content", "elevation"]);
+    // RENDER
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { elevation: elevation }, { children: [_jsx(Typography, Object.assign({ variant: "h3", gutterBottom: true }, { children: _jsx("b", { children: title || _jsx(FormattedMessage, { id: "ui.shared.hiddenPurchasableContent.title", defaultMessage: "ui.shared.hiddenPurchasableContent.title" }) }) })), content || (_jsxs(Typography, Object.assign({ variant: "body1" }, { children: [_jsx(FormattedMessage, { id: "ui.shared.hiddenPurchasableContent.content", defaultMessage: "ui.shared.hiddenPurchasableContent.content" }), ' '] })))] })));
+}

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

@@ -0,0 +1,3 @@
+import HiddenPurchasableContent, { HiddenPurchasableContentProps } from './HiddenPurchasableContent';
+export default HiddenPurchasableContent;
+export { HiddenPurchasableContentProps };

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

@@ -0,0 +1,2 @@
+import HiddenPurchasableContent from './HiddenPurchasableContent';
+export default HiddenPurchasableContent;

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

@@ -1,5 +1,5 @@
 import { Component, ReactNode, CSSProperties } from 'react';
-type Fn = () => any;
+declare type Fn = () => any;
 export interface InfiniteScrollProps {
     next?: Fn;
     hasMoreNext?: boolean;

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,13 +1,17 @@
+import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, Box, Grid, IconButton, Typography, Icon } from '@mui/material';
-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`,
@@ -22,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);
@@ -50,14 +57,15 @@ 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);
+        onMediaClick(type === MEDIA_TYPE_IMAGE ? images[index] : docs[index]);
+    }, [images, docs]);
     // RENDERING
     const renderTitle = (o) => {
         if (!o) {
@@ -74,27 +82,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) {
@@ -106,31 +114,50 @@ 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);
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+        }
+    }), []);
     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 }, doc.id))) }))] })));
 };

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

@@ -0,0 +1,10 @@
+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;
+}
+export default function DocComponent(props: DocComponentProps): JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+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`,
+    image: `${PREFIX}-image`,
+    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 } = props;
+    return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsx(Box, { component: "img", className: classes.image, alt: "pdf preview", src: doc.image_thumbnail ? doc.image_thumbnail.url : doc.image, onClick: () => openPreviewImage === null || openPreviewImage === void 0 ? void 0 : openPreviewImage(index, MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined } }), _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" }, { 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;