@synerise/ds-avatar-group 1.2.9 → 1.2.11
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 +140 -0
- package/package.json +11 -10
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.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-avatar-group@1.2.10...@synerise/ds-avatar-group@1.2.11) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-avatar-group
|
|
9
|
+
|
|
10
|
+
## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-avatar-group@1.2.9...@synerise/ds-avatar-group@1.2.10) (2026-07-16)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-avatar-group
|
|
13
|
+
|
|
6
14
|
## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-avatar-group@1.2.8...@synerise/ds-avatar-group@1.2.9) (2026-07-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-avatar-group
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# AvatarGroup (`@synerise/ds-avatar-group`)
|
|
2
|
+
|
|
3
|
+
> A horizontal row of overlapping circle avatars that fans out on hover, truncates overflow with a `+N` counter, and optionally opens a modal listing all members.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
AvatarGroup.tsx — main component; owns modal visibility state
|
|
10
|
+
AvatarGroup.types.ts — AvatarGroupProps, DataSource, GroupModalSettings, Size
|
|
11
|
+
AvatarGroup.styles.ts — Group (hover fan-out), MoreInfo (styled Avatar for +N)
|
|
12
|
+
Modal/
|
|
13
|
+
GroupModal.tsx — modal with VirtualTable listing all DataSource entries
|
|
14
|
+
GroupModal.types.ts — GroupModalProps
|
|
15
|
+
GroupModal.styles.tsx — ModalFooter, FooterSettings, FooterActions
|
|
16
|
+
index.ts — public exports (default + types)
|
|
17
|
+
__specs__/
|
|
18
|
+
AvatarGroup.spec.tsx — Vitest tests
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Public exports
|
|
22
|
+
|
|
23
|
+
### `AvatarGroup` (default export)
|
|
24
|
+
|
|
25
|
+
| Prop | Type | Default | Description |
|
|
26
|
+
|------|------|---------|-------------|
|
|
27
|
+
| `dataSource` | `DataSource[]` | **required** | Array of avatar records to render |
|
|
28
|
+
| `numberOfVisibleUsers` | `number` | `3` | How many avatars to show before truncating |
|
|
29
|
+
| `moreInfoTooltip` | `string` | `undefined` | Suffix text for the `+N` tooltip, e.g. `"more users"` → tooltip reads `"7 more users"` |
|
|
30
|
+
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size passed to each Avatar |
|
|
31
|
+
| `hasStatus` | `boolean` | `undefined` | Passes `hasStatus` to each Avatar (shows badge dot on hover) |
|
|
32
|
+
| `groupModal` | `GroupModalSettings` | `undefined` | If provided, clicking the `+N` counter opens a modal; if omitted the counter is not clickable |
|
|
33
|
+
|
|
34
|
+
Both `numberOfVisibleUsers` and `moreInfoTooltip` are optional in the TypeScript interface.
|
|
35
|
+
|
|
36
|
+
### `DataSource` type
|
|
37
|
+
|
|
38
|
+
Each item in the `dataSource` array. Extends `Omit<BadgeProps, 'children'>`:
|
|
39
|
+
|
|
40
|
+
| Field | Type | Description |
|
|
41
|
+
|-------|------|-------------|
|
|
42
|
+
| `id` | `React.ReactText` | Unique key; used as `rowKey` in the modal table |
|
|
43
|
+
| `initials` | `string` | Text rendered inside the avatar |
|
|
44
|
+
| `avatarProps` | `AvatarProps` | Passed as spread props to the `Avatar` component (controls color, tooltip, etc.) |
|
|
45
|
+
| `firstname` | `string` | Shown in the modal table row label |
|
|
46
|
+
| `lastname` | `string` | Shown in the modal table row label |
|
|
47
|
+
| `email` | `string` | Shown in the modal table row sublabel |
|
|
48
|
+
| `status` *(from BadgeProps)* | `BadgeStatus` | Controls the `Badge` wrapper status (e.g. `'active'`, `'inactive'`, `'blocked'`) |
|
|
49
|
+
|
|
50
|
+
### `GroupModalSettings` type
|
|
51
|
+
|
|
52
|
+
| Field | Type | Description |
|
|
53
|
+
|-------|------|-------------|
|
|
54
|
+
| `title` | `string \| ReactNode` | Modal header title |
|
|
55
|
+
| `listTitle` | `string \| ReactNode` | Title shown above the VirtualTable |
|
|
56
|
+
| `renderRowMenu` | `(record: DataSource) => JSX.Element` | Returns a `Menu` for the row actions dropdown |
|
|
57
|
+
| `handleOk` | `() => void` | Primary action button handler |
|
|
58
|
+
| `handleInvite` | `() => void` | Invite button handler |
|
|
59
|
+
| `okText` | `string \| ReactNode` | Primary button label |
|
|
60
|
+
| `cancelText` | `string \| ReactNode` | Cancel button label |
|
|
61
|
+
| `inviteText` | `string \| ReactNode` | Invite button label |
|
|
62
|
+
|
|
63
|
+
## Usage patterns
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import AvatarGroup, { type DataSource, type GroupModalSettings } from '@synerise/ds-avatar-group';
|
|
67
|
+
import Menu from '@synerise/ds-menu';
|
|
68
|
+
|
|
69
|
+
const data = [
|
|
70
|
+
{
|
|
71
|
+
id: 0,
|
|
72
|
+
initials: 'KK',
|
|
73
|
+
firstname: 'Kamil',
|
|
74
|
+
lastname: 'Kowalski',
|
|
75
|
+
email: 'k.kowalski@example.com',
|
|
76
|
+
status: 'active',
|
|
77
|
+
avatarProps: {
|
|
78
|
+
backgroundColor: 'blue',
|
|
79
|
+
backgroundColorHue: '600',
|
|
80
|
+
tooltip: { name: 'Kamil Kowalski', email: 'k.kowalski@example.com' },
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
// more entries…
|
|
84
|
+
];
|
|
85
|
+
|
|
86
|
+
// Basic — no modal
|
|
87
|
+
<AvatarGroup
|
|
88
|
+
dataSource={data}
|
|
89
|
+
numberOfVisibleUsers={3}
|
|
90
|
+
moreInfoTooltip="more users"
|
|
91
|
+
hasStatus
|
|
92
|
+
/>
|
|
93
|
+
|
|
94
|
+
// With modal
|
|
95
|
+
<AvatarGroup
|
|
96
|
+
dataSource={data}
|
|
97
|
+
numberOfVisibleUsers={3}
|
|
98
|
+
moreInfoTooltip="more users"
|
|
99
|
+
groupModal={{
|
|
100
|
+
title: 'All users',
|
|
101
|
+
listTitle: `${data.length} users`,
|
|
102
|
+
okText: 'Apply',
|
|
103
|
+
cancelText: 'Cancel',
|
|
104
|
+
inviteText: 'Invite user',
|
|
105
|
+
handleOk: () => {},
|
|
106
|
+
handleInvite: () => {},
|
|
107
|
+
renderRowMenu: (record) => (
|
|
108
|
+
<Menu>
|
|
109
|
+
<Menu.Item onClick={() => {}}>Remove</Menu.Item>
|
|
110
|
+
</Menu>
|
|
111
|
+
),
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Styling
|
|
117
|
+
|
|
118
|
+
Styles in `AvatarGroup.styles.ts`. Key behaviors:
|
|
119
|
+
|
|
120
|
+
- **Collapsed state**: avatars overlap with negative `margin-left` (`-8px` small, `-12px` medium, `-16px` large); badge dots are invisible (`opacity: 0`); avatars have a `2px white` ring (`box-shadow`).
|
|
121
|
+
- **Hover state**: gap switches to `8px` for all avatars, badge dots fade in (`opacity: 1`), white ring disappears.
|
|
122
|
+
- `MoreInfo` is a styled `Avatar` with white background and `grey-300` border — always appears after the overlapping group with `margin-left: 8px`.
|
|
123
|
+
|
|
124
|
+
## Key dependencies
|
|
125
|
+
|
|
126
|
+
- `@synerise/ds-avatar` — renders each avatar in the row and the `MoreInfo` +N element
|
|
127
|
+
- `@synerise/ds-badge` — wraps each avatar to display status dots
|
|
128
|
+
- `@synerise/ds-modal` — base for the `GroupModal`
|
|
129
|
+
- `@synerise/ds-table` (`VirtualTable`, `TableCell`) — powers the member list inside the modal
|
|
130
|
+
- `@synerise/ds-dropdown` — row action menu trigger in the modal table
|
|
131
|
+
- `@synerise/ds-tooltip` — wraps the `+N` counter to show the overflow count text
|
|
132
|
+
|
|
133
|
+
## Implementation notes
|
|
134
|
+
|
|
135
|
+
- `groupModal` is entirely optional. If not passed, the `+N` counter is still shown (when there is overflow) but clicking it does nothing — `showModal` is a no-op.
|
|
136
|
+
- The `MoreInfo` styled component extends `Avatar` directly and accepts an `onClick` prop. It is always `size={size}` matching the other avatars.
|
|
137
|
+
- Each `DataSource` item gets a synthetic `key` of `${initials}-${index}` inside `dataSourceWithKeys` — it does **not** use `id` as the React list key (though `id` is used as `rowKey` in the modal table).
|
|
138
|
+
- All heavy render work (`renderMoreInfo`, `renderGroupModal`) is memoized with `useMemo`; `showModal`/`hideModal` are `useCallback`.
|
|
139
|
+
- The `GroupModal` is not exported — it is an internal sub-component only rendered by `AvatarGroup`.
|
|
140
|
+
- `size` accepts `'small' | 'medium' | 'large'` only (not `'extraLarge'` unlike the base `Avatar`).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-avatar-group",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.11",
|
|
4
4
|
"description": "AvatarGroup 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,14 +42,14 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-avatar": "^1.3.
|
|
45
|
-
"@synerise/ds-badge": "^1.0.
|
|
46
|
-
"@synerise/ds-button": "^1.5.
|
|
47
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
48
|
-
"@synerise/ds-icon": "^1.18.
|
|
49
|
-
"@synerise/ds-modal": "^1.6.
|
|
50
|
-
"@synerise/ds-table": "^1.11.
|
|
51
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
45
|
+
"@synerise/ds-avatar": "^1.3.19",
|
|
46
|
+
"@synerise/ds-badge": "^1.0.58",
|
|
47
|
+
"@synerise/ds-button": "^1.5.35",
|
|
48
|
+
"@synerise/ds-dropdown": "^1.3.20",
|
|
49
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
50
|
+
"@synerise/ds-modal": "^1.6.6",
|
|
51
|
+
"@synerise/ds-table": "^1.11.11",
|
|
52
|
+
"@synerise/ds-tooltip": "^1.5.4"
|
|
52
53
|
},
|
|
53
54
|
"peerDependencies": {
|
|
54
55
|
"@synerise/ds-core": "*",
|
|
@@ -56,5 +57,5 @@
|
|
|
56
57
|
"styled-components": "^5.3.3",
|
|
57
58
|
"vitest": "4"
|
|
58
59
|
},
|
|
59
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
60
61
|
}
|