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

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

@@ -37,6 +37,6 @@ const Root = (0, material_1.styled)(Widget_1.default, {
  *
  */
 function PlatformWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }
 exports.default = PlatformWidgetSkeleton;

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

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

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

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

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

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

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

@@ -96,7 +96,7 @@ 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);
@@ -126,9 +126,11 @@ function PrivateMessageEditor(inProps) {
         return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "error", action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
     }
     function renderContent() {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: openMediaSection ? ((0, jsx_runtime_1.jsx)(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openEmojiSection && (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
-                            startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "attach_file" }) }))] })),
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })))
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: openMediaSection ? ((0, jsx_runtime_1.jsx)(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openEmojiSection && (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), slotProps: {
+                            input: {
+                                startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "attach_file" }) }))] })),
+                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })))
+                            }
                         } })] })) }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className, { [classes.ios]: isIOS }) }, { children: renderContent() })));

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

@@ -122,6 +122,14 @@ function PrivateMessageSettingsIconButton(inProps) {
             ];
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
 }
 exports.default = PrivateMessageSettingsIconButton;

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

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

package/lib/cjs/components/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/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,15 +215,13 @@ 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) {
@@ -430,7 +428,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);
@@ -475,7 +473,9 @@ 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", 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" }) }))) }));
+        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" }) }))) }));
     }
     // Anonymous
     if (!authUserId) {

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/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
-})(({ theme }) => ({
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({
     [`& .${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,6 +129,8 @@ 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
-            })}`, 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)));
+            })}`, 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)));
 }
 exports.default = SearchAutocomplete;

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/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, type ArrowProps, type SuggestedEventsWidgetProps };
+export { Arrow, SuggestedEventsWidgetSkeleton, ArrowProps, SuggestedEventsWidgetProps };

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

@@ -7,9 +7,11 @@ const react_intl_1 = require("react-intl");
 const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
 const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
 const material_1 = require("@mui/material");
-const react_core_1 = require("@selfcommunity/react-core");
 const system_1 = require("@mui/system");
 const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
+const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
 const PREFIX = 'SCTagAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
@@ -53,38 +55,78 @@ const TagAutocomplete = (inProps) => {
     // State
     const [open, setOpen] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(typeof defaultValue === 'string' ? null : defaultValue);
-    // HOOKS
-    const { scAddressingTags } = (0, react_core_1.useSCFetchAddressingTagList)({ fetch: open || defaultValue });
+    const [tags, setTags] = (0, react_1.useState)([]);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const fetchTags = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        try {
+            const res = yield api_services_1.TagService.searchUserTags({ search: query || '' });
+            const results = (res === null || res === void 0 ? void 0 : res.results) || [];
+            setTags(results);
+            return results;
+        }
+        catch (error) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            setTags([]);
+            return [];
+        }
+        finally {
+            setLoading(false);
+        }
+    });
     (0, react_1.useEffect)(() => {
-        if (value === null) {
-            return;
+        if (open && inputValue.length >= 3) {
+            fetchTags(inputValue);
         }
-        onChange && onChange(value);
+    }, [open, inputValue]);
+    (0, react_1.useEffect)(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [value]);
     (0, react_1.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 = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            if (typeof defaultValue === 'string' && defaultValue.trim() !== '') {
+                try {
+                    const res = yield api_services_1.TagService.getSpecificTag(Number(defaultValue));
+                    if (res) {
+                        setValue(res);
+                    }
+                }
+                catch (e) {
+                    utils_1.Logger.error(Errors_1.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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option }, getTagProps({ index })), option.id));
-        }, renderOption: (props, option, { selected, inputValue }) => {
+    const filterOptions = (0, react_1.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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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 = (0, match_1.default)(option.name, inputValue);
             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({ 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) })));
+            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, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: params.InputProps.endAdornment }) }) })));
+            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 })
+                } })));
         } }, 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
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.drawerRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.drawerRoot
+})(() => ({}));
 const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.menuRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.menuRoot
+})(() => ({}));
 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,7 +67,6 @@ 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);
@@ -187,6 +186,8 @@ 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, 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) }))] }));
+    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) }))] }));
 }
 exports.default = UserActionIconButton;

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

@@ -46,16 +46,18 @@ const UserAutocomplete = (inProps) => {
         .filter(Boolean)
         .join(','), [value]);
     // Fetch users excluding selected ones
-    const { users, isLoading } = (0, react_core_1.useSCFetchUsers)({ search: inputValue, exclude: excludeIds });
+    const { users, isLoading } = (0, react_core_1.useSCFetchUsers)({ search: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) >= 3 ? inputValue : '', exclude: excludeIds });
     const filteredUsers = users.filter((u) => !excludeIds.includes(u.id));
     (0, react_1.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 = (0, react_1.useCallback)(() => {
+        if (filteredUsers.length > 0) {
+            setOpen(true);
+        }
+    }, [filteredUsers]);
     const handleClose = () => {
         setOpen(false);
     };
@@ -67,24 +69,37 @@ const UserAutocomplete = (inProps) => {
             .split(/\s|,|\n/)
             .map((s) => s.trim())
             .filter(Boolean)));
-        let resolvedUsers = [];
         try {
             if (names.length > 0) {
-                const resp = yield api_services_1.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 api_services_1.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 ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.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 = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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;
@@ -92,10 +107,10 @@ const UserAutocomplete = (inProps) => {
                 }), renderOption: (props, option, { inputValue }) => {
                     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, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) })] })));
-                }, 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: ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) }))) }, 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
+                    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 })
                     } }) })), (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 })] })));
 };