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

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.js

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

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

@@ -38,6 +38,6 @@ const Root = (0, material_1.styled)(material_1.Card, {
 function PrivateMessageThreadSkeleton(props) {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
-    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.List, Object.assign({ className: classes.list }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { index: index }, index)))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.editor }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 55, width: "100%", variant: "rectangular" }) }))] }) })));
+    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.List, Object.assign({ className: classes.list }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { index: index }, index)))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.editor }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' }) }))] }) })));
 }
 exports.default = PrivateMessageThreadSkeleton;

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

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

package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js

@@ -26,8 +26,8 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
     [`& .${classes.input}`]: {
         flexGrow: 1
     }
@@ -38,7 +38,7 @@ function SearchAutocomplete(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, autoFocus = false, onSearch = null, onClear = null, onSuggestionSelect = (_suggestion) => null } = props, rest = tslib_1.__rest(props, ["id", "className", "blurOnSelect", "autoFocus", "onSearch", "onClear", "onSuggestionSelect"]);
+    const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, autoFocus = false, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = tslib_1.__rest(props, ["id", "className", "blurOnSelect", "autoFocus", "onSearch", "onClear", "onSuggestionSelect"]);
     // CONTEXT
     const scPreferences = (0, react_core_1.useSCPreferences)();
     // STATE
@@ -47,7 +47,7 @@ function SearchAutocomplete(inProps) {
     const [options, setOptions] = (0, react_1.useState)([]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
-    const handleInputChange = (_event, value, reason) => {
+    const handleInputChange = (event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -55,7 +55,7 @@ function SearchAutocomplete(inProps) {
                 break;
         }
     };
-    const handleChange = (event, value, reason, _detail) => {
+    const handleChange = (event, value, reason, detail) => {
         event.preventDefault();
         event.stopPropagation();
         switch (reason) {
@@ -70,7 +70,7 @@ function SearchAutocomplete(inProps) {
         }
         return false;
     };
-    const handleClear = (_event) => {
+    const handleClear = (event) => {
         setValue('');
         setOptions([]);
         onClear && onClear();
@@ -129,8 +129,6 @@ function SearchAutocomplete(inProps) {
             return optionLabel(option);
         }, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: getOptionData(option).name, src: getOptionData(option).image, variant: getOptionData(option).variant }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: getOptionData(option).name }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {
                 community: scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
-            })}`, slotProps: {
-                input: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', 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.Fade, Object.assign({ in: value.length > 0 || Boolean(onClear), appear: false }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }))) })
-            } }))) }, rest)));
+            })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', 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.Fade, Object.assign({ in: value.length > 0 || Boolean(onClear), appear: false }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }))) }) }))) }, rest)));
 }
 exports.default = SearchAutocomplete;

package/lib/cjs/components/SnippetNotifications/SnippetNotifications.js

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

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

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

package/lib/cjs/components/TagAutocomplete/TagAutocomplete.js

@@ -124,9 +124,7 @@ const TagAutocomplete = (inProps) => {
             const parts = (0, parse_1.default)(option.name, matches);
             return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ showDescription: true, disposable: false, tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
         }, renderInput: (params) => {
-            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { slotProps: {
-                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: value || tags.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
-                } })));
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: value || tags.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));
 };
 exports.default = TagAutocomplete;

package/lib/cjs/components/UserActionIconButton/UserActionIconButton.js

@@ -21,18 +21,18 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.drawerRoot
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.drawerRoot
+})(({ theme }) => ({}));
 const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.menuRoot
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.menuRoot
+})(({ 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));
 });
@@ -67,6 +67,7 @@ function UserActionIconButton(inProps) {
     const { className = null, userId = null, user = null, items = [] } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "items"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
+    const scContext = (0, react_core_1.useSCContext)();
     // STATE
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [infoOpen, setInfoOpen] = (0, react_1.useState)(false);
@@ -186,8 +187,6 @@ function UserActionIconButton(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, 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 }, { children: renderList() }))) })), (0, jsx_runtime_1.jsx)(UserInfoDialog_1.default, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }), openHideDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openHideDialog, isUpdating: isHiddenLoading, slots: {
-                    transition: Transition
-                }, keepMounted: true, title: hidden ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))] }));
+    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, 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 }, { children: renderList() }))) })), (0, jsx_runtime_1.jsx)(UserInfoDialog_1.default, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }), openHideDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openHideDialog, isUpdating: isHiddenLoading, TransitionComponent: Transition, keepMounted: true, title: hidden ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))] }));
 }
 exports.default = UserActionIconButton;

package/lib/cjs/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.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 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
@@ -12,12 +13,13 @@ const stripe_js_1 = require("@stripe/stripe-js");
 const material_1 = require("@mui/material");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const payment_1 = require("../../utils/payment");
+const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     address: `${constants_1.PREFIX}-loading`
 };
-const Root = (0, material_1.styled)(BaseDialog_1.default, {
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({
@@ -55,7 +57,7 @@ function UserAddPaymentMethodForm(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props;
+    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props, rest = tslib_1.__rest(props, ["className", "customer", "collectBillingAddress", "handleSuccess", "handleClose"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // STATE
@@ -131,11 +133,11 @@ function UserAddPaymentMethodForm(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: addressState.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [addressState.address.line1, (0, jsx_runtime_1.jsx)("br", {}), addressState.address.line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: "contained", disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: addressState.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.line1, (0, jsx_runtime_1.jsx)("br", {}), addressState.address.line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: (event) => {
                                     setAddressState(event.value);
                                 }, options: {
                                     mode: 'billing',
                                     defaultValues: addressState
-                                } }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: "contained", disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.useDefaultMethod", defaultMessage: "ui.userAddPaymentMethodForm.useDefaultMethod" }) }))] })) }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && (0, jsx_runtime_1.jsx)("div", { children: errorMessage })] })) })));
+                                } }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && (0, jsx_runtime_1.jsx)("div", { children: errorMessage })] })) })));
 }
 exports.default = UserAddPaymentMethodForm;

package/lib/cjs/components/UserAutocomplete/UserAutocomplete.js

@@ -108,10 +108,10 @@ const UserAutocomplete = (inProps) => {
                     const matches = (0, match_1.default)(option.username, inputValue);
                     const parts = (0, parse_1.default)(option.username, matches);
                     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: part.text }, index))) })] })));
-                }, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
-                        input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: filteredUsers.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
-                    } }))) }, rest)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
-                        icon: (chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }, "ui.userAutocomplete.textarea.info.icon")
+                }, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: filteredUsers.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isLoading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) }))) }, rest)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks })
                     } }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.textarea.label", defaultMessage: "ui.userAutocomplete.textarea.label" }), multiline: true, minRows: 4, fullWidth: true, margin: "normal", value: textAreaValue, onChange: handleTextAreaChange })] })));
 };
 exports.default = UserAutocomplete;

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

@@ -7,6 +7,6 @@ function UserBillingInfoSkeleton(props) {
     if (props.mode === Billing_1.UserBillingInfoMode.READ) {
         return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 200, sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 250, sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 220, sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 190, sx: { mb: 2 } })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6 }, justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, justifyContent: 'center' }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
 }
 exports.default = UserBillingInfoSkeleton;

package/lib/cjs/components/UserBillingInfo/UserBillingInfo.js

@@ -14,6 +14,7 @@ const reducer_1 = require("./reducer");
 const Country_1 = require("../../constants/Country");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
+const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 // import {getCountryOption} from '../../utils/address';
 const react_core_1 = require("@selfcommunity/react-core");
@@ -70,7 +71,7 @@ const UserBillingInfo = (inProps, ref) => {
     const scUserContext = (0, react_core_1.useSCUser)();
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, (0, reducer_1.getInitialState)({ mode }));
-    const [customer] = (0, react_1.useState)();
+    const [customer, setCustomer] = (0, react_1.useState)();
     // HOOKS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
@@ -445,56 +446,47 @@ const UserBillingInfo = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id }, rest, { ref: componentRef }, { children: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.mode === Billing_1.UserBillingInfoMode.READ ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.name ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: state.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [state.address_line1, (0, jsx_runtime_1.jsx)("br", {}), state.address_line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: state.tax_code })), state.isBusiness && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.tax_id_data && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: ["SDI: ", state.sdi] })), state.pec && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: ["PEC: ", state.pec] }))] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: "contained", size: "small", disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "name", name: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: "country-select-demo", options: Country_1.countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id }, rest, { ref: componentRef }, { children: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.mode === Billing_1.UserBillingInfoMode.READ ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.name ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, (0, jsx_runtime_1.jsx)("br", {}), state.address_line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.tax_id_data && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "name", name: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: "country-select-demo", options: Country_1.countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                        // @ts-ignore
                                         const { key } = props, rest = tslib_1.__rest(props, ["key"]);
                                         return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li", sx: { '& > img': { mr: 2, flexShrink: 0 } } }, rest, { children: [(0, jsx_runtime_1.jsx)("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`, alt: "" }), option.label, " (", option.code, ")"] }), key));
-                                    }, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), slotProps: {
-                                            input: Object.assign(Object.assign({}, params.InputProps), (state.address_country && {
-                                                startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${state.address_country.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${state.address_country.code.toLowerCase()}.png`, alt: "" }) })))
-                                            })),
-                                            htmlInput: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' // disable autocomplete and autofill
-                                             })
-                                        } }))) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_state", name: "address_state", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.state", defaultMessage: "ui.userBillingInfo.state" }), onChange: handleChange('address_state'), value: state.address_state, error: Boolean(state.addressStateError), helperText: state.addressStateError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.postalCode", defaultMessage: "ui.userBillingInfo.postalCode" }), onChange: handleChange('address_postal_code'), value: state.address_postal_code, error: Boolean(state.addressPostalCodeError), helperText: state.addressPostalCodeError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_city", name: "address_city", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.city", defaultMessage: "ui.userBillingInfo.city" }), onChange: handleChange('address_city'), value: state.address_city, error: Boolean(state.addressCityError), helperText: state.addressCityError, slotProps: {
-                                        input: {
-                                            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }) })))
-                                        }
-                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "phone", name: "phone", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, slotProps: {
-                                        input: {
-                                            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "person" }) })))
-                                        }
-                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCode", defaultMessage: "ui.userBillingInfo.taxCode" }), onChange: handleChange('tax_code'), value: state.tax_code, error: Boolean(state.taxCodeError), helperText: state.taxCodeError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: Boolean(disableButtons), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: (0, classnames_1.default)({
+                                    }, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), InputProps: Object.assign(Object.assign({}, params.InputProps), (state.address_country && {
+                                            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${state.address_country.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${state.address_country.code.toLowerCase()}.png`, alt: "" }) })))
+                                        })), inputProps: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' // disable autocomplete and autofill
+                                         }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_state", name: "address_state", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.state", defaultMessage: "ui.userBillingInfo.state" }), onChange: handleChange('address_state'), value: state.address_state, error: Boolean(state.addressStateError), helperText: state.addressStateError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.postalCode", defaultMessage: "ui.userBillingInfo.postalCode" }), onChange: handleChange('address_postal_code'), value: state.address_postal_code, error: Boolean(state.addressPostalCodeError), helperText: state.addressPostalCodeError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_city", name: "address_city", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.city", defaultMessage: "ui.userBillingInfo.city" }), onChange: handleChange('address_city'), value: state.address_city, error: Boolean(state.addressCityError), helperText: state.addressCityError, InputProps: {
+                                        startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }) })))
+                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "phone", name: "phone", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, InputProps: {
+                                        startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "person" }) })))
+                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCode", defaultMessage: "ui.userBillingInfo.taxCode" }), onChange: handleChange('tax_code'), value: state.tax_code, error: Boolean(state.taxCodeError), helperText: state.taxCodeError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: Boolean(disableButtons), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: (0, classnames_1.default)({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }), onChange: handleSetBusiness })), label: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, classnames_1.default)({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }) }, { children: intl.formatMessage({
                                                 id: 'component.billingInfo.accountBusiness',
                                                 defaultMessage: 'component.billingInfo.accountBusiness'
-                                            }) })) }) }) })), state.isBusiness && ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: state.isBusiness }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxId", defaultMessage: "ui.userBillingInfo.taxId" }), onChange: handleChange('tax_id_data'), value: state.tax_id_data ? state.tax_id_data.value : null, error: Boolean(state.taxIdDataError), helperText: `${state.taxIdDataError ? state.taxIdDataError : ''} ${state.address_country && state.address_country.code && Billing_1.VAT_EXAMPLE[state.address_country.code]
+                                            }) })) }) }) })), state.isBusiness && ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: state.isBusiness }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxId", defaultMessage: "ui.userBillingInfo.taxId" }), onChange: handleChange('tax_id_data'), value: state.tax_id_data ? state.tax_id_data.value : null, error: Boolean(state.taxIdDataError), helperText: `${state.taxIdDataError ? state.taxIdDataError : ''} ${state.address_country && state.address_country.code && Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.requiredFormat',
                                                             defaultMessage: 'component.billingInfo.requiredFormat'
                                                         }) + Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         : ''}`, placeholder: state.address_country && state.address_country.code && Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         ? Billing_1.VAT_EXAMPLE[state.address_country.code]
-                                                        : '', slotProps: {
-                                                        input: {
-                                                            endAdornment: state.taxIdVerificationStatus !== null && ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
-                                                        }
-                                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "sdi", name: "sdi", label: `${intl.formatMessage({ id: 'component.billingInfo.sdi', defaultMessage: 'component.billingInfo.sdi' })} ${((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) === Country_1.COUNTRY_CODES.IT
+                                                        : '', InputProps: {
+                                                        endAdornment: state.taxIdVerificationStatus !== null && ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
+                                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "sdi", name: "sdi", label: `${intl.formatMessage({ id: 'component.billingInfo.sdi', defaultMessage: 'component.billingInfo.sdi' })} ${((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) === Country_1.COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
                                                         })
-                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "pec", name: "pec", label: `${intl.formatMessage({ id: 'component.billingInfo.pec', defaultMessage: 'component.billingInfo.pec' })} ${((_b = state.address_country) === null || _b === void 0 ? void 0 : _b.code) === Country_1.COUNTRY_CODES.IT
+                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "pec", name: "pec", label: `${intl.formatMessage({ id: 'component.billingInfo.pec', defaultMessage: 'component.billingInfo.pec' })} ${((_b = state.address_country) === null || _b === void 0 ? void 0 : _b.code) === Country_1.COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
                                                         })
-                                                        : ''}`, onChange: handleChange('pec'), value: state.pec, error: Boolean(state.pecError), helperText: state.pecError, slotProps: {
-                                                        input: {
-                                                            type: 'email',
-                                                            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })))
-                                                        }
-                                                    }, fullWidth: true }) }))] })) })) }))), state.error && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ align: "left" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
+                                                        : ''}`, onChange: handleChange('pec'), value: state.pec, error: Boolean(state.pecError), helperText: state.pecError, InputProps: {
+                                                        type: 'email',
+                                                        startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })))
+                                                    }, fullWidth: true }) }))] })) })) }))), state.error && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ align: "left" }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
 };
 exports.default = (0, react_1.forwardRef)(UserBillingInfo);

package/lib/cjs/components/UserChangeAddressDialog/UserChangeAddressDialog.js

@@ -11,6 +11,7 @@ const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const stripe_js_1 = require("@stripe/stripe-js");
 const payment_1 = require("../../utils/payment");
@@ -76,7 +77,7 @@ function UserChangeAddressDialog(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: loading, disabled: loading, variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: handleChangeAddress, options: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: handleChangeAddress, options: {
                     mode: 'billing',
                     defaultValues: addressState
                 } }) })) })));

package/lib/cjs/components/UserCounters/UserCounters.js

@@ -18,7 +18,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
+    overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Counters component. Learn about the available props and the CSS API.
@@ -93,16 +93,24 @@ function UserCounters(inProps) {
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (followEnabled || connectionEnabled) &&
                     (followEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userCounters.followings", defaultMessage: "ui.userCounters.followings", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.followings_counter,
-                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } }) })), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userCounters.followers", defaultMessage: "ui.userCounters.followers", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.followers_counter,
-                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userCounters.connections", defaultMessage: "ui.userCounters.connections", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.connections_counter,
-                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } }) })), (0, jsx_runtime_1.jsx)(Bullet_1.default, {})] }))) }), categoryFollowEnabled && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CATEGORIES_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userCounters.categories", defaultMessage: "ui.userCounters.categories", values: {
                         count: scUser === null || scUser === void 0 ? void 0 : scUser.categories_counter,
-                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                     } }) })))] })));
 }
 exports.default = UserCounters;

package/lib/cjs/components/UserInfo/UserInfo.js

@@ -122,7 +122,7 @@ function UserInfo(inProps) {
             case types_1.SCUserProfileFields.DATE_OF_BIRTH:
                 return `${intl.formatDate(user[field], { year: 'numeric', month: 'numeric', day: 'numeric' })}`;
             case types_1.SCUserProfileFields.TAGS:
-                return ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: user.tags.filter((t) => t.visible), type: Tags_1.TagsComponentType.LIST, direction: "row", TagChipProps: { clickable: false, disposable: false } }));
+                return ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: user.tags.filter((t) => t.visible), type: Tags_1.TagsComponentType.LIST, direction: 'row', TagChipProps: { clickable: false, disposable: false } }));
             case types_1.SCUserProfileFields.WEBSITE:
                 return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: user[field], target: '_blank' }, { children: user[field] })));
             default:

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

@@ -1,4 +1,4 @@
 import UserLiveStreamWidget, { UserLiveStreamWidgetProps } from './UserLiveStreamWidget';
 import UserLiveStreamWidgetSkeleton from './Skeleton';
 export default UserLiveStreamWidget;
-export { UserLiveStreamWidgetSkeleton, UserLiveStreamWidgetProps };
+export { UserLiveStreamWidgetSkeleton, type UserLiveStreamWidgetProps };