@selfcommunity/react-ui 0.11.0-mui7.29 → 0.11.0-react-17.0.1.2

package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js

@@ -1,7 +1,7 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Avatar, Box, Button, Icon, InputBase, ListItem, ListItemAvatar, ListItemText, Radio, Stack, Typography, Zoom, styled, CircularProgress, List, Popper } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Avatar, Box, Button, Icon, InputBase, ListItem, ListItemAvatar, ListItemText, Radio, Stack, Typography, Zoom, styled, CircularProgress } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { Endpoints, http } from '@selfcommunity/api-services';
@@ -13,6 +13,8 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getConvertedAmount } from '../../utils/payment';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import List from '@mui/material/List';
 import CreatePaymentProductForm from '../CreatePaymentProductForm';
 const classes = {
     root: `${PREFIX}-root`,
@@ -240,9 +242,7 @@ export default function PaywallsConfigurator(inProps) {
                                                             return;
                                                         }
                                                         setPendingValue(newValue);
-                                                    }, disableCloseOnSelect: true, slots: {
-                                                        popper: PopperComponent
-                                                    }, renderTags: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
+                                                    }, disableCloseOnSelect: true, PopperComponent: PopperComponent, renderTags: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
                                                             id: 'ui.paywallsConfigurator.filterByName',
                                                             defaultMessage: 'ui.paywallsConfigurator.filterByName'
                                                         }) })) }), _jsx(Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: _jsx(Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: _jsx(Icon, { children: "check" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));

package/lib/esm/components/PaywallsConfigurator/Skeleton.js

@@ -39,5 +39,5 @@ export default function PaywallsConfiguratorSkeleton(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, Object.assign({ size: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/PaywallsDialog/PaywallsDialog.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Slide, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
@@ -15,13 +15,13 @@ const classes = {
 const Root = styled(BaseDialog, {
     slot: 'Root',
     name: PREFIX
-})(() => ({}));
+})(({ theme }) => ({}));
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = function NoTransition(props) {
-    return _jsx(React.Fragment, { children: props.children });
-};
+const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
+});
 export default function PaywallsDialog(inProps) {
     var _a;
     // PROPS
@@ -35,8 +35,6 @@ export default function PaywallsDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ maxWidth: "sm", fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
-            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: "paper", open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
-            transition: Transition
-        }, DialogContentProps: { dividers: false } }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
+    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
+            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition, DialogContentProps: { dividers: false } }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
 }

package/lib/esm/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -56,7 +56,5 @@ export default function PdfPreviewDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ fullScreen: true, scroll: "paper", open: true, maxWidth: "md" }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
-            transition: Transition
-        }, DialogContentProps: { sx: { overflow: 'hidden' } } }, rest, { children: [_jsx(AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: _jsxs(Toolbar, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && (_jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: _jsx(Icon, { children: "download" }) }))), _jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: _jsx(Icon, { children: "close" }) }))] }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.content }, { children: _jsx(Grid, Object.assign({ size: 12, justifyContent: "center", alignContent: "center" }, { children: _jsx(PdfPreview, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+    return (_jsxs(Root, Object.assign({ fullScreen: true, scroll: "paper", open: true, maxWidth: "md" }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition, DialogContentProps: { sx: { overflow: 'hidden' } } }, rest, { children: [_jsx(AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: _jsxs(Toolbar, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && (_jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: _jsx(Icon, { children: "download" }) }))), _jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: _jsx(Icon, { children: "close" }) }))] }) })), _jsx(Grid, Object.assign({ container: true, className: classes.content }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignContent: "center" }, { children: _jsx(PdfPreview, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
 }

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -55,11 +55,11 @@ const Root = styled(Widget, {
         display: 'flex',
         paddingBottom: 0,
         boxShadow: 'inset -1px -3px 7px -4px #CECECE',
-        WebkitOverflowScrolling: 'touch',
+        '-webkit-overflow-scrolling': 'touch',
         overflowX: 'auto',
         overflowY: 'hidden',
         scrollbarWidth: 'none' /* Firefox */,
-        MsOverflowStyle: 'none' /* IE and Edge */,
+        '-ms-overflow-style': 'none' /* IE and Edge */,
         '&::-webkit-scrollbar': {
             display: 'none'
         }
@@ -291,13 +291,13 @@ export default function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ size: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ size: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: "body2", className: classes.tutorialTitle, component: "div" }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: "small", className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: "div" }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ item: true, xs: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */
-    const content = (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ size: "grow" }, { children: title ? (title) : (_jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) })) }))) })), _jsxs(Grid, Object.assign({ className: classes.actions }, { children: [_jsx(Grid, { size: 1, className: classes.action }), actions.map((a, i) => {
-                        return (_jsx(Grid, Object.assign({ size: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
-                    }), _jsx(Grid, { size: 1, className: classes.action })] }))] })));
+    const content = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : (_jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) })) }))) })), _jsxs(Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [_jsx(Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
+                        return (_jsx(Grid, Object.assign({ item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
+                    }), _jsx(Grid, { item: true, xs: 1, className: classes.action })] }))] })));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */

package/lib/esm/components/PlatformWidget/Skeleton.js

@@ -34,5 +34,5 @@ const Root = styled(Widget, {
  *
  */
 export default function PlatformWidgetSkeleton(props) {
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ size: 12, className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) })), _jsxs(Grid, Object.assign({ size: 12, className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 })] })), _jsx(Grid, Object.assign({ size: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) })), _jsxs(Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 })] })), _jsx(Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }

package/lib/esm/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -151,7 +151,7 @@ export default function PrivateMessageComponent(inProps) {
      * Renders snippets section
      */
     function renderSnippets() {
-        return (_jsx(Grid, Object.assign({ size: { xs: 12, md: 5 }, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
+        return (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
                     onSnippetClick: handleThreadOpening,
                     onNewMessageClick: handleOpenNewMessage,
                     onDeleteConfirm: handleDeleteThread
@@ -161,7 +161,7 @@ export default function PrivateMessageComponent(inProps) {
      * Renders thread section
      */
     function renderThread() {
-        return (_jsx(Grid, Object.assign({ size: { xs: 12, md: 7 }, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
+        return (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 7, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
@@ -169,5 +169,5 @@ export default function PrivateMessageComponent(inProps) {
     if (!authUserId || !privateMessagingEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ container: true, width: "100%" }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
+    return (_jsxs(Root, Object.assign({ container: true }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
 }

package/lib/esm/components/PrivateMessageComponent/Skeleton.js

@@ -39,5 +39,5 @@ export default function PrivateMessageComponentSkeleton(props) {
     const { className } = props;
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(Root, Object.assign({ container: true, width: "100%", className: classNames(classes.root, className) }, { children: [!isMobile && (_jsx(Grid, Object.assign({ size: { xs: 12, md: 5 }, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ size: { xs: 12, md: 7 }, className: classes.threadSection }, { children: _jsx(PrivateMessageThreadSkeleton, {}) }))] })));
+    return (_jsxs(Root, Object.assign({ container: true, className: classNames(classes.root, className) }, { children: [!isMobile && (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 7, className: classes.threadSection }, { children: _jsx(PrivateMessageThreadSkeleton, {}) }))] })));
 }

package/lib/esm/components/PrivateMessageEditor/MessageMediaUploader/index.js

@@ -106,7 +106,7 @@ export default function MessageMediaUploader(props) {
                         url: `${scContext.settings.portal}${Endpoints.PrivateMessageUploadMediaInChunks.url()}`,
                         headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
                         method: Endpoints.PrivateMessageUploadMediaInChunks.method
-                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [_jsx(MessageChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && (_jsxs(UploadDropZone, Object.assign({ className: classes.uploadSection }, { children: [_jsx(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), _jsx(Typography, Object.assign({ textAlign: "center", fontWeight: "medium" }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), _jsxs(List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
+                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [_jsx(MessageChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && (_jsxs(UploadDropZone, Object.assign({ className: classes.uploadSection }, { children: [_jsx(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), _jsx(Typography, Object.assign({ textAlign: 'center', fontWeight: 'medium' }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), _jsxs(List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
                                     previews.map((item, index) => {
                                         var _a;
                                         return (_jsx(React.Fragment, { children: 'file' in item && (_jsxs(ListItem, Object.assign({ className: classes.previewItem }, getMouseEvents(() => handleMouseEnter(item.file_uuid), () => handleMouseLeave(item.file_uuid)), { children: ['video_url' in item ? (_jsx("video", { src: item.video_url })) : (_jsx("img", { src: item.file.type.startsWith(SCMessageFileType.PDF) && !item.file_url
@@ -114,6 +114,6 @@ export default function MessageMediaUploader(props) {
                                                             : !item.file_url
                                                                 ? documentPlaceholder
                                                                 : item.file_url })), _jsx(ImageListItemBar, { className: classNames(classes.previewActions, { [classes.progress]: item.completed }), title: typeof item.completed !== 'undefined' &&
-                                                            item.completed !== 0 && _jsx(Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: _jsx(_Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && (_jsx(IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && (_jsxs(Box, Object.assign({ component: "span", className: classes.previewInfo }, { children: [_jsx(Typography, Object.assign({ noWrap: true, textAlign: "center" }, { children: item.file.name })), _jsx(Typography, Object.assign({ textAlign: "center", fontWeight: "light" }, { children: bytesToSize(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
+                                                            item.completed !== 0 && _jsx(Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: _jsx(_Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && (_jsx(IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && (_jsxs(Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [_jsx(Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), _jsx(Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: bytesToSize(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
                                     }), previews.length !== 0 && action] }))] })) })] })));
 }

package/lib/esm/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -94,7 +94,7 @@ export default function PrivateMessageEditor(inProps) {
     const handleMessageInput = (event) => {
         setMessage(event.target.value);
     };
-    const handleEmojiClick = (emojiData) => {
+    const handleEmojiClick = (emojiData, event) => {
         const cursorPosition = ref.current.selectionEnd;
         const start = ref.current.value.substring(0, ref.current.selectionStart);
         const end = ref.current.value.substring(ref.current.selectionStart);
@@ -124,11 +124,9 @@ export default function PrivateMessageEditor(inProps) {
         return (_jsx(Alert, Object.assign({ severity: "error", action: _jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: _jsx(Icon, { children: "close" }) })) }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
     }
     function renderContent() {
-        return (_jsx(_Fragment, { children: openMediaSection ? (_jsx(MessageMediaUploader, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: _jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })) })) : (_jsxs(_Fragment, { children: [openEmojiSection && _jsx(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), _jsx(TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), slotProps: {
-                            input: {
-                                startAdornment: (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: _jsx(Icon, { children: "attach_file" }) }))] })),
-                                endAdornment: (_jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })))
-                            }
+        return (_jsx(_Fragment, { children: openMediaSection ? (_jsx(MessageMediaUploader, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: _jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })) })) : (_jsxs(_Fragment, { children: [openEmojiSection && _jsx(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), _jsx(TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
+                            startAdornment: (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: _jsx(Icon, { children: "attach_file" }) }))] })),
+                            endAdornment: (_jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })))
                         } })] })) }));
     }
     return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className, { [classes.ios]: isIOS }) }, { children: renderContent() })));

package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -120,13 +120,5 @@ export default function PrivateMessageSettingsIconButton(inProps) {
             ];
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
 }

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -186,7 +186,7 @@ export default function PrivateMessageSnippets(inProps) {
     /**
      * Notification subscriber
      */
-    const subscriber = (_msg, data) => {
+    const subscriber = (msg, data) => {
         const res = data.data;
         updateSnippetsParams(res.thread_id, res.notification_obj.snippet.thread_status, res.notification_obj.snippet.headline);
     };
@@ -207,13 +207,13 @@ export default function PrivateMessageSnippets(inProps) {
      * Thread/ Private Message Component subscriptions handlers
      */
     useEffect(() => {
-        const threadSubscriber = PubSub.subscribe('snippetsChannel', (_msg, data) => {
+        const threadSubscriber = PubSub.subscribe('snippetsChannel', (msg, data) => {
             handleSnippetsUpdate(data);
         });
-        const snippetsSubscriber = PubSub.subscribe('snippetsChannelDelete', (_msg, data) => {
+        const snippetsSubscriber = PubSub.subscribe('snippetsChannelDelete', (msg, data) => {
             handleSnippetsUpdate(data, true, SCPrivateMessageType.USER);
         });
-        const snippetsGroupSubscriber = PubSub.subscribe('snippetsChannelDeleteGroup', (_msg, data) => {
+        const snippetsGroupSubscriber = PubSub.subscribe('snippetsChannelDeleteGroup', (msg, data) => {
             handleSnippetsUpdate(data, true, SCPrivateMessageType.GROUP);
         });
         return () => {
@@ -232,11 +232,9 @@ export default function PrivateMessageSnippets(inProps) {
     /**
      * Renders the component
      */
-    return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, slotProps: {
-                                input: {
-                                    className: classes.input,
-                                    startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })),
-                                    endAdornment: (_jsx(IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })))
-                                }
+    return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
+                                className: classes.input,
+                                startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })),
+                                endAdornment: (_jsx(IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })))
                             } }), _jsx(List, { children: filteredSnippets.map((message) => (_jsx(PrivateMessageSnippetItem, { message: message, onItemClick: () => handleOpenThread(message), secondaryAction: _jsxs(_Fragment, { children: [message.thread_status === SCPrivateMessageStatusType.NEW && _jsx(Icon, Object.assign({ color: "secondary" }, { children: "fiber_manual_record" })), !isMobile && (_jsx(PrivateMessageSettingsIconButton, { threadToDelete: (message === null || message === void 0 ? void 0 : message.group) ? message.group.id : messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)), user: messageReceiver(message, authUserId, true), group: message === null || message === void 0 ? void 0 : message.group }))] }), selected: isSelected(message) }, message.id))) })] }))] }) })));
 }

package/lib/esm/components/PrivateMessageSnippets/Skeleton.js

@@ -36,5 +36,5 @@ const Root = styled(Card, {
  *
  */
 export default function PrivateMessageSnippetsSkeleton(props) {
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { height: 20, width: 100, variant: "rectangular" }) })), _jsx(Skeleton, { height: 25, width: "100%", variant: "rounded", className: classes.searchBar })] })), _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => (_jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 }, index))) }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { height: 20, width: 100, variant: 'rectangular' }) })), _jsx(Skeleton, { height: 25, width: '100%', variant: 'rounded', className: classes.searchBar })] })), _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => (_jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 }, index))) }))] }) })));
 }

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

@@ -25,7 +25,7 @@ export interface PrivateMessageThreadProps extends CardProps {
      * Callback fired when new message section is closed
      * @default null
      */
-    onNewMessageClose?: (dispatch?: any) => void;
+    onNewMessageClose?: (dispatch: any) => void;
     /**
      * Callback fired when a single message section is open
      * @default null

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -188,7 +188,7 @@ export default function PrivateMessageThread(inProps) {
             console.log(error);
         });
     }
-    const handleInputChange = (_event, value, reason) => {
+    const handleInputChange = (event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -213,13 +213,15 @@ export default function PrivateMessageThread(inProps) {
         }
         return false;
     };
-    const handleClear = (_event, value) => {
+    const handleClear = (event, value) => {
         setValue('');
         setFollowers([]);
         setRecipients(value !== null && value !== void 0 ? value : []);
     };
     const handleNewMessageClose = () => {
         handleClear();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
         onNewMessageClose && onNewMessageClose();
     };
     function updateAndDeleteURLParameters(url, paramToUpdate, newValue, paramToDelete) {
@@ -426,7 +428,7 @@ export default function PrivateMessageThread(inProps) {
     /**
      * Notification subscriber
      */
-    const subscriber = (_msg, data) => {
+    const subscriber = (msg, data) => {
         const res = data.data;
         const newMessages = [...messageObjs];
         const index = newMessages.findIndex((m) => m.thread_id === res.thread_id);
@@ -458,7 +460,7 @@ export default function PrivateMessageThread(inProps) {
         if (loadingMessageObjs) {
             return _jsx(PrivateMessageThreadSkeleton, {});
         }
-        return (_jsxs(CardContent, { children: [_jsx(InfiniteScroll, Object.assign({ height: "100%", dataLength: messageObjs.length, previous: handlePrevious, inverse: true, hasMorePrevious: Boolean(previous), loaderPrevious: _jsx(PrivateMessageThreadItemSkeleton, {}) }, { children: _jsx(List, Object.assign({ ref: messagesEndRef }, { children: Object.keys(formattedMessages).map((key) => (_jsx("li", Object.assign({ className: classes.section }, { children: _jsxs("ul", { children: [_jsx(ListSubheader, { children: _jsx(Typography, Object.assign({ align: "center", className: classes.subHeader }, { children: key })) }), formattedMessages[key].map((msg) => {
+        return (_jsxs(CardContent, { children: [_jsx(InfiniteScroll, Object.assign({ height: '100%', dataLength: messageObjs.length, previous: handlePrevious, inverse: true, hasMorePrevious: Boolean(previous), loaderPrevious: _jsx(PrivateMessageThreadItemSkeleton, {}) }, { children: _jsx(List, Object.assign({ ref: messagesEndRef }, { children: Object.keys(formattedMessages).map((key) => (_jsx("li", Object.assign({ className: classes.section }, { children: _jsxs("ul", { children: [_jsx(ListSubheader, { children: _jsx(Typography, Object.assign({ align: "center", className: classes.subHeader }, { children: key })) }), formattedMessages[key].map((msg) => {
                                         var _a;
                                         return (_jsxs(Box, Object.assign({ className: classes.item }, { children: [msg.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== msg.sender.username && (_jsx(ListItemAvatar, { children: _jsx(Avatar, { alt: msg.sender.username, src: msg.sender.avatar, className: classes.avatar }) })), _jsx(PrivateMessageThreadItem, { className: authUserId === msg.sender.id ? classes.sender : classes.receiver, message: msg, mouseEvents: {
                                                         onMouseEnter: () => handleMouseEnter(msg.id),
@@ -471,9 +473,7 @@ export default function PrivateMessageThread(inProps) {
      * @return {JSX.Element}
      */
     function renderNewOrNoMessageBox() {
-        return (_jsx(CardContent, { children: isNew || singleMessageThread ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeader }, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeaderContent }, { children: [_jsx(Icon, Object.assign({ className: classes.newMessageHeaderIcon }, { children: "person" })), _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" }) }), _jsx(Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", slotProps: {
-                                                input: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true })
-                                            } }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })] })), _jsx(IconButton, Object.assign({ size: "small", onClick: handleNewMessageClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(List, { className: classes.newMessageContent }), _jsx(PrivateMessageEditor, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) })] })) : (_jsx(Typography, Object.assign({ className: classes.emptyMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" }) }))) }));
+        return (_jsx(CardContent, { children: isNew || singleMessageThread ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeader }, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeaderContent }, { children: [_jsx(Icon, Object.assign({ className: classes.newMessageHeaderIcon }, { children: "person" })), _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" }) }), _jsx(Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })] })), _jsx(IconButton, Object.assign({ size: "small", onClick: handleNewMessageClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(List, { className: classes.newMessageContent }), _jsx(PrivateMessageEditor, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) })] })) : (_jsx(Typography, Object.assign({ className: classes.emptyMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" }) }))) }));
     }
     // Anonymous
     if (!authUserId) {

package/lib/esm/components/PrivateMessageThread/Skeleton.js

@@ -35,5 +35,5 @@ const Root = styled(Card, {
 export default function PrivateMessageThreadSkeleton(props) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(List, Object.assign({ className: classes.list }, { children: [_jsx(ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: _jsx(Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => (_jsx(PrivateMessageThreadItemSkeleton, { index: index }, index)))] })), _jsx(Box, Object.assign({ className: classes.editor }, { children: _jsx(Skeleton, { animation: "wave", height: 55, width: "100%", variant: "rectangular" }) }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(List, Object.assign({ className: classes.list }, { children: [_jsx(ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: _jsx(Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => (_jsx(PrivateMessageThreadItemSkeleton, { index: index }, index)))] })), _jsx(Box, Object.assign({ className: classes.editor }, { children: _jsx(Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' }) }))] }) })));
 }

package/lib/esm/components/RelatedEventsWidget/index.d.ts

@@ -1,4 +1,4 @@
 import RelatedEventsWidget, { RelatedEventsWidgetProps } from './RelatedEventsWidget';
 import RelatedEventsWidgetSkeleton from './Skeleton';
 export default RelatedEventsWidget;
-export { RelatedEventsWidgetSkeleton, RelatedEventsWidgetProps };
+export { RelatedEventsWidgetSkeleton, type RelatedEventsWidgetProps };

package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js

@@ -24,8 +24,8 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
     [`& .${classes.input}`]: {
         flexGrow: 1
     }
@@ -36,7 +36,7 @@ export default function SearchAutocomplete(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, autoFocus = false, onSearch = null, onClear = null, onSuggestionSelect = (_suggestion) => null } = props, rest = __rest(props, ["id", "className", "blurOnSelect", "autoFocus", "onSearch", "onClear", "onSuggestionSelect"]);
+    const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, autoFocus = false, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = __rest(props, ["id", "className", "blurOnSelect", "autoFocus", "onSearch", "onClear", "onSuggestionSelect"]);
     // CONTEXT
     const scPreferences = useSCPreferences();
     // STATE
@@ -45,7 +45,7 @@ export default function SearchAutocomplete(inProps) {
     const [options, setOptions] = useState([]);
     // INTL
     const intl = useIntl();
-    const handleInputChange = (_event, value, reason) => {
+    const handleInputChange = (event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -53,7 +53,7 @@ export default function SearchAutocomplete(inProps) {
                 break;
         }
     };
-    const handleChange = (event, value, reason, _detail) => {
+    const handleChange = (event, value, reason, detail) => {
         event.preventDefault();
         event.stopPropagation();
         switch (reason) {
@@ -68,7 +68,7 @@ export default function SearchAutocomplete(inProps) {
         }
         return false;
     };
-    const handleClear = (_event) => {
+    const handleClear = (event) => {
         setValue('');
         setOptions([]);
         onClear && onClear();
@@ -127,7 +127,5 @@ export default function SearchAutocomplete(inProps) {
             return optionLabel(option);
         }, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: getOptionData(option).name, src: getOptionData(option).image, variant: getOptionData(option).variant }), _jsx(Typography, Object.assign({ ml: 1 }, { children: getOptionData(option).name }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {
                 community: scPreferences.preferences[SCPreferences.TEXT_APPLICATION_NAME].value
-            })}`, slotProps: {
-                input: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', className: classes.input, startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })), endAdornment: (_jsx(Fade, Object.assign({ in: value.length > 0 || Boolean(onClear), appear: false }, { children: _jsx(IconButton, Object.assign({ className: classes.clear, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })) }))) })
-            } }))) }, rest)));
+            })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', className: classes.input, startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })), endAdornment: (_jsx(Fade, Object.assign({ in: value.length > 0 || Boolean(onClear), appear: false }, { children: _jsx(IconButton, Object.assign({ className: classes.clear, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })) }))) }) }))) }, rest)));
 }

package/lib/esm/components/SnippetNotifications/SnippetNotifications.js

@@ -154,10 +154,10 @@ export default function SnippetNotifications(inProps) {
     }, [scUserContext.user, initialized]);
     /**
      * Notification subscriber
-     * @param _msg
+     * @param msg
      * @param data
      */
-    const notificationSubscriber = (_msg, data) => {
+    const notificationSubscriber = (msg, data) => {
         /**
          * Ignore notifications of type: notification_banner
          * (data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER)
@@ -288,9 +288,9 @@ export default function SnippetNotifications(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.notificationsWrap }, { children: !initialized || loading ? (_jsx(Skeleton, { elevation: 0 })) : (_jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsxs(MenuList, Object.assign({ className: classes.list, disabledItemsFocusable: true, disableListWrap: true }, { children: [scUserContext.user.unseen_notification_banners_counter ? (_jsx(MenuItem, Object.assign({ className: classNames(classes.item, classes.broadcastMessagesBanner), component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(NotificationItem, { template: SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: _jsx(Typography, Object.assign({ component: "div" }, { children: intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.notificationsWrap }, { children: !initialized || loading ? (_jsx(Skeleton, { elevation: 0 })) : (_jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsxs(MenuList, Object.assign({ className: classes.list, disabledItemsFocusable: true, disableListWrap: true }, { children: [scUserContext.user.unseen_notification_banners_counter ? (_jsx(MenuItem, Object.assign({ className: classNames(classes.item, classes.broadcastMessagesBanner), component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(NotificationItem, { template: SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: _jsx(Typography, Object.assign({ component: 'div' }, { children: intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
                                         count: scUserContext.user.unseen_notification_banners_counter,
-                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.snippetNotifications.broadcastMessages.b"),
-                                        link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: chunks }), "ui.snippetNotifications.broadcastMessages.link"))
+                                        b: (...chunks) => _jsx("strong", { children: chunks }),
+                                        link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: chunks }))
                                     }) })) }) }), "banner")) : null, notifications.length === 0 ? (_jsx(MenuItem, Object.assign({ className: classes.emptyBoxNotifications }, { children: _jsx(FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }) }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (_jsx(MenuItem, Object.assign({ className: classes.item, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, { children: renderAggregatedItem(n, i) }), k)))))] })) }))) })) })));
 }

package/lib/esm/components/SuggestedEventsWidget/index.d.ts

@@ -2,4 +2,4 @@ import Arrow, { ArrowProps } from './Arrow';
 import SuggestedEventsWidgetSkeleton from './Skeleton';
 import SuggestedEventsWidget, { SuggestedEventsWidgetProps } from './SuggestedEventsWidget';
 export default SuggestedEventsWidget;
-export { Arrow, SuggestedEventsWidgetSkeleton, ArrowProps, SuggestedEventsWidgetProps };
+export { Arrow, SuggestedEventsWidgetSkeleton, type ArrowProps, type SuggestedEventsWidgetProps };

package/lib/esm/components/TagAutocomplete/TagAutocomplete.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
@@ -122,9 +122,7 @@ const TagAutocomplete = (inProps) => {
             const parts = parse(option.name, matches);
             return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, Object.assign({ showDescription: true, disposable: false, tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { slotProps: {
-                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: value || tags.length > 0 ? (_jsxs(_Fragment, { children: [loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
-                } })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: value || tags.length > 0 ? (_jsxs(Fragment, { children: [loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));
 };
 export default TagAutocomplete;

package/lib/esm/components/UserActionIconButton/UserActionIconButton.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Slide, SwipeableDrawer, useMediaQuery, useTheme, styled } from '@mui/material';
-import { Link, UserUtils, useSCFetchUser, useSCUser } from '@selfcommunity/react-core';
+import { Link, UserUtils, useSCContext, useSCFetchUser, useSCUser } from '@selfcommunity/react-core';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -19,18 +19,18 @@ const classes = {
 const Root = styled(IconButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 const SwipeableDrawerRoot = styled(SwipeableDrawer, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.drawerRoot
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.drawerRoot
+})(({ theme }) => ({}));
 const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.menuRoot
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.menuRoot
+})(({ theme }) => ({}));
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
@@ -65,6 +65,7 @@ export default function UserActionIconButton(inProps) {
     const { className = null, userId = null, user = null, items = [] } = props, rest = __rest(props, ["className", "userId", "user", "items"]);
     // CONTEXT
     const scUserContext = useSCUser();
+    const scContext = useSCContext();
     // STATE
     const [anchorEl, setAnchorEl] = useState(null);
     const [infoOpen, setInfoOpen] = useState(false);
@@ -184,7 +185,5 @@ export default function UserActionIconButton(inProps) {
             ];
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderList() }))) })), _jsx(UserInfoDialog, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }), openHideDialog && (_jsx(ConfirmDialog, { open: openHideDialog, isUpdating: isHiddenLoading, slots: {
-                    transition: Transition
-                }, keepMounted: true, title: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderList() }))) })), _jsx(UserInfoDialog, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }), openHideDialog && (_jsx(ConfirmDialog, { open: openHideDialog, isUpdating: isHiddenLoading, TransitionComponent: Transition, keepMounted: true, title: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))] }));
 }