@synerise/ds-tags 1.5.50 → 1.5.52
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 +8 -0
- package/CLAUDE.md +158 -0
- package/package.json +13 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.5.52](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.51...@synerise/ds-tags@1.5.52) (2026-07-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-tags
|
|
9
|
+
|
|
10
|
+
## [1.5.51](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.50...@synerise/ds-tags@1.5.51) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-tags
|
|
13
|
+
|
|
6
14
|
## [1.5.50](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.49...@synerise/ds-tags@1.5.50) (2026-07-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-tags
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
# Tags (`@synerise/ds-tags`)
|
|
2
|
+
|
|
3
|
+
> A controlled tag-group component that renders selected tags inline, with optional add-from-pool, create-new, and overflow-into-dropdown behaviours.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Tags.tsx — root component; renders selected tags, LimitedTags overflow, and AddTags button
|
|
10
|
+
Tags.types.ts — TagsProps, ActionTaken, ExtendedTagProps type definitions
|
|
11
|
+
Tags.styles.ts — styled-components: Container, TagsWrapper, SelectedTags, TagOverflow, Title, LimitedTag
|
|
12
|
+
index.ts — public exports
|
|
13
|
+
modules.d.ts — ambient module declarations
|
|
14
|
+
components/
|
|
15
|
+
AddTags/
|
|
16
|
+
AddTags.tsx — dropdown trigger with search bar, create-new button, and selectable tag list
|
|
17
|
+
AddTags.styles.ts — AddTagButton, CreateTagDropdownButton, Separator
|
|
18
|
+
LimitedTags/
|
|
19
|
+
LimitedTags.tsx — "+N" pill that opens hidden selected tags on hover
|
|
20
|
+
TagsDropdown/
|
|
21
|
+
TagsDropdown.tsx — shared dropdown wrapper around @synerise/ds-dropdown
|
|
22
|
+
TagsDropdown.styles.ts — Overlay, DropdownContainer (Scrollbar), DropdownTagsContainer, BottomAction
|
|
23
|
+
__specs__/
|
|
24
|
+
Tags.spec.tsx — Vitest + React Testing Library tests
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Public exports
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
export { default } from './Tags'; // default: Tags component
|
|
31
|
+
export * as TagsStyles from './Tags.styles';
|
|
32
|
+
export type { TagsProps, ActionTaken, ExtendedTagProps } from './Tags.types';
|
|
33
|
+
export { AddTags, type AddTagsProps } from './components/AddTags/AddTags';
|
|
34
|
+
|
|
35
|
+
// @deprecated — import directly from @synerise/ds-tag
|
|
36
|
+
export { default as Tag, TagShape } from '@synerise/ds-tag';
|
|
37
|
+
export type { TagProps, TagTexts } from '@synerise/ds-tag';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### `Tags` (default export)
|
|
41
|
+
|
|
42
|
+
| Prop | Type | Default | Description |
|
|
43
|
+
|------|------|---------|-------------|
|
|
44
|
+
| `data` | `ExtendedTagProps[]` | `[]` | Pool of all available tags (used by AddTags dropdown) |
|
|
45
|
+
| `selected` | `ExtendedTagProps[]` | `[]` | Currently selected/displayed tags |
|
|
46
|
+
| `tagShape` | `TagShape` | — | Shape applied to all tags in the group |
|
|
47
|
+
| `addable` | `boolean` | — | Renders the AddTags button |
|
|
48
|
+
| `addButtonType` | `'single-icon' \| 'icon-label'` | auto* | Add button display mode (`icon-label` when `texts.addButtonLabel` is set, otherwise `single-icon`) |
|
|
49
|
+
| `removable` | `boolean` | — | Shows remove icon on each tag |
|
|
50
|
+
| `creatable` | `boolean` | — | Shows "create new tag" button in the add dropdown when search query has no exact match |
|
|
51
|
+
| `disabled` | `boolean` | — | Disables all tags in the group |
|
|
52
|
+
| `texts` | `Partial<TagTexts>` | — | Localisation strings (see TagTexts below) |
|
|
53
|
+
| `onCreate` | `(name: string) => void` | — | Called when a new tag is created via the create button |
|
|
54
|
+
| `onSelectedChange` | `(tags: TagProps[], action: ActionTaken) => void` | — | Called on any add or remove action |
|
|
55
|
+
| `title` | `ReactNode` | — | Label rendered before the tag list |
|
|
56
|
+
| `maxVisibleTags` | `number` | — | Caps inline-displayed selected tags; overflow shown in a hover dropdown |
|
|
57
|
+
| `maxHeight` | `number` | — | Max height (px) of the add-tags dropdown scrollable area |
|
|
58
|
+
| `overlayPlacement` | `'topLeft' \| 'topCenter' \| 'topRight' \| 'bottomLeft' \| 'bottomCenter' \| 'bottomRight'` | — | Placement of the add-tags dropdown |
|
|
59
|
+
| `overlayStyle` | `CSSProperties` | — | Inline style override for the add-tags dropdown overlay |
|
|
60
|
+
| `dropdownFooter` | `ReactNode` | — | Custom content rendered in the footer of the add-tags dropdown |
|
|
61
|
+
| `asPill` | `boolean` | — | Renders tags as pills (passed through to each `Tag`) |
|
|
62
|
+
| `style` | `CSSProperties` | — | Inline style for the root container |
|
|
63
|
+
| `className` | `string` | — | Additional class for the root container (always receives `ds-tags`) |
|
|
64
|
+
| `theme` | `{ [k: string]: string }` | — | **@deprecated** — use `useTheme` hook instead |
|
|
65
|
+
|
|
66
|
+
### `TagTexts` (from `@synerise/ds-tag`)
|
|
67
|
+
|
|
68
|
+
| Key | Type | Description |
|
|
69
|
+
|-----|------|-------------|
|
|
70
|
+
| `addButtonLabel` | `ReactNode` | Label for the add-tags trigger button |
|
|
71
|
+
| `searchPlaceholder` | `string` | Placeholder in the add-tags search bar |
|
|
72
|
+
| `createTagButtonLabel` | `ReactNode` | Label for the "create new tag" button |
|
|
73
|
+
| `clearTooltip` | `ReactNode` | Tooltip on the search clear icon |
|
|
74
|
+
| `deleteTooltip` | `ReactNode` | Tooltip on a tag's remove icon |
|
|
75
|
+
| `noResultsLabel` | `ReactNode` | Message when search yields no results |
|
|
76
|
+
| `dropdownNoTags` | `ReactNode` | Message when the unselected pool is empty |
|
|
77
|
+
| `manageLinkLabel` | `ReactNode` | Not rendered by Tags itself; available for consumers to pass via `dropdownFooter` |
|
|
78
|
+
|
|
79
|
+
### `ActionTaken`
|
|
80
|
+
|
|
81
|
+
```ts
|
|
82
|
+
type ActionTaken = {
|
|
83
|
+
type: 'ADD' | 'REMOVE';
|
|
84
|
+
tag: TagProps;
|
|
85
|
+
};
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### `ExtendedTagProps`
|
|
89
|
+
|
|
90
|
+
`TagProps & { informationCardProps?: InformationCardProps }`
|
|
91
|
+
|
|
92
|
+
When `informationCardProps` is provided on a tag, hovering the tag renders an `InformationCard` tooltip (placement `bottomLeft` inline, `right` inside the dropdown).
|
|
93
|
+
|
|
94
|
+
### `AddTags` (named export)
|
|
95
|
+
|
|
96
|
+
Internal sub-component also exported for advanced use. Props are a subset of `TagsProps` plus `texts: TagTexts` (required, not `Partial`).
|
|
97
|
+
|
|
98
|
+
## Usage patterns
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import Tags from '@synerise/ds-tags';
|
|
102
|
+
import type { TagsProps } from '@synerise/ds-tags';
|
|
103
|
+
|
|
104
|
+
// Minimal — read-only display
|
|
105
|
+
<Tags selected={[{ id: 1, name: 'Marketing' }]} />
|
|
106
|
+
|
|
107
|
+
// Full interactive
|
|
108
|
+
<Tags
|
|
109
|
+
data={allTags}
|
|
110
|
+
selected={selectedTags}
|
|
111
|
+
addable
|
|
112
|
+
removable
|
|
113
|
+
creatable
|
|
114
|
+
texts={{
|
|
115
|
+
addButtonLabel: 'Add tag',
|
|
116
|
+
searchPlaceholder: 'Search..',
|
|
117
|
+
createTagButtonLabel: 'Create',
|
|
118
|
+
clearTooltip: 'Clear',
|
|
119
|
+
deleteTooltip: 'Delete',
|
|
120
|
+
noResultsLabel: 'No results',
|
|
121
|
+
dropdownNoTags: 'No tags found',
|
|
122
|
+
}}
|
|
123
|
+
onSelectedChange={(tags, action) => setSelectedTags(tags)}
|
|
124
|
+
onCreate={(name) => createTag(name)}
|
|
125
|
+
maxVisibleTags={5}
|
|
126
|
+
/>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Styling
|
|
130
|
+
|
|
131
|
+
- Root container: `display: flex; margin-bottom: 24px` — the bottom margin is always applied.
|
|
132
|
+
- Tags wrap via `flex-wrap: wrap`; each tag sits inside a `32px`-height overflow div.
|
|
133
|
+
- The `LimitedTags` "+N" pill uses `grey-100` background / `grey-700` text and is always rendered `asPill`.
|
|
134
|
+
- Dropdown tag list has a hardcoded `max-height: 320px` (inside `DropdownTagsContainer`); use `maxHeight` prop on `Tags` to override the scrollable container height.
|
|
135
|
+
|
|
136
|
+
## Key dependencies
|
|
137
|
+
|
|
138
|
+
| Package | Role |
|
|
139
|
+
|---------|------|
|
|
140
|
+
| `@synerise/ds-tag` | Single `Tag` component and `TagShape` enum |
|
|
141
|
+
| `@synerise/ds-dropdown` | Popover/dropdown primitive used by AddTags and LimitedTags |
|
|
142
|
+
| `@synerise/ds-search-bar` | Search input inside the add-tags dropdown |
|
|
143
|
+
| `@synerise/ds-information-card` | Tooltip card rendered on tag hover when `informationCardProps` is set |
|
|
144
|
+
| `@synerise/ds-result` | "No results" empty-state inside the dropdown |
|
|
145
|
+
| `@synerise/ds-scrollbar` | Scrollable container in `TagsDropdown` |
|
|
146
|
+
| `@synerise/ds-button` | Add-tag trigger button and create-tag button |
|
|
147
|
+
| `@synerise/ds-core` | `useTheme` hook for palette tokens |
|
|
148
|
+
|
|
149
|
+
## Implementation notes
|
|
150
|
+
|
|
151
|
+
- `Tags` is a **controlled** component — it does not manage `selected` state internally. The parent must update `selected` in `onSelectedChange`.
|
|
152
|
+
- `addButtonType` defaults to `'icon-label'` when `texts.addButtonLabel` is truthy, and to `'single-icon'` otherwise. An explicit `addButtonType` prop overrides this.
|
|
153
|
+
- `AddTags` filters `data` to exclude already-`selected` items (matched by `id`). Search is case-insensitive substring match on `name`.
|
|
154
|
+
- The "create" button only appears when `creatable` is true, the search query is non-empty, and no tag in the selectable pool has an exact name match.
|
|
155
|
+
- `LimitedTags` is not exported — it is an internal component opened by `hover` trigger.
|
|
156
|
+
- The test runner is **Jest** (not Vitest) — see `jest.config.js`.
|
|
157
|
+
- `Props` (re-exported type) is `@deprecated`; use `TagsProps` instead.
|
|
158
|
+
- `Tag` and `TagShape` re-exports from this package are `@deprecated`; import directly from `@synerise/ds-tag`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-tags",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.52",
|
|
4
4
|
"description": "Tags UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -41,16 +42,16 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-button": "^1.5.
|
|
45
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
46
|
-
"@synerise/ds-icon": "^1.18.
|
|
47
|
-
"@synerise/ds-information-card": "^1.7.
|
|
48
|
-
"@synerise/ds-result": "^1.0.
|
|
49
|
-
"@synerise/ds-scrollbar": "^1.5.
|
|
50
|
-
"@synerise/ds-search-bar": "^1.4.
|
|
51
|
-
"@synerise/ds-tag": "^1.4.
|
|
52
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
53
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-button": "^1.5.35",
|
|
46
|
+
"@synerise/ds-dropdown": "^1.3.21",
|
|
47
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
48
|
+
"@synerise/ds-information-card": "^1.7.9",
|
|
49
|
+
"@synerise/ds-result": "^1.0.66",
|
|
50
|
+
"@synerise/ds-scrollbar": "^1.5.2",
|
|
51
|
+
"@synerise/ds-search-bar": "^1.4.36",
|
|
52
|
+
"@synerise/ds-tag": "^1.4.32",
|
|
53
|
+
"@synerise/ds-tooltip": "^1.5.4",
|
|
54
|
+
"@synerise/ds-utils": "^1.10.2"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|
|
56
57
|
"@testing-library/user-event": "^14"
|
|
@@ -61,5 +62,5 @@
|
|
|
61
62
|
"styled-components": "^5.3.3",
|
|
62
63
|
"vitest": "4"
|
|
63
64
|
},
|
|
64
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
|
|
65
66
|
}
|