@synerise/ds-tags 1.3.1 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +17 -16
  3. package/dist/Tags.d.ts +1 -1
  4. package/dist/Tags.js +8 -6
  5. package/dist/Tags.styles.js +4 -4
  6. package/dist/Tags.types.d.ts +2 -1
  7. package/dist/components/AddTags/AddTags.d.ts +6 -17
  8. package/dist/components/AddTags/AddTags.js +8 -8
  9. package/dist/components/AddTags/AddTags.styles.d.ts +1 -0
  10. package/dist/components/AddTags/AddTags.styles.js +5 -1
  11. package/package.json +9 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.4.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.4.0...@synerise/ds-tags@1.4.1) (2025-09-26)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-tags
9
+
10
+
11
+
12
+
13
+
14
+ # [1.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.3.1...@synerise/ds-tags@1.4.0) (2025-09-25)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **tags:** fix flex with overflow in narrow containers ([8bd538d](https://github.com/Synerise/synerise-design/commit/8bd538d1563438a0d6ef6f7459b8ec360d2102a3))
20
+
21
+
22
+ ### Features
23
+
24
+ * **table:** cell with tags list ([109820e](https://github.com/Synerise/synerise-design/commit/109820ed06f931a178580633277a7643aebe1072))
25
+
26
+
27
+
28
+
29
+
6
30
  ## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.3.0...@synerise/ds-tags@1.3.1) (2025-09-24)
7
31
 
8
32
 
package/README.md CHANGED
@@ -11,22 +11,23 @@ Tags UI Component
11
11
 
12
12
  ## Tags API (Group of <Tag />)
13
13
 
14
- | Property | Description | Type | Default |
15
- |------------------|-------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|---------|
16
- | addable | Allow adding tags from `data` (which are not present in `selected`) | boolean | - |
17
- | className | Tag Group container class | string | - |
18
- | creatable | Allow creating new tags | boolean | - |
19
- | data | All available tags | (Tag & {informationCardProps?: InformationCardProps})[] | [] |
20
- | disabled | Disable entire group (all tags) | boolean | - |
21
- | onCreate | fired whenever a new tag has been created | (tagName: string) => void | - |
22
- | onSelectedChange | fired whenever the list of selected tags changes | (tags: Tag[], actionTaken: ActionTaken) => void | - |
23
- | removable | Allow removing tags from `selected` | boolean | - |
24
- | style | Tag Group container styles | React.CSSProperties | - |
25
- | selected | Selected tags | (Tag & {informationCardProps?: InformationCardProps})[] | [] |
26
- | tagShape | Shape of tags | TagShape | - |
27
- | texts | necessary texts to render tags group | TagsTexts | {} |
28
- | dropdownFooter | Allows adding custom content to the footer of the dropdown | ReactNode | - |
29
- | maxVisibleTags | Defines the max number of selected tags that are visible by default. Additional selected tags will appear in a dropdown | number | - |
14
+ | Property | Description | Type | Default |
15
+ |------------------|-------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|--------------------|
16
+ | addable | Allow adding tags from `data` (which are not present in `selected`) | boolean | - |
17
+ | className | Tag Group container class | string | - |
18
+ | creatable | Allow creating new tags | boolean | - |
19
+ | data | All available tags | (Tag & {informationCardProps?: InformationCardProps})[] | [] |
20
+ | disabled | Disable entire group (all tags) | boolean | - |
21
+ | onCreate | fired whenever a new tag has been created | (tagName: string) => void | - |
22
+ | onSelectedChange | fired whenever the list of selected tags changes | (tags: Tag[], actionTaken: ActionTaken) => void | - |
23
+ | removable | Allow removing tags from `selected` | boolean | - |
24
+ | style | Tag Group container styles | React.CSSProperties | - |
25
+ | selected | Selected tags | (Tag & {informationCardProps?: InformationCardProps})[] | [] |
26
+ | tagShape | Shape of tags | TagShape | - |
27
+ | texts | necessary texts to render tags group | TagsTexts | {} |
28
+ | dropdownFooter | Allows adding custom content to the footer of the dropdown | ReactNode | - |
29
+ | maxVisibleTags | Defines the max number of selected tags that are visible by default. Additional selected tags will appear in a dropdown | number | - |
30
+ | addButtonType | Defines the type of button used to add more tags. 'icon-label' by default | 'icon-label' | 'single-icon' | 'icon-label' |
30
31
 
31
32
  ## ActionTaken
32
33
 
package/dist/Tags.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import type { TagsProps } from './Tags.types';
3
- declare const Tags: ({ data, tagShape, onSelectedChange, disabled, removable, addable, creatable, texts, selected, style, className, onCreate, title, maxHeight, overlayStyle, overlayPlacement, asPill, dropdownFooter, maxVisibleTags, }: TagsProps) => React.JSX.Element;
3
+ declare const Tags: ({ data, tagShape, onSelectedChange, disabled, removable, addable, creatable, texts, selected, style, className, onCreate, title, maxHeight, overlayStyle, overlayPlacement, asPill, dropdownFooter, addButtonType, maxVisibleTags, }: TagsProps) => React.JSX.Element;
4
4
  export default Tags;
package/dist/Tags.js CHANGED
@@ -1,7 +1,7 @@
1
1
  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); }
2
2
  import React from 'react';
3
3
  import InformationCard from '@synerise/ds-information-card';
4
- import Tag from '@synerise/ds-tag';
4
+ import Tag, { useDefaultTexts } from '@synerise/ds-tag';
5
5
  import * as S from './Tags.styles';
6
6
  import { AddTags } from './components/AddTags/AddTags';
7
7
  import { LimitedTags } from './components/LimitedTags/LimitedTags';
@@ -14,8 +14,7 @@ var Tags = function Tags(_ref) {
14
14
  removable = _ref.removable,
15
15
  addable = _ref.addable,
16
16
  creatable = _ref.creatable,
17
- _ref$texts = _ref.texts,
18
- texts = _ref$texts === void 0 ? {} : _ref$texts,
17
+ texts = _ref.texts,
19
18
  _ref$selected = _ref.selected,
20
19
  selected = _ref$selected === void 0 ? [] : _ref$selected,
21
20
  style = _ref.style,
@@ -27,8 +26,10 @@ var Tags = function Tags(_ref) {
27
26
  overlayPlacement = _ref.overlayPlacement,
28
27
  asPill = _ref.asPill,
29
28
  dropdownFooter = _ref.dropdownFooter,
29
+ addButtonType = _ref.addButtonType,
30
30
  maxVisibleTags = _ref.maxVisibleTags;
31
31
  var isMaxVisibleTagsDefined = typeof maxVisibleTags === 'number';
32
+ var allTexts = useDefaultTexts(texts);
32
33
  var visibleSelectedTags = isMaxVisibleTagsDefined ? selected.slice(0, maxVisibleTags) : selected;
33
34
  var areLimitedTags = isMaxVisibleTagsDefined && selected.length > maxVisibleTags;
34
35
  var onRemove = function onRemove(tagKey) {
@@ -61,7 +62,7 @@ var Tags = function Tags(_ref) {
61
62
  removable: removable,
62
63
  onRemove: removable ? onRemove : undefined,
63
64
  disabled: disabled,
64
- texts: texts,
65
+ texts: allTexts,
65
66
  asPill: asPill
66
67
  }, tag, {
67
68
  tooltipProps: tag.informationCardProps ? _extends({
@@ -89,12 +90,13 @@ var Tags = function Tags(_ref) {
89
90
  creatable: creatable,
90
91
  overlayPlacement: overlayPlacement,
91
92
  overlayStyle: overlayStyle,
92
- texts: texts,
93
+ texts: allTexts,
93
94
  tagShape: tagShape,
94
95
  maxHeight: maxHeight,
95
96
  dropdownFooter: dropdownFooter,
96
97
  onSelectedChange: onSelectedChange,
97
- onCreate: onCreate
98
+ onCreate: onCreate,
99
+ addButtonType: addButtonType
98
100
  }))));
99
101
  };
100
102
  export default Tags;
package/dist/Tags.styles.js CHANGED
@@ -2,15 +2,15 @@ import styled from 'styled-components';
2
2
  export var Container = styled.div.withConfig({
3
3
  displayName: "Tagsstyles__Container",
4
4
  componentId: "sc-156lf0a-0"
5
- })(["display:flex;margin-bottom:24px;"]);
5
+ })(["display:flex;margin-bottom:24px;max-width:100%;"]);
6
6
  export var TagOverflow = styled.div.withConfig({
7
7
  displayName: "Tagsstyles__TagOverflow",
8
8
  componentId: "sc-156lf0a-1"
9
- })(["display:flex;height:32px;align-items:center;"]);
9
+ })(["display:flex;height:32px;align-items:center;max-width:100%;"]);
10
10
  export var TagsWrapper = styled.div.withConfig({
11
11
  displayName: "Tagsstyles__TagsWrapper",
12
12
  componentId: "sc-156lf0a-2"
13
- })(["display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;"]);
13
+ })(["display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;min-width:0;"]);
14
14
  export var Title = styled.div.withConfig({
15
15
  displayName: "Tagsstyles__Title",
16
16
  componentId: "sc-156lf0a-3"
@@ -20,4 +20,4 @@ export var Title = styled.div.withConfig({
20
20
  export var SelectedTags = styled.div.withConfig({
21
21
  displayName: "Tagsstyles__SelectedTags",
22
22
  componentId: "sc-156lf0a-4"
23
- })(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;&& .ds-tag{margin:4px;}"]);
23
+ })(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;min-width:0;&& .ds-tag{margin:4px;}"]);
package/dist/Tags.types.d.ts CHANGED
@@ -15,11 +15,12 @@ export type TagsProps = {
15
15
  className?: string;
16
16
  style?: CSSProperties;
17
17
  addable?: boolean;
18
+ addButtonType?: 'single-icon' | 'icon-label';
18
19
  title?: ReactNode;
19
20
  removable?: boolean;
20
21
  creatable?: boolean;
21
22
  disabled?: boolean;
22
- texts?: TagTexts;
23
+ texts?: Partial<TagTexts>;
23
24
  /**
24
25
  * @deprecated deprecated in favour of useTheme hook
25
26
  */
package/dist/components/AddTags/AddTags.d.ts CHANGED
@@ -1,19 +1,8 @@
1
- import React, { type ReactNode } from 'react';
2
- import { type DropdownProps } from '@synerise/ds-dropdown';
3
- import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
4
- import { type ActionTaken } from '../../Tags.types';
5
- type AddTagsProps = {
6
- creatable?: boolean;
7
- data?: TagProps[];
8
- selected: TagProps[];
9
- overlayPlacement: DropdownProps['placement'];
10
- overlayStyle: DropdownProps['overlayStyle'];
11
- texts?: TagTexts;
12
- maxHeight?: number;
13
- dropdownFooter?: ReactNode;
14
- tagShape?: TagShape;
15
- onSelectedChange?: (tags: Array<TagProps>, action: ActionTaken) => void;
16
- onCreate?: (name: string) => void;
1
+ import React from 'react';
2
+ import { type TagTexts } from '@synerise/ds-tag';
3
+ import { type TagsProps } from '../../Tags.types';
4
+ type AddTagsProps = Pick<TagsProps, 'creatable' | 'data' | 'selected' | 'overlayPlacement' | 'overlayStyle' | 'dropdownFooter' | 'maxHeight' | 'tagShape' | 'onSelectedChange' | 'onCreate' | 'addButtonType'> & {
5
+ texts: TagTexts;
17
6
  };
18
- export declare const AddTags: ({ creatable, data, selected, overlayPlacement, overlayStyle, texts, tagShape, maxHeight, dropdownFooter, onSelectedChange, onCreate, }: AddTagsProps) => React.JSX.Element;
7
+ export declare const AddTags: ({ creatable, data, selected, overlayPlacement, overlayStyle, texts, tagShape, maxHeight, dropdownFooter, onSelectedChange, onCreate, addButtonType, }: AddTagsProps) => React.JSX.Element;
19
8
  export {};
package/dist/components/AddTags/AddTags.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { useState } from 'react';
2
- import Button from '@synerise/ds-button';
3
2
  import { useTheme } from '@synerise/ds-core';
4
3
  import Icon, { Add3M, SearchM } from '@synerise/ds-icon';
5
4
  import Result from '@synerise/ds-result';
@@ -17,7 +16,8 @@ export var AddTags = function AddTags(_ref) {
17
16
  maxHeight = _ref.maxHeight,
18
17
  dropdownFooter = _ref.dropdownFooter,
19
18
  onSelectedChange = _ref.onSelectedChange,
20
- onCreate = _ref.onCreate;
19
+ onCreate = _ref.onCreate,
20
+ addButtonType = _ref.addButtonType;
21
21
  var theme = useTheme();
22
22
  var _useState = useState(''),
23
23
  searchQuery = _useState[0],
@@ -76,7 +76,7 @@ export var AddTags = function AddTags(_ref) {
76
76
  component: /*#__PURE__*/React.createElement(Add3M, null),
77
77
  size: 24,
78
78
  color: theme.palette['grey-500']
79
- }), /*#__PURE__*/React.createElement("span", null, texts && texts.createTagButtonLabel), /*#__PURE__*/React.createElement("strong", null, searchQuery)), isSeparated && /*#__PURE__*/React.createElement(S.Separator, null)),
79
+ }), /*#__PURE__*/React.createElement("span", null, texts.createTagButtonLabel), /*#__PURE__*/React.createElement("strong", null, searchQuery)), isSeparated && /*#__PURE__*/React.createElement(S.Separator, null)),
80
80
  noTagsContent: /*#__PURE__*/React.createElement(Result, {
81
81
  type: "no-results",
82
82
  description: noTagsContentLabel || 'No results'
@@ -84,7 +84,7 @@ export var AddTags = function AddTags(_ref) {
84
84
  dropdownHeader: /*#__PURE__*/React.createElement(SearchBar, {
85
85
  value: searchQuery,
86
86
  onSearchChange: setSearchQuery,
87
- placeholder: texts && texts.searchPlaceholder || '',
87
+ placeholder: texts.searchPlaceholder || '',
88
88
  iconLeft: /*#__PURE__*/React.createElement(Icon, {
89
89
  component: /*#__PURE__*/React.createElement(SearchM, null),
90
90
  color: theme.palette['grey-600']
@@ -92,14 +92,14 @@ export var AddTags = function AddTags(_ref) {
92
92
  onClearInput: function onClearInput() {
93
93
  return setSearchQuery('');
94
94
  },
95
- clearTooltip: texts && texts.clearTooltip
95
+ clearTooltip: texts.clearTooltip
96
96
  })
97
- }, /*#__PURE__*/React.createElement(Button, {
97
+ }, /*#__PURE__*/React.createElement(S.AddTagButton, {
98
98
  type: "ghost",
99
- mode: texts != null && texts.addButtonLabel ? 'icon-label' : 'single-icon'
99
+ mode: addButtonType || (texts != null && texts.addButtonLabel ? 'icon-label' : 'single-icon')
100
100
  }, /*#__PURE__*/React.createElement(Icon, {
101
101
  component: /*#__PURE__*/React.createElement(Add3M, null),
102
102
  size: 24,
103
103
  color: theme.palette['grey-500']
104
- }), texts && texts.addButtonLabel));
104
+ }), addButtonType !== 'single-icon' && texts.addButtonLabel));
105
105
  };
package/dist/components/AddTags/AddTags.styles.d.ts CHANGED
@@ -3,3 +3,4 @@ export declare const CreateTagDropdownButton: import("styled-components").Styled
3
3
  marginless: boolean;
4
4
  }, never>;
5
5
  export declare const Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
6
+ export declare const AddTagButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
package/dist/components/AddTags/AddTags.styles.js CHANGED
@@ -12,4 +12,8 @@ export var Separator = styled.hr.withConfig({
12
12
  componentId: "sc-1wg5ubr-1"
13
13
  })(["width:auto;margin:0;padding:0;padding-bottom:8px;border:0;height:1px;background-image:linear-gradient( to right,", " 33%,rgba(255,255,255,0) 0% );background-repeat:repeat-x;background-size:4px 1px;background-position:top;"], function (props) {
14
14
  return props.theme.palette['grey-300'];
15
- });
15
+ });
16
+ export var AddTagButton = styled(Button).withConfig({
17
+ displayName: "AddTagsstyles__AddTagButton",
18
+ componentId: "sc-1wg5ubr-2"
19
+ })([""]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-tags",
3
- "version": "1.3.1",
3
+ "version": "1.4.1",
4
4
  "description": "Tags UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,21 +35,20 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.4.11",
39
- "@synerise/ds-dropdown": "^1.0.24",
38
+ "@synerise/ds-button": "^1.4.12",
39
+ "@synerise/ds-dropdown": "^1.0.26",
40
40
  "@synerise/ds-icon": "^1.7.2",
41
- "@synerise/ds-information-card": "^1.1.2",
42
- "@synerise/ds-result": "^1.0.24",
41
+ "@synerise/ds-information-card": "^1.1.4",
42
+ "@synerise/ds-result": "^1.0.25",
43
43
  "@synerise/ds-scrollbar": "^1.1.8",
44
- "@synerise/ds-search-bar": "^1.3.13",
45
- "@synerise/ds-tag": "^1.2.0",
46
- "@synerise/ds-tooltip": "^1.2.0",
47
- "@synerise/ds-utils": "^1.4.2"
44
+ "@synerise/ds-search-bar": "^1.3.14",
45
+ "@synerise/ds-tag": "^1.3.0",
46
+ "@synerise/ds-tooltip": "^1.2.0"
48
47
  },
49
48
  "peerDependencies": {
50
49
  "@synerise/ds-core": "*",
51
50
  "react": ">=16.9.0 <= 18.3.1",
52
51
  "styled-components": "^5.3.3"
53
52
  },
54
- "gitHead": "0f7fca0c2cea2b2ccc65e6c4643c071eab8be9a6"
53
+ "gitHead": "25221abb694880c2416ceb5f7598a5c7329f3379"
55
54
  }