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

package/lib/cjs/components/PaymentOrders/PaymentOrders.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
+const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
 const react_intersection_observer_1 = require("react-intersection-observer");
 const api_services_1 = require("@selfcommunity/api-services");
 const system_1 = require("@mui/system");
@@ -23,15 +24,11 @@ const Errors_1 = require("../../constants/Errors");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
-const it_1 = require("date-fns/locale/it");
-const en_US_1 = require("date-fns/locale/en-US");
+const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
+const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
 const Category_1 = tslib_1.__importDefault(require("../Category"));
 const PREFIX = 'SCPaymentOrders';
 const messages = (0, react_intl_1.defineMessages)({
-    datePicker: {
-        id: 'ui.paymentOrders.picker.date',
-        defaultMessage: 'ui.paymentOrders.picker.date'
-    },
     dateFrom: {
         id: 'ui.paymentOrders.dateFrom',
         defaultMessage: 'ui.paymentOrders.dateFrom'
@@ -212,52 +209,42 @@ function PaymentOrders(inProps) {
     const skeleton = () => {
         return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({ ref: ref }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 20 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 30 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 80, width: 250 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
                                 e.preventDefault();
                                 if (e.key === 'Enter') {
                                     fetchInvoices();
                                 }
-                            }, slotProps: {
-                                input: {
-                                    endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
-                                                    setQuery('');
-                                                    fetchInvoices('');
-                                                }, disabled: isLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: isLoading }))] })))
-                                }
-                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 8, md: 4 } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.it : en_US_1.enUS, localeText: {
-                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction),
-                                clearButtonLabel: intl.formatMessage(messages.pickerClearAction)
-                            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, enableAccessibleFieldDOMStructure: false, localeText: {
-                                                toolbarTitle: intl.formatMessage(messages.datePicker)
-                                            }, slots: {
-                                                openPickerButton: (params) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, params, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })))
+                            }, InputProps: {
+                                endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
+                                                setQuery('');
+                                                fetchInvoices('');
+                                            }, disabled: isLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: isLoading }))] })))
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 4 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
+                                clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
+                            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
+                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
                                                 },
-                                                textField: {
-                                                    slotProps: {
-                                                        input: {
-                                                            placeholder: intl.formatMessage(messages.dateFrom)
-                                                        }
-                                                    }
+                                                toolbar: {
+                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                                    // @ts-ignore
+                                                    toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
                                                 }
-                                            }, onChange: setStartDate }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, enableAccessibleFieldDOMStructure: false, localeText: {
-                                                toolbarTitle: intl.formatMessage(messages.datePicker)
-                                            }, slots: {
-                                                openPickerButton: (params) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, params, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })))
+                                            }, onChange: (newValue) => setStartDate(newValue) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
+                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
                                                 },
-                                                textField: {
-                                                    slotProps: {
-                                                        input: {
-                                                            placeholder: intl.formatMessage(messages.dateTo)
-                                                        }
-                                                    }
+                                                toolbar: {
+                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                                    // @ts-ignore
+                                                    toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
                                                 }
-                                            }, onChange: setEndDate }) }))] })) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content }, { children: !isLoading ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "5%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "7%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "38%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "12%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "13%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [orders.map((order, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)("b", { children: order.id }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, payment_1.getConvertedAmount)(order.payment_price) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
+                                            }, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content }, { children: !isLoading ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "5%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "7%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "38%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "12%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "13%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [orders.map((order, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)("b", { children: order.id }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, payment_1.getConvertedAmount)(order.payment_price) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
                                                     intl.formatDate(new Date(order.created_at), {
                                                         year: 'numeric',
                                                         month: 'numeric',
@@ -272,6 +259,6 @@ function PaymentOrders(inProps) {
                                                         hour: 'numeric',
                                                         minute: 'numeric'
                                                     })
-                                                    : '-' })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === types_1.SCContentType.EVENT && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: skeleton() })] })] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) }))] })));
+                                                    : '-' })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === types_1.SCContentType.EVENT && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: skeleton() })] })] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) }))] })));
 }
 exports.default = PaymentOrders;

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

@@ -46,7 +46,7 @@ function PaymentProductSkeleton(inProps) {
         props: inProps,
         name: `${constants_1.PREFIX}Skeleton`
     });
-    const rest = tslib_1.__rest(props, []);
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));

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

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

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

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

package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js

@@ -15,6 +15,8 @@ const Errors_1 = require("../../constants/Errors");
 const react_intl_1 = require("react-intl");
 const payment_1 = require("../../utils/payment");
 const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
+const Popper_1 = tslib_1.__importDefault(require("@mui/material/Popper"));
+const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const CreatePaymentProductForm_1 = tslib_1.__importDefault(require("../CreatePaymentProductForm"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
@@ -45,7 +47,7 @@ const PaymentProductsAutocompletePopper = (0, material_1.styled)(material_1.Box,
     slot: 'PaymentProductsAutocompletePopperRoot',
     overridesResolver: (_props, styles) => styles.paymentProductsAutocompletePopperRoot
 })(() => ({}));
-const PaymentProductsPopper = (0, material_1.styled)(material_1.Popper, {
+const PaymentProductsPopper = (0, material_1.styled)(Popper_1.default, {
     name: constants_1.PREFIX,
     slot: 'PaymentProductsPopperRoot',
     overridesResolver: (_props, styles) => styles.paymentProductsPopperRoot
@@ -215,7 +217,7 @@ function PaywallsConfigurator(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.contentAccessType }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.selectAccessType", defaultMessage: "ui.paywallsConfigurator.selectAccessType" }) }), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.FREE, onChange: handleChange(constants_1.ContentAccessType.FREE), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.FREE }), "aria-controls": "free-content", id: "free-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free", defaultMessage: "ui.paywallsConfigurator.free" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.label", defaultMessage: "ui.paywallsConfigurator.free.label" })] }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.info", defaultMessage: "ui.paywallsConfigurator.free.info" }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.PAID, onChange: handleChange(constants_1.ContentAccessType.PAID), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.PAID }), "aria-controls": "paid-content", id: "paid-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid", defaultMessage: "ui.paywallsConfigurator.paid" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.label", defaultMessage: "ui.paywallsConfigurator.paid.label" })] }) })), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.info", defaultMessage: "ui.paywallsConfigurator.paid.info" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-around", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ style: { flexGrow: 1 }, component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products", defaultMessage: "ui.paywallsConfigurator.connected.products" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleToggleCreatePaymentPrice, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), className: classes.btnAddPaymentProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnNew", defaultMessage: "ui.paywallsConfigurator.connected.products.btnNew" }) }))] })), loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [createPrice && ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: createPrice }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(CreatePaymentProductForm_1.default, { className: classes.newProduct, onCreate: handleCreatePaymentPrice, onCancel: handleToggleCreatePaymentPrice }) }) }))), (0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ dense: true, className: classes.selectedPaymentProductsList }, { children: [!value.length && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.noProducts, divider: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: intl.formatMessage({
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.contentAccessType }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.selectAccessType", defaultMessage: "ui.paywallsConfigurator.selectAccessType" }) }), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.FREE, onChange: handleChange(constants_1.ContentAccessType.FREE), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.FREE }), "aria-controls": "free-content", id: "free-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free", defaultMessage: "ui.paywallsConfigurator.free" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.label", defaultMessage: "ui.paywallsConfigurator.free.label" })] }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.info", defaultMessage: "ui.paywallsConfigurator.free.info" }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.PAID, onChange: handleChange(constants_1.ContentAccessType.PAID), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.PAID }), "aria-controls": "paid-content", id: "paid-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid", defaultMessage: "ui.paywallsConfigurator.paid" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.label", defaultMessage: "ui.paywallsConfigurator.paid.label" })] }) })), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.info", defaultMessage: "ui.paywallsConfigurator.paid.info" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-around", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ style: { flexGrow: 1 }, component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products", defaultMessage: "ui.paywallsConfigurator.connected.products" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleToggleCreatePaymentPrice, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), className: classes.btnAddPaymentProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnNew", defaultMessage: "ui.paywallsConfigurator.connected.products.btnNew" }) }))] })), loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [createPrice && ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: createPrice }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(CreatePaymentProductForm_1.default, { className: classes.newProduct, onCreate: handleCreatePaymentPrice, onCancel: handleToggleCreatePaymentPrice }) }) }))), (0, jsx_runtime_1.jsxs)(List_1.default, Object.assign({ dense: true, className: classes.selectedPaymentProductsList }, { children: [!value.length && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.noProducts, divider: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: intl.formatMessage({
                                                             id: 'ui.paywallsConfigurator.connected.noProducts',
                                                             defaultMessage: 'ui.paywallsConfigurator.connected.noProducts'
                                                         }) }) }), -1)), value.map((p, i) => {
@@ -242,9 +244,7 @@ function PaywallsConfigurator(inProps) {
                                                             return;
                                                         }
                                                         setPendingValue(newValue);
-                                                    }, disableCloseOnSelect: true, slots: {
-                                                        popper: PopperComponent
-                                                    }, renderTags: () => null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.jsx)(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
+                                                    }, disableCloseOnSelect: true, PopperComponent: PopperComponent, renderTags: () => null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.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'
                                                         }) })) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));

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

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

package/lib/cjs/components/PaywallsDialog/PaywallsDialog.js

@@ -17,13 +17,13 @@ const classes = {
 const Root = (0, material_1.styled)(BaseDialog_1.default, {
     slot: 'Root',
     name: PREFIX
-})(() => ({}));
+})(({ theme }) => ({}));
 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 = function NoTransition(props) {
-    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
-};
+const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref) {
+    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
+});
 function PaywallsDialog(inProps) {
     var _a;
     // PROPS
@@ -37,9 +37,7 @@ function PaywallsDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.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) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: "paper", open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), slots: {
-            transition: Transition
-        }, DialogContentProps: { dividers: false } }, rest, { children: (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({}, PaywallsComponentProps)) })));
+    return ((0, jsx_runtime_1.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) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, DialogContentProps: { dividers: false } }, rest, { children: (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({}, PaywallsComponentProps)) })));
 }
 exports.default = PaywallsDialog;

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

@@ -58,8 +58,6 @@ function PdfPreviewDialog(inProps) {
     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), slots: {
-            transition: 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, width: "100%", className: classes.content }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 12, justifyContent: "center", alignContent: "center" }, { children: (0, jsx_runtime_1.jsx)(PdfPreview_1.default, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+    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/PlatformWidget/PlatformWidget.js

@@ -57,11 +57,11 @@ const Root = (0, material_1.styled)(Widget_1.default, {
         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'
         }
@@ -293,13 +293,13 @@ function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "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({ size: "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" })) }))] }))] }))) }))] })));
+    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
      */
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { size: 1, className: classes.action }), actions.map((a, i) => {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
-                    }), (0, jsx_runtime_1.jsx)(material_1.Grid, { size: 1, className: classes.action })] }))] })));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (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.Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
+                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
+                    }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action })] }))] })));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */

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

@@ -37,6 +37,6 @@ const Root = (0, material_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, width: "100%", justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 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({ size: 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({ size: 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 }) }))] })) })));
+    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/PrivateMessageComponent/PrivateMessageComponent.js

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

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

@@ -42,6 +42,6 @@ function PrivateMessageComponentSkeleton(props) {
     const { className } = props;
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, width: "100%", className: (0, classnames_1.default)(classes.root, className) }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 5 }, className: classes.snippetsSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 7 }, className: classes.threadSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, className: (0, classnames_1.default)(classes.root, className) }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: classes.snippetsSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: classes.threadSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}) }))] })));
 }
 exports.default = PrivateMessageComponentSkeleton;

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

@@ -109,7 +109,7 @@ function MessageMediaUploader(props) {
                         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
-                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [(0, jsx_runtime_1.jsx)(MessageChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && ((0, jsx_runtime_1.jsxs)(upload_drop_zone_1.default, Object.assign({ className: classes.uploadSection }, { children: [(0, jsx_runtime_1.jsx)(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: "center", fontWeight: "medium" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), (0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
+                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [(0, jsx_runtime_1.jsx)(MessageChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && ((0, jsx_runtime_1.jsxs)(upload_drop_zone_1.default, Object.assign({ className: classes.uploadSection }, { children: [(0, jsx_runtime_1.jsx)(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: 'center', fontWeight: 'medium' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), (0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
                                     previews.map((item, index) => {
                                         var _a;
                                         return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: 'file' in item && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.previewItem }, getMouseEvents(() => handleMouseEnter(item.file_uuid), () => handleMouseLeave(item.file_uuid)), { children: ['video_url' in item ? ((0, jsx_runtime_1.jsx)("video", { src: item.video_url })) : ((0, jsx_runtime_1.jsx)("img", { src: item.file.type.startsWith(types_1.SCMessageFileType.PDF) && !item.file_url
@@ -117,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)(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));
+                                                            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

@@ -96,7 +96,7 @@ 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);
@@ -126,11 +126,9 @@ function PrivateMessageEditor(inProps) {
         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)(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), slotProps: {
-                            input: {
-                                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)(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/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -122,14 +122,6 @@ function PrivateMessageSettingsIconButton(inProps) {
             ];
         }
     };
-    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, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.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/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -188,7 +188,7 @@ 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);
     };
@@ -209,13 +209,13 @@ function PrivateMessageSnippets(inProps) {
      * Thread/ Private Message Component subscriptions handlers
      */
     (0, react_1.useEffect)(() => {
-        const threadSubscriber = pubsub_js_1.default.subscribe('snippetsChannel', (_msg, data) => {
+        const threadSubscriber = pubsub_js_1.default.subscribe('snippetsChannel', (msg, data) => {
             handleSnippetsUpdate(data);
         });
-        const snippetsSubscriber = pubsub_js_1.default.subscribe('snippetsChannelDelete', (_msg, data) => {
+        const snippetsSubscriber = pubsub_js_1.default.subscribe('snippetsChannelDelete', (msg, data) => {
             handleSnippetsUpdate(data, true, types_1.SCPrivateMessageType.USER);
         });
-        const snippetsGroupSubscriber = pubsub_js_1.default.subscribe('snippetsChannelDeleteGroup', (_msg, data) => {
+        const snippetsGroupSubscriber = pubsub_js_1.default.subscribe('snippetsChannelDeleteGroup', (msg, data) => {
             handleSnippetsUpdate(data, true, types_1.SCPrivateMessageType.GROUP);
         });
         return () => {
@@ -234,12 +234,10 @@ function PrivateMessageSnippets(inProps) {
     /**
      * Renders the component
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${constants_1.PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, slotProps: {
-                                input: {
-                                    className: classes.input,
-                                    startAdornment: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })),
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })))
-                                }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${constants_1.PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
+                                className: classes.input,
+                                startAdornment: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })),
+                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })))
                             } }), (0, jsx_runtime_1.jsx)(material_1.List, { children: filteredSnippets.map((message) => ((0, jsx_runtime_1.jsx)(PrivateMessageSnippetItem_1.default, { message: message, onItemClick: () => handleOpenThread(message), secondaryAction: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [message.thread_status === types_1.SCPrivateMessageStatusType.NEW && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary" }, { children: "fiber_manual_record" })), !isMobile && ((0, jsx_runtime_1.jsx)(PrivateMessageSettingsIconButton_1.default, { 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))) })] }))] }) })));
 }
 exports.default = PrivateMessageSnippets;

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

@@ -39,6 +39,6 @@ const Root = (0, material_1.styled)(material_1.Card, {
  *
  */
 function PrivateMessageSnippetsSkeleton(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.jsxs)(material_1.Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 20, width: 100, variant: "rectangular" }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 25, width: "100%", variant: "rounded", className: classes.searchBar })] })), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { 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.jsxs)(material_1.Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 20, width: 100, variant: 'rectangular' }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 25, width: '100%', variant: 'rounded', className: classes.searchBar })] })), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) }))] }) })));
 }
 exports.default = PrivateMessageSnippetsSkeleton;

package/lib/cjs/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