@synerise/ds-tags 1.1.25 → 1.3.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.
- package/CHANGELOG.md +19 -41
- package/README.md +27 -25
- package/dist/Tags.d.ts +1 -1
- package/dist/Tags.js +46 -119
- package/dist/Tags.styles.d.ts +6 -20
- package/dist/Tags.styles.js +15 -55
- package/dist/Tags.types.d.ts +10 -5
- package/dist/components/AddTags/AddTags.d.ts +19 -0
- package/dist/components/AddTags/AddTags.js +105 -0
- package/dist/components/AddTags/AddTags.styles.d.ts +5 -0
- package/dist/components/AddTags/AddTags.styles.js +15 -0
- package/dist/components/LimitedTags/LimitedTags.d.ts +13 -0
- package/dist/components/LimitedTags/LimitedTags.js +27 -0
- package/dist/components/TagsDropdown/TagsDropdown.d.ts +21 -0
- package/dist/components/TagsDropdown/TagsDropdown.js +70 -0
- package/dist/components/TagsDropdown/TagsDropdown.styles.d.ts +4 -0
- package/dist/components/TagsDropdown/TagsDropdown.styles.js +16 -0
- package/dist/index.d.ts +1 -1
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,34 +3,34 @@
|
|
|
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
|
-
|
|
6
|
+
# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.2.0...@synerise/ds-tags@1.3.0) (2025-09-23)
|
|
7
7
|
|
|
8
|
-
**Note:** Version bump only for package @synerise/ds-tags
|
|
9
8
|
|
|
9
|
+
### Features
|
|
10
10
|
|
|
11
|
+
* **tags:** add dropdownFooter and maxVisibleTags ([cfb0358](https://github.com/Synerise/synerise-design/commit/cfb035830ea4fd8ec5ba800985f1bea50194f25c))
|
|
11
12
|
|
|
12
13
|
|
|
13
14
|
|
|
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)
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
* **tags:** dropdown min width ([fe2a609](https://github.com/Synerise/synerise-design/commit/fe2a609149374271642ab268f42501aa138c4c5b))
|
|
17
|
+
# [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)
|
|
20
18
|
|
|
21
19
|
|
|
20
|
+
### Bug Fixes
|
|
22
21
|
|
|
22
|
+
* **tags:** add title label to tags group ([b1ca594](https://github.com/Synerise/synerise-design/commit/b1ca5946cfa427e51d581efa4cdabe4fca5813e0))
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
### Features
|
|
26
26
|
|
|
27
|
-
**
|
|
27
|
+
* **tag:** Implementation Infocard in Tag component ([d1f31fa](https://github.com/Synerise/synerise-design/commit/d1f31fa44a73da3787df1966e2046c5a577afd96))
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
## [1.1.
|
|
33
|
+
## [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)
|
|
34
34
|
|
|
35
35
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
36
36
|
|
|
@@ -38,78 +38,56 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
## [1.1.
|
|
42
|
-
|
|
43
|
-
**Note:** Version bump only for package @synerise/ds-tags
|
|
41
|
+
## [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)
|
|
44
42
|
|
|
43
|
+
### Bug Fixes
|
|
45
44
|
|
|
45
|
+
- **tags:** dropdown min width ([fe2a609](https://github.com/Synerise/synerise-design/commit/fe2a609149374271642ab268f42501aa138c4c5b))
|
|
46
46
|
|
|
47
|
+
## [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)
|
|
47
48
|
|
|
49
|
+
**Note:** Version bump only for package @synerise/ds-tags
|
|
48
50
|
|
|
49
|
-
## [1.1.
|
|
51
|
+
## [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)
|
|
50
52
|
|
|
51
53
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
52
54
|
|
|
55
|
+
## [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)
|
|
53
56
|
|
|
57
|
+
**Note:** Version bump only for package @synerise/ds-tags
|
|
54
58
|
|
|
59
|
+
## [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)
|
|
55
60
|
|
|
61
|
+
**Note:** Version bump only for package @synerise/ds-tags
|
|
56
62
|
|
|
57
63
|
## [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
64
|
|
|
59
65
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
60
66
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
67
|
## [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
68
|
|
|
67
69
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
68
70
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
71
|
## [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
72
|
|
|
75
73
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
76
74
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
75
|
## [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
76
|
|
|
83
77
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
84
78
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
79
|
## [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
80
|
|
|
91
81
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
92
82
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
83
|
## [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
84
|
|
|
99
85
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
100
86
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
87
|
## [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
88
|
|
|
107
89
|
**Note:** Version bump only for package @synerise/ds-tags
|
|
108
90
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
91
|
## [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
92
|
|
|
115
93
|
**Note:** Version bump only for package @synerise/ds-tags
|
package/README.md
CHANGED
|
@@ -11,21 +11,22 @@ Tags UI Component
|
|
|
11
11
|
|
|
12
12
|
## Tags API (Group of <Tag />)
|
|
13
13
|
|
|
14
|
-
| Property | Description
|
|
15
|
-
|
|
16
|
-
| addable | Allow adding tags from `data` (which are not present in `selected`)
|
|
17
|
-
| className | Tag Group container class
|
|
18
|
-
| creatable | Allow creating new tags
|
|
19
|
-
| data | All available tags
|
|
20
|
-
| disabled | Disable entire group (all tags)
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
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 | - |
|
|
29
30
|
|
|
30
31
|
## ActionTaken
|
|
31
32
|
|
|
@@ -36,13 +37,14 @@ Tags UI Component
|
|
|
36
37
|
|
|
37
38
|
## TagsTexts
|
|
38
39
|
|
|
39
|
-
| Property | Description | Type
|
|
40
|
-
| -------------------- | ------------------------------------------------------------- |
|
|
41
|
-
| addButtonLabel | Label for add tag button | string /
|
|
42
|
-
| clearTooltip | Tooltip text displayed on search clear icon hover | string /
|
|
43
|
-
| deleteTooltip | Tooltip text displayed on remove icon hover | string /
|
|
44
|
-
| searchPlaceholder | Search input placeholder for add tag dropdown | string
|
|
45
|
-
| manageLinkLabel | Label for manage link for add tag dropdown | string /
|
|
46
|
-
| createTagButtonLabel | Label for create tag button for add tag dropdown | string /
|
|
47
|
-
| noResultsLabel | Label displayed when filtering tags returns an empty array | string /
|
|
48
|
-
| dropdownNoTags | Text for a label displayed when no tags are found to be added | string /
|
|
40
|
+
| Property | Description | Type | Default |
|
|
41
|
+
| -------------------- | ------------------------------------------------------------- | ------------------ | ------------ |
|
|
42
|
+
| addButtonLabel | Label for add tag button | string / ReactNode | |
|
|
43
|
+
| clearTooltip | Tooltip text displayed on search clear icon hover | string / ReactNode | |
|
|
44
|
+
| deleteTooltip | Tooltip text displayed on remove icon hover | string / ReactNode | `Delete` |
|
|
45
|
+
| searchPlaceholder | Search input placeholder for add tag dropdown | string | |
|
|
46
|
+
| manageLinkLabel | Label for manage link for add tag dropdown | string / ReactNode | |
|
|
47
|
+
| createTagButtonLabel | Label for create tag button for add tag dropdown | string / ReactNode | |
|
|
48
|
+
| noResultsLabel | Label displayed when filtering tags returns an empty array | string / ReactNode | `No results` |
|
|
49
|
+
| dropdownNoTags | Text for a label displayed when no tags are found to be added | string / ReactNode | |
|
|
50
|
+
| 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,
|
|
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;
|
|
4
4
|
export default Tags;
|
package/dist/Tags.js
CHANGED
|
@@ -1,11 +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
|
|
4
|
-
import Dropdown from '@synerise/ds-dropdown';
|
|
5
|
-
import Icon, { Add3M, SearchM, SettingsM } from '@synerise/ds-icon';
|
|
6
|
-
import Result from '@synerise/ds-result';
|
|
3
|
+
import InformationCard from '@synerise/ds-information-card';
|
|
7
4
|
import Tag from '@synerise/ds-tag';
|
|
8
5
|
import * as S from './Tags.styles';
|
|
6
|
+
import { AddTags } from './components/AddTags/AddTags';
|
|
7
|
+
import { LimitedTags } from './components/LimitedTags/LimitedTags';
|
|
9
8
|
var Tags = function Tags(_ref) {
|
|
10
9
|
var _ref$data = _ref.data,
|
|
11
10
|
data = _ref$data === void 0 ? [] : _ref$data,
|
|
@@ -21,25 +20,17 @@ var Tags = function Tags(_ref) {
|
|
|
21
20
|
selected = _ref$selected === void 0 ? [] : _ref$selected,
|
|
22
21
|
style = _ref.style,
|
|
23
22
|
className = _ref.className,
|
|
24
|
-
manageLink = _ref.manageLink,
|
|
25
23
|
onCreate = _ref.onCreate,
|
|
24
|
+
title = _ref.title,
|
|
26
25
|
maxHeight = _ref.maxHeight,
|
|
27
26
|
overlayStyle = _ref.overlayStyle,
|
|
28
27
|
overlayPlacement = _ref.overlayPlacement,
|
|
29
28
|
asPill = _ref.asPill,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var
|
|
35
|
-
searchQuery = _React$useState2[0],
|
|
36
|
-
setSearchQuery = _React$useState2[1];
|
|
37
|
-
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
|
-
}));
|
|
29
|
+
dropdownFooter = _ref.dropdownFooter,
|
|
30
|
+
maxVisibleTags = _ref.maxVisibleTags;
|
|
31
|
+
var isMaxVisibleTagsDefined = typeof maxVisibleTags === 'number';
|
|
32
|
+
var visibleSelectedTags = isMaxVisibleTagsDefined ? selected.slice(0, maxVisibleTags) : selected;
|
|
33
|
+
var areLimitedTags = isMaxVisibleTagsDefined && selected.length > maxVisibleTags;
|
|
43
34
|
var onRemove = function onRemove(tagKey) {
|
|
44
35
|
if (!onSelectedChange || !selected) {
|
|
45
36
|
return;
|
|
@@ -57,99 +48,14 @@ var Tags = function Tags(_ref) {
|
|
|
57
48
|
tag: removedTag
|
|
58
49
|
});
|
|
59
50
|
};
|
|
60
|
-
var notSelectedList = data && selected && data.filter(function (t) {
|
|
61
|
-
return !selected.find(function (s) {
|
|
62
|
-
return s.id === t.id;
|
|
63
|
-
});
|
|
64
|
-
});
|
|
65
|
-
var selectablePool = !searchQuery ? notSelectedList : notSelectedList && notSelectedList.filter(function (t) {
|
|
66
|
-
return t.name && t.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
67
|
-
});
|
|
68
|
-
var isExactMatchFound = searchQuery && selectablePool && selectablePool.find(function (t) {
|
|
69
|
-
return t.name === searchQuery;
|
|
70
|
-
});
|
|
71
|
-
var emptyPool = selectablePool && selectablePool.length === 0;
|
|
72
|
-
var isCreatable = creatable && !isExactMatchFound && searchQuery;
|
|
73
|
-
var isSeperated = !(!manageLink && emptyPool);
|
|
74
|
-
var reset = function reset() {
|
|
75
|
-
setAddingState(false);
|
|
76
|
-
setSearchQuery('');
|
|
77
|
-
};
|
|
78
|
-
var onPoolTagSelect = function onPoolTagSelect(tag) {
|
|
79
|
-
onSelectedChange && selected && onSelectedChange([].concat(selected, [tag]), {
|
|
80
|
-
type: 'ADD',
|
|
81
|
-
tag: tag
|
|
82
|
-
});
|
|
83
|
-
reset();
|
|
84
|
-
};
|
|
85
|
-
var onCreateNewTag = function onCreateNewTag() {
|
|
86
|
-
onCreate && onCreate(searchQuery);
|
|
87
|
-
reset();
|
|
88
|
-
};
|
|
89
|
-
var dropdownOverlay = /*#__PURE__*/React.createElement(S.Overlay, {
|
|
90
|
-
"data-testid": "dropdown"
|
|
91
|
-
}, /*#__PURE__*/React.createElement(S.DropdownSearch, {
|
|
92
|
-
value: searchQuery,
|
|
93
|
-
onSearchChange: setSearchQuery,
|
|
94
|
-
placeholder: texts && texts.searchPlaceholder || '',
|
|
95
|
-
iconLeft: /*#__PURE__*/React.createElement(Icon, {
|
|
96
|
-
component: /*#__PURE__*/React.createElement(SearchM, null),
|
|
97
|
-
color: theme.palette['grey-600']
|
|
98
|
-
}),
|
|
99
|
-
onClearInput: function onClearInput() {
|
|
100
|
-
return setSearchQuery('');
|
|
101
|
-
},
|
|
102
|
-
clearTooltip: texts && texts.clearTooltip
|
|
103
|
-
}), /*#__PURE__*/React.createElement(S.DropdownContainer, {
|
|
104
|
-
maxHeight: maxHeight,
|
|
105
|
-
style: {
|
|
106
|
-
padding: '12px'
|
|
107
|
-
}
|
|
108
|
-
}, isCreatable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.CreateTagDropdownButton, {
|
|
109
|
-
"data-testid": "ds-tags-create-button",
|
|
110
|
-
type: "ghost",
|
|
111
|
-
onClick: onCreateNewTag,
|
|
112
|
-
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, {
|
|
114
|
-
"data-testid": "ds-tags-available-tags",
|
|
115
|
-
isCreatable: !!isCreatable
|
|
116
|
-
}, selectablePool && selectablePool.map(function (tag) {
|
|
117
|
-
return /*#__PURE__*/React.createElement(Tag, _extends({}, tag, {
|
|
118
|
-
key: tag.id,
|
|
119
|
-
shape: tagShape,
|
|
120
|
-
onClick: function onClick() {
|
|
121
|
-
return onPoolTagSelect(tag);
|
|
122
|
-
},
|
|
123
|
-
texts: texts
|
|
124
|
-
}));
|
|
125
|
-
})), emptyPool && !isCreatable && !manageLink && /*#__PURE__*/React.createElement(S.DropdownNoTags, null, texts && texts.dropdownNoTags), emptyPool && isCreatable && /*#__PURE__*/React.createElement(Result, {
|
|
126
|
-
type: "no-results",
|
|
127
|
-
noSearchResults: true,
|
|
128
|
-
description: (texts == null ? void 0 : texts.noResultsLabel) || 'No results'
|
|
129
|
-
})), manageLink && selectablePool && !selectablePool.length && /*#__PURE__*/React.createElement(Dropdown.BottomAction, {
|
|
130
|
-
onClickAction: function onClickAction() {
|
|
131
|
-
onManageTagClick && onManageTagClick();
|
|
132
|
-
},
|
|
133
|
-
style: {
|
|
134
|
-
padding: '0 8px',
|
|
135
|
-
cursor: 'auto'
|
|
136
|
-
}
|
|
137
|
-
}, /*#__PURE__*/React.createElement(S.ManageLinkButton, {
|
|
138
|
-
type: "ghost",
|
|
139
|
-
mode: "icon-label",
|
|
140
|
-
href: manageLink,
|
|
141
|
-
onlyChild: !!(emptyPool && !isCreatable)
|
|
142
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
143
|
-
component: /*#__PURE__*/React.createElement(SettingsM, null),
|
|
144
|
-
size: 20,
|
|
145
|
-
color: theme.palette['grey-500']
|
|
146
|
-
}), ' ', texts && texts.manageLinkLabel)));
|
|
147
51
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
148
52
|
className: "ds-tags " + (className || ''),
|
|
149
53
|
style: style,
|
|
150
54
|
"data-testid": "tags"
|
|
151
|
-
}, /*#__PURE__*/React.createElement(S.
|
|
152
|
-
|
|
55
|
+
}, title && /*#__PURE__*/React.createElement(S.Title, {
|
|
56
|
+
shape: tagShape
|
|
57
|
+
}, title), /*#__PURE__*/React.createElement(S.TagsWrapper, null, /*#__PURE__*/React.createElement(S.SelectedTags, null, visibleSelectedTags && visibleSelectedTags.map(function (tag) {
|
|
58
|
+
return /*#__PURE__*/React.createElement(S.TagOverflow, null, /*#__PURE__*/React.createElement(Tag, _extends({
|
|
153
59
|
key: tag.id,
|
|
154
60
|
shape: tagShape,
|
|
155
61
|
removable: removable,
|
|
@@ -157,17 +63,38 @@ var Tags = function Tags(_ref) {
|
|
|
157
63
|
disabled: disabled,
|
|
158
64
|
texts: texts,
|
|
159
65
|
asPill: asPill
|
|
160
|
-
}, tag
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
66
|
+
}, tag, {
|
|
67
|
+
tooltipProps: tag.informationCardProps ? _extends({
|
|
68
|
+
render: function render() {
|
|
69
|
+
return /*#__PURE__*/React.createElement(InformationCard, _extends({
|
|
70
|
+
title: tag.name
|
|
71
|
+
}, tag.informationCardProps, {
|
|
72
|
+
asTooltip: true
|
|
73
|
+
}));
|
|
74
|
+
},
|
|
75
|
+
placement: 'bottomLeft'
|
|
76
|
+
}, tag.tooltipProps) : undefined
|
|
77
|
+
})));
|
|
78
|
+
}), areLimitedTags && /*#__PURE__*/React.createElement(LimitedTags, {
|
|
79
|
+
selected: selected,
|
|
80
|
+
maxVisibleTags: maxVisibleTags,
|
|
81
|
+
tagShape: tagShape,
|
|
82
|
+
removable: removable,
|
|
83
|
+
onRemove: removable ? onRemove : undefined,
|
|
84
|
+
disabled: disabled,
|
|
85
|
+
asPill: asPill
|
|
86
|
+
}), addable && /*#__PURE__*/React.createElement(AddTags, {
|
|
87
|
+
data: data,
|
|
88
|
+
selected: selected,
|
|
89
|
+
creatable: creatable,
|
|
90
|
+
overlayPlacement: overlayPlacement,
|
|
91
|
+
overlayStyle: overlayStyle,
|
|
92
|
+
texts: texts,
|
|
93
|
+
tagShape: tagShape,
|
|
94
|
+
maxHeight: maxHeight,
|
|
95
|
+
dropdownFooter: dropdownFooter,
|
|
96
|
+
onSelectedChange: onSelectedChange,
|
|
97
|
+
onCreate: onCreate
|
|
98
|
+
}))));
|
|
172
99
|
};
|
|
173
100
|
export default Tags;
|
package/dist/Tags.styles.d.ts
CHANGED
|
@@ -1,22 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { type ScrollbarProps } from '@synerise/ds-scrollbar/dist/Scrollbar.types';
|
|
1
|
+
import { type TagShape } from '@synerise/ds-tag';
|
|
3
2
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export declare const AddIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
-
export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<typeof Button, any, {
|
|
10
|
-
marginless: boolean;
|
|
11
|
-
}, never>;
|
|
12
|
-
export declare const ManageLinkButton: import("styled-components").StyledComponent<typeof Button, any, {
|
|
13
|
-
onlyChild: boolean;
|
|
3
|
+
export declare const TagOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const TagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const Title: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
shape?: TagShape;
|
|
14
7
|
}, never>;
|
|
15
|
-
export declare const
|
|
16
|
-
export declare const DropdownContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
|
|
17
|
-
export declare const DropdownTagsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
-
isCreatable: boolean;
|
|
19
|
-
}, never>;
|
|
20
|
-
export declare const DropdownSearch: import("styled-components").StyledComponent<({ value, className, onSearchChange, onClearInput, placeholder, iconLeft, autofocus, clearTooltip, disabled, borderRadius, handleInputRef, autofocusDelay, clearTooltipProps, valuePrefix, ...htmlAttributes }: import("@synerise/ds-search-bar/").SearchBarProps) => React.JSX.Element, any, {}, never>;
|
|
21
|
-
export declare const DropdownNoTags: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
-
export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const SelectedTags: import("styled-components").StyledComponent<"div", any, {}, never>;
|
package/dist/Tags.styles.js
CHANGED
|
@@ -1,63 +1,23 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import Button from '@synerise/ds-button';
|
|
3
|
-
import { ButtonLabel } from '@synerise/ds-button/dist/Button.styles';
|
|
4
|
-
import Scrollbar from '@synerise/ds-scrollbar';
|
|
5
|
-
import SearchBar from '@synerise/ds-search-bar/';
|
|
6
2
|
export var Container = styled.div.withConfig({
|
|
7
3
|
displayName: "Tagsstyles__Container",
|
|
8
4
|
componentId: "sc-156lf0a-0"
|
|
9
|
-
})(["
|
|
10
|
-
export var
|
|
11
|
-
displayName: "
|
|
5
|
+
})(["display:flex;"]);
|
|
6
|
+
export var TagOverflow = styled.div.withConfig({
|
|
7
|
+
displayName: "Tagsstyles__TagOverflow",
|
|
12
8
|
componentId: "sc-156lf0a-1"
|
|
13
|
-
})(["display:flex;
|
|
14
|
-
export var
|
|
15
|
-
displayName: "
|
|
9
|
+
})(["display:flex;height:32px;align-items:center;"]);
|
|
10
|
+
export var TagsWrapper = styled.div.withConfig({
|
|
11
|
+
displayName: "Tagsstyles__TagsWrapper",
|
|
16
12
|
componentId: "sc-156lf0a-2"
|
|
17
|
-
})(["margin:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
export var AddIconWrapper = styled.div.withConfig({
|
|
21
|
-
displayName: "Tagsstyles__AddIconWrapper",
|
|
13
|
+
})(["margin-bottom:24px;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;"]);
|
|
14
|
+
export var Title = styled.div.withConfig({
|
|
15
|
+
displayName: "Tagsstyles__Title",
|
|
22
16
|
componentId: "sc-156lf0a-3"
|
|
23
|
-
})(["display:
|
|
24
|
-
|
|
25
|
-
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) {
|
|
28
|
-
return props.marginless ? '0' : '0 0 8px';
|
|
29
|
-
}, ButtonLabel, AddIconWrapper);
|
|
30
|
-
export var ManageLinkButton = styled(Button).withConfig({
|
|
31
|
-
displayName: "Tagsstyles__ManageLinkButton",
|
|
32
|
-
componentId: "sc-156lf0a-5"
|
|
33
|
-
})(["margin:8px 0px;"]);
|
|
34
|
-
export var Seperator = styled.hr.withConfig({
|
|
35
|
-
displayName: "Tagsstyles__Seperator",
|
|
36
|
-
componentId: "sc-156lf0a-6"
|
|
37
|
-
})(["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
|
-
return props.theme.palette['grey-300'];
|
|
17
|
+
})(["color:", ";font-weight:500;display:block;margin:6px 4px 0 0;"], function (props) {
|
|
18
|
+
return props.theme.palette['grey-800'];
|
|
39
19
|
});
|
|
40
|
-
export var
|
|
41
|
-
displayName: "
|
|
42
|
-
componentId: "sc-156lf0a-
|
|
43
|
-
})(["display:flex;flex-direction:
|
|
44
|
-
export var DropdownTagsContainer = styled.div.withConfig({
|
|
45
|
-
displayName: "Tagsstyles__DropdownTagsContainer",
|
|
46
|
-
componentId: "sc-156lf0a-8"
|
|
47
|
-
})(["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
|
-
return props.isCreatable ? '8px 0 0' : '0';
|
|
49
|
-
});
|
|
50
|
-
export var DropdownSearch = styled(SearchBar).withConfig({
|
|
51
|
-
displayName: "Tagsstyles__DropdownSearch",
|
|
52
|
-
componentId: "sc-156lf0a-9"
|
|
53
|
-
})(["&&{margin:0 !important;}"]);
|
|
54
|
-
export var DropdownNoTags = styled.div.withConfig({
|
|
55
|
-
displayName: "Tagsstyles__DropdownNoTags",
|
|
56
|
-
componentId: "sc-156lf0a-10"
|
|
57
|
-
})(["padding:8px 20px;"]);
|
|
58
|
-
export var Overlay = styled.div.withConfig({
|
|
59
|
-
displayName: "Tagsstyles__Overlay",
|
|
60
|
-
componentId: "sc-156lf0a-11"
|
|
61
|
-
})(["width:216px;background-color:", ";"], function (props) {
|
|
62
|
-
return props.theme.palette.white;
|
|
63
|
-
});
|
|
20
|
+
export var SelectedTags = styled.div.withConfig({
|
|
21
|
+
displayName: "Tagsstyles__SelectedTags",
|
|
22
|
+
componentId: "sc-156lf0a-4"
|
|
23
|
+
})(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;&& .ds-tag{margin:4px;}"]);
|
package/dist/Tags.types.d.ts
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
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
|
};
|
|
8
|
+
export type ExtendedTagProps = TagProps & {
|
|
9
|
+
informationCardProps?: InformationCardProps;
|
|
10
|
+
};
|
|
7
11
|
export type TagsProps = {
|
|
8
|
-
data?:
|
|
9
|
-
selected?:
|
|
12
|
+
data?: ExtendedTagProps[];
|
|
13
|
+
selected?: ExtendedTagProps[];
|
|
10
14
|
tagShape?: TagShape;
|
|
11
15
|
className?: string;
|
|
12
16
|
style?: CSSProperties;
|
|
13
17
|
addable?: boolean;
|
|
18
|
+
title?: ReactNode;
|
|
14
19
|
removable?: boolean;
|
|
15
20
|
creatable?: boolean;
|
|
16
21
|
disabled?: boolean;
|
|
17
|
-
manageLink?: string;
|
|
18
22
|
texts?: TagTexts;
|
|
19
23
|
/**
|
|
20
24
|
* @deprecated deprecated in favour of useTheme hook
|
|
@@ -28,7 +32,8 @@ export type TagsProps = {
|
|
|
28
32
|
maxHeight?: number;
|
|
29
33
|
overlayPlacement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
|
|
30
34
|
asPill?: boolean;
|
|
31
|
-
|
|
35
|
+
dropdownFooter?: ReactNode;
|
|
36
|
+
maxVisibleTags?: number;
|
|
32
37
|
};
|
|
33
38
|
/**
|
|
34
39
|
* @deprecated - use TagsProps instead
|
|
@@ -0,0 +1,19 @@
|
|
|
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;
|
|
17
|
+
};
|
|
18
|
+
export declare const AddTags: ({ creatable, data, selected, overlayPlacement, overlayStyle, texts, tagShape, maxHeight, dropdownFooter, onSelectedChange, onCreate, }: AddTagsProps) => React.JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import Button from '@synerise/ds-button';
|
|
3
|
+
import { useTheme } from '@synerise/ds-core';
|
|
4
|
+
import Icon, { Add3M, SearchM } from '@synerise/ds-icon';
|
|
5
|
+
import Result from '@synerise/ds-result';
|
|
6
|
+
import SearchBar from '@synerise/ds-search-bar';
|
|
7
|
+
import { TagsDropdown } from '../TagsDropdown/TagsDropdown';
|
|
8
|
+
import * as S from './AddTags.styles';
|
|
9
|
+
export var AddTags = function AddTags(_ref) {
|
|
10
|
+
var creatable = _ref.creatable,
|
|
11
|
+
data = _ref.data,
|
|
12
|
+
selected = _ref.selected,
|
|
13
|
+
overlayPlacement = _ref.overlayPlacement,
|
|
14
|
+
overlayStyle = _ref.overlayStyle,
|
|
15
|
+
texts = _ref.texts,
|
|
16
|
+
tagShape = _ref.tagShape,
|
|
17
|
+
maxHeight = _ref.maxHeight,
|
|
18
|
+
dropdownFooter = _ref.dropdownFooter,
|
|
19
|
+
onSelectedChange = _ref.onSelectedChange,
|
|
20
|
+
onCreate = _ref.onCreate;
|
|
21
|
+
var theme = useTheme();
|
|
22
|
+
var _useState = useState(''),
|
|
23
|
+
searchQuery = _useState[0],
|
|
24
|
+
setSearchQuery = _useState[1];
|
|
25
|
+
var _useState2 = useState(false),
|
|
26
|
+
isTagAddDropdownOpen = _useState2[0],
|
|
27
|
+
setIsTagAddDropdownOpen = _useState2[1];
|
|
28
|
+
var reset = function reset() {
|
|
29
|
+
setIsTagAddDropdownOpen(false);
|
|
30
|
+
setSearchQuery('');
|
|
31
|
+
};
|
|
32
|
+
var onPoolTagSelect = function onPoolTagSelect(tag) {
|
|
33
|
+
onSelectedChange && selected && onSelectedChange([].concat(selected, [tag]), {
|
|
34
|
+
type: 'ADD',
|
|
35
|
+
tag: tag
|
|
36
|
+
});
|
|
37
|
+
reset();
|
|
38
|
+
};
|
|
39
|
+
var onCreateNewTag = function onCreateNewTag() {
|
|
40
|
+
onCreate && onCreate(searchQuery);
|
|
41
|
+
reset();
|
|
42
|
+
};
|
|
43
|
+
var notSelectedList = data && selected && data.filter(function (t) {
|
|
44
|
+
return !selected.find(function (s) {
|
|
45
|
+
return s.id === t.id;
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
var selectablePool = !searchQuery ? notSelectedList : notSelectedList && notSelectedList.filter(function (t) {
|
|
49
|
+
return t.name && t.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
50
|
+
});
|
|
51
|
+
var isExactMatchFound = searchQuery && selectablePool && selectablePool.find(function (t) {
|
|
52
|
+
return t.name === searchQuery;
|
|
53
|
+
});
|
|
54
|
+
var emptyPool = selectablePool && selectablePool.length === 0;
|
|
55
|
+
var isCreatable = creatable && !isExactMatchFound && searchQuery;
|
|
56
|
+
var isSeparated = !emptyPool;
|
|
57
|
+
var noTagsContentLabel = !!(notSelectedList != null && notSelectedList.length) && !!searchQuery ? texts == null ? void 0 : texts.noResultsLabel : texts == null ? void 0 : texts.dropdownNoTags;
|
|
58
|
+
return /*#__PURE__*/React.createElement(TagsDropdown, {
|
|
59
|
+
tags: selectablePool,
|
|
60
|
+
trigger: ['click'],
|
|
61
|
+
maxHeight: maxHeight,
|
|
62
|
+
placement: overlayPlacement,
|
|
63
|
+
open: isTagAddDropdownOpen,
|
|
64
|
+
onOpenChange: setIsTagAddDropdownOpen,
|
|
65
|
+
overlayStyle: overlayStyle,
|
|
66
|
+
tagShape: tagShape,
|
|
67
|
+
onTagClick: onPoolTagSelect,
|
|
68
|
+
dropdownFooter: dropdownFooter,
|
|
69
|
+
aboveTagsContent: isCreatable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.CreateTagDropdownButton, {
|
|
70
|
+
"data-testid": "ds-tags-create-button",
|
|
71
|
+
type: "ghost",
|
|
72
|
+
mode: "icon-label",
|
|
73
|
+
onClick: onCreateNewTag,
|
|
74
|
+
marginless: !isSeparated
|
|
75
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
76
|
+
component: /*#__PURE__*/React.createElement(Add3M, null),
|
|
77
|
+
size: 24,
|
|
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)),
|
|
80
|
+
noTagsContent: /*#__PURE__*/React.createElement(Result, {
|
|
81
|
+
type: "no-results",
|
|
82
|
+
description: noTagsContentLabel || 'No results'
|
|
83
|
+
}),
|
|
84
|
+
dropdownHeader: /*#__PURE__*/React.createElement(SearchBar, {
|
|
85
|
+
value: searchQuery,
|
|
86
|
+
onSearchChange: setSearchQuery,
|
|
87
|
+
placeholder: texts && texts.searchPlaceholder || '',
|
|
88
|
+
iconLeft: /*#__PURE__*/React.createElement(Icon, {
|
|
89
|
+
component: /*#__PURE__*/React.createElement(SearchM, null),
|
|
90
|
+
color: theme.palette['grey-600']
|
|
91
|
+
}),
|
|
92
|
+
onClearInput: function onClearInput() {
|
|
93
|
+
return setSearchQuery('');
|
|
94
|
+
},
|
|
95
|
+
clearTooltip: texts && texts.clearTooltip
|
|
96
|
+
})
|
|
97
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
98
|
+
type: "ghost",
|
|
99
|
+
mode: texts != null && texts.addButtonLabel ? 'icon-label' : 'single-icon'
|
|
100
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
101
|
+
component: /*#__PURE__*/React.createElement(Add3M, null),
|
|
102
|
+
size: 24,
|
|
103
|
+
color: theme.palette['grey-500']
|
|
104
|
+
}), texts && texts.addButtonLabel));
|
|
105
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Button from '@synerise/ds-button';
|
|
2
|
+
export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<typeof Button, any, {
|
|
3
|
+
marginless: boolean;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import Button from '@synerise/ds-button';
|
|
3
|
+
import { ButtonLabel } from '@synerise/ds-button/dist/Button.styles';
|
|
4
|
+
export var CreateTagDropdownButton = styled(Button).withConfig({
|
|
5
|
+
displayName: "AddTagsstyles__CreateTagDropdownButton",
|
|
6
|
+
componentId: "sc-1wg5ubr-0"
|
|
7
|
+
})(["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) {
|
|
8
|
+
return props.marginless ? '0' : '0 0 8px';
|
|
9
|
+
}, ButtonLabel);
|
|
10
|
+
export var Separator = styled.hr.withConfig({
|
|
11
|
+
displayName: "AddTagsstyles__Separator",
|
|
12
|
+
componentId: "sc-1wg5ubr-1"
|
|
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
|
+
return props.theme.palette['grey-300'];
|
|
15
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type TagProps, type TagShape } from '@synerise/ds-tag';
|
|
3
|
+
type LimitedTagsProps = {
|
|
4
|
+
selected: TagProps[];
|
|
5
|
+
tagShape?: TagShape;
|
|
6
|
+
maxVisibleTags?: number;
|
|
7
|
+
removable?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
asPill?: boolean;
|
|
10
|
+
onRemove?: (tagKey: string | number) => void;
|
|
11
|
+
};
|
|
12
|
+
export declare const LimitedTags: ({ tagShape, selected, maxVisibleTags, asPill, removable, disabled, onRemove, }: LimitedTagsProps) => React.JSX.Element;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Tag from '@synerise/ds-tag';
|
|
3
|
+
import { TagsDropdown } from '../TagsDropdown/TagsDropdown';
|
|
4
|
+
export var LimitedTags = function LimitedTags(_ref) {
|
|
5
|
+
var tagShape = _ref.tagShape,
|
|
6
|
+
selected = _ref.selected,
|
|
7
|
+
maxVisibleTags = _ref.maxVisibleTags,
|
|
8
|
+
asPill = _ref.asPill,
|
|
9
|
+
removable = _ref.removable,
|
|
10
|
+
disabled = _ref.disabled,
|
|
11
|
+
onRemove = _ref.onRemove;
|
|
12
|
+
var limitedSelectedTags = selected.slice(maxVisibleTags);
|
|
13
|
+
return /*#__PURE__*/React.createElement(TagsDropdown, {
|
|
14
|
+
tags: limitedSelectedTags,
|
|
15
|
+
trigger: ['hover'],
|
|
16
|
+
tagShape: tagShape,
|
|
17
|
+
removable: removable,
|
|
18
|
+
onRemove: removable ? onRemove : undefined,
|
|
19
|
+
disabled: disabled,
|
|
20
|
+
asPill: asPill
|
|
21
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
22
|
+
id: "limited-tags",
|
|
23
|
+
shape: tagShape,
|
|
24
|
+
name: "+" + limitedSelectedTags.length,
|
|
25
|
+
asPill: true
|
|
26
|
+
}));
|
|
27
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
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 ExtendedTagProps } from '../../Tags.types';
|
|
5
|
+
type TagDropdownProps = {
|
|
6
|
+
tags?: ExtendedTagProps[];
|
|
7
|
+
texts?: TagTexts;
|
|
8
|
+
removable?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
asPill?: boolean;
|
|
11
|
+
tagShape?: TagShape;
|
|
12
|
+
dropdownFooter?: ReactNode;
|
|
13
|
+
noTagsContent?: ReactNode;
|
|
14
|
+
aboveTagsContent?: ReactNode;
|
|
15
|
+
dropdownHeader?: ReactNode;
|
|
16
|
+
maxHeight?: number;
|
|
17
|
+
onRemove?: (tagKey: string | number) => void;
|
|
18
|
+
onTagClick?: (tag: TagProps) => void;
|
|
19
|
+
} & DropdownProps;
|
|
20
|
+
export declare const TagsDropdown: ({ tags, tagShape, texts, removable, disabled, onRemove, asPill, dropdownFooter, noTagsContent, dropdownHeader, aboveTagsContent, maxHeight, onTagClick, ...dropdownProps }: TagDropdownProps) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
var _excluded = ["tags", "tagShape", "texts", "removable", "disabled", "onRemove", "asPill", "dropdownFooter", "noTagsContent", "dropdownHeader", "aboveTagsContent", "maxHeight", "onTagClick"];
|
|
2
|
+
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); }
|
|
3
|
+
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; }
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import Dropdown from '@synerise/ds-dropdown';
|
|
6
|
+
import InformationCard from '@synerise/ds-information-card';
|
|
7
|
+
import Tag from '@synerise/ds-tag';
|
|
8
|
+
import { NOOP } from '@synerise/ds-utils';
|
|
9
|
+
import * as S from './TagsDropdown.styles';
|
|
10
|
+
var DROPDOWN_BOTTOM_ACTION_STYLES = {
|
|
11
|
+
padding: '0 8px',
|
|
12
|
+
cursor: 'auto'
|
|
13
|
+
};
|
|
14
|
+
var DROPDOWN_CONTAINER_STYLES = {
|
|
15
|
+
padding: '8px'
|
|
16
|
+
};
|
|
17
|
+
export var TagsDropdown = function TagsDropdown(_ref) {
|
|
18
|
+
var tags = _ref.tags,
|
|
19
|
+
tagShape = _ref.tagShape,
|
|
20
|
+
texts = _ref.texts,
|
|
21
|
+
removable = _ref.removable,
|
|
22
|
+
disabled = _ref.disabled,
|
|
23
|
+
onRemove = _ref.onRemove,
|
|
24
|
+
asPill = _ref.asPill,
|
|
25
|
+
dropdownFooter = _ref.dropdownFooter,
|
|
26
|
+
noTagsContent = _ref.noTagsContent,
|
|
27
|
+
dropdownHeader = _ref.dropdownHeader,
|
|
28
|
+
aboveTagsContent = _ref.aboveTagsContent,
|
|
29
|
+
maxHeight = _ref.maxHeight,
|
|
30
|
+
onTagClick = _ref.onTagClick,
|
|
31
|
+
dropdownProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
32
|
+
var areTags = !!(tags != null && tags.length);
|
|
33
|
+
return /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
|
|
34
|
+
overlay: /*#__PURE__*/React.createElement(S.Overlay, {
|
|
35
|
+
"data-testid": "ds-tags-dropdown-overlay"
|
|
36
|
+
}, dropdownHeader, /*#__PURE__*/React.createElement(S.DropdownContainer, {
|
|
37
|
+
absolute: true,
|
|
38
|
+
maxHeight: maxHeight,
|
|
39
|
+
style: DROPDOWN_CONTAINER_STYLES
|
|
40
|
+
}, aboveTagsContent, areTags ? /*#__PURE__*/React.createElement(S.DropdownTagsContainer, {
|
|
41
|
+
"data-testid": "ds-tags-available-tags"
|
|
42
|
+
}, tags.map(function (tag) {
|
|
43
|
+
return /*#__PURE__*/React.createElement(Tag, _extends({}, tag, {
|
|
44
|
+
key: tag.id,
|
|
45
|
+
shape: tagShape,
|
|
46
|
+
removable: removable,
|
|
47
|
+
onRemove: removable ? onRemove : undefined,
|
|
48
|
+
disabled: disabled,
|
|
49
|
+
asPill: asPill,
|
|
50
|
+
onClick: function onClick() {
|
|
51
|
+
return onTagClick == null ? void 0 : onTagClick(tag);
|
|
52
|
+
},
|
|
53
|
+
texts: texts,
|
|
54
|
+
tooltipProps: tag.informationCardProps ? _extends({
|
|
55
|
+
render: function render() {
|
|
56
|
+
return /*#__PURE__*/React.createElement(InformationCard, _extends({
|
|
57
|
+
title: tag.name
|
|
58
|
+
}, tag.informationCardProps, {
|
|
59
|
+
asTooltip: true
|
|
60
|
+
}));
|
|
61
|
+
},
|
|
62
|
+
placement: 'right'
|
|
63
|
+
}, tag.tooltipProps) : undefined
|
|
64
|
+
}));
|
|
65
|
+
})) : noTagsContent), dropdownFooter && /*#__PURE__*/React.createElement(Dropdown.BottomAction, {
|
|
66
|
+
onClickAction: NOOP,
|
|
67
|
+
style: DROPDOWN_BOTTOM_ACTION_STYLES
|
|
68
|
+
}, dropdownFooter))
|
|
69
|
+
}));
|
|
70
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { type ScrollbarProps } from '@synerise/ds-scrollbar';
|
|
2
|
+
export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const DropdownContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
|
|
4
|
+
export declare const DropdownTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import Scrollbar from '@synerise/ds-scrollbar';
|
|
3
|
+
export var Overlay = styled.div.withConfig({
|
|
4
|
+
displayName: "TagsDropdownstyles__Overlay",
|
|
5
|
+
componentId: "sc-15cr02t-0"
|
|
6
|
+
})(["width:216px;background-color:", ";"], function (props) {
|
|
7
|
+
return props.theme.palette.white;
|
|
8
|
+
});
|
|
9
|
+
export var DropdownContainer = styled(Scrollbar).withConfig({
|
|
10
|
+
displayName: "TagsDropdownstyles__DropdownContainer",
|
|
11
|
+
componentId: "sc-15cr02t-1"
|
|
12
|
+
})(["display:flex;flex-direction:column;"]);
|
|
13
|
+
export var DropdownTagsContainer = styled.div.withConfig({
|
|
14
|
+
displayName: "TagsDropdownstyles__DropdownTagsContainer",
|
|
15
|
+
componentId: "sc-15cr02t-2"
|
|
16
|
+
})(["display:flex;flex-direction:column;max-height:320px;> *{width:fit-content;max-width:fit-content;display:block;width:inherit;cursor:pointer;flex-shrink:0;}"]);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default } from './Tags';
|
|
2
2
|
export * as TagsStyles from './Tags.styles';
|
|
3
|
-
export type { TagsProps, ActionTaken } from './Tags.types';
|
|
3
|
+
export type { TagsProps, ActionTaken, ExtendedTagProps } from './Tags.types';
|
|
4
4
|
/**
|
|
5
5
|
* @deprecated import directly from @synerise/ds-tag
|
|
6
6
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-tags",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.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.
|
|
39
|
-
"@synerise/ds-dropdown": "^1.0.
|
|
38
|
+
"@synerise/ds-button": "^1.4.11",
|
|
39
|
+
"@synerise/ds-dropdown": "^1.0.24",
|
|
40
40
|
"@synerise/ds-icon": "^1.7.2",
|
|
41
|
-
"@synerise/ds-
|
|
41
|
+
"@synerise/ds-information-card": "^1.1.1",
|
|
42
|
+
"@synerise/ds-result": "^1.0.24",
|
|
42
43
|
"@synerise/ds-scrollbar": "^1.1.8",
|
|
43
|
-
"@synerise/ds-search-bar": "^1.3.
|
|
44
|
-
"@synerise/ds-tag": "^1.
|
|
45
|
-
"@synerise/ds-tooltip": "^1.
|
|
44
|
+
"@synerise/ds-search-bar": "^1.3.13",
|
|
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": "
|
|
54
|
+
"gitHead": "4f56489ade5b08524578821d0c51c963002ff48c"
|
|
54
55
|
}
|