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

package/lib/cjs/shared/AutoPlayer/index.js

@@ -2,24 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-nocheck
 const react_1 = require("react");
 const react_waypoint_1 = require("react-waypoint");
 const react_player_1 = tslib_1.__importDefault(require("react-player"));
 const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
 const PREFIX = 'SCAutoPlayer';
 const Root = (0, material_1.styled)(react_waypoint_1.Waypoint, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 function AutoPlayer(props) {
     // PROPS
-    const { enableAutoplay = true, loop = false, muted = true, playsinline = true, controls = true, stopOnUnmount = true, pip = true, onVideoWatch } = props, rest = tslib_1.__rest(props, ["enableAutoplay", "loop", "muted", "playsinline", "controls", "stopOnUnmount", "pip", "onVideoWatch"]);
+    const { loop = false, muted = true, playsinline = true, controls = true, stopOnUnmount = true, pip = true, onVideoWatch } = props, rest = tslib_1.__rest(props, ["loop", "muted", "playsinline", "controls", "stopOnUnmount", "pip", "onVideoWatch"]);
     // STATE
     const [shouldPlay, setShouldPlay] = (0, react_1.useState)(false);
     const [played, setPlayed] = (0, react_1.useState)(0);
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    const enableAutoplay = react_core_1.SCPreferences.CONFIGURATIONS_VIDEO_AUTOPLAY_ENABLED in preferences && preferences[react_core_1.SCPreferences.CONFIGURATIONS_VIDEO_AUTOPLAY_ENABLED].value;
     (0, react_1.useEffect)(() => {
         if (played >= 10 && played <= 11) {
             onVideoWatch === null || onVideoWatch === void 0 ? void 0 : onVideoWatch();

package/lib/cjs/shared/ContributionActionsMenu/index.d.ts

@@ -46,6 +46,10 @@ export interface ContributionActionsMenuProps {
      * Handle restore obj
      */
     onRestoreContribution?: (obj: SCCommentType | SCFeedObjectType) => void;
+    /**
+     * Handle publish obj
+     */
+    onPublishContribution?: (obj: SCFeedObjectType) => void;
     /**
      * Handle flag notification obj
      */

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

@@ -75,7 +75,7 @@ const messages = (0, react_intl_1.defineMessages)({
 });
 function ContributionActionsMenu(props) {
     // PROPS
-    const { className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
+    const { className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onPublishContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onPublishContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // CONTEXT
@@ -86,6 +86,7 @@ function ContributionActionsMenu(props) {
     const scUserId = scUserContext.user ? scUserContext.user.id : null;
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // CONTRIBUTION STATE
     const { obj: feedObj, setObj: setFeedObj } = (0, react_core_1.useSCFetchFeedObject)({ id: feedObjectId, feedObject, feedObjectType });
     const { obj: commentObj, setObj: setCommentObj } = (0, react_core_1.useSCFetchCommentObject)({ id: commentObjectId, commentObject });
@@ -109,6 +110,9 @@ function ContributionActionsMenu(props) {
     // CONST
     const contributionObj = commentObj ? commentObj : feedObj;
     let popperRef = (0, react_1.useRef)(null);
+    const scheduledPostsEnabled = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value, [preferences]);
     /**
      * Intial extra sections to render, in addition to the GENERAL_SECTION
      * @return {array}
@@ -123,7 +127,7 @@ function ContributionActionsMenu(props) {
             _extra.push(ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION);
         }
         // Enable when backend is ready
-        if (react_core_1.UserUtils.isStaff(scUserContext.user)) {
+        if (react_core_1.UserUtils.isAdmin(scUserContext.user) || react_core_1.UserUtils.isModerator(scUserContext.user)) {
             // admin or moderator
             _extra.push(ContributionsActionsMenu_1.HIDE_CONTRIBUTION_SECTION);
             _extra.push(ContributionsActionsMenu_1.DELETE_CONTRIBUTION_SECTION);
@@ -334,6 +338,22 @@ function ContributionActionsMenu(props) {
             return Promise.resolve(res.data);
         });
     }, [contributionObj]);
+    /**
+     * Perform publish contribution
+     */
+    const performPublishContribution = (0, react_1.useMemo)(() => () => {
+        return api_services_1.http
+            .request({
+            url: api_services_1.Endpoints.PublishFeedObject.url({ type: contributionObj.type, id: contributionObj.id }),
+            method: api_services_1.Endpoints.PublishFeedObject.method
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [contributionObj]);
     /**
      * Fetch initial flag status
      */
@@ -470,6 +490,11 @@ function ContributionActionsMenu(props) {
             setOpenConfirmDialog(true);
             handleClose();
         }
+        else if (action === ContributionsActionsMenu_1.PUBLISH_CONTRIBUTION) {
+            setCurrentAction(ContributionsActionsMenu_1.PUBLISH_CONTRIBUTION);
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
         else if (action === ContributionsActionsMenu_1.RESTORE_CONTRIBUTION) {
             setCurrentAction(ContributionsActionsMenu_1.RESTORE_CONTRIBUTION);
             setOpenConfirmDialog(true);
@@ -559,6 +584,19 @@ function ContributionActionsMenu(props) {
                     performPostConfirmAction(false);
                 });
             }
+            else if (currentAction === ContributionsActionsMenu_1.PUBLISH_CONTRIBUTION) {
+                setCurrentActionLoading(ContributionsActionsMenu_1.PUBLISH_CONTRIBUTION);
+                performPublishContribution()
+                    .then(() => {
+                    const _contributionObj = Object.assign({}, contributionObj, { deleted: false });
+                    onPublishContribution && onPublishContribution(_contributionObj);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
             else if (currentAction === ContributionsActionsMenu_1.MODERATE_CONTRIBUTION_HIDDEN) {
                 setCurrentActionLoading(ContributionsActionsMenu_1.MODERATE_CONTRIBUTION_HIDDEN);
                 performModerationContribution(Flagging_1.MODERATION_TYPE_ACTION_HIDE, hideFlagType)
@@ -682,7 +720,16 @@ 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 && (react_core_1.UserUtils.isAdmin(user) || react_core_1.UserUtils.isModerator(user)));
     }
     /**
      * Can authenticated user suspend notification for the contribution
@@ -708,7 +755,7 @@ function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "link" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(ContributionsActionsMenu_1.GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === ContributionsActionsMenu_1.DELETE_CONTRIBUTION || currentActionLoading === ContributionsActionsMenu_1.RESTORE_CONTRIBUTION ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" })) }), contributionObj.deleted ? ((0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : ((0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canSuspendNotificationContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_CONTRIBUTION ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : contributionObj['suspended'] ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_off" })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: contributionObj['suspended'] ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_EVENT ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_off" })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: !contributionObj.event['show_on_feed'] ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, ContributionsActionsMenu_1.GENERAL_SECTION));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "link" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(ContributionsActionsMenu_1.GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === ContributionsActionsMenu_1.DELETE_CONTRIBUTION || currentActionLoading === ContributionsActionsMenu_1.RESTORE_CONTRIBUTION ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" })) }), contributionObj.deleted ? ((0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : ((0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canPublishContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.publishContribution", defaultMessage: "ui.contributionActionMenu.publishContribution" }), onClick: () => handleAction(ContributionsActionsMenu_1.PUBLISH_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_CONTRIBUTION ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : contributionObj['suspended'] ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_off" })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: contributionObj['suspended'] ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_EVENT ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_off" })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: !contributionObj.event['show_on_feed'] ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(ContributionsActionsMenu_1.SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, ContributionsActionsMenu_1.GENERAL_SECTION));
     }
     /**
      * Renders contribution menu content
@@ -731,6 +778,10 @@ function ContributionActionsMenu(props) {
                 ? {
                     content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.deleteContributionInfo", defaultMessage: "ui.contributionActionMenu.deleteContributionInfo" }))
                 }
-                : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+                : currentAction === ContributionsActionsMenu_1.PUBLISH_CONTRIBUTION
+                    ? {
+                        content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.publishContributionInfo", defaultMessage: "ui.contributionActionMenu.publishContributionInfo" }))
+                    }
+                    : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
 }
 exports.default = ContributionActionsMenu;

package/lib/cjs/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/cjs/shared/CourseUsersTable/SeeProgressButton.js

@@ -34,9 +34,11 @@ function SeeProgressButton(props) {
     const [student, setStudent] = (0, react_1.useState)(null);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in preferences && preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [preferences]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         if (open && !student) {
@@ -51,6 +53,6 @@ function SeeProgressButton(props) {
     }, [setOpen]);
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.contentWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!course.created_by.deleted && {
                                                     to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
-                                                }), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), (0, jsx_runtime_1.jsx)(AccordionLessons_1.default, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
+                                                }), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), privateMessagingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), (0, jsx_runtime_1.jsx)(AccordionLessons_1.default, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
 }
 exports.default = (0, react_1.memo)(SeeProgressButton);

package/lib/cjs/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/cjs/shared/HiddenPurchasableContent/HiddenPurchasableContent.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Widget_1 = tslib_1.__importDefault(require("../../components/Widget"));
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const PREFIX = 'SCHiddenPurchasableContent';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    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
+ */
+function HiddenPurchasableContent(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = null, className = null, title, content, elevation } = props, rest = tslib_1.__rest(props, ["id", "className", "title", "content", "elevation"]);
+    // RENDER
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { elevation: elevation }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)("b", { children: title || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.hiddenPurchasableContent.title", defaultMessage: "ui.shared.hiddenPurchasableContent.title" }) }) })), content || ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.hiddenPurchasableContent.content", defaultMessage: "ui.shared.hiddenPurchasableContent.content" }), ' '] })))] })));
+}
+exports.default = HiddenPurchasableContent;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const HiddenPurchasableContent_1 = tslib_1.__importDefault(require("./HiddenPurchasableContent"));
+exports.default = HiddenPurchasableContent_1.default;

package/lib/cjs/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/cjs/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/cjs/shared/Media/File/DisplayComponent.js

@@ -3,14 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Media_1 = require("../../../constants/Media");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const react_intersection_observer_1 = require("react-intersection-observer");
 const Lightbox_1 = require("../../Lightbox");
 const constants_1 = require("./constants");
-const filter_1 = tslib_1.__importDefault(require("./filter"));
+const DocComponent_1 = tslib_1.__importDefault(require("./DocComponent"));
+const filter_1 = require("./filter");
+const Media_1 = require("../../../constants/Media");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../../constants/Errors");
 const classes = {
     displayRoot: `${constants_1.PREFIX}-display-root`,
     background: `${constants_1.PREFIX}-background`,
@@ -25,21 +28,24 @@ const classes = {
     border: `${constants_1.PREFIX}-border`,
     gallery: `${constants_1.PREFIX}-gallery`,
     title: `${constants_1.PREFIX}-title`,
-    iconFile: `${constants_1.PREFIX}-icon-file`
+    iconFile: `${constants_1.PREFIX}-icon-file`,
+    docsWrapper: `${constants_1.PREFIX}-docs-wrapper`
 };
-const Root = (0, material_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Stack, {
     name: constants_1.PREFIX,
     slot: 'DisplayRoot'
-})(({}) => ({}));
+})(() => ({}));
 exports.default = (props) => {
     // PROPS
     const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
     // STATE
     const [preview, setPreview] = (0, react_1.useState)(-1);
+    const [mediaType, setMediaType] = (0, react_1.useState)(null);
     const [toolbarButtons, setToolbarButtons] = (0, react_1.useState)(undefined);
     const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
     // MEMO
-    const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [medias]);
+    const images = (0, react_1.useMemo)(() => medias.filter(filter_1.filteredImages), [medias]);
+    const docs = (0, react_1.useMemo)(() => medias.filter(filter_1.filteredDocs), [medias]);
     // HANDLERS
     const handleClose = () => {
         setPreview(-1);
@@ -53,14 +59,15 @@ exports.default = (props) => {
         }
         return image;
     };
-    const openPreviewImage = (0, react_1.useCallback)((index) => {
+    const openPreviewImage = (0, react_1.useCallback)((index, type = Media_1.MEDIA_TYPE_IMAGE) => {
         if (gallery === false) {
             // Prevent gallery
             return;
         }
         setPreview(index);
-        onMediaClick(_medias[index]);
-    }, [_medias]);
+        setMediaType(type);
+        onMediaClick(type === Media_1.MEDIA_TYPE_IMAGE ? images[index] : docs[index]);
+    }, [images, docs]);
     // RENDERING
     const renderTitle = (o) => {
         if (!o) {
@@ -77,27 +84,27 @@ exports.default = (props) => {
                     break;
             }
         }
-        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsxs)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
-                    root: (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
+                    root: (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(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])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(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])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(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])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(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])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(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])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(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])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(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) {
@@ -109,31 +116,50 @@ exports.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 && (0, jsx_runtime_1.jsx)("div", { className: classes.cover }, "count"),
             more && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["+", extra] }) }), "count-sub"))
         ];
     };
+    const handleDownload = (0, react_1.useCallback)((index) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const response = yield api_services_1.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) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        }
+    }), []);
     const handleIndexChange = (0, react_1.useCallback)((index) => {
-        if (_medias[index].type === Media_1.MEDIA_TYPE_DOCUMENT) {
-            setToolbarButtons((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) })));
+        if (mediaType === Media_1.MEDIA_TYPE_DOCUMENT) {
+            setToolbarButtons((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) })));
         }
         else {
             setToolbarButtons(undefined);
         }
-    }, [_medias, setToolbarButtons]);
+    }, [mediaType, docs, setToolbarButtons, handleDownload]);
     (0, react_1.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 ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && ((0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length < 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && ((0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleClose, index: preview, medias: mediaType === Media_1.MEDIA_TYPE_IMAGE ? images : docs, toolbarButtons: toolbarButtons })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.docsWrapper }, { children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(DocComponent_1.default, { doc: doc, index: i, openPreviewImage: openPreviewImage, handleDownload: handleDownload }, doc.id))) }))] })));
 };

package/lib/cjs/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/cjs/shared/Media/File/DocComponent.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const react_core_1 = require("@selfcommunity/react-core");
+const Media_1 = require("../../../constants/Media");
+const classes = {
+    docRoot: `${constants_1.PREFIX}-doc-root`,
+    image: `${constants_1.PREFIX}-image`,
+    textWrapper: `${constants_1.PREFIX}-text-wrapper`,
+    title: `${constants_1.PREFIX}-title`,
+    subtitle: `${constants_1.PREFIX}-subtitle`,
+    actionWrapper: `${constants_1.PREFIX}-action-wrapper`,
+    action: `${constants_1.PREFIX}-action`
+};
+const Root = (0, material_1.styled)(material_1.Stack, {
+    name: constants_1.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]}`;
+}
+function DocComponent(props) {
+    const { doc, index, onDelete, openPreviewImage, handleDownload } = props;
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.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_1.MEDIA_TYPE_DOCUMENT), sx: { cursor: openPreviewImage ? 'pointer' : undefined } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: doc.title })), doc.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(doc.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(doc.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: doc.url, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
+}
+exports.default = DocComponent;