@synerise/ds-avatar-group 1.2.17 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/CLAUDE.md +1 -1
  3. package/dist/Modal/GroupModal.js +21 -20
  4. package/dist/Modal/GroupModal.types.d.ts +1 -1
  5. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
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
+ ## [2.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-avatar-group@2.0.0...@synerise/ds-avatar-group@2.0.1) (2026-09-01)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-avatar-group
9
+
10
+ # [2.0.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-avatar-group@1.2.17...@synerise/ds-avatar-group@2.0.0) (2026-08-26)
11
+
12
+ ### Bug Fixes
13
+
14
+ - **table:** deprecate @synerise/ds-table in favour of ds-table-new ([bdbe9e8](https://github.com/Synerise/synerise-design/commit/bdbe9e8e909221926bcf9936a92482ff0a72c975))
15
+
6
16
  ## [1.2.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-avatar-group@1.2.16...@synerise/ds-avatar-group@1.2.17) (2026-08-20)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-avatar-group
package/CLAUDE.md CHANGED
@@ -126,7 +126,7 @@ Styles in `AvatarGroup.styles.ts`. Key behaviors:
126
126
  - `@synerise/ds-avatar` — renders each avatar in the row and the `MoreInfo` +N element
127
127
  - `@synerise/ds-badge` — wraps each avatar to display status dots
128
128
  - `@synerise/ds-modal` — base for the `GroupModal`
129
- - `@synerise/ds-table` (`VirtualTable`, `TableCell`) — powers the member list inside the modal
129
+ - `@synerise/ds-table-new` (`VirtualTable`, `AvatarLabelCell`, `ActionCell`) — powers the member list inside the modal
130
130
  - `@synerise/ds-dropdown` — row action menu trigger in the modal table
131
131
  - `@synerise/ds-tooltip` — wraps the `+N` counter to show the overflow count text
132
132
 
package/dist/Modal/GroupModal.js CHANGED
@@ -6,8 +6,11 @@ import Button from "@synerise/ds-button";
6
6
  import Dropdown from "@synerise/ds-dropdown";
7
7
  import Icon, { OptionHorizontalM } from "@synerise/ds-icon";
8
8
  import ModalProxy from "@synerise/ds-modal";
9
- import { TableCell, VirtualTable } from "@synerise/ds-table";
9
+ import { AvatarLabelCell, ActionCell, VirtualTable } from "@synerise/ds-table-new";
10
10
  import { ModalFooter, FooterSettings, FooterActions } from "./GroupModal.styles.js";
11
+ const TABLE_MAX_HEIGHT = 430;
12
+ const CELL_HEIGHT = 64;
13
+ const ACTIONS_COLUMN_WIDTH = 80;
11
14
  const GroupModal = ({
12
15
  renderRowMenu,
13
16
  title,
@@ -22,31 +25,29 @@ const GroupModal = ({
22
25
  cancelText,
23
26
  inviteText
24
27
  }) => {
25
- const getColums = React.useMemo(() => {
26
- return [{
27
- key: "avatarProps",
28
- dataIndex: "avatarProps",
29
- render: (avatar, record) => {
30
- return /* @__PURE__ */ jsx(TableCell.AvatarLabelCell, { avatar: /* @__PURE__ */ jsx(Badge, { status: record.status, children: /* @__PURE__ */ jsx(Avatar, { ...avatar, hasStatus: showStatus, size: "medium", shape: "circle", children: record.initials }) }, record.id), textSize: "small", title: `${record.firstname} ${record.lastname}`, labels: [record.email] });
31
- }
32
- }, {
33
- key: "actions",
34
- dataIndex: "id",
35
- width: 72,
36
- render: (id, record) => /* @__PURE__ */ jsx(TableCell.ActionCell, { contentAlign: "right", children: /* @__PURE__ */ jsx(Dropdown, { asChild: true, overlay: renderRowMenu(record), trigger: ["click"], placement: "bottomRight", popoverProps: {
37
- testId: "avatar-group-actions"
38
- }, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) }) })
39
- }];
40
- }, [renderRowMenu, showStatus]);
28
+ const columns = React.useMemo(() => [{
29
+ id: "avatarProps",
30
+ header: "",
31
+ cell: ({
32
+ row
33
+ }) => /* @__PURE__ */ jsx(AvatarLabelCell, { avatar: /* @__PURE__ */ jsx(Badge, { status: row.original.status, children: /* @__PURE__ */ jsx(Avatar, { ...row.original.avatarProps, hasStatus: showStatus, size: "medium", shape: "circle", children: row.original.initials }) }), title: `${row.original.firstname} ${row.original.lastname}`, labels: [row.original.email] })
34
+ }, {
35
+ id: "actions",
36
+ header: "",
37
+ size: ACTIONS_COLUMN_WIDTH,
38
+ cell: ({
39
+ row
40
+ }) => /* @__PURE__ */ jsx(ActionCell, { contentAlign: "right", children: /* @__PURE__ */ jsx(Dropdown, { asChild: true, overlay: renderRowMenu(row.original), trigger: ["click"], placement: "bottomRight", popoverProps: {
41
+ testId: "avatar-group-actions"
42
+ }, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) }) })
43
+ }], [renderRowMenu, showStatus]);
41
44
  return /* @__PURE__ */ jsx(ModalProxy, { bodyFullWidth: true, size: "small", title, closable: true, open: visible, onCancel: hideModal, footer: /* @__PURE__ */ jsxs(ModalFooter, { children: [
42
45
  /* @__PURE__ */ jsx(FooterSettings, { children: /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: handleInvite, children: inviteText }) }),
43
46
  /* @__PURE__ */ jsxs(FooterActions, { children: [
44
47
  /* @__PURE__ */ jsx(Button, { type: "ghost", onClick: hideModal, children: cancelText }),
45
48
  /* @__PURE__ */ jsx(Button, { type: "primary", onClick: handleOk, children: okText })
46
49
  ] })
47
- ] }), children: /* @__PURE__ */ jsx(VirtualTable, { hideColumnNames: true, title: listTitle, columns: getColums, scroll: {
48
- y: 430
49
- }, cellHeight: 64, initialWidth: 520, dataSource, rowKey: "id" }) });
50
+ ] }), children: /* @__PURE__ */ jsx(VirtualTable, { hideColumnNames: true, title: listTitle, columns, maxHeight: TABLE_MAX_HEIGHT, cellHeight: CELL_HEIGHT, data: dataSource, rowKey: "id" }) });
50
51
  };
51
52
  export {
52
53
  GroupModal as default
package/dist/Modal/GroupModal.types.d.ts CHANGED
@@ -3,5 +3,5 @@ export type GroupModalProps = GroupModalSettings & {
3
3
  visible: boolean;
4
4
  hideModal: () => void;
5
5
  showStatus: boolean;
6
- dataSource: readonly DataSource[];
6
+ dataSource: DataSource[];
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-avatar-group",
3
- "version": "1.2.17",
3
+ "version": "2.0.1",
4
4
  "description": "AvatarGroup UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -42,14 +42,14 @@
42
42
  ],
43
43
  "types": "dist/index.d.ts",
44
44
  "dependencies": {
45
- "@synerise/ds-avatar": "^1.3.21",
46
- "@synerise/ds-badge": "^1.0.60",
47
- "@synerise/ds-button": "^1.5.37",
48
- "@synerise/ds-dropdown": "^1.4.0",
49
- "@synerise/ds-icon": "^1.18.5",
50
- "@synerise/ds-modal": "^1.7.1",
51
- "@synerise/ds-table": "^1.11.17",
52
- "@synerise/ds-tooltip": "^1.6.0"
45
+ "@synerise/ds-avatar": "^2.0.0",
46
+ "@synerise/ds-badge": "^2.0.0",
47
+ "@synerise/ds-button": "^2.0.0",
48
+ "@synerise/ds-dropdown": "^2.0.0",
49
+ "@synerise/ds-icon": "^2.0.0",
50
+ "@synerise/ds-modal": "^2.0.0",
51
+ "@synerise/ds-table-new": "^2.0.1",
52
+ "@synerise/ds-tooltip": "^2.0.0"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "@synerise/ds-core": "*",
@@ -57,5 +57,5 @@
57
57
  "styled-components": "^5.3.3",
58
58
  "vitest": "4"
59
59
  },
60
- "gitHead": "8d271661b4af7b8580871b750e0be1a8fe1844b2"
60
+ "gitHead": "a57eb7eaf98318b364468368d1aa4fd9fa6a6dc8"
61
61
  }