@atlaskit/avatar-group 9.6.0 → 9.7.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 +729 -709
- package/README.md +2 -1
- package/__perf__/default.tsx +12 -12
- package/dist/cjs/components/avatar-group.js +3 -1
- package/dist/cjs/components/grid.js +10 -7
- package/dist/cjs/components/internal/components/popup-avatar-group.js +3 -0
- package/dist/cjs/components/more-indicator.js +25 -10
- package/dist/cjs/components/stack.js +9 -5
- package/dist/es2019/components/avatar-group.js +3 -0
- package/dist/es2019/components/grid.js +10 -7
- package/dist/es2019/components/internal/components/popup-avatar-group.js +3 -0
- package/dist/es2019/components/more-indicator.js +25 -10
- package/dist/es2019/components/stack.js +9 -5
- package/dist/esm/components/avatar-group.js +3 -0
- package/dist/esm/components/grid.js +10 -7
- package/dist/esm/components/internal/components/popup-avatar-group.js +3 -0
- package/dist/esm/components/more-indicator.js +25 -10
- package/dist/esm/components/stack.js +9 -5
- package/dist/types/components/avatar-group-item.d.ts +1 -1
- package/dist/types/components/avatar-group.d.ts +7 -4
- package/dist/types/components/grid.d.ts +4 -1
- package/dist/types/components/internal/components/focus-manager.d.ts +2 -2
- package/dist/types/components/internal/components/popup-avatar-group.d.ts +1 -1
- package/dist/types/components/internal/hooks/use-register-item-with-focus-manager.d.ts +1 -1
- package/dist/types/components/internal/utiles/handle-focus.d.ts +1 -1
- package/dist/types/components/more-indicator.d.ts +1 -1
- package/dist/types/components/stack.d.ts +4 -1
- package/dist/types/components/types.d.ts +5 -5
- package/dist/types/components/utils.d.ts +1 -1
- package/dist/types-ts4.5/components/avatar-group-item.d.ts +1 -1
- package/dist/types-ts4.5/components/avatar-group.d.ts +7 -4
- package/dist/types-ts4.5/components/grid.d.ts +4 -1
- package/dist/types-ts4.5/components/internal/components/focus-manager.d.ts +2 -2
- package/dist/types-ts4.5/components/internal/components/popup-avatar-group.d.ts +1 -1
- package/dist/types-ts4.5/components/internal/hooks/use-register-item-with-focus-manager.d.ts +1 -1
- package/dist/types-ts4.5/components/internal/utiles/handle-focus.d.ts +1 -1
- package/dist/types-ts4.5/components/more-indicator.d.ts +1 -1
- package/dist/types-ts4.5/components/stack.d.ts +4 -1
- package/dist/types-ts4.5/components/types.d.ts +5 -5
- package/dist/types-ts4.5/components/utils.d.ts +1 -1
- package/package.json +96 -98
- package/report.api.md +66 -65
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { ElementType, ReactNode } from 'react';
|
|
1
|
+
import type { ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
|
|
2
2
|
import type { AnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
-
import { default as Avatar, type AvatarPropTypes } from '@atlaskit/avatar';
|
|
4
|
-
import { MenuGroupProps } from '@atlaskit/menu';
|
|
5
|
-
import { ContentProps } from '@atlaskit/popup';
|
|
3
|
+
import { type default as Avatar, type AvatarPropTypes } from '@atlaskit/avatar';
|
|
4
|
+
import { type MenuGroupProps } from '@atlaskit/menu';
|
|
5
|
+
import { type ContentProps } from '@atlaskit/popup';
|
|
6
6
|
import type { AvatarGroupItemProps } from './avatar-group-item';
|
|
7
7
|
export type DeepRequired<T> = {
|
|
8
8
|
[P in keyof T]-?: Required<T[P]>;
|
|
@@ -13,7 +13,7 @@ export type AvatarProps = AvatarPropTypes & {
|
|
|
13
13
|
};
|
|
14
14
|
export interface AvatarGroupOverrides {
|
|
15
15
|
AvatarGroupItem?: {
|
|
16
|
-
render?: (Component:
|
|
16
|
+
render?: (Component: ForwardRefExoticComponent<AvatarGroupItemProps & RefAttributes<HTMLElement>>, props: AvatarGroupItemProps, index: number) => ReactNode;
|
|
17
17
|
};
|
|
18
18
|
Avatar?: {
|
|
19
19
|
render?: (Component: typeof Avatar | ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AvatarProps } from './types';
|
|
1
|
+
import { type AvatarProps } from './types';
|
|
2
2
|
export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
|
-
import { ElementType, MouseEventHandler } from 'react';
|
|
5
|
+
import { type ElementType, type MouseEventHandler } from 'react';
|
|
3
6
|
import { jsx } from '@emotion/react';
|
|
4
|
-
import Avatar, { SizeType } from '@atlaskit/avatar';
|
|
5
|
-
import { PositionType } from '@atlaskit/tooltip';
|
|
6
|
-
import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
|
|
7
|
+
import Avatar, { type SizeType } from '@atlaskit/avatar';
|
|
8
|
+
import { type PositionType } from '@atlaskit/tooltip';
|
|
9
|
+
import { type AvatarGroupOverrides, type AvatarProps, type onAvatarClickHandler } from './types';
|
|
7
10
|
export interface AvatarGroupProps {
|
|
8
11
|
/**
|
|
9
12
|
* Indicates the layout of the avatar group.
|
package/dist/types-ts4.5/components/internal/hooks/use-register-item-with-focus-manager.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { FocusableElement } from '../../types';
|
|
2
|
+
import { type FocusableElement } from '../../types';
|
|
3
3
|
declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
|
|
4
4
|
export default useRegisterItemWithFocusManager;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { FocusableElement } from '../../types';
|
|
1
|
+
import { type FocusableElement } from '../../types';
|
|
2
2
|
export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { AvatarClickEventHandler, AvatarPropTypes } from '@atlaskit/avatar';
|
|
2
|
+
import { type AvatarClickEventHandler, type AvatarPropTypes } from '@atlaskit/avatar';
|
|
3
3
|
export interface MoreIndicatorProps extends AvatarPropTypes {
|
|
4
4
|
count: number;
|
|
5
5
|
'aria-controls'?: string;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { ElementType, ReactNode } from 'react';
|
|
1
|
+
import type { ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
|
|
2
2
|
import type { AnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
-
import { default as Avatar, type AvatarPropTypes } from '@atlaskit/avatar';
|
|
4
|
-
import { MenuGroupProps } from '@atlaskit/menu';
|
|
5
|
-
import { ContentProps } from '@atlaskit/popup';
|
|
3
|
+
import { type default as Avatar, type AvatarPropTypes } from '@atlaskit/avatar';
|
|
4
|
+
import { type MenuGroupProps } from '@atlaskit/menu';
|
|
5
|
+
import { type ContentProps } from '@atlaskit/popup';
|
|
6
6
|
import type { AvatarGroupItemProps } from './avatar-group-item';
|
|
7
7
|
export type DeepRequired<T> = {
|
|
8
8
|
[P in keyof T]-?: Required<T[P]>;
|
|
@@ -13,7 +13,7 @@ export type AvatarProps = AvatarPropTypes & {
|
|
|
13
13
|
};
|
|
14
14
|
export interface AvatarGroupOverrides {
|
|
15
15
|
AvatarGroupItem?: {
|
|
16
|
-
render?: (Component:
|
|
16
|
+
render?: (Component: ForwardRefExoticComponent<AvatarGroupItemProps & RefAttributes<HTMLElement>>, props: AvatarGroupItemProps, index: number) => ReactNode;
|
|
17
17
|
};
|
|
18
18
|
Avatar?: {
|
|
19
19
|
render?: (Component: typeof Avatar | ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AvatarProps } from './types';
|
|
1
|
+
import { type AvatarProps } from './types';
|
|
2
2
|
export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;
|
package/package.json
CHANGED
|
@@ -1,99 +1,97 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
99
|
-
}
|
|
2
|
+
"name": "@atlaskit/avatar-group",
|
|
3
|
+
"version": "9.7.0",
|
|
4
|
+
"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"registry": "https://registry.npmjs.org/"
|
|
7
|
+
},
|
|
8
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
9
|
+
"author": "Atlassian Pty Ltd",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"main": "dist/cjs/index.js",
|
|
12
|
+
"module": "dist/esm/index.js",
|
|
13
|
+
"module:es2019": "dist/es2019/index.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"atlaskit:src": "src/index.tsx",
|
|
17
|
+
"atlassian": {
|
|
18
|
+
"team": "Design System Team",
|
|
19
|
+
"productPushConsumption": [
|
|
20
|
+
"jira"
|
|
21
|
+
],
|
|
22
|
+
"releaseModel": "continuous",
|
|
23
|
+
"website": {
|
|
24
|
+
"name": "Avatar group",
|
|
25
|
+
"category": "Components"
|
|
26
|
+
},
|
|
27
|
+
"runReact18": true
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@atlaskit/avatar": "^21.10.0",
|
|
31
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
32
|
+
"@atlaskit/menu": "^2.4.0",
|
|
33
|
+
"@atlaskit/popup": "^1.18.0",
|
|
34
|
+
"@atlaskit/theme": "^12.9.0",
|
|
35
|
+
"@atlaskit/tokens": "^1.50.0",
|
|
36
|
+
"@atlaskit/tooltip": "^18.4.0",
|
|
37
|
+
"@babel/runtime": "^7.0.0",
|
|
38
|
+
"@emotion/react": "^11.7.1",
|
|
39
|
+
"bind-event-listener": "^3.0.0"
|
|
40
|
+
},
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@af/accessibility-testing": "*",
|
|
46
|
+
"@af/integration-testing": "*",
|
|
47
|
+
"@af/visual-regression": "*",
|
|
48
|
+
"@atlaskit/analytics-next": "^9.3.0",
|
|
49
|
+
"@atlaskit/ssr": "*",
|
|
50
|
+
"@atlaskit/toggle": "^13.1.0",
|
|
51
|
+
"@atlaskit/visual-regression": "*",
|
|
52
|
+
"@emotion/styled": "^11.0.0",
|
|
53
|
+
"@testing-library/react": "^12.1.5",
|
|
54
|
+
"@testing-library/user-event": "^14.4.3",
|
|
55
|
+
"lodash": "^4.17.21",
|
|
56
|
+
"react-dom": "^16.8.0",
|
|
57
|
+
"typescript": "~5.4.2",
|
|
58
|
+
"wait-for-expect": "^1.2.0"
|
|
59
|
+
},
|
|
60
|
+
"keywords": [
|
|
61
|
+
"atlaskit",
|
|
62
|
+
"react",
|
|
63
|
+
"ui"
|
|
64
|
+
],
|
|
65
|
+
"techstack": {
|
|
66
|
+
"@atlassian/frontend": {
|
|
67
|
+
"import-structure": "atlassian-conventions"
|
|
68
|
+
},
|
|
69
|
+
"@repo/internal": {
|
|
70
|
+
"dom-events": "use-bind-event-listener",
|
|
71
|
+
"design-system": "v1",
|
|
72
|
+
"ui-components": "lite-mode",
|
|
73
|
+
"analytics": "analytics-next",
|
|
74
|
+
"design-tokens": [
|
|
75
|
+
"color",
|
|
76
|
+
"spacing"
|
|
77
|
+
],
|
|
78
|
+
"deprecation": "no-deprecated-imports",
|
|
79
|
+
"styling": [
|
|
80
|
+
"emotion",
|
|
81
|
+
"static"
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"typesVersions": {
|
|
86
|
+
">=4.5 <4.9": {
|
|
87
|
+
"*": [
|
|
88
|
+
"dist/types-ts4.5/*",
|
|
89
|
+
"dist/types-ts4.5/index.d.ts"
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
"af:exports": {
|
|
94
|
+
".": "./src/index.tsx"
|
|
95
|
+
},
|
|
96
|
+
"homepage": "https://atlassian.design/components/avatar-group/"
|
|
97
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/avatar-group"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -28,90 +29,90 @@ import { SizeType } from '@atlaskit/avatar';
|
|
|
28
29
|
|
|
29
30
|
// @public
|
|
30
31
|
const AvatarGroup: ({
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
32
|
+
appearance,
|
|
33
|
+
avatar,
|
|
34
|
+
borderColor,
|
|
35
|
+
boundariesElement,
|
|
36
|
+
data,
|
|
37
|
+
isTooltipDisabled,
|
|
38
|
+
maxCount,
|
|
39
|
+
onAvatarClick,
|
|
40
|
+
onMoreClick,
|
|
41
|
+
overrides,
|
|
42
|
+
showMoreButtonProps,
|
|
43
|
+
size,
|
|
44
|
+
testId,
|
|
45
|
+
label,
|
|
46
|
+
tooltipPosition,
|
|
46
47
|
}: AvatarGroupProps) => jsx.JSX.Element;
|
|
47
48
|
export default AvatarGroup;
|
|
48
49
|
|
|
49
50
|
// @public (undocumented)
|
|
50
51
|
interface AvatarGroupItemProps {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
52
|
+
// (undocumented)
|
|
53
|
+
avatar: AvatarProps;
|
|
54
|
+
// (undocumented)
|
|
55
|
+
index: number;
|
|
56
|
+
// (undocumented)
|
|
57
|
+
isActive?: boolean;
|
|
58
|
+
// (undocumented)
|
|
59
|
+
isHover?: boolean;
|
|
60
|
+
// (undocumented)
|
|
61
|
+
onAvatarClick?: onAvatarClickHandler;
|
|
62
|
+
// (undocumented)
|
|
63
|
+
testId?: string;
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
// @public (undocumented)
|
|
66
67
|
interface AvatarGroupOverrides {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
68
|
+
// (undocumented)
|
|
69
|
+
Avatar?: {
|
|
70
|
+
render?: (
|
|
71
|
+
Component: ElementType<AvatarProps> | typeof default_2,
|
|
72
|
+
props: AvatarProps,
|
|
73
|
+
index: number,
|
|
74
|
+
) => ReactNode;
|
|
75
|
+
};
|
|
76
|
+
// (undocumented)
|
|
77
|
+
AvatarGroupItem?: {
|
|
78
|
+
render?: (
|
|
79
|
+
Component: ElementType<AvatarGroupItemProps>,
|
|
80
|
+
props: AvatarGroupItemProps,
|
|
81
|
+
index: number,
|
|
82
|
+
) => ReactNode;
|
|
83
|
+
};
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
// @public (undocumented)
|
|
86
87
|
export interface AvatarGroupProps {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
88
|
+
appearance?: 'grid' | 'stack';
|
|
89
|
+
avatar?: ElementType<AvatarProps> | typeof Avatar;
|
|
90
|
+
borderColor?: string;
|
|
91
|
+
boundariesElement?: 'scrollParent' | 'viewport' | 'window';
|
|
92
|
+
data: Array<AvatarProps>;
|
|
93
|
+
isTooltipDisabled?: boolean;
|
|
94
|
+
label?: string;
|
|
95
|
+
maxCount?: number;
|
|
96
|
+
onAvatarClick?: onAvatarClickHandler;
|
|
97
|
+
onMoreClick?: MouseEventHandler;
|
|
98
|
+
overrides?: AvatarGroupOverrides;
|
|
99
|
+
showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
|
|
100
|
+
size?: SizeType;
|
|
101
|
+
testId?: string;
|
|
102
|
+
tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
105
|
// @public (undocumented)
|
|
105
106
|
export type AvatarProps = AvatarPropTypes & {
|
|
106
|
-
|
|
107
|
-
|
|
107
|
+
name: string;
|
|
108
|
+
key?: number | string;
|
|
108
109
|
};
|
|
109
110
|
|
|
110
111
|
// @public (undocumented)
|
|
111
112
|
type onAvatarClickHandler = (
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
event: React.MouseEvent,
|
|
114
|
+
analyticsEvent: AnalyticsEvent | undefined,
|
|
115
|
+
index: number,
|
|
115
116
|
) => void;
|
|
116
117
|
|
|
117
118
|
// (No @packageDocumentation comment for this package)
|
|
@@ -125,7 +126,7 @@ type onAvatarClickHandler = (
|
|
|
125
126
|
|
|
126
127
|
```json
|
|
127
128
|
{
|
|
128
|
-
|
|
129
|
+
"react": "^16.8.0"
|
|
129
130
|
}
|
|
130
131
|
```
|
|
131
132
|
|