@selfcommunity/react-ui 0.11.0-alpha.111 → 0.11.0-alpha.112

package/lib/cjs/components/Category/Category.js

@@ -76,16 +76,14 @@ function Category(inProps) {
     // MEMO
     const _ButtonBaseProps = (0, react_1.useMemo)(() => ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scCategory ? scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) : '' }, [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS
-    const intl = (0, react_intl_1.useIntl)();
     const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
     if (!scCategory) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: elevation }, (variant && { variant })));
     }
     // RENDER
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation }, (variant && { variant }), { className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scCategory.name }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers && categoryFollowEnabled ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showFollowers && categoryFollowEnabled
-                        ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}`
-                        : scCategory.slogan })) }), actions: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation }, (variant && { variant }), { className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scCategory.name }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip && showFollowers && categoryFollowEnabled ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, Object.assign({}, messages.categoryFollowers, { values: { total: scCategory.followers_counter } })) }))) : (showFollowers &&
+                    categoryFollowEnabled && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, Object.assign({}, messages.categoryFollowers, { values: { total: scCategory.followers_counter } }))) }), actions: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -2,7 +2,7 @@ import { AutocompleteProps, TextFieldProps } from '@mui/material';
 import { SCTagType } from '@selfcommunity/types';
 import { TagChipProps } from '../../shared/TagChip';
 export interface TagAutocompleteProps extends Pick<AutocompleteProps<SCTagType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCTagType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
-    defaultValue: SCTagType[] | string;
+    defaultValue: SCTagType[] | any;
     /**
      * The props applied to text field
      * @default {variant: 'outlined, label: tags_label}

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

@@ -89,7 +89,7 @@ const TagAutocomplete = (inProps) => {
         const loadDefault = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
             if (typeof defaultValue === 'string' && defaultValue.trim() !== '') {
                 const results = yield fetchTags(defaultValue);
-                const match = results.find((t) => t.name === defaultValue);
+                const match = results.find((t) => t.id === Number(defaultValue));
                 if (match)
                     setValue(match);
             }
@@ -104,12 +104,21 @@ const TagAutocomplete = (inProps) => {
     };
     const handleClose = () => setOpen(false);
     const handleChange = (_event, newValue) => setValue(newValue);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: tags || [], 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), renderTags: (value, getTagProps) => value.map((option, index) => (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option }, getTagProps({ index })), option.id)), renderOption: (props, option, { 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({ 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: tags.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [' ', loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: tags.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));
 };
 exports.default = TagAutocomplete;

package/lib/esm/components/Category/Category.js

@@ -6,7 +6,7 @@ import { Link, SCPreferences, SCRoutes, useSCFetchCategory, useSCPreferenceEnabl
 import { SCCategoryAutoFollowType } from '@selfcommunity/types';
 import CategorySkeleton from './Skeleton';
 import CategoryFollowButton from '../CategoryFollowButton';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import BaseItemButton from '../../shared/BaseItemButton';
@@ -74,16 +74,14 @@ export default function Category(inProps) {
     // MEMO
     const _ButtonBaseProps = useMemo(() => ButtonBaseProps ? ButtonBaseProps : { component: Link, to: scCategory ? scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, scCategory) : '' }, [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS
-    const intl = useIntl();
     const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
     if (!scCategory) {
         return _jsx(CategorySkeleton, Object.assign({ elevation: elevation }, (variant && { variant })));
     }
     // RENDER
     if (!autoHide) {
-        return (_jsx(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation }, (variant && { variant }), { className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: _jsx(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Tooltip, Object.assign({ title: scCategory.name }, { children: _jsx(Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers && categoryFollowEnabled ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : (_jsx(_Fragment, { children: showFollowers && categoryFollowEnabled
-                        ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}`
-                        : scCategory.slogan })) }), actions: _jsx(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (_jsx(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation }, (variant && { variant }), { className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: _jsx(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Tooltip, Object.assign({ title: scCategory.name }, { children: _jsx(Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: _jsx(_Fragment, { children: showTooltip && showFollowers && categoryFollowEnabled ? (_jsx(Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: _jsx(FormattedMessage, Object.assign({}, messages.categoryFollowers, { values: { total: scCategory.followers_counter } })) }))) : (showFollowers &&
+                    categoryFollowEnabled && _jsx(FormattedMessage, Object.assign({}, messages.categoryFollowers, { values: { total: scCategory.followers_counter } }))) }), actions: _jsx(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -2,7 +2,7 @@ import { AutocompleteProps, TextFieldProps } from '@mui/material';
 import { SCTagType } from '@selfcommunity/types';
 import { TagChipProps } from '../../shared/TagChip';
 export interface TagAutocompleteProps extends Pick<AutocompleteProps<SCTagType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCTagType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
-    defaultValue: SCTagType[] | string;
+    defaultValue: SCTagType[] | any;
     /**
      * The props applied to text field
      * @default {variant: 'outlined, label: tags_label}

package/lib/esm/components/TagAutocomplete/TagAutocomplete.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, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
@@ -87,7 +87,7 @@ const TagAutocomplete = (inProps) => {
         const loadDefault = () => __awaiter(void 0, void 0, void 0, function* () {
             if (typeof defaultValue === 'string' && defaultValue.trim() !== '') {
                 const results = yield fetchTags(defaultValue);
-                const match = results.find((t) => t.name === defaultValue);
+                const match = results.find((t) => t.id === Number(defaultValue));
                 if (match)
                     setValue(match);
             }
@@ -102,12 +102,21 @@ const TagAutocomplete = (inProps) => {
     };
     const handleClose = () => setOpen(false);
     const handleChange = (_event, newValue) => setValue(newValue);
-    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: tags || [], 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), renderTags: (value, getTagProps) => value.map((option, index) => _jsx(TagChip, Object.assign({ tag: option }, getTagProps({ index })), option.id)), renderOption: (props, option, { 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({ 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: tags.length > 0 ? (_jsxs(Fragment, { children: [' ', loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'tags', endAdornment: tags.length > 0 ? (_jsxs(Fragment, { children: [loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));
 };
 export default TagAutocomplete;