@selfcommunity/react-ui 0.11.0-alpha.94 → 0.11.0-alpha.96

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -12,6 +12,7 @@ import NavigationSettingsIconButton from '../NavigationSettingsIconButton';
 import NavigationMenuIconButton from '../NavigationMenuIconButton';
 import { PREFIX } from './constants';
 import { SCFeatureName } from '@selfcommunity/types';
+import { scroll } from 'seamless-scroll-polyfill';
 import ComposerIconButton from '../ComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -99,13 +100,24 @@ export default function NavigationToolbarMobile(inProps) {
     const handleCloseSearch = useCallback(() => {
         setSearchOpen(false);
     }, [setSearchOpen]);
+    const handleClickHome = useCallback(() => {
+        if (onClickHome) {
+            onClickHome();
+        }
+        else {
+            const pathName = window.location.pathname;
+            if (pathName && (pathName === '/' || pathName === scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}))) {
+                scroll(window, { top: 0, behavior: 'smooth' });
+            }
+        }
+    }, [onClickHome]);
     // RENDER
     if (scUserContext.loading) {
         return _jsx(NavigationToolbarMobileSkeleton, {});
     }
     const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
                     [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
-                }) }, (onClickHome && { onClick: onClickHome }), { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
+                }), onClick: handleClickHome }, { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
     return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) &&
                 (scUserContext.user || contentAvailable) &&
                 exploreStreamEnabled && _jsx(ComposerIconButton, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && (_jsx(IconButton, Object.assign({ className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? (_jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (_jsx(Button, Object.assign({ className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));

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

@@ -16,7 +16,6 @@ export interface UserAutocompleteProps extends Pick<AutocompleteProps<SCUserAuto
      * @default 0
      */
     limitCountGroups?: number;
-    endpointQueryParams?: Record<string, string | number | boolean>;
 }
 declare const UserAutocomplete: (inProps: UserAutocompleteProps) => JSX.Element;
 export default UserAutocomplete;

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

@@ -1,12 +1,13 @@
-import { __rest } from "tslib";
+import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
 import { Autocomplete, Chip, TextField, CircularProgress, styled, Avatar, Box, Typography, Icon } from '@mui/material';
 import { useSCFetchUsers } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
+import { UserService } from '@selfcommunity/api-services';
 const PREFIX = 'SCUserAutocomplete';
 const classes = {
     root: `${PREFIX}-root`,
@@ -37,15 +38,21 @@ const UserAutocomplete = (inProps) => {
     const [inputValue, setInputValue] = useState('');
     const [value, setValue] = useState(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
     const [textAreaValue, setTextAreaValue] = useState('');
-    // Fetch users
-    const { users, isLoading } = useSCFetchUsers({ search: inputValue });
+    // Exclude selected users by ID
+    const excludeIds = useMemo(() => value
+        .map((u) => (typeof u === 'object' ? u.id : null))
+        .filter(Boolean)
+        .join(','), [value]);
+    // Fetch users excluding selected ones
+    const { users, isLoading } = useSCFetchUsers({ search: 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 = () => {
-        users.length > 0 && setOpen(true);
+        filteredUsers.length > 0 && setOpen(true);
     };
     const handleClose = () => {
         setOpen(false);
@@ -53,26 +60,29 @@ const UserAutocomplete = (inProps) => {
     const handleChange = (_event, newValue) => {
         setValue(newValue);
     };
-    const handleTextAreaChange = (e) => {
-        const names = e.target.value
+    const handleTextAreaChange = (e) => __awaiter(void 0, void 0, void 0, function* () {
+        const names = Array.from(new Set(e.target.value
             .split(/\s|,|\n/)
             .map((s) => s.trim())
-            .filter(Boolean);
-        const matched = names.map((name) => {
-            const user = users.find((u) => u.username === name);
-            return user || name;
-        });
-        setValue(matched);
+            .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);
+            }
+        }
+        catch (err) {
+            console.error(`Failed fetching users`, err);
+            resolvedUsers = names;
+        }
+        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: users || [], getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
+    });
+    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) => {
                     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) => {
-                    if (typeof val === 'string') {
-                        return option.username === val;
-                    }
-                    return 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.id === val.id, 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;