@synerise/ds-tags 1.1.25 → 1.2.0

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 (8) hide show
  1. package/CHANGELOG.md +13 -46
  2. package/README.md +26 -26
  3. package/dist/Tags.d.ts +1 -1
  4. package/dist/Tags.js +42 -13
  5. package/dist/Tags.styles.d.ts +6 -4
  6. package/dist/Tags.styles.js +26 -22
  7. package/dist/Tags.types.d.ts +9 -3
  8. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -3,113 +3,80 @@
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.1.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.24...@synerise/ds-tags@1.1.25) (2025-09-16)
6
+ # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.25...@synerise/ds-tags@1.2.0) (2025-09-19)
7
7
 
8
- **Note:** Version bump only for package @synerise/ds-tags
9
8
 
9
+ ### Bug Fixes
10
10
 
11
+ * **tags:** add title label to tags group ([b1ca594](https://github.com/Synerise/synerise-design/commit/b1ca5946cfa427e51d581efa4cdabe4fca5813e0))
11
12
 
12
13
 
14
+ ### Features
13
15
 
14
- ## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.23...@synerise/ds-tags@1.1.24) (2025-09-02)
16
+ * **tag:** Implementation Infocard in Tag component ([d1f31fa](https://github.com/Synerise/synerise-design/commit/d1f31fa44a73da3787df1966e2046c5a577afd96))
15
17
 
16
18
 
17
- ### Bug Fixes
18
19
 
19
- * **tags:** dropdown min width ([fe2a609](https://github.com/Synerise/synerise-design/commit/fe2a609149374271642ab268f42501aa138c4c5b))
20
20
 
21
21
 
22
+ ## [1.1.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.24...@synerise/ds-tags@1.1.25) (2025-09-16)
22
23
 
24
+ **Note:** Version bump only for package @synerise/ds-tags
23
25
 
24
26
 
25
- ## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.22...@synerise/ds-tags@1.1.23) (2025-08-28)
26
27
 
27
- **Note:** Version bump only for package @synerise/ds-tags
28
28
 
29
29
 
30
+ ## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.23...@synerise/ds-tags@1.1.24) (2025-09-02)
30
31
 
32
+ ### Bug Fixes
31
33
 
34
+ - **tags:** dropdown min width ([fe2a609](https://github.com/Synerise/synerise-design/commit/fe2a609149374271642ab268f42501aa138c4c5b))
32
35
 
33
- ## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.21...@synerise/ds-tags@1.1.22) (2025-08-20)
36
+ ## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.22...@synerise/ds-tags@1.1.23) (2025-08-28)
34
37
 
35
38
  **Note:** Version bump only for package @synerise/ds-tags
36
39
 
40
+ ## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.21...@synerise/ds-tags@1.1.22) (2025-08-20)
37
41
 
38
-
39
-
42
+ **Note:** Version bump only for package @synerise/ds-tags
40
43
 
41
44
  ## [1.1.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.20...@synerise/ds-tags@1.1.21) (2025-08-14)
42
45
 
43
46
  **Note:** Version bump only for package @synerise/ds-tags
44
47
 
45
-
46
-
47
-
48
-
49
48
  ## [1.1.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.19...@synerise/ds-tags@1.1.20) (2025-07-24)
50
49
 
51
50
  **Note:** Version bump only for package @synerise/ds-tags
52
51
 
53
-
54
-
55
-
56
-
57
52
  ## [1.1.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.18...@synerise/ds-tags@1.1.19) (2025-07-24)
58
53
 
59
54
  **Note:** Version bump only for package @synerise/ds-tags
60
55
 
61
-
62
-
63
-
64
-
65
56
  ## [1.1.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.17...@synerise/ds-tags@1.1.18) (2025-07-17)
66
57
 
67
58
  **Note:** Version bump only for package @synerise/ds-tags
68
59
 
69
-
70
-
71
-
72
-
73
60
  ## [1.1.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.16...@synerise/ds-tags@1.1.17) (2025-07-15)
74
61
 
75
62
  **Note:** Version bump only for package @synerise/ds-tags
76
63
 
77
-
78
-
79
-
80
-
81
64
  ## [1.1.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.15...@synerise/ds-tags@1.1.16) (2025-07-08)
82
65
 
83
66
  **Note:** Version bump only for package @synerise/ds-tags
84
67
 
85
-
86
-
87
-
88
-
89
68
  ## [1.1.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.14...@synerise/ds-tags@1.1.15) (2025-07-01)
90
69
 
91
70
  **Note:** Version bump only for package @synerise/ds-tags
92
71
 
93
-
94
-
95
-
96
-
97
72
  ## [1.1.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.13...@synerise/ds-tags@1.1.14) (2025-06-26)
98
73
 
99
74
  **Note:** Version bump only for package @synerise/ds-tags
100
75
 
101
-
102
-
103
-
104
-
105
76
  ## [1.1.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.12...@synerise/ds-tags@1.1.13) (2025-06-24)
106
77
 
107
78
  **Note:** Version bump only for package @synerise/ds-tags
108
79
 
109
-
110
-
111
-
112
-
113
80
  ## [1.1.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.11...@synerise/ds-tags@1.1.12) (2025-06-12)
114
81
 
115
82
  **Note:** Version bump only for package @synerise/ds-tags
package/README.md CHANGED
@@ -11,22 +11,21 @@ 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[] | [] |
20
- | disabled | Disable entire group (all tags) | boolean | - |
21
- | manageLink | optional link visible in add tag dropdown | string | - |
22
- | onCreate | fired whenever a new tag has been created | (tagName: string) => void | - |
23
- | onSelectedChange | fired whenever the list of selected tags changes | (tags: Tag[], actionTaken: ActionTaken) => void | - |
24
- | removable | Allow removing tags from `selected` | boolean | - |
25
- | style | Tag Group container styles | React.CSSProperties | - |
26
- | selected | Selected tags | Tag[] | [] |
27
- | tagShape | Shape of tags | TagShape | - |
28
- | texts | necessary texts to render tags group | TagsTexts | {} |
29
-
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
+ | manageLink | optional link visible in add tag dropdown | string | - |
22
+ | onCreate | fired whenever a new tag has been created | (tagName: string) => void | - |
23
+ | onSelectedChange | fired whenever the list of selected tags changes | (tags: Tag[], actionTaken: ActionTaken) => void | - |
24
+ | removable | Allow removing tags from `selected` | boolean | - |
25
+ | style | Tag Group container styles | React.CSSProperties | - |
26
+ | selected | Selected tags | (Tag & {informationCardProps?: InformationCardProps})[] | [] |
27
+ | tagShape | Shape of tags | TagShape | - |
28
+ | texts | necessary texts to render tags group | TagsTexts | {} |
30
29
  ## ActionTaken
31
30
 
32
31
  | Property | Description | Type |
@@ -36,13 +35,14 @@ Tags UI Component
36
35
 
37
36
  ## TagsTexts
38
37
 
39
- | Property | Description | Type | Default |
40
- | -------------------- | ------------------------------------------------------------- | ------------------------ | ------------ |
41
- | addButtonLabel | Label for add tag button | string / React.ReactNode | |
42
- | clearTooltip | Tooltip text displayed on search clear icon hover | string / React.ReactNode | |
43
- | deleteTooltip | Tooltip text displayed on remove icon hover | string / React.ReactNode | `Delete` |
44
- | searchPlaceholder | Search input placeholder for add tag dropdown | string | |
45
- | manageLinkLabel | Label for manage link for add tag dropdown | string / React.ReactNode | |
46
- | createTagButtonLabel | Label for create tag button for add tag dropdown | string / React.ReactNode | |
47
- | noResultsLabel | Label displayed when filtering tags returns an empty array | string / React.ReactNode | `No results` |
48
- | dropdownNoTags | Text for a label displayed when no tags are found to be added | string / React.ReactNode | |
38
+ | Property | Description | Type | Default |
39
+ | -------------------- | ------------------------------------------------------------- | ------------------ | ------------ |
40
+ | addButtonLabel | Label for add tag button | string / ReactNode | |
41
+ | clearTooltip | Tooltip text displayed on search clear icon hover | string / ReactNode | |
42
+ | deleteTooltip | Tooltip text displayed on remove icon hover | string / ReactNode | `Delete` |
43
+ | searchPlaceholder | Search input placeholder for add tag dropdown | string | |
44
+ | manageLinkLabel | Label for manage link for add tag dropdown | string / ReactNode | |
45
+ | createTagButtonLabel | Label for create tag button for add tag dropdown | string / ReactNode | |
46
+ | noResultsLabel | Label displayed when filtering tags returns an empty array | string / ReactNode | `No results` |
47
+ | dropdownNoTags | Text for a label displayed when no tags are found to be added | string / ReactNode | |
48
+ | title | Text for a tags group | ReactNode | |
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, manageLink, onCreate, maxHeight, overlayStyle, overlayPlacement, asPill, onManageTagClick, }: TagsProps) => React.JSX.Element;
3
+ declare const Tags: ({ data, tagShape, onSelectedChange, disabled, removable, addable, creatable, texts, selected, style, className, manageLink, onCreate, title, maxHeight, overlayStyle, overlayPlacement, asPill, onManageTagClick, }: TagsProps) => React.JSX.Element;
4
4
  export default Tags;
package/dist/Tags.js CHANGED
@@ -1,8 +1,10 @@
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
+ import Button from '@synerise/ds-button';
3
4
  import { useTheme } from '@synerise/ds-core';
4
5
  import Dropdown from '@synerise/ds-dropdown';
5
6
  import Icon, { Add3M, SearchM, SettingsM } from '@synerise/ds-icon';
7
+ import InformationCard from '@synerise/ds-information-card';
6
8
  import Result from '@synerise/ds-result';
7
9
  import Tag from '@synerise/ds-tag';
8
10
  import * as S from './Tags.styles';
@@ -23,6 +25,7 @@ var Tags = function Tags(_ref) {
23
25
  className = _ref.className,
24
26
  manageLink = _ref.manageLink,
25
27
  onCreate = _ref.onCreate,
28
+ title = _ref.title,
26
29
  maxHeight = _ref.maxHeight,
27
30
  overlayStyle = _ref.overlayStyle,
28
31
  overlayPlacement = _ref.overlayPlacement,
@@ -35,11 +38,6 @@ var Tags = function Tags(_ref) {
35
38
  searchQuery = _React$useState2[0],
36
39
  setSearchQuery = _React$useState2[1];
37
40
  var theme = useTheme();
38
- var addIcon = /*#__PURE__*/React.createElement(S.AddIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
39
- component: /*#__PURE__*/React.createElement(Add3M, null),
40
- size: 24,
41
- color: theme.palette['grey-500']
42
- }));
43
41
  var onRemove = function onRemove(tagKey) {
44
42
  if (!onSelectedChange || !selected) {
45
43
  return;
@@ -110,7 +108,11 @@ var Tags = function Tags(_ref) {
110
108
  type: "ghost",
111
109
  onClick: onCreateNewTag,
112
110
  marginless: !isSeperated
113
- }, addIcon, /*#__PURE__*/React.createElement("span", null, texts && texts.createTagButtonLabel), /*#__PURE__*/React.createElement("strong", null, searchQuery)), isSeperated && /*#__PURE__*/React.createElement(S.Seperator, null)), !emptyPool && /*#__PURE__*/React.createElement(S.DropdownTagsContainer, {
111
+ }, /*#__PURE__*/React.createElement(Icon, {
112
+ component: /*#__PURE__*/React.createElement(Add3M, null),
113
+ size: 24,
114
+ color: theme.palette['grey-500']
115
+ }), /*#__PURE__*/React.createElement("span", null, texts && texts.createTagButtonLabel), /*#__PURE__*/React.createElement("strong", null, searchQuery)), isSeperated && /*#__PURE__*/React.createElement(S.Seperator, null)), !emptyPool && /*#__PURE__*/React.createElement(S.DropdownTagsContainer, {
114
116
  "data-testid": "ds-tags-available-tags",
115
117
  isCreatable: !!isCreatable
116
118
  }, selectablePool && selectablePool.map(function (tag) {
@@ -120,7 +122,17 @@ var Tags = function Tags(_ref) {
120
122
  onClick: function onClick() {
121
123
  return onPoolTagSelect(tag);
122
124
  },
123
- texts: texts
125
+ texts: texts,
126
+ tooltipProps: tag.informationCardProps ? _extends({
127
+ render: function render() {
128
+ return /*#__PURE__*/React.createElement(InformationCard, _extends({
129
+ title: tag.name
130
+ }, tag.informationCardProps, {
131
+ asTooltip: true
132
+ }));
133
+ },
134
+ placement: 'bottomLeft'
135
+ }, tag.tooltipProps) : undefined
124
136
  }));
125
137
  })), emptyPool && !isCreatable && !manageLink && /*#__PURE__*/React.createElement(S.DropdownNoTags, null, texts && texts.dropdownNoTags), emptyPool && isCreatable && /*#__PURE__*/React.createElement(Result, {
126
138
  type: "no-results",
@@ -148,8 +160,10 @@ var Tags = function Tags(_ref) {
148
160
  className: "ds-tags " + (className || ''),
149
161
  style: style,
150
162
  "data-testid": "tags"
151
- }, /*#__PURE__*/React.createElement(S.SelectedTags, null, selected && selected.map(function (tag) {
152
- return /*#__PURE__*/React.createElement(Tag, _extends({
163
+ }, title && /*#__PURE__*/React.createElement(S.Title, {
164
+ shape: tagShape
165
+ }, title), /*#__PURE__*/React.createElement(S.TagsWrapper, null, /*#__PURE__*/React.createElement(S.SelectedTags, null, selected && selected.map(function (tag) {
166
+ return /*#__PURE__*/React.createElement(S.TagOverflow, null, /*#__PURE__*/React.createElement(Tag, _extends({
153
167
  key: tag.id,
154
168
  shape: tagShape,
155
169
  removable: removable,
@@ -157,7 +171,18 @@ var Tags = function Tags(_ref) {
157
171
  disabled: disabled,
158
172
  texts: texts,
159
173
  asPill: asPill
160
- }, tag));
174
+ }, tag, {
175
+ tooltipProps: tag.informationCardProps ? _extends({
176
+ render: function render() {
177
+ return /*#__PURE__*/React.createElement(InformationCard, _extends({
178
+ title: tag.name
179
+ }, tag.informationCardProps, {
180
+ asTooltip: true
181
+ }));
182
+ },
183
+ placement: 'bottomLeft'
184
+ }, tag.tooltipProps) : undefined
185
+ })));
161
186
  }), addable && /*#__PURE__*/React.createElement(Dropdown, {
162
187
  trigger: ['click'],
163
188
  placement: overlayPlacement,
@@ -165,9 +190,13 @@ var Tags = function Tags(_ref) {
165
190
  onVisibleChange: setAddingState,
166
191
  overlay: dropdownOverlay,
167
192
  overlayStyle: overlayStyle
168
- }, /*#__PURE__*/React.createElement(S.AddButton, {
193
+ }, /*#__PURE__*/React.createElement(Button, {
169
194
  type: "ghost",
170
- marginless: selected && !selected.length ? true : undefined
171
- }, addIcon, texts && texts.addButtonLabel && /*#__PURE__*/React.createElement("span", null, texts.addButtonLabel)))));
195
+ mode: texts != null && texts.addButtonLabel ? 'icon-label' : 'single-icon'
196
+ }, /*#__PURE__*/React.createElement(Icon, {
197
+ component: /*#__PURE__*/React.createElement(Add3M, null),
198
+ size: 24,
199
+ color: theme.palette['grey-500']
200
+ }), texts && texts.addButtonLabel)))));
172
201
  };
173
202
  export default Tags;
package/dist/Tags.styles.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import Button from '@synerise/ds-button';
2
2
  import { type ScrollbarProps } from '@synerise/ds-scrollbar/dist/Scrollbar.types';
3
+ import { type TagShape } from '@synerise/ds-tag';
3
4
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const SelectedTags: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const AddButton: import("styled-components").StyledComponent<typeof Button, any, {
6
- marginless?: boolean;
5
+ export declare const TagOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const TagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const Title: import("styled-components").StyledComponent<"div", any, {
8
+ shape?: TagShape;
7
9
  }, never>;
8
- export declare const AddIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const SelectedTags: import("styled-components").StyledComponent<"div", any, {}, never>;
9
11
  export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<typeof Button, any, {
10
12
  marginless: boolean;
11
13
  }, never>;
package/dist/Tags.styles.js CHANGED
@@ -6,58 +6,62 @@ import SearchBar from '@synerise/ds-search-bar/';
6
6
  export var Container = styled.div.withConfig({
7
7
  displayName: "Tagsstyles__Container",
8
8
  componentId: "sc-156lf0a-0"
9
- })(["margin-bottom:24px;display:flex;align-items:flex-start;flex-direction:row;flex-wrap:wrap;"]);
10
- export var SelectedTags = styled.div.withConfig({
11
- displayName: "Tagsstyles__SelectedTags",
9
+ })(["display:flex;"]);
10
+ export var TagOverflow = styled.div.withConfig({
11
+ displayName: "Tagsstyles__TagOverflow",
12
12
  componentId: "sc-156lf0a-1"
13
- })(["display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap;&& .ds-tag{margin:4px;}"]);
14
- export var AddButton = styled(Button).withConfig({
15
- displayName: "Tagsstyles__AddButton",
13
+ })(["display:flex;height:32px;align-items:center;"]);
14
+ export var TagsWrapper = styled.div.withConfig({
15
+ displayName: "Tagsstyles__TagsWrapper",
16
16
  componentId: "sc-156lf0a-2"
17
- })(["margin:", ";span{padding:0 4px;}"], function (props) {
18
- return props.marginless ? '0' : '0 0 0 4px';
19
- });
20
- export var AddIconWrapper = styled.div.withConfig({
21
- displayName: "Tagsstyles__AddIconWrapper",
17
+ })(["margin-bottom:24px;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;"]);
18
+ export var Title = styled.div.withConfig({
19
+ displayName: "Tagsstyles__Title",
22
20
  componentId: "sc-156lf0a-3"
23
- })(["display:inline-block;"]);
21
+ })(["color:", ";font-weight:500;display:block;margin:6px 4px 0 0;"], function (props) {
22
+ return props.theme.palette['grey-800'];
23
+ });
24
+ export var SelectedTags = styled.div.withConfig({
25
+ displayName: "Tagsstyles__SelectedTags",
26
+ componentId: "sc-156lf0a-4"
27
+ })(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;&& .ds-tag{margin:4px;}"]);
24
28
  export var CreateTagDropdownButton = styled(Button).withConfig({
25
29
  displayName: "Tagsstyles__CreateTagDropdownButton",
26
- componentId: "sc-156lf0a-4"
27
- })(["margin:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;position:absolute;", "{justify-content:flex-start;}&&{font-weight:400;text-align:left;width:100%;justify-content:flex-start;", "{transform:translate(-4px,0px);}}strong{font-weight:500;margin:0 0 0 3px;display:block;overflow:hidden;text-overflow:ellipsis;}"], function (props) {
30
+ componentId: "sc-156lf0a-5"
31
+ })(["margin:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;position:absolute;", "{justify-content:flex-start;}&&{font-weight:400;text-align:left;width:100%;justify-content:flex-start;}strong{font-weight:500;margin:0 0 0 3px;display:block;overflow:hidden;text-overflow:ellipsis;}"], function (props) {
28
32
  return props.marginless ? '0' : '0 0 8px';
29
- }, ButtonLabel, AddIconWrapper);
33
+ }, ButtonLabel);
30
34
  export var ManageLinkButton = styled(Button).withConfig({
31
35
  displayName: "Tagsstyles__ManageLinkButton",
32
- componentId: "sc-156lf0a-5"
36
+ componentId: "sc-156lf0a-6"
33
37
  })(["margin:8px 0px;"]);
34
38
  export var Seperator = styled.hr.withConfig({
35
39
  displayName: "Tagsstyles__Seperator",
36
- componentId: "sc-156lf0a-6"
40
+ componentId: "sc-156lf0a-7"
37
41
  })(["width:auto;margin:0;padding:0;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) {
38
42
  return props.theme.palette['grey-300'];
39
43
  });
40
44
  export var DropdownContainer = styled(Scrollbar).withConfig({
41
45
  displayName: "Tagsstyles__DropdownContainer",
42
- componentId: "sc-156lf0a-7"
46
+ componentId: "sc-156lf0a-8"
43
47
  })(["display:flex;flex-direction:column;"]);
44
48
  export var DropdownTagsContainer = styled.div.withConfig({
45
49
  displayName: "Tagsstyles__DropdownTagsContainer",
46
- componentId: "sc-156lf0a-8"
50
+ componentId: "sc-156lf0a-9"
47
51
  })(["display:flex;flex-direction:column;padding:", ";max-height:320px;> *{width:fit-content;max-width:fit-content;display:block;width:inherit;cursor:pointer;flex-shrink:0;}"], function (props) {
48
52
  return props.isCreatable ? '8px 0 0' : '0';
49
53
  });
50
54
  export var DropdownSearch = styled(SearchBar).withConfig({
51
55
  displayName: "Tagsstyles__DropdownSearch",
52
- componentId: "sc-156lf0a-9"
56
+ componentId: "sc-156lf0a-10"
53
57
  })(["&&{margin:0 !important;}"]);
54
58
  export var DropdownNoTags = styled.div.withConfig({
55
59
  displayName: "Tagsstyles__DropdownNoTags",
56
- componentId: "sc-156lf0a-10"
60
+ componentId: "sc-156lf0a-11"
57
61
  })(["padding:8px 20px;"]);
58
62
  export var Overlay = styled.div.withConfig({
59
63
  displayName: "Tagsstyles__Overlay",
60
- componentId: "sc-156lf0a-11"
64
+ componentId: "sc-156lf0a-12"
61
65
  })(["width:216px;background-color:", ";"], function (props) {
62
66
  return props.theme.palette.white;
63
67
  });
package/dist/Tags.types.d.ts CHANGED
@@ -1,16 +1,22 @@
1
- import type { CSSProperties } from 'react';
1
+ import type { CSSProperties, ReactNode } from 'react';
2
+ import { type InformationCardProps } from '@synerise/ds-information-card';
2
3
  import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
3
4
  export type ActionTaken = {
4
5
  type: 'ADD' | 'REMOVE';
5
6
  tag: TagProps;
6
7
  };
7
8
  export type TagsProps = {
8
- data?: Array<TagProps>;
9
- selected?: Array<TagProps>;
9
+ data?: Array<TagProps & {
10
+ informationCardProps?: InformationCardProps;
11
+ }>;
12
+ selected?: Array<TagProps & {
13
+ informationCardProps?: InformationCardProps;
14
+ }>;
10
15
  tagShape?: TagShape;
11
16
  className?: string;
12
17
  style?: CSSProperties;
13
18
  addable?: boolean;
19
+ title?: ReactNode;
14
20
  removable?: boolean;
15
21
  creatable?: boolean;
16
22
  disabled?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-tags",
3
- "version": "1.1.25",
3
+ "version": "1.2.0",
4
4
  "description": "Tags UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,14 +35,15 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.4.10",
39
- "@synerise/ds-dropdown": "^1.0.22",
38
+ "@synerise/ds-button": "^1.4.11",
39
+ "@synerise/ds-dropdown": "^1.0.23",
40
40
  "@synerise/ds-icon": "^1.7.2",
41
- "@synerise/ds-result": "^1.0.23",
41
+ "@synerise/ds-information-card": "^1.1.0",
42
+ "@synerise/ds-result": "^1.0.24",
42
43
  "@synerise/ds-scrollbar": "^1.1.8",
43
- "@synerise/ds-search-bar": "^1.3.11",
44
- "@synerise/ds-tag": "^1.1.18",
45
- "@synerise/ds-tooltip": "^1.1.18",
44
+ "@synerise/ds-search-bar": "^1.3.12",
45
+ "@synerise/ds-tag": "^1.2.0",
46
+ "@synerise/ds-tooltip": "^1.2.0",
46
47
  "@synerise/ds-utils": "^1.4.2"
47
48
  },
48
49
  "peerDependencies": {
@@ -50,5 +51,5 @@
50
51
  "react": ">=16.9.0 <= 18.3.1",
51
52
  "styled-components": "^5.3.3"
52
53
  },
53
- "gitHead": "5beb6ab5f2d77b9e98e04caab7dff20b8436078b"
54
+ "gitHead": "5029af8713235b315d36bb3c73363f2feca86da0"
54
55
  }