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

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

@@ -88,10 +88,11 @@ const TagAutocomplete = (inProps) => {
     (0, react_1.useEffect)(() => {
         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);
-                if (match)
+                const results = yield fetchTags('');
+                const match = results.find((t) => t.id === Number(defaultValue));
+                if (match) {
                     setValue(match);
+                }
             }
         });
         loadDefault();
@@ -104,12 +105,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) })));
+            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: 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/cjs/shared/TagChip/index.d.ts

@@ -72,5 +72,10 @@ export interface TagChipProps {
      * @default false
      */
     ellipsis?: boolean;
+    /**
+     * If `true`, shows the description of the tag on hover (desktop) or long press (mobile).
+     * @default false
+     */
+    showDescription?: boolean;
 }
 export default function TagChip(props: TagChipProps): JSX.Element;

package/lib/cjs/shared/TagChip/index.js

@@ -23,7 +23,7 @@ const Root = (0, material_1.styled)(material_1.Chip, {
 }));
 function TagChip(props) {
     // PROPS
-    const { tag, clickable = true, disposable = true, label = null, ellipsis = false, onClick = null, onDelete = null, className = null } = props, rest = tslib_1.__rest(props, ["tag", "clickable", "disposable", "label", "ellipsis", "onClick", "onDelete", "className"]);
+    const { tag, clickable = true, disposable = true, label = null, ellipsis = false, onClick = null, onDelete = null, className = null, showDescription = false } = props, rest = tslib_1.__rest(props, ["tag", "clickable", "disposable", "label", "ellipsis", "onClick", "onDelete", "className", "showDescription"]);
     // HANDLERS
     const handleClick = () => {
         onClick && onClick(tag.id);
@@ -31,9 +31,13 @@ function TagChip(props) {
     const handleDelete = () => {
         onDelete && onDelete(tag.id);
     };
+    const root = ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
+    if (showDescription && tag.description) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: tag.description, placement: "right", arrow: true }, { children: root })));
+    }
+    return root;
 }
 exports.default = TagChip;

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';
@@ -86,10 +86,11 @@ const TagAutocomplete = (inProps) => {
     useEffect(() => {
         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);
-                if (match)
+                const results = yield fetchTags('');
+                const match = results.find((t) => t.id === Number(defaultValue));
+                if (match) {
                     setValue(match);
+                }
             }
         });
         loadDefault();
@@ -102,12 +103,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) })));
+            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: 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;

package/lib/esm/shared/TagChip/index.d.ts

@@ -72,5 +72,10 @@ export interface TagChipProps {
      * @default false
      */
     ellipsis?: boolean;
+    /**
+     * If `true`, shows the description of the tag on hover (desktop) or long press (mobile).
+     * @default false
+     */
+    showDescription?: boolean;
 }
 export default function TagChip(props: TagChipProps): JSX.Element;

package/lib/esm/shared/TagChip/index.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled, Chip } from '@mui/material';
+import { styled, Chip, Tooltip } from '@mui/material';
 import classNames from 'classnames';
 const PREFIX = 'SCTagChip';
 const classes = {
@@ -21,7 +21,7 @@ const Root = styled(Chip, {
 }));
 export default function TagChip(props) {
     // PROPS
-    const { tag, clickable = true, disposable = true, label = null, ellipsis = false, onClick = null, onDelete = null, className = null } = props, rest = __rest(props, ["tag", "clickable", "disposable", "label", "ellipsis", "onClick", "onDelete", "className"]);
+    const { tag, clickable = true, disposable = true, label = null, ellipsis = false, onClick = null, onDelete = null, className = null, showDescription = false } = props, rest = __rest(props, ["tag", "clickable", "disposable", "label", "ellipsis", "onClick", "onDelete", "className", "showDescription"]);
     // HANDLERS
     const handleClick = () => {
         onClick && onClick(tag.id);
@@ -29,8 +29,12 @@ export default function TagChip(props) {
     const handleDelete = () => {
         onDelete && onDelete(tag.id);
     };
+    const root = (_jsx(Root, Object.assign({ className: classNames(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(className, { [classes.ellipsis]: ellipsis }), sx: { backgroundColor: `${tag.color}`, color: (theme) => theme.palette.getContrastText(tag.color) } }, (clickable && { onClick: handleClick }), (disposable && { onDelete: handleDelete }), { label: label ? label : tag.name }, rest)));
+    if (showDescription && tag.description) {
+        return (_jsx(Tooltip, Object.assign({ title: tag.description, placement: "right", arrow: true }, { children: root })));
+    }
+    return root;
 }