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

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 results = yield fetchTags('');
                 const match = results.find((t) => t.id === Number(defaultValue));
-                if (match)
+                if (match) {
                     setValue(match);
+                }
             }
         });
         loadDefault();
@@ -116,7 +117,7 @@ const TagAutocomplete = (inProps) => {
     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: '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)));

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/TagAutocomplete/TagAutocomplete.js

@@ -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 results = yield fetchTags('');
                 const match = results.find((t) => t.id === Number(defaultValue));
-                if (match)
+                if (match) {
                     setValue(match);
+                }
             }
         });
         loadDefault();
@@ -114,7 +115,7 @@ const TagAutocomplete = (inProps) => {
     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: 'tags', endAdornment: tags.length > 0 ? (_jsxs(Fragment, { children: [loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));

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;
 }