@selfcommunity/react-ui 0.11.0-alpha.99 → 0.11.0-mui7.14

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

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

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

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

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

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

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

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

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

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

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

@@ -188,7 +188,7 @@ export default function PrivateMessageThread(inProps) {
             console.log(error);
         });
     }
-    const handleInputChange = (event, value, reason) => {
+    const handleInputChange = (_event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -213,15 +213,13 @@ export default function PrivateMessageThread(inProps) {
         }
         return false;
     };
-    const handleClear = (event, value) => {
+    const handleClear = (_event, value) => {
         setValue('');
         setFollowers([]);
         setRecipients(value !== null && value !== void 0 ? value : []);
     };
     const handleNewMessageClose = () => {
         handleClear();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
         onNewMessageClose && onNewMessageClose();
     };
     function updateAndDeleteURLParameters(url, paramToUpdate, newValue, paramToDelete) {
@@ -428,7 +426,7 @@ export default function PrivateMessageThread(inProps) {
     /**
      * Notification subscriber
      */
-    const subscriber = (msg, data) => {
+    const subscriber = (_msg, data) => {
         const res = data.data;
         const newMessages = [...messageObjs];
         const index = newMessages.findIndex((m) => m.thread_id === res.thread_id);
@@ -473,7 +471,9 @@ export default function PrivateMessageThread(inProps) {
      * @return {JSX.Element}
      */
     function renderNewOrNoMessageBox() {
-        return (_jsx(CardContent, { children: isNew || singleMessageThread ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeader }, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeaderContent }, { children: [_jsx(Icon, Object.assign({ className: classes.newMessageHeaderIcon }, { children: "person" })), _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" }) }), _jsx(Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })] })), _jsx(IconButton, Object.assign({ size: "small", onClick: handleNewMessageClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(List, { className: classes.newMessageContent }), _jsx(PrivateMessageEditor, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) })] })) : (_jsx(Typography, Object.assign({ className: classes.emptyMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" }) }))) }));
+        return (_jsx(CardContent, { children: isNew || singleMessageThread ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeader }, { children: [_jsxs(Box, Object.assign({ className: classes.newMessageHeaderContent }, { children: [_jsx(Icon, Object.assign({ className: classes.newMessageHeaderIcon }, { children: "person" })), _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" }) }), _jsx(Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", slotProps: {
+                                                input: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true })
+                                            } }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })] })), _jsx(IconButton, Object.assign({ size: "small", onClick: handleNewMessageClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(List, { className: classes.newMessageContent }), _jsx(PrivateMessageEditor, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) })] })) : (_jsx(Typography, Object.assign({ className: classes.emptyMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" }) }))) }));
     }
     // Anonymous
     if (!authUserId) {

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

@@ -41,4 +41,4 @@ export interface RelatedEventsWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function RelatedEventsWidget(inProps: RelatedEventsWidgetProps): JSX.Element;
+export default function RelatedEventsWidget(inProps: RelatedEventsWidgetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import 'swiper/css';
-export default function RelatedEventsWidgetSkeleton(): JSX.Element;
+export default function RelatedEventsWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -19,4 +19,4 @@ export interface SearchAutocompleteProps extends Pick<AutocompleteProps<string,
      */
     onSuggestionSelect?: (suggestion: SCSuggestionType) => void;
 }
-export default function SearchAutocomplete(inProps: SearchAutocompleteProps): JSX.Element;
+export default function SearchAutocomplete(inProps: SearchAutocompleteProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -15,4 +15,4 @@ export interface SearchDialogProps extends DialogProps {
      */
     [p: string]: any;
 }
-export default function Search(inProps: SearchDialogProps): JSX.Element;
+export default function Search(inProps: SearchDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,4 +5,4 @@ export interface ArrowProps {
     setCurrentItem: Dispatch<SetStateAction<number>>;
     className?: HTMLAttributes<HTMLButtonElement>['className'];
 }
-export default function Arrow(props: ArrowProps): JSX.Element;
+export default function Arrow(props: ArrowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import 'swiper/css';
-export default function SuggestedEventsWidgetSkeleton(): JSX.Element;
+export default function SuggestedEventsWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -10,4 +10,4 @@ export interface SuggestedEventsWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function SuggestedEventsWidget(inProps: SuggestedEventsWidgetProps): JSX.Element;
+export default function SuggestedEventsWidget(inProps: SuggestedEventsWidgetProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,13 +1,15 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { Autocomplete, TextField, styled } from '@mui/material';
-import { useSCFetchAddressingTagList } from '@selfcommunity/react-core';
+import { Autocomplete, TextField, styled, CircularProgress } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import TagChip from '../../shared/TagChip';
+import { TagService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
 const PREFIX = 'SCTagAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
@@ -51,38 +53,78 @@ const TagAutocomplete = (inProps) => {
     // State
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
-    // HOOKS
-    const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: open || defaultValue });
+    const [tags, setTags] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const [loading, setLoading] = useState(false);
+    const fetchTags = (query) => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        try {
+            const res = yield TagService.searchUserTags({ search: query || '' });
+            const results = (res === null || res === void 0 ? void 0 : res.results) || [];
+            setTags(results);
+            return results;
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+            setTags([]);
+            return [];
+        }
+        finally {
+            setLoading(false);
+        }
+    });
     useEffect(() => {
-        if (value === null) {
-            return;
+        if (open && inputValue.length >= 3) {
+            fetchTags(inputValue);
         }
-        onChange && onChange(value);
+    }, [open, inputValue]);
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [value]);
     useEffect(() => {
-        if ((scAddressingTags === null || scAddressingTags === void 0 ? void 0 : scAddressingTags.length) !== 0 && typeof defaultValue === 'string') {
-            setValue(scAddressingTags.find((t) => t.id === Number(defaultValue)));
-        }
-    }, [scAddressingTags, defaultValue]);
+        const loadDefault = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (typeof defaultValue === 'string' && defaultValue.trim() !== '') {
+                try {
+                    const res = yield TagService.getSpecificTag(Number(defaultValue));
+                    if (res) {
+                        setValue(res);
+                    }
+                }
+                catch (e) {
+                    Logger.error(SCOPE_SC_UI, e);
+                }
+            }
+        });
+        loadDefault();
+    }, [defaultValue]);
     // Handlers
     const handleOpen = () => {
-        setOpen(true);
-    };
-    const handleClose = () => {
-        setOpen(false);
+        if (inputValue.length >= 3) {
+            setOpen(true);
+        }
     };
+    const handleClose = () => setOpen(false);
     const handleChange = (_event, newValue) => {
         setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     };
-    // Render
-    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => (value === null || value === void 0 ? void 0 : value.id) === (option === null || option === void 0 ? void 0 : option.id), renderTags: (value, getTagProps) => {
-            return value.map((option, index) => _jsx(TagChip, Object.assign({ tag: option }, getTagProps({ index })), option.id));
-        }, renderOption: (props, option, { selected, inputValue }) => {
+    const filterOptions = useCallback((options, state) => {
+        const search = state.inputValue.toLowerCase();
+        return options.filter((option) => {
+            var _a, _b;
+            const nameMatch = (_a = option.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
+            const descMatch = (_b = option.description) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(search);
+            return nameMatch || descMatch;
+        });
+    }, []);
+    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: tags || [], filterOptions: filterOptions, getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => (value === null || value === void 0 ? void 0 : value.id) === (option === null || option === void 0 ? void 0 : option.id), inputValue: inputValue, onInputChange: (_e, newInputValue) => setInputValue(newInputValue), renderOption: (props, option, { inputValue }) => {
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, Object.assign({ tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
+            return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, Object.assign({ showDescription: true, disposable: false, tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: _jsx(React.Fragment, { children: params.InputProps.endAdornment }) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: value || tags.length > 0 ? (_jsxs(_Fragment, { children: [loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
+                } })));
         } }, rest)));
 };
 export default TagAutocomplete;

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

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

package/lib/esm/components/UserAutocomplete/UserAutocomplete.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
@@ -44,16 +44,18 @@ const UserAutocomplete = (inProps) => {
         .filter(Boolean)
         .join(','), [value]);
     // Fetch users excluding selected ones
-    const { users, isLoading } = useSCFetchUsers({ search: inputValue, exclude: excludeIds });
+    const { users, isLoading } = useSCFetchUsers({ search: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) >= 3 ? inputValue : '', exclude: excludeIds });
     const filteredUsers = users.filter((u) => !excludeIds.includes(u.id));
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         setTextAreaValue(value.map((u) => (typeof u === 'object' ? u.username : u)).join('\n'));
     }, [value]);
     // Handlers
-    const handleOpen = () => {
-        filteredUsers.length > 0 && setOpen(true);
-    };
+    const handleOpen = useCallback(() => {
+        if (filteredUsers.length > 0) {
+            setOpen(true);
+        }
+    }, [filteredUsers]);
     const handleClose = () => {
         setOpen(false);
     };
@@ -65,24 +67,37 @@ const UserAutocomplete = (inProps) => {
             .split(/\s|,|\n/)
             .map((s) => s.trim())
             .filter(Boolean)));
-        let resolvedUsers = [];
         try {
             if (names.length > 0) {
-                const resp = yield UserService.matchUsernames(names.join(','));
-                const matchedMap = new Map(resp.map((u) => [u.username, u]));
-                resolvedUsers = names.map((name) => matchedMap.get(name) || name);
+                const resp = yield UserService.matchUsernames(names);
+                const resolvedUsernames = new Set(resp.map((u) => u.username));
+                const resolvedUsers = resp.filter((u) => resolvedUsernames.has(u.username));
+                setValue(resolvedUsers);
+                setTextAreaValue(resolvedUsers.map((u) => u.username).join('\n'));
+            }
+            else {
+                setValue([]);
+                setTextAreaValue('');
             }
         }
         catch (err) {
-            console.error(`Failed fetching users`, err);
-            resolvedUsers = names;
+            console.error(`Failed fetching matching usernames`, err);
+            setValue([]);
+            setTextAreaValue('');
         }
-        setValue(resolvedUsers);
-        setTextAreaValue(e.target.value);
     });
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: filteredUsers || [], getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
+    const filterOptions = useCallback((options, state) => {
+        const search = state.inputValue.toLowerCase();
+        return options.filter((option) => {
+            var _a, _b;
+            const usernameMatch = (_a = option.username) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
+            const nameMatch = (_b = option.real_name) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(search);
+            return usernameMatch || nameMatch;
+        });
+    }, []);
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: filteredUsers || [], filterOptions: filterOptions, getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
                     setInputValue(newInputValue);
-                }, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => option.id === val.id, renderTags: (value, getTagProps) => value.map((option, index) => {
+                }, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => (option ? val.id === option.id : false), renderTags: (value, getTagProps) => value.map((option, index) => {
                     const username = typeof option === 'string' ? option : option.username;
                     const avatar = typeof option === 'string' ? '' : option.avatar;
                     const id = typeof option === 'string' ? `fallback-${option}` : option.id;
@@ -90,10 +105,10 @@ const UserAutocomplete = (inProps) => {
                 }), renderOption: (props, option, { inputValue }) => {
                     const matches = match(option.username, inputValue);
                     const parts = parse(option.username, matches);
-                    return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) })] })));
-                }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: (_jsxs(Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) }))) }, rest)), _jsx(Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
+                    return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, { children: part.text }, index))) })] })));
+                }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                        input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: filteredUsers.length > 0 ? (_jsxs(_Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
+                    } }))) }, rest)), _jsx(Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
                         icon: (...chunks) => _jsx(Icon, { children: chunks })
                     } }) })), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.label", defaultMessage: "ui.userAutocomplete.textarea.label" }), multiline: true, minRows: 4, fullWidth: true, margin: "normal", value: textAreaValue, onChange: handleTextAreaChange })] })));
 };

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

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

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

@@ -26,10 +26,10 @@ export interface UserBillingInfoProps {
 /**
  * BillingInfo component interface reference
  */
-export declare type UserBillingInfoRef = {
+export type UserBillingInfoRef = {
     isBillingInfoCompleted: () => boolean;
     showError: (e: string) => void;
     billingMode: () => UserBillingInfoMode;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<UserBillingInfoProps, keyof UserBillingInfoProps> & React.RefAttributes<UserBillingInfoRef>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<UserBillingInfoProps, "ref"> & React.RefAttributes<UserBillingInfoRef>>;
 export default _default;