@ultraviolet/ui 1.8.0 → 1.8.1

package/dist/index.d.ts

@@ -2237,7 +2237,10 @@ type TagListProps = {
      * This property define maximum characters length of all tags until it hide tags into tooltip.
      */
     maxLength?: number;
-    tags?: string[];
+    tags?: (string | {
+        label: string;
+        icon: NonNullable<ComponentProps<typeof Tag>['icon']>;
+    })[];
     /**
      * This property define maximum characters length of all tags until it hide tags into tooltip.
      */

package/dist/src/components/TagList/index.js

@@ -42,6 +42,7 @@ const StyledTagContainer = /*#__PURE__*/_styled("div", {
   return multiline && `flex-wrap: wrap;`;
 }, ";");
 const DEFAULT_TAGS = [];
+const getTagLabel = tag => typeof tag === 'object' ? tag.label : tag;
 const TagList = _ref5 => {
   let {
     maxLength = 600,
@@ -56,7 +57,7 @@ const TagList = _ref5 => {
     'data-testid': dataTestId
   } = _ref5;
   let tmpThreshold = threshold;
-  if (tags.length > 0 && tags.slice(0, tmpThreshold).reduce((_, tag) => _ + tag).length > maxLength) {
+  if (tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), '').length > maxLength) {
     // If total tags length in characters is above maxLength,
     // threshold is decremented in order to prevent too many long tags displayed.
     tmpThreshold -= 1;
@@ -79,9 +80,10 @@ const TagList = _ref5 => {
         copiable: copiable,
         copyText: copyText,
         copiedText: copiedText,
-        children: tag
-      }, `${tag}-${index}`))
-    }), hasManyTags && jsx(Popover, {
+        icon: typeof tag === 'object' ? tag.icon : undefined,
+        children: getTagLabel(tag)
+      }, `${getTagLabel(tag)}-${index}`))
+    }), hasManyTags ? jsx(Popover, {
       title: popoverTitle,
       visible: isVisible,
       size: "small",
@@ -95,15 +97,16 @@ const TagList = _ref5 => {
           copiable: copiable,
           copyText: copyText,
           copiedText: copiedText,
-          children: tag
-        }, `${tag}-${index}`))
+          icon: typeof tag === 'object' ? tag.icon : undefined,
+          children: getTagLabel(tag)
+        }, `${getTagLabel(tag)}-${index}`))
       }),
       children: jsxs(TagsWrapper, {
         "data-testid": `${dataTestId ?? 'taglist'}-open`,
         onClick: () => setIsVisible(true),
         children: ["+", tags.length - tmpThreshold]
       })
-    })]
+    }) : null]
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {