@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.81

package/lib/cjs/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const PdfPreview_1 = tslib_1.__importDefault(require("../PdfPreview"));
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const PREFIX = 'SCPdfPreviewDialog';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`
+};
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
+    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
+});
+function PdfPreviewDialog(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, title, pdfUrl, disableInitialTransition = false, onClose, PdfPreviewComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "title", "pdfUrl", "disableInitialTransition", "onClose", "PdfPreviewComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    /**
+     * handle download pdf
+     */
+    const handleDownload = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        try {
+            const response = yield api_services_1.http.request({ url: pdfUrl, responseType: 'blob' });
+            const blob = new Blob([response.data], { type: 'application/pdf' });
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'order.pdf';
+            link.click();
+            // Cleanup
+            window.URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        }
+    });
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ fullScreen: true, scroll: "paper", open: true, maxWidth: "md" }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, DialogContentProps: { sx: { overflow: 'hidden' } } }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.content }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignContent: "center" }, { children: (0, jsx_runtime_1.jsx)(PdfPreview_1.default, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+}
+exports.default = PdfPreviewDialog;

package/lib/cjs/components/PdfPreviewDialog/index.d.ts

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

package/lib/cjs/components/PdfPreviewDialog/index.js

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

package/lib/cjs/components/PlatformWidget/PlatformWidget.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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -14,7 +13,6 @@ const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
 const logo_1 = tslib_1.__importDefault(require("../../assets/logo"));
-const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -34,7 +32,7 @@ const classes = {
     btnPreviousStep: `${constants_1.PREFIX}-btn-previous-step`,
     btnNextStep: `${constants_1.PREFIX}-btn-next-step`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(({ theme }) => ({
@@ -296,7 +294,7 @@ function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */

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

@@ -2,11 +2,9 @@
 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 constants_1 = require("./constants");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     title: `${constants_1.PREFIX}-skeleton-title`,
@@ -14,7 +12,7 @@ const classes = {
     actions: `${constants_1.PREFIX}-skeleton-actions`,
     tutorial: `${constants_1.PREFIX}-skeleton-tutorial`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -39,6 +37,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function PlatformWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }
 exports.default = PlatformWidgetSkeleton;

package/lib/cjs/components/PollSuggestionWidget/PollSnippet/PollSnippet.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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -21,7 +20,7 @@ const classes = {
     title: `${constants_1.PREFIX}-title`,
     activityAt: `${constants_1.PREFIX}-activity-at`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default, {
+const Root = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'PollSnippetRoot'
 })(() => ({}));

package/lib/cjs/components/PollSuggestionWidget/PollSnippet/Skeleton.js

@@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const BaseItem_1 = tslib_1.__importDefault(require("../../../shared/BaseItem"));
 const PREFIX = 'SCPollSnippetSkeleton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
+const Root = (0, material_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Poll Snippet Skeleton component. Learn about the available props and the CSS API.
 
@@ -33,6 +31,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
  */
 function PollSnippetSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
 }
 exports.default = PollSnippetSkeleton;

package/lib/cjs/components/PollSuggestionWidget/PollSuggestionWidget.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -30,11 +28,11 @@ const classes = {
     endMessage: `${constants_1.PREFIX}-end-message`,
     pollSnippet: `${constants_1.PREFIX}-poll-snippet`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -164,7 +162,7 @@ function PollSuggestionWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    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.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) })), !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.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && ((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.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: (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.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) })) })))] }));
+    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.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) })), !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.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && ((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.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: (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.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = PollSuggestionWidget;

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

@@ -2,17 +2,15 @@
 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 Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
 const PollSnippet_1 = require("./PollSnippet");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +36,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function PollSuggestionWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120 }), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((user, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, { elevation: 0 }) }, index))) }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120 }), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((user, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, { elevation: 0 }) }, index))) }))] }) })));
 }
 exports.default = PollSuggestionWidgetSkeleton;

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -18,7 +17,7 @@ const classes = {
     threadBox: `${constants_1.PREFIX}-thread-box`,
     hide: `${constants_1.PREFIX}-hide`
 };
-const Root = (0, styles_1.styled)(material_1.Grid, {
+const Root = (0, material_1.styled)(material_1.Grid, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -81,7 +80,8 @@ function PrivateMessageComponent(inProps) {
         return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
     };
     // MEMO
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferences.preferences]);
     const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
     (0, react_1.useEffect)(() => {
         setObj(id !== null && id !== void 0 ? id : null);

package/lib/cjs/components/PrivateMessageComponent/Skeleton.d.ts

@@ -6,7 +6,7 @@ interface PrivateMessageComponentSkeletonMap {
      */
     className?: string;
 }
-export type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
+export declare type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
 

package/lib/cjs/components/PrivateMessageComponent/Skeleton.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 Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets/Skeleton"));
 const Skeleton_2 = tslib_1.__importDefault(require("../PrivateMessageThread/Skeleton"));
@@ -13,7 +12,7 @@ const classes = {
     snippetsSection: `${constants_1.PREFIX}-snippets-section`,
     threadSection: `${constants_1.PREFIX}-thread-section`
 };
-const Root = (0, styles_1.styled)(material_1.Grid, {
+const Root = (0, material_1.styled)(material_1.Grid, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

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

@@ -5,12 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const upload_button_1 = require("@rpldy/upload-button");
 const react_1 = tslib_1.__importStar(require("react"));
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const chunked_uploady_1 = tslib_1.__importDefault(require("@rpldy/chunked-uploady"));
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
-const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../../Widget"));
 const MessageChunkUploader_1 = tslib_1.__importDefault(require("../../../shared/MessageChunkUploader"));
 const upload_drop_zone_1 = tslib_1.__importDefault(require("@rpldy/upload-drop-zone"));
@@ -20,7 +18,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const sizeCoverter_1 = require("../../../utils/sizeCoverter");
 const constants_1 = require("../constants");
 const MAX_FILE_SIZE = 10485760;
-const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) })))));
+const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }) })))));
 const classes = {
     root: `${constants_1.PREFIX}-message-media-uploader-root`,
     uploadSection: `${constants_1.PREFIX}-upload-section`,
@@ -32,7 +30,7 @@ const classes = {
     progress: `${constants_1.PREFIX}-progress`,
     previewInfo: `${constants_1.PREFIX}-preview-info`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'MessageMediaUploader'
 })(() => ({}));
@@ -107,7 +105,7 @@ function MessageMediaUploader(props) {
     /**
      * Renders root object
      */
-    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.CardHeader, { action: (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ onClick: onClose, className: classes.closeButton }, { children: "close" })) }), Object.keys(errors).map((id) => ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", onClose: handleRemoveErrors(id) }, { children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: errors[id].name }), errors[id].error] })) }), id))), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
+    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.CardHeader, { action: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ onClick: onClose, className: classes.closeButton }, { children: "close" })) }), Object.keys(errors).map((id) => ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", onClose: handleRemoveErrors(id) }, { children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: errors[id].name }), errors[id].error] })) }), id))), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
                         url: `${scContext.settings.portal}${api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.url()}`,
                         headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
                         method: api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.method
@@ -119,7 +117,7 @@ function MessageMediaUploader(props) {
                                                             : !item.file_url
                                                                 ? thumbnailCoverter_1.documentPlaceholder
                                                                 : item.file_url })), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { className: (0, classnames_1.default)(classes.previewActions, { [classes.progress]: item.completed }), title: typeof item.completed !== 'undefined' &&
-                                                            item.completed !== 0 && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: (0, sizeCoverter_1.bytesToSize)(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
+                                                            item.completed !== 0 && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: (0, sizeCoverter_1.bytesToSize)(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
                                     }), previews.length !== 0 && action] }))] })) })] })));
 }
 exports.default = MessageMediaUploader;

package/lib/cjs/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -3,9 +3,7 @@ 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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const MessageMediaUploader_1 = tslib_1.__importDefault(require("./MessageMediaUploader"));
 const react_intl_1 = require("react-intl");
@@ -26,7 +24,7 @@ const classes = {
     mediaUploader: `${constants_1.PREFIX}-media-uploader`,
     emojiSection: `${constants_1.PREFIX}-emoji-section`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -125,12 +123,12 @@ function PrivateMessageEditor(inProps) {
         return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: autoHideDeletion ? 'warning' : 'info' }, { children: autoHideDeletion ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.disabled.deleted.msg", defaultMessage: "ui.privateMessage.editor.disabled.deleted.msg" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.disabled.msg", defaultMessage: "ui.privateMessage.editor.disabled.msg" })) })));
     }
     else if (error) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "error", action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "error", action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
     }
     function renderContent() {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: openMediaSection ? ((0, jsx_runtime_1.jsx)(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "send" }) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openEmojiSection && (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), (0, jsx_runtime_1.jsx)(material_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "attach_file" }) }))] })),
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "send" }) })))
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: openMediaSection ? ((0, jsx_runtime_1.jsx)(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openEmojiSection && (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), (0, jsx_runtime_1.jsx)(material_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "attach_file" }) }))] })),
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })))
                         } })] })) }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className, { [classes.ios]: isIOS }) }, { children: renderContent() })));

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../Skeleton");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -3,10 +3,8 @@ 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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -21,15 +19,15 @@ const classes = {
     paper: `${PREFIX}-paper`,
     item: `${PREFIX}-item`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
     slot: 'DrawerRoot'
 })(() => ({}));
-const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'MenuRoot'
 })(() => ({}));
@@ -111,19 +109,19 @@ function PrivateMessageSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
-                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
-                (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
+                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
+                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
+                (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
             ];
         }
         else {
             return [
-                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
-                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
-                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
+                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
+                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
+                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
             ];
         }
     };
-    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)(Icon_1.default, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, 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: true, 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.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    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" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, 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: true, 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.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
 }
 exports.default = PrivateMessageSettingsIconButton;

package/lib/cjs/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
@@ -21,7 +20,7 @@ const classes = {
     menuItem: `${constants_1.PREFIX}-menu-item`,
     unread: `${constants_1.PREFIX}-unread`
 };
-const Root = (0, styles_1.styled)(material_1.ListItem, {
+const Root = (0, material_1.styled)(material_1.ListItem, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -1,19 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ListItem_1 = tslib_1.__importDefault(require("@mui/material/ListItem"));
-const ListItemAvatar_1 = tslib_1.__importDefault(require("@mui/material/ListItemAvatar"));
-const ListItemText_1 = tslib_1.__importDefault(require("@mui/material/ListItemText"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(ListItem_1.default, {
+const Root = (0, material_1.styled)(material_1.ListItem, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -40,6 +34,6 @@ const Root = (0, styles_1.styled)(ListItem_1.default, {
  */
 function PrivateMessageSnippetItemSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { secondaryAction: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 30, width: 5 }) }, { children: [(0, jsx_runtime_1.jsx)(ListItemAvatar_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { secondaryAction: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 5 }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })] })));
 }
 exports.default = PrivateMessageSnippetItemSkeleton;

package/lib/cjs/components/PrivateMessageSnippets/PrivateMessageSnippets.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 styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const types_1 = require("@selfcommunity/types");
@@ -15,7 +14,6 @@ const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const utils_1 = require("@selfcommunity/utils");
 const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
@@ -31,7 +29,7 @@ const classes = {
     clear: `${constants_1.PREFIX}-clear`,
     newMessageButton: `${constants_1.PREFIX}-new-message-button`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -75,7 +73,7 @@ function PrivateMessageSnippets(inProps) {
     const { className = null, threadObj = null, type = null, snippetActions, clearSearch } = props, rest = tslib_1.__rest(props, ["className", "threadObj", "type", "snippetActions", "clearSearch"]);
     // STATE
     const theme = (0, material_1.useTheme)();
-    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const { data, updateSnippets } = (0, react_core_1.useSCFetchPrivateMessageSnippets)({ cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST });
     const [search, setSearch] = (0, react_1.useState)('');
     const isObj = typeof threadObj === 'object';