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

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

@@ -1,4 +1,4 @@
-import { ForwardRefRenderFunction } from 'react';
+import React from 'react';
 export interface UserPaymentMethodsSkeletonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -11,26 +11,5 @@ export interface UserPaymentMethodsSkeletonProps {
     showBillingAddress?: boolean;
 }
 export type UserPaymentMethodsSkeletonRef = {};
-/**
- * > API documentation for the Community-JS User Payment Methods Skeleton component. Learn about the available props and the CSS API.
-
- #### Import
-
- ```jsx
- import {UserPaymentMethodsSkeleton} from '@selfcommunity/react-ui';
- ```
-
- #### Component Name
-
- The name `SCUserPaymentMethodsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
-
- #### CSS
-
- |Rule Name|Global class|Description|
- |---|---|---|
- |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
- *
- * @param inProps
- */
-declare const UserPaymentMethodsSkeleton: ForwardRefRenderFunction<UserPaymentMethodsSkeletonRef, UserPaymentMethodsSkeletonProps>;
-export default UserPaymentMethodsSkeleton;
+declare const _default: React.ForwardRefExoticComponent<UserPaymentMethodsSkeletonProps & React.RefAttributes<UserPaymentMethodsSkeletonRef>>;
+export default _default;

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

@@ -2,6 +2,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 material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const system_1 = require("@mui/system");
@@ -34,8 +35,9 @@ const Root = (0, material_1.styled)(material_1.Box, {
  |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
  *
  * @param inProps
+ * @param ref
  */
-const UserPaymentMethodsSkeleton = (inProps) => {
+const UserPaymentMethodsSkeleton = (inProps, ref) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -44,4 +46,4 @@ const UserPaymentMethodsSkeleton = (inProps) => {
     const { className = null, showBillingAddress = false } = props, rest = tslib_1.__rest(props, ["className", "showBillingAddress"]);
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { 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 }) })), (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: 200 }) })), (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: 50 }) })), showBillingAddress && ((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: 150 }) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 25, height: 25 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 105, height: 35 }) }))] }) })));
 };
-exports.default = UserPaymentMethodsSkeleton;
+exports.default = (0, react_1.forwardRef)(UserPaymentMethodsSkeleton);

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

@@ -1,4 +1,4 @@
-import { ForwardRefRenderFunction } from 'react';
+import React from 'react';
 export interface UserPaymentMethodsProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -15,27 +15,5 @@ export interface UserPaymentMethodsProps {
     [p: string]: any;
 }
 export type UserPaymentMethodsRef = {};
-/**
- * > API documentation for the Community-JS User Payment Methods. Learn about the available props and the CSS API.
-
- #### Import
-
- ```jsx
- import {UserPaymentMethods} from '@selfcommunity/react-ui';
- ```
-
- #### Component Name
-
- The name `SCUserPaymentMethods` can be used when providing style overrides in the theme.
-
-
- #### CSS
-
- |Rule Name|Global class|Description|
- |---|---|---|
- |root|.SCUserPaymentMethods-root|Styles applied to the root element.|
-
- * @param inProps
- */
-declare const UserPaymentMethods: ForwardRefRenderFunction<UserPaymentMethodsRef, UserPaymentMethodsProps>;
-export default UserPaymentMethods;
+declare const _default: React.ForwardRefExoticComponent<Omit<UserPaymentMethodsProps, "ref"> & React.RefAttributes<UserPaymentMethodsRef>>;
+export default _default;

package/lib/cjs/components/UserPaymentMethods/UserPaymentMethods.js

@@ -47,13 +47,13 @@ const Root = (0, material_1.styled)(material_1.Box, {
 
  * @param inProps
  */
-const UserPaymentMethods = (inProps) => {
+const UserPaymentMethods = (inProps, ref) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className = null, showBillingAddress = false } = props;
+    const { className = null, showBillingAddress = false } = props, rest = tslib_1.__rest(props, ["className", "showBillingAddress"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // STATE
@@ -72,6 +72,7 @@ const UserPaymentMethods = (inProps) => {
     const [addPaymentMethodDialogOpen, setAddPaymentMethodDialogOpen] = (0, react_1.useState)(false);
     // HOOKS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const intl = (0, react_intl_1.useIntl)();
     const { inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     /**
@@ -80,8 +81,8 @@ const UserPaymentMethods = (inProps) => {
     const loadMore = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         // eslint-disable-next-line @typescript-eslint/require-await
         const loadItems = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-            /* const startingAfterId = paymentMethods.length ? paymentMethods[paymentMethods.length - 1].id : null;
-            getAccountCustomerPaymentMethod(startingAfterId).then((res) => {
+            const startingAfterId = paymentMethods.length ? paymentMethods[paymentMethods.length - 1].id : null;
+            /* getAccountCustomerPaymentMethod(startingAfterId).then((res) => {
               setHasMore(res.paymentMethods.has_more);
               setPaymentMethods(paymentMethods.concat(res.paymentMethods.data));
               setIsLoadingPage(false);
@@ -329,9 +330,9 @@ const UserPaymentMethods = (inProps) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "baseline" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.headline }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.myPaymentMethods", defaultMessage: "ui.userPaymentMethods.myPaymentMethods" }) })), paymentMethods.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) })))] })), paymentMethods.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: material_1.Paper }, { 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, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.typeMethod", defaultMessage: "ui.userPaymentMethods.typeMethod" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.brand", defaultMessage: "ui.userPaymentMethods.brand" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.expiration", defaultMessage: "ui.userPaymentMethods.expiration" }) }), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.billingDetails", defaultMessage: "ui.userPaymentMethods.billingDetails" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.default", defaultMessage: "ui.userPaymentMethods.default" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.actions", defaultMessage: "ui.userPaymentMethods.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [paymentMethods.map((method, index) => {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "baseline" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.headline }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.myPaymentMethods", defaultMessage: "ui.userPaymentMethods.myPaymentMethods" }) })), paymentMethods.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) })))] })), paymentMethods.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: material_1.Paper }, { 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, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.typeMethod", defaultMessage: "ui.userPaymentMethods.typeMethod" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.brand", defaultMessage: "ui.userPaymentMethods.brand" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.expiration", defaultMessage: "ui.userPaymentMethods.expiration" }) }), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.billingDetails", defaultMessage: "ui.userPaymentMethods.billingDetails" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.default", defaultMessage: "ui.userPaymentMethods.default" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.actions", defaultMessage: "ui.userPaymentMethods.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [paymentMethods.map((method, index) => {
                                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                                        return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_svg_credit_card_payment_icons_1.PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ scope: "row" }, { children: [(_c = method.card) === null || _c === void 0 ? void 0 : _c.exp_month, "/", (_d = method.card) === null || _d === void 0 ? void 0 : _d.exp_year] })), showBillingAddress && ((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: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: method.billing_details.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [(_f = (_e = method.billing_details) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.line1, (0, jsx_runtime_1.jsx)("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [(_k = (_j = method.billing_details) === null || _j === void 0 ? void 0 : _j.address) === null || _k === void 0 ? void 0 : _k.postal_code, " - ", (_m = (_l = method.billing_details) === null || _l === void 0 ? void 0 : _l.address) === null || _m === void 0 ? void 0 : _m.city, " -", ' ', (_p = (_o = method.billing_details) === null || _o === void 0 ? void 0 : _o.address) === null || _p === void 0 ? void 0 : _p.country] }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))] })) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [method.id === defaultPaymentMethodId, (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => handleDelete(method.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
-                                    }), hasMore && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && ((0, jsx_runtime_1.jsx)(UserChangeAddressDialog_1.default, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && (0, jsx_runtime_1.jsx)(UserAddPaymentMethodDialog_1.default, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
+                                        return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_svg_credit_card_payment_icons_1.PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ scope: "row" }, { children: [(_c = method.card) === null || _c === void 0 ? void 0 : _c.exp_month, "/", (_d = method.card) === null || _d === void 0 ? void 0 : _d.exp_year] })), showBillingAddress && ((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: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: method.billing_details.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [(_f = (_e = method.billing_details) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.line1, (0, jsx_runtime_1.jsx)("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [(_k = (_j = method.billing_details) === null || _j === void 0 ? void 0 : _j.address) === null || _k === void 0 ? void 0 : _k.postal_code, " - ", (_m = (_l = method.billing_details) === null || _l === void 0 ? void 0 : _l.address) === null || _m === void 0 ? void 0 : _m.city, " -", ' ', (_p = (_o = method.billing_details) === null || _o === void 0 ? void 0 : _o.address) === null || _p === void 0 ? void 0 : _p.country] }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))] })) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [method.id === defaultPaymentMethodId, (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'contained', onClick: () => handleDelete(method.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
+                                    }), hasMore && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'contained', onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && ((0, jsx_runtime_1.jsx)(UserChangeAddressDialog_1.default, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && (0, jsx_runtime_1.jsx)(UserAddPaymentMethodDialog_1.default, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
 };
-exports.default = UserPaymentMethods;
+exports.default = (0, react_1.forwardRef)(UserPaymentMethods);

package/lib/cjs/components/UserProfileBlocked/UserProfileBlocked.js

@@ -8,6 +8,7 @@ const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
+const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -78,6 +79,6 @@ function UserProfileBlocked(inProps) {
     if (!scUser || !scUserContext.user || loadingBlockedBy) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), !isMe && blockedBy && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), !isMe && blockedBy && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
 }
 exports.default = UserProfileBlocked;

package/lib/cjs/components/UserProfileEdit/Section/AccountCredentials.js

@@ -12,6 +12,7 @@ const utils_1 = require("@selfcommunity/utils");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
 const PasswordTextField_1 = tslib_1.__importDefault(require("../../../shared/PasswordTextField"));
 const EmailTextField_1 = tslib_1.__importDefault(require("../../../shared/EmailTextField"));
+const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -130,7 +131,7 @@ function AccountCredentials(props) {
         e.stopPropagation();
         setIsSubmitting(true);
         api_services_1.UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, !skipEmailValidation, !skipEmailValidation)
-            .then(() => {
+            .then((res) => {
             setIsEditing(false);
             setIsSubmitting(false);
             if (skipEmailValidation) {
@@ -155,20 +156,16 @@ function AccountCredentials(props) {
     if (!user) {
         return;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.email }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSubmitting ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EmailTextField_1.default, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), slotProps: {
-                                    input: {
-                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))) })))
-                                    }
-                                } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.password }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && ((0, jsx_runtime_1.jsxs)(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), slotProps: {
-                                    input: {
-                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })))
-                                    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.email }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSubmitting ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EmailTextField_1.default, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))) })))
+                                } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.password }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && ((0, jsx_runtime_1.jsxs)(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })))
                                 } }), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: open, anchorEl: anchorEl, anchorOrigin: {
                                     vertical: 'center',
                                     horizontal: 'left'
                                 }, transformOrigin: {
                                     vertical: 'center',
                                     horizontal: 'right'
-                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
+                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
 }
 exports.default = AccountCredentials;

package/lib/cjs/components/UserProfileEdit/Section/PublicInfo.js

@@ -18,8 +18,9 @@ const types_1 = require("../../../types");
 const MetadataField_1 = tslib_1.__importDefault(require("../../../shared/MetadataField"));
 const Errors_1 = require("../../../constants/Errors");
 const date_fns_1 = require("date-fns");
-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 lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -69,7 +70,9 @@ function PublicInfo(props) {
         return null;
     }, [scPreferences.preferences]);
     // STATE
-    const [user, setUser] = (0, react_1.useState)(null);
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const [user, setUser] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)({});
     const [editing, setEditing] = (0, react_1.useState)([]);
     const [saving, setSaving] = (0, react_1.useState)([]);
@@ -156,10 +159,10 @@ function PublicInfo(props) {
             case types_1.SCUserProfileFields.DATE_JOINED:
                 return null;
             case types_1.SCUserProfileFields.DATE_OF_BIRTH:
-                return ((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 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: intl.formatMessage({
+                return ((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 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${(0, utils_1.camelCase)(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
-                        }), defaultValue: user[field] ? new Date(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
+                        }), defaultValue: user[field] ? (0, date_fns_1.parseISO)(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
                             const u = user;
                             const field = types_1.SCUserProfileFields.DATE_OF_BIRTH;
                             const camelField = (0, utils_1.camelCase)(field);
@@ -181,8 +184,13 @@ function PublicInfo(props) {
                             }
                             setUser(u);
                             setEditing([...editing, field]);
-                        }, disableFuture: true, disabled: isSaving, enableAccessibleFieldDOMStructure: false, slots: {
-                            openPickerButton: (params) => ((0, jsx_runtime_1.jsxs)(material_1.IconButton, Object.assign({}, params, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), isSaving && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 })] })))
+                        }, disableFuture: true, disabled: isSaving, slots: {
+                            inputAdornment: (params) => {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                const _a = params.children.props, { children } = _a, rest = tslib_1.__rest(_a, ["children"]);
+                                return ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: 'end' }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, rest, { children: children })), isSaving && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 })] })));
+                            }
                         }, 
                         // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
                         slotProps: {
@@ -190,7 +198,10 @@ function PublicInfo(props) {
                                 className: classes.field,
                                 fullWidth: true,
                                 variant: 'outlined',
-                                helperText: _error || null
+                                helperText: _error || null,
+                                InputProps: {
+                                    endAdornment: isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditing }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })), isSaving ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 }) : null] }))
+                                }
                             }
                         } }) }), field));
             case types_1.SCUserProfileFields.BIO:
@@ -222,6 +233,6 @@ function PublicInfo(props) {
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [startActions, _fields.map((field) => {
                 return renderField(field);
-            }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userInfo.button.save", defaultMessage: "ui.userInfo.button.save" }) })), endActions] })));
+            }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
 }
 exports.default = PublicInfo;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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