@selfcommunity/react-ui 1.2.5-alpha.4 → 1.2.5-alpha.5

package/lib/cjs/components/CourseForm/CourseForm.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseType, SCCourseTypologyType } from '@selfcommunity/types';
 import { SCCourseFormStepType } from '../../constants/Course';
 export interface CourseFormProps extends BoxProps {
     /**
@@ -26,7 +26,7 @@ export interface CourseFormProps extends BoxProps {
      * On step change callback function
      * @default null
      */
-    onStepChange?: (step: SCCourseFormStepType, type: SCCourseType) => void;
+    onStepChange?: (step: SCCourseFormStepType, type: SCCourseTypologyType) => void;
     /**
      * On error callback function
      * @default null

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -116,7 +116,7 @@ function CourseForm(inProps) {
         imageOriginal: (course === null || course === void 0 ? void 0 : course.image_bigger) || '',
         imageOriginalFile: '',
         name: (course === null || course === void 0 ? void 0 : course.name) || '',
-        type: (course === null || course === void 0 ? void 0 : course.type) || '',
+        type: (course === null || course === void 0 ? void 0 : course.type) || types_1.SCCourseTypologyType.SELF,
         description: course ? course.description : '',
         categories: course ? course.categories : [],
         privacy: course ? course.privacy : '',
@@ -160,7 +160,7 @@ function CourseForm(inProps) {
      */
     const handleChangeStep = (newStep) => {
         setStep(newStep);
-        onStepChange(newStep, field.type);
+        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(newStep, field.type);
     };
     /**
      * Formats categories object to a specific format needed in the form body

package/lib/cjs/components/CourseFormDialog/CourseFormDialog.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_intl_1 = require("react-intl");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
@@ -45,9 +46,9 @@ function CourseFormDialog(inProps) {
     });
     const { className, open = true, onClose, CourseFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
     // STATE
-    // TODO - temporary hardcoded CUSTOMIZATION and 'self-paced' --> previous value: GENERAL and ''
+    // TODO - temporary hardcoded CUSTOMIZATION and SELF --> previous value: GENERAL and ''
     const [step, setStep] = (0, react_1.useState)(Course_1.SCCourseFormStepType.CUSTOMIZATION);
-    const [type, setType] = (0, react_1.useState)('self-paced');
+    const [type, setType] = (0, react_1.useState)(types_1.SCCourseTypologyType.SELF);
     //HANDLERS
     const handleStepTypeChange = (step, type) => {
         setStep(step);

package/lib/cjs/components/CreateCourseButton/CreateCourseButton.d.ts

@@ -35,4 +35,4 @@ export interface CreateCourseButtonProps extends ButtonProps {
 
  * @param inProps
  */
-export default function CreateCourseButton(inProps: CreateCourseButtonProps): JSX.Element;
+export default function CreateCourseButton(inProps: CreateCourseButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/CreateCourseButton/CreateCourseButton.js

@@ -17,7 +17,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.

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

@@ -23,7 +23,7 @@ export interface ImagePreviewComponentProps {
     /**
      * Handles on media click
      */
-    onMediaClick?: (any: any) => void;
+    onMediaClick?: (media: SCMediaType) => void;
 }
-declare const _default: (props: ImagePreviewComponentProps) => JSX.Element;
+declare const _default: (props: ImagePreviewComponentProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

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

@@ -36,7 +36,7 @@ const Root = (0, material_1.styled)(material_1.Stack, {
 })(() => ({}));
 exports.default = (props) => {
     // PROPS
-    const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
+    const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = undefined } = props;
     // STATE
     const [preview, setPreview] = (0, react_1.useState)(-1);
     const [toolbarButtons, setToolbarButtons] = (0, react_1.useState)(undefined);
@@ -86,8 +86,10 @@ exports.default = (props) => {
     const renderOne = () => {
         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, width: "100%", 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({ ref: ref, size: 12, className: (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 isLandscape = images[0].image_height && images[0].image_width && images[0].image_height < images[0].image_width;
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ ref: ref, size: 12, className: (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 && images[0].image_height && images[0].image_width
+                    ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` }
+                    : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
     };
     const renderTwo = () => {
         const overlay = images.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
@@ -124,7 +126,7 @@ exports.default = (props) => {
             const url = window.URL.createObjectURL(blob);
             const link = document.createElement('a');
             link.href = url;
-            link.download = docs[index].title;
+            link.download = docs[index].title || '';
             link.click();
             // Cleanup
             window.URL.revokeObjectURL(url);

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

@@ -73,6 +73,6 @@ function DocComponent(props) {
                 return fallback_1.default;
         }
     }, [document.mimetype]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.docRoot, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (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: (0, classnames_1.default)(classes.title, classes.contrastColor) }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.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(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [document.mimetype === types_1.SCMimeTypes.PDF && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { 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" }) }))] }))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.docRoot, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (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: (0, classnames_1.default)(classes.title, classes.contrastColor) }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.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(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && index && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [document.mimetype === types_1.SCMimeTypes.PDF && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { 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;

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

@@ -32,7 +32,7 @@ const PreviewComponent = (0, react_1.forwardRef)((props, ref) => {
     // EFFECTS
     (0, react_1.useEffect)(() => {
         if (typeof document === undefined) {
-            return null;
+            return;
         }
         const sortable = document.getElementById(SORTABLE_ID);
         if (sortable) {

package/lib/esm/components/CourseForm/CourseForm.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseType, SCCourseTypologyType } from '@selfcommunity/types';
 import { SCCourseFormStepType } from '../../constants/Course';
 export interface CourseFormProps extends BoxProps {
     /**
@@ -26,7 +26,7 @@ export interface CourseFormProps extends BoxProps {
      * On step change callback function
      * @default null
      */
-    onStepChange?: (step: SCCourseFormStepType, type: SCCourseType) => void;
+    onStepChange?: (step: SCCourseFormStepType, type: SCCourseTypologyType) => void;
     /**
      * On error callback function
      * @default null

package/lib/esm/components/CourseForm/CourseForm.js

@@ -114,7 +114,7 @@ export default function CourseForm(inProps) {
         imageOriginal: (course === null || course === void 0 ? void 0 : course.image_bigger) || '',
         imageOriginalFile: '',
         name: (course === null || course === void 0 ? void 0 : course.name) || '',
-        type: (course === null || course === void 0 ? void 0 : course.type) || '',
+        type: (course === null || course === void 0 ? void 0 : course.type) || SCCourseTypologyType.SELF,
         description: course ? course.description : '',
         categories: course ? course.categories : [],
         privacy: course ? course.privacy : '',
@@ -158,7 +158,7 @@ export default function CourseForm(inProps) {
      */
     const handleChangeStep = (newStep) => {
         setStep(newStep);
-        onStepChange(newStep, field.type);
+        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(newStep, field.type);
     };
     /**
      * Formats categories object to a specific format needed in the form body

package/lib/esm/components/CourseFormDialog/CourseFormDialog.js

@@ -2,6 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
+import { SCCourseTypologyType } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import BaseDialog from '../../shared/BaseDialog';
@@ -43,9 +44,9 @@ export default function CourseFormDialog(inProps) {
     });
     const { className, open = true, onClose, CourseFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
     // STATE
-    // TODO - temporary hardcoded CUSTOMIZATION and 'self-paced' --> previous value: GENERAL and ''
+    // TODO - temporary hardcoded CUSTOMIZATION and SELF --> previous value: GENERAL and ''
     const [step, setStep] = useState(SCCourseFormStepType.CUSTOMIZATION);
-    const [type, setType] = useState('self-paced');
+    const [type, setType] = useState(SCCourseTypologyType.SELF);
     //HANDLERS
     const handleStepTypeChange = (step, type) => {
         setStep(step);

package/lib/esm/components/CreateCourseButton/CreateCourseButton.d.ts

@@ -35,4 +35,4 @@ export interface CreateCourseButtonProps extends ButtonProps {
 
  * @param inProps
  */
-export default function CreateCourseButton(inProps: CreateCourseButtonProps): JSX.Element;
+export default function CreateCourseButton(inProps: CreateCourseButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/CreateCourseButton/CreateCourseButton.js

@@ -15,7 +15,7 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.

package/lib/esm/index.js

@@ -238,7 +238,9 @@ export { AcceptRequestUserEventButton, AccountChangeMailValidation, AccountDataP
 /* SC CONSENT SOLUTION */
 ConsentSolution, ConsentSolutionButton, ConsentSolutionSkeleton, ContributionUtils, SCCourseEditTabType, Course, CourseSkeleton, CourseJoinButton, Courses, CoursesSkeleton, CourseTypePopover, CreateCourseButton, CourseContentMenu, CourseDashboard, TeacherSkeleton, StudentSkeleton, CreateEventButton, CreateEventWidget, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormDialog, CustomAdv, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, 
 /* SC UI PAGINATION */
-DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultHeaderContent, DefaultDrawerSkeleton, EditEventButton, EditGroupButton, Editor, EditorSkeleton, EmailTextField, EditCourse, EditCourseSkeleton, Event, EventActionsMenu, EventHeader, EventHeaderSkeleton, EventInfoDetails, EventInfoWidget, EventInviteButton, EventLocationWidget, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetSkeleton, EventParticipantsButton, Events, EventSkeleton, EventsSkeleton, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectSkeleton, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetSkeleton, File, FollowUserButton, Footer, FooterSkeleton, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, getUrlLesson, Group, GroupActionsMenu, GroupForm, GroupHeader, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInvitedWidget, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersWidget, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSkeleton, GroupsSkeleton, GroupSubscribeButton, 
+DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultHeaderContent, DefaultDrawerSkeleton, EditEventButton, EditGroupButton, Editor, EditorSkeleton, EmailTextField, EditCourse, EditCourseSkeleton, 
+/* EVENTS */
+Event, EventActionsMenu, EventHeader, EventHeaderSkeleton, EventInfoDetails, EventInfoWidget, EventInviteButton, EventLocationWidget, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetSkeleton, EventParticipantsButton, Events, EventSkeleton, EventsSkeleton, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectSkeleton, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetSkeleton, File, FollowUserButton, Footer, FooterSkeleton, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, getUrlLesson, Group, GroupActionsMenu, GroupForm, GroupHeader, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInvitedWidget, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersWidget, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSkeleton, GroupsSkeleton, GroupSubscribeButton, 
 /* SC UI SHARED */
 AccordionLessons, AccordionLessonsSkeleton, AddUsersButton, CourseUsersTable, CourseUsersTableSkeleton, EmptyStatus, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorListWidget, IncubatorSubscribeButton, IncubatorSuggestionWidget, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetSkeleton, InviteUserEventButton, LessonAppbar, LessonDrawer, LessonEditForm, LessonObject, LanguageSwitcher, LEGAL_POLICIES, CourseCompletedDialog, Lightbox, Link, LINKEDIN_SHARE, LocationAutocomplete, 
 /* Assets */

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

@@ -23,7 +23,7 @@ export interface ImagePreviewComponentProps {
     /**
      * Handles on media click
      */
-    onMediaClick?: (any: any) => void;
+    onMediaClick?: (media: SCMediaType) => void;
 }
-declare const _default: (props: ImagePreviewComponentProps) => JSX.Element;
+declare const _default: (props: ImagePreviewComponentProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

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

@@ -34,7 +34,7 @@ const Root = styled(Stack, {
 })(() => ({}));
 export default (props) => {
     // PROPS
-    const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
+    const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = undefined } = props;
     // STATE
     const [preview, setPreview] = useState(-1);
     const [toolbarButtons, setToolbarButtons] = useState(undefined);
@@ -84,8 +84,10 @@ export default (props) => {
     const renderOne = () => {
         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, width: "100%", style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: _jsxs(Grid, Object.assign({ ref: ref, size: 12, className: classNames(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: images.length > 1 })), onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(images[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
+        const isLandscape = images[0].image_height && images[0].image_width && images[0].image_height < images[0].image_width;
+        return (_jsx(Grid, Object.assign({ container: true, width: "100%", style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: _jsxs(Grid, Object.assign({ ref: ref, size: 12, className: classNames(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: images.length > 1 })), onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(images[0], inView && isGif)})` }, (isLandscape && images[0].image_height && images[0].image_width
+                    ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` }
+                    : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
     };
     const renderTwo = () => {
         const overlay = images.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
@@ -122,7 +124,7 @@ export default (props) => {
             const url = window.URL.createObjectURL(blob);
             const link = document.createElement('a');
             link.href = url;
-            link.download = docs[index].title;
+            link.download = docs[index].title || '';
             link.click();
             // Cleanup
             window.URL.revokeObjectURL(url);

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

@@ -70,5 +70,5 @@ export default function DocComponent(props) {
                 return fallback;
         }
     }, [document.mimetype]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.title, classes.contrastColor) }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classNames(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.title, classes.contrastColor) }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classNames(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && index && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
 }

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

@@ -30,7 +30,7 @@ const PreviewComponent = forwardRef((props, ref) => {
     // EFFECTS
     useEffect(() => {
         if (typeof document === undefined) {
-            return null;
+            return;
         }
         const sortable = document.getElementById(SORTABLE_ID);
         if (sortable) {