@synerise/ds-tag 1.1.18 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.2.0...@synerise/ds-tag@1.3.0) (2025-09-25)
+
+
+### Features
+
+* **table:** cell with tags list ([109820e](https://github.com/Synerise/synerise-design/commit/109820ed06f931a178580633277a7643aebe1072))
+
+
+
+
+
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.1.18...@synerise/ds-tag@1.2.0) (2025-09-19)
+
+
+### Features
+
+* **tag:** Implementation Infocard in Tag component ([d1f31fa](https://github.com/Synerise/synerise-design/commit/d1f31fa44a73da3787df1966e2046c5a577afd96))
+
+
+
+
+
 ## [1.1.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.1.17...@synerise/ds-tag@1.1.18) (2025-09-16)
 
 **Note:** Version bump only for package @synerise/ds-tag

package/README.md

@@ -28,19 +28,20 @@ import Tag from '@synerise/ds-tag'
 
 ## API
 
-| Property  | Description                              | Type                              | Default                |
-| --------- | ---------------------------------------- | --------------------------------- | ---------------------- |
-| className | tag container class                      | string                            | -                      |
-| color     | primary color (background/border) of tag | string                            | -                      |
-| disabled  | whether tag should be disabled           | boolean                           | -                      |
-| id        | id of tag (necessary if using Tags)      | string / number                   | -                      |
-| name      | title of tag                             | string                            | -                      |
-| onClick   | onClick event on tag body                | () => void                        | -                      |
-| onRemove  | callback when tag is removed             | (tagKey: string / number) => void | -                      |
-| removable | show remove button                       | boolean                           | -                      |
-| shape     | shape of the tag                         | TagShape                          | TagShape.DEFAULT_ROUND |
-| textColor | color of tag name label                  | string                            | -                      |
-| dashed    | make border dashed                       | boolean                           | -                      |
+| Property     | Description                                     | Type                              | Default                |
+|--------------|-------------------------------------------------|-----------------------------------|------------------------|
+| className    | tag container class                             | string                            | -                      |
+| color        | primary color (background/border) of tag        | string                            | -                      |
+| disabled     | whether tag should be disabled                  | boolean                           | -                      |
+| id           | id of tag (necessary if using Tags)             | string / number                   | -                      |
+| name         | title of tag                                    | string                            | -                      |
+| onClick      | onClick event on tag body                       | () => void                        | -                      |
+| onRemove     | callback when tag is removed                    | (tagKey: string / number) => void | -                      |
+| removable    | show remove button                              | boolean                           | -                      |
+| shape        | shape of the tag                                | TagShape                          | TagShape.DEFAULT_ROUND |
+| textColor    | color of tag name label                         | string                            | -                      |
+| dashed       | make border dashed                              | boolean                           | -                      |
+| tooltipProps | tooltip to show over entire tag. see ds-tooltip | TooltipProps                      |                        |
 
 ## TagShape Enum
 

package/dist/Tag.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TagProps } from './Tag.types';
-declare const Tag: ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: TagProps) => React.JSX.Element;
+declare const Tag: ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, tooltipProps, ...htmlAttributes }: TagProps) => React.JSX.Element;
 export default Tag;

package/dist/Tag.js

@@ -1,13 +1,14 @@
-var _excluded = ["id", "name", "className", "disabled", "removable", "image", "shape", "color", "textColor", "onRemove", "onClick", "prefixel", "suffixel", "texts", "asPill", "dashed"];
+var _excluded = ["id", "name", "className", "disabled", "removable", "image", "shape", "color", "textColor", "onRemove", "onClick", "prefixel", "suffixel", "texts", "asPill", "dashed", "tooltipProps"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useState } from 'react';
-import { theme } from '@synerise/ds-core';
+import { useTheme } from '@synerise/ds-core';
 import Icon, { CloseS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './Tag.styles';
 import { getColorText } from './Tag.styles';
 import { TagShape } from './Tag.types';
+import { useDefaultTexts } from './hooks/useDefaultTexts';
 var Tag = function Tag(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -26,7 +27,10 @@ var Tag = function Tag(_ref) {
     texts = _ref.texts,
     asPill = _ref.asPill,
     dashed = _ref.dashed,
+    tooltipProps = _ref.tooltipProps,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var theme = useTheme();
+  var allTexts = useDefaultTexts(texts);
   var isDefaultType = shape && [TagShape.DEFAULT_ROUND, TagShape.DEFAULT_SQUARE].includes(shape);
   var isDefaultRound = shape === TagShape.DEFAULT_ROUND;
   var isDefaultSquare = shape === TagShape.DEFAULT_SQUARE;
@@ -63,7 +67,7 @@ var Tag = function Tag(_ref) {
     setIsIconHovered(false);
     htmlAttributes.onMouseLeave == null || htmlAttributes.onMouseLeave(event);
   };
-  return /*#__PURE__*/React.createElement(S.Tag, _extends({
+  var renderedTag = /*#__PURE__*/React.createElement(S.Tag, _extends({
     className: "ds-tag " + (className != null ? className : ''),
     isStatusShape: isStatusShape,
     shape: shape,
@@ -86,8 +90,8 @@ var Tag = function Tag(_ref) {
     src: image,
     alt: ""
   }), !!prefixel && renderPrefixel(), /*#__PURE__*/React.createElement(S.TagName, null, name), !!suffixel && renderSuffixel(), isRemovable && /*#__PURE__*/React.createElement(Tooltip, {
-    title: (texts == null ? void 0 : texts.deleteTooltip) || 'Delete',
-    visible: isIconHovered
+    title: allTexts.deleteTooltip,
+    open: isIconHovered
   }, /*#__PURE__*/React.createElement(S.RemoveButton, {
     onClick: onRemoveCall,
     onMouseOver: handleMouseOver,
@@ -99,5 +103,6 @@ var Tag = function Tag(_ref) {
     size: 24,
     color: getColorText(theme, color)
   })))));
+  return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, renderedTag) : renderedTag;
 };
 export default Tag;

package/dist/Tag.types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { type TooltipProps } from '@synerise/ds-tooltip';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
 export type TagTexts = {
     addButtonLabel?: ReactNode;
@@ -27,6 +28,7 @@ export type TagProps = WithHTMLAttributes<HTMLDivElement, {
     texts?: TagTexts;
     asPill?: boolean;
     dashed?: boolean;
+    tooltipProps?: TooltipProps;
 }>;
 export declare enum TagShape {
     SINGLE_CHARACTER_ROUND = "single_character_round",

package/dist/hooks/useDefaultTexts.d.ts

@@ -0,0 +1,2 @@
+import { type TagTexts } from '../Tag.types';
+export declare const useDefaultTexts: (texts?: Partial<TagTexts>) => TagTexts;

package/dist/hooks/useDefaultTexts.js

@@ -0,0 +1,44 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+export var useDefaultTexts = function useDefaultTexts(texts) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var allTexts = useMemo(function () {
+    return _extends({
+      searchPlaceholder: formatMessage({
+        id: 'DS.TAG.SEARCH-PLACEHOLDER',
+        defaultMessage: 'Search'
+      }),
+      addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.ADD-BUTTON-LABEL",
+        defaultMessage: "Add tag"
+      }),
+      manageLinkLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.MANAGE-LINK-LABEL",
+        defaultMessage: "Manage tags"
+      }),
+      createTagButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.CREATE-TAG-LABEL",
+        defaultMessage: "Create tag"
+      }),
+      dropdownNoTags: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.NO-TAGS",
+        defaultMessage: "No data"
+      }),
+      clearTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.CLEAR-TOOLTIP",
+        defaultMessage: "Clear"
+      }),
+      deleteTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.DELETE-TOOLTIP",
+        defaultMessage: "Delete"
+      }),
+      noResultsLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.TAG.NO-SEARCH-RESULTS",
+        defaultMessage: "No tags found"
+      })
+    }, texts || {});
+  }, [texts, formatMessage]);
+  return allTexts;
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Tag';
 export { TagShape, type TagProps, type TagTexts } from './Tag.types';
+export { useDefaultTexts } from './hooks/useDefaultTexts';

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default } from './Tag';
-export { TagShape } from './Tag.types';
+export { TagShape } from './Tag.types';
+export { useDefaultTexts } from './hooks/useDefaultTexts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tag",
-  "version": "1.1.18",
+  "version": "1.3.0",
   "description": "Tag UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,7 +36,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-icon": "^1.7.2",
-    "@synerise/ds-tooltip": "^1.1.18",
+    "@synerise/ds-tooltip": "^1.2.0",
     "@synerise/ds-utils": "^1.4.2"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5beb6ab5f2d77b9e98e04caab7dff20b8436078b"
+  "gitHead": "6a2e6e20a480aafe5d67748d04fbe3d4ce91a544"
 }