@selfcommunity/react-ui 0.11.0-react-17.0.1.3 → 1.0.0-alpha.1

package/lib/cjs/components/UserProfileEdit/Skeleton.js

@@ -31,6 +31,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
  *
  */
 function UserProfileEditSkeleton() {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, md: 12, sm: 12 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: "grow" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
 }
 exports.default = UserProfileEditSkeleton;

package/lib/cjs/components/UserSubscribedGroupsWidget/UserSubscribedGroupsWidget.js

@@ -165,7 +165,7 @@ function UserSubscribedGroupsWidget(inProps) {
     }
     const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.title", defaultMessage: "ui.userSubscribedGroupsWidget.title", values: {
                         total: isMe ? state.results.filter((g) => g.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED).length : state.count
-                    } }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.subtitle.noResults", defaultMessage: "ui.userSubscribedGroupsWidget.subtitle.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, limit).map((group) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: group, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, group.id))) }), limit < state.count && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.button.showAll", defaultMessage: "ui.userSubscribedGroupsWidget.button.showAll" }) }))), openDialog && ((0, jsx_runtime_1.jsxs)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.title", defaultMessage: "ui.userSubscribedGroupsWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog, scroll: "paper" }, DialogProps, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, { children: [state.results.map((g) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: g, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, g.id))), state.isLoadingNext && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, Object.assign({ elevation: 0 }, GroupProps)) }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.noMoreResults", defaultMessage: "ui.userSubscribedGroupsWidget.noMoreResults" }) }))] })))] }))] }));
+                    } }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.subtitle.noResults", defaultMessage: "ui.userSubscribedGroupsWidget.subtitle.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, limit).map((group) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: group, GroupSubscribeButtonComponentProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, group.id))) }), limit < state.count && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.button.showAll", defaultMessage: "ui.userSubscribedGroupsWidget.button.showAll" }) }))), openDialog && ((0, jsx_runtime_1.jsxs)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.title", defaultMessage: "ui.userSubscribedGroupsWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog, scroll: "paper" }, DialogProps, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, { children: [state.results.map((g) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: g, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, g.id))), state.isLoadingNext && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, Object.assign({ elevation: 0 }, GroupProps)) }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.noMoreResults", defaultMessage: "ui.userSubscribedGroupsWidget.noMoreResults" }) }))] })))] }))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = UserSubscribedGroupsWidget;

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

@@ -1,6 +1,6 @@
-import { LoadingButtonProps } from '@mui/lab';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
-export interface VoteAudienceButtonProps extends Pick<LoadingButtonProps, Exclude<keyof LoadingButtonProps, 'onClick' | 'disabled' | 'loading'>> {
+import { ButtonProps } from '@mui/material';
+export interface VoteAudienceButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled' | 'loading'>> {
     /**
      * Id of the contribution object to vote
      * @default null

package/lib/cjs/components/VoteAudienceButton/VoteAudienceButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -21,7 +20,7 @@ const classes = {
     dialogTabs: `${PREFIX}-dialog-tabs`,
     dialogVoteBadge: `${PREFIX}-dialog-vote-badge`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -69,10 +68,10 @@ function VoteAudienceButton(inProps) {
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // HANDLERS
-    const handleOpen = (_event) => {
+    const handleOpen = () => {
         setOpen(true);
     };
-    const handleClose = (_event) => {
+    const handleClose = () => {
         setOpen(false);
     };
     const handleChangeTab = (_event, newValue) => {
@@ -105,7 +104,7 @@ function VoteAudienceButton(inProps) {
     const audienceIcon = (0, react_1.useMemo)(() => {
         if (reactions.default && !isLoading && !error) {
             return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
-                    contributionReactionsCount.slice(0, 3).map((count, _i) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
+                    contributionReactionsCount.slice(0, 3).map((count) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
         }
         return scUserContext.user && contributionVoted ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" });
     }, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);

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

@@ -1,6 +1,6 @@
-import { LoadingButtonProps } from '@mui/lab';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
-export interface VoteButtonProps extends Pick<LoadingButtonProps, Exclude<keyof LoadingButtonProps, 'onClick' | 'disabled' | 'loading'>> {
+import { ButtonProps } from '@mui/material';
+export interface VoteButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled' | 'loading'>> {
     /**
      * Id of the contribution object to vote
      * @default null

package/lib/cjs/components/VoteButton/VoteButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -19,7 +18,7 @@ const classes = {
     reactionList: `${PREFIX}-reaction-list`,
     reaction: `${PREFIX}-reaction`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -72,7 +71,7 @@ function VoteButton(inProps) {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
     };
-    const handleMouseLeave = (_event) => {
+    const handleMouseLeave = () => {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
     };

package/lib/cjs/shared/AddUsersButton/AddUsersButton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
@@ -129,7 +128,9 @@ function AddUsersButton(inProps) {
     const handleDelete = (0, react_1.useCallback)((userToDelete) => {
         setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
     }, [setInvited]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, classes.contrastColor, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: option.username })] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign({}, params.InputProps) }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, classes.contrastColor, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: option.username })] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
+                                    input: Object.assign({}, params.InputProps)
+                                } }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 } }, index))) }))] })) })))] }));
 }

package/lib/cjs/shared/ConfirmDialog/ConfirmDialog.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const PREFIX = 'SCConfirmDialog';
@@ -38,6 +37,6 @@ function ConfirmDialog(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && ((0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, Object.assign({ component: "div" }, { children: content })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleClose }, { children: btnCancel || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && ((0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, Object.assign({ component: "div" }, { children: content })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleClose }, { children: btnCancel || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
 }
 exports.default = ConfirmDialog;

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

@@ -728,7 +728,7 @@ function ContributionActionsMenu(props) {
      */
     function renderFlagContributionSection() {
         const open = openSection === ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION;
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: !contributionObj.deleted && !contributionObj.collapsed && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging, onClick: () => handleOpenSection(ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: flagType !== undefined && flagType !== null ? ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ classes: { badge: classes.sectionBadge }, badgeContent: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.sectionWithSelectionIcon }, { children: "check" })), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.flagContributionWithMotivation", defaultMessage: "ui.contributionActionMenu.flagContributionWithMotivation" }) }), open ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] })), (0, jsx_runtime_1.jsxs)(material_1.Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: [renderReports(ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'caption', component: "div", className: classes.footerSubItems }, { children: intl.formatMessage(messages.footer) }))] }))] })) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: !contributionObj.deleted && !contributionObj.collapsed && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging, onClick: () => handleOpenSection(ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: flagType !== undefined && flagType !== null ? ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ classes: { badge: classes.sectionBadge }, badgeContent: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.sectionWithSelectionIcon }, { children: "check" })), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.flagContributionWithMotivation", defaultMessage: "ui.contributionActionMenu.flagContributionWithMotivation" }) }), open ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] })), (0, jsx_runtime_1.jsxs)(material_1.Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: [renderReports(ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", component: "div", className: classes.footerSubItems }, { children: intl.formatMessage(messages.footer) }))] }))] })) }));
     }
     /**
      * Renders section hide actions
@@ -808,15 +808,9 @@ function ContributionActionsMenu(props) {
     /**
      * Renders component
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-            // @ts-ignore
-            , Object.assign({ 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
-                ref: (ref) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: classes.visibilityIcons }, { children: [contributionObj.collapsed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }), (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" })) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === ContributionsActionsMenu_1.DELETE_CONTRIBUTION
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: classes.visibilityIcons }, { children: [contributionObj.collapsed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }), (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" })) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "outlined", className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === ContributionsActionsMenu_1.DELETE_CONTRIBUTION
                 ? {
                     content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.deleteContributionInfo", defaultMessage: "ui.contributionActionMenu.deleteContributionInfo" }))
                 }

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

@@ -15,7 +15,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.TextField, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(({ theme }) => ({
     [`& .${classes.btnCopy}`]: {
         color: theme.palette.secondary.main
@@ -66,11 +66,17 @@ function CopyTextField(inProps) {
     };
     const button = ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "Copy text", edge: "end", onClick: () => handleCopy(value), className: classes.btnCopy }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "insert_link" }) })));
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), label: label ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }), margin: "normal", variant: "outlined", disabled: true, fullWidth: true, value: value, multiline: true, onChange: handleChange, InputProps: {
-            disableUnderline: true,
-            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: openConfirm ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ open: openConfirm, PopperProps: { open: true }, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.copyTextField.textCopied", defaultMessage: "ui.shared.copyTextField.textCopied" }) }, { children: button }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }) }, { children: button }))) })))
-        }, InputLabelProps: {
-            shrink: true
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), label: label ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }), margin: "normal", variant: "outlined", disabled: true, fullWidth: true, value: value, multiline: true, onChange: handleChange, slotProps: {
+            input: {
+                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: openConfirm ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ open: openConfirm, slotProps: {
+                            popper: {
+                                open: true
+                            }
+                        }, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.copyTextField.textCopied", defaultMessage: "ui.shared.copyTextField.textCopied" }) }, { children: button }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }) }, { children: button }))) })))
+            },
+            inputLabel: {
+                shrink: true
+            }
         } }, rest)));
 }
 exports.default = CopyTextField;

package/lib/cjs/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -4,7 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const lab_1 = require("@mui/lab");
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -48,7 +47,7 @@ function ChangeUserStatus(props) {
             });
         });
     }, [course, user, setLoading, setValue]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                     padding: 0,
                     ':hover': {
                         backgroundColor: 'unset'

package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js

@@ -6,7 +6,6 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
 const RowSkeleton_1 = tslib_1.__importDefault(require("./RowSkeleton"));
-const lab_1 = require("@mui/lab");
 const types_1 = require("@selfcommunity/types");
 const constants_1 = require("./constants");
 const EmptyStatus_1 = tslib_1.__importDefault(require("../EmptyStatus"));
@@ -139,9 +138,11 @@ function CourseUsersTable(inProps) {
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { ref: inputRef, placeholder: intl.formatMessage({
                     id: 'ui.courseUsersTable.searchBar.placeholder',
                     defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
-                }), InputProps: {
-                    startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))),
-                    endAdornment: value.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })), (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })) }))] }))) : undefined
+                }), slotProps: {
+                    input: {
+                        startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))),
+                        endAdornment: value.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })), (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })) }))] }))) : undefined
+                    }
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: headerCells.map((cell, i, array) => {
                                     if (i === array.length - 1) {
                                         return (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "14%" }, i);
@@ -150,6 +151,6 @@ function CourseUsersTable(inProps) {
                                 }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
                                     users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === course_1.SCCourseUsersTableModeType.EDIT && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === course_1.SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { 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.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { 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.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 exports.default = (0, react_1.memo)(CourseUsersTable);

package/lib/cjs/shared/CourseUsersTable/RemoveButton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_1 = require("react");
@@ -46,6 +45,6 @@ function RemoveButton(props, ref) {
     (0, react_1.useImperativeHandle)(ref, () => ({
         handleManageUser: (userToRemove) => handleSubmit(userToRemove)
     }), [handleSubmit]);
-    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })));
 }
 exports.default = (0, react_1.memo)((0, react_1.forwardRef)(RemoveButton));

package/lib/cjs/shared/CourseUsersTable/RequestButton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_1 = require("react");
@@ -74,6 +73,6 @@ function RequestButton(props, ref) {
     (0, react_1.useImperativeHandle)(ref, () => ({
         handleManageUser: (userToReject) => handleReject(userToReject)
     }), [handleReject]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
 }
 exports.default = (0, react_1.memo)((0, react_1.forwardRef)(RequestButton));

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

@@ -16,8 +16,8 @@ const classes = {
 const Root = (0, material_1.styled)(notistack_1.SnackbarContent, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * Custom Snackbar for notistack messages
  * Use this component:

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

@@ -13,7 +13,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root]
+    overridesResolver: (_props, styles) => [styles.root]
 })(() => ({
     width: 'auto',
     display: 'inline-flex',
@@ -37,7 +37,7 @@ function DateTimeAgo(props) {
      */
     if (date) {
         const formattedDate = (0, formatRelativeTime_1.getRelativeTime)(date);
-        return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ component: "span", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [showStartIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" }) })) }))] })));
+        return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ as: "span", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [showStartIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" }) })) }))] })));
     }
     return null;
 }

package/lib/cjs/shared/EmojiPicker/EmojiPicker.d.ts

@@ -1,6 +1,5 @@
 import { PickerProps } from 'emoji-picker-react';
-interface EmojiPickerProps extends PickerProps {
+export interface EmojiPickerProps extends PickerProps {
     className?: string;
 }
 export default function EmojiPicker(inProps: EmojiPickerProps): JSX.Element;
-export {};

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

@@ -165,6 +165,14 @@ function EventActionsMenu(inProps) {
     if (!scEvent) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && (0, jsx_runtime_1.jsx)(EventForm_1.default, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, slotProps: {
+                    paper: {
+                        className: classes.paper
+                    }
+                }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, slotProps: {
+                    paper: {
+                        className: classes.paper
+                    }
+                } }, { children: renderList() }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && (0, jsx_runtime_1.jsx)(EventForm_1.default, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
 }
 exports.default = EventActionsMenu;

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

@@ -2,7 +2,6 @@
 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");
@@ -13,11 +12,11 @@ const classes = {
     root: `${PREFIX}-root`,
     header: `${PREFIX}-header`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS HiddenPurchasableContent component. Learn about the available props and the CSS API.
 

package/lib/cjs/shared/InfiniteScroll/stories/ScrolleableTop.js

@@ -22,6 +22,6 @@ function ScrolleableTop() {
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll on top" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
                     height: 300,
                     overflow: 'auto'
-                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: (0, jsx_runtime_1.jsx)("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
+                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: (0, jsx_runtime_1.jsx)("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: "0px" }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrolleableTop;

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

@@ -181,14 +181,8 @@ function LessonCommentActionsMenu(props) {
     /**
      * Renders component
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-            // @ts-ignore
-            , Object.assign({ 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
-                ref: (ref) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "outlined", className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
 }
 exports.default = LessonCommentActionsMenu;

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

@@ -25,7 +25,7 @@ const BaseLightbox = (props) => {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary" }), toolbarRender: toolbarRender
             ? toolbarRender
             : () => {
                 return toolbarButtons;

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

@@ -63,7 +63,7 @@ exports.default = (props) => {
             return;
         }
         setPreview(index);
-        onMediaClick(images[index]);
+        onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(images[index]);
     }, [gallery, setPreview, images, onMediaClick]);
     // RENDERING
     const renderTitle = (o) => {
@@ -87,21 +87,19 @@ exports.default = (props) => {
         const overlay = images.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
         const isGif = images[0]['image_mimetype'] ? images[0]['image_mimetype'].includes('image/gif') : false;
         const isLandscape = images[0].image_height < images[0].image_width;
-        return ((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])] })) })));
+        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 renderTwo = () => {
         const overlay = images.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
         const conditionalRender = [3, 4].includes(images.length) || (images.length > +maxVisible && [3, 4].includes(+maxVisible));
-        return ((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])] }))] })));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 6, className: (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({ size: 6, className: (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 = 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 ? 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])] }))] })));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 4, className: (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({ size: 4, className: (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({ size: 4, className: (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) {

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

@@ -1,10 +1,12 @@
 import { SCMediaType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
 interface DocComponentProps {
     document: SCMediaType;
     index?: number;
     onDelete?: (id: number) => void;
     handleDownload?: (id: number) => void;
     onMediaClick?: (media: SCMediaType) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
 }
 export default function DocComponent(props: DocComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ const constants_1 = require("./constants");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const txt_1 = tslib_1.__importDefault(require("../../../assets/composer/txt"));
 const pdf_1 = tslib_1.__importDefault(require("../../../assets/composer/pdf"));
 const doc_1 = tslib_1.__importDefault(require("../../../assets/composer/doc"));
@@ -36,7 +37,7 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 function DocComponent(props) {
-    const { document, index, onDelete, handleDownload, onMediaClick } = props;
+    const { document, index, onDelete, handleDownload, onMediaClick, className } = props;
     const getImage = (0, react_1.useCallback)(() => {
         switch (document.mimetype) {
             case types_1.SCMimeTypes.PLAIN_TEXT:
@@ -71,6 +72,6 @@ function DocComponent(props) {
                 return fallback_1.default;
         }
     }, [document.mimetype]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { 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: classes.title }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { 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: classes.title }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { 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" }) }))] }))] })))] })));
 }
 exports.default = DocComponent;