@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.
Files changed (42) hide show
  1. package/CHANGELOG.md +729 -709
  2. package/README.md +2 -1
  3. package/__perf__/default.tsx +12 -12
  4. package/dist/cjs/components/avatar-group.js +3 -1
  5. package/dist/cjs/components/grid.js +10 -7
  6. package/dist/cjs/components/internal/components/popup-avatar-group.js +3 -0
  7. package/dist/cjs/components/more-indicator.js +25 -10
  8. package/dist/cjs/components/stack.js +9 -5
  9. package/dist/es2019/components/avatar-group.js +3 -0
  10. package/dist/es2019/components/grid.js +10 -7
  11. package/dist/es2019/components/internal/components/popup-avatar-group.js +3 -0
  12. package/dist/es2019/components/more-indicator.js +25 -10
  13. package/dist/es2019/components/stack.js +9 -5
  14. package/dist/esm/components/avatar-group.js +3 -0
  15. package/dist/esm/components/grid.js +10 -7
  16. package/dist/esm/components/internal/components/popup-avatar-group.js +3 -0
  17. package/dist/esm/components/more-indicator.js +25 -10
  18. package/dist/esm/components/stack.js +9 -5
  19. package/dist/types/components/avatar-group-item.d.ts +1 -1
  20. package/dist/types/components/avatar-group.d.ts +7 -4
  21. package/dist/types/components/grid.d.ts +4 -1
  22. package/dist/types/components/internal/components/focus-manager.d.ts +2 -2
  23. package/dist/types/components/internal/components/popup-avatar-group.d.ts +1 -1
  24. package/dist/types/components/internal/hooks/use-register-item-with-focus-manager.d.ts +1 -1
  25. package/dist/types/components/internal/utiles/handle-focus.d.ts +1 -1
  26. package/dist/types/components/more-indicator.d.ts +1 -1
  27. package/dist/types/components/stack.d.ts +4 -1
  28. package/dist/types/components/types.d.ts +5 -5
  29. package/dist/types/components/utils.d.ts +1 -1
  30. package/dist/types-ts4.5/components/avatar-group-item.d.ts +1 -1
  31. package/dist/types-ts4.5/components/avatar-group.d.ts +7 -4
  32. package/dist/types-ts4.5/components/grid.d.ts +4 -1
  33. package/dist/types-ts4.5/components/internal/components/focus-manager.d.ts +2 -2
  34. package/dist/types-ts4.5/components/internal/components/popup-avatar-group.d.ts +1 -1
  35. package/dist/types-ts4.5/components/internal/hooks/use-register-item-with-focus-manager.d.ts +1 -1
  36. package/dist/types-ts4.5/components/internal/utiles/handle-focus.d.ts +1 -1
  37. package/dist/types-ts4.5/components/more-indicator.d.ts +1 -1
  38. package/dist/types-ts4.5/components/stack.d.ts +4 -1
  39. package/dist/types-ts4.5/components/types.d.ts +5 -5
  40. package/dist/types-ts4.5/components/utils.d.ts +1 -1
  41. package/package.json +96 -98
  42. 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: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
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,5 +1,5 @@
1
1
  import React from 'react';
2
- import { AvatarProps, onAvatarClickHandler } from './types';
2
+ import { type AvatarProps, type onAvatarClickHandler } from './types';
3
3
  export interface AvatarGroupItemProps {
4
4
  avatar: AvatarProps;
5
5
  isActive?: boolean;
@@ -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.
@@ -1,5 +1,8 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
5
+ import { type FC, type ReactNode } from 'react';
3
6
  declare const Grid: FC<{
4
7
  children: ReactNode;
5
8
  testId?: string;
@@ -1,5 +1,5 @@
1
- import React, { FC, ReactNode } from 'react';
2
- import { FocusableElement } from '../../types';
1
+ import React, { type FC, type ReactNode } from 'react';
2
+ import { type FocusableElement } from '../../types';
3
3
  /**
4
4
  *
5
5
  *
@@ -1,5 +1,5 @@
1
1
  import { jsx } from '@emotion/react';
2
- import { PopupAvatarGroupProps } from '../../types';
2
+ import { type PopupAvatarGroupProps } from '../../types';
3
3
  /**
4
4
  * It sets focus to the first avatar when popup is open.
5
5
  */
@@ -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,5 +1,8 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
5
+ import { type FC, type ReactNode } from 'react';
3
6
  declare const Stack: FC<{
4
7
  children: ReactNode;
5
8
  testId?: 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: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
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
- "name": "@atlaskit/avatar-group",
3
- "version": "9.6.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.7.0",
31
- "@atlaskit/ds-lib": "^2.3.0",
32
- "@atlaskit/menu": "^2.2.0",
33
- "@atlaskit/popup": "^1.17.0",
34
- "@atlaskit/theme": "^12.7.0",
35
- "@atlaskit/tokens": "^1.45.0",
36
- "@atlaskit/tooltip": "^18.3.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
- "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
53
- "@emotion/styled": "^11.0.0",
54
- "@testing-library/react": "^12.1.5",
55
- "@testing-library/user-event": "^14.4.3",
56
- "lodash": "^4.17.21",
57
- "react-dom": "^16.8.0",
58
- "typescript": "~5.4.2",
59
- "wait-for-expect": "^1.2.0"
60
- },
61
- "keywords": [
62
- "atlaskit",
63
- "react",
64
- "ui"
65
- ],
66
- "techstack": {
67
- "@atlassian/frontend": {
68
- "import-structure": "atlassian-conventions"
69
- },
70
- "@repo/internal": {
71
- "dom-events": "use-bind-event-listener",
72
- "design-system": "v1",
73
- "ui-components": "lite-mode",
74
- "analytics": "analytics-next",
75
- "design-tokens": [
76
- "color",
77
- "spacing"
78
- ],
79
- "deprecation": "no-deprecated-imports",
80
- "styling": [
81
- "emotion",
82
- "static"
83
- ]
84
- }
85
- },
86
- "typesVersions": {
87
- ">=4.5 <4.9": {
88
- "*": [
89
- "dist/types-ts4.5/*",
90
- "dist/types-ts4.5/index.d.ts"
91
- ]
92
- }
93
- },
94
- "af:exports": {
95
- ".": "./src/index.tsx"
96
- },
97
- "homepage": "https://atlassian.design/components/avatar-group/",
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 [API Extractor](https://api-extractor.com/).
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
- appearance,
32
- avatar,
33
- borderColor,
34
- boundariesElement,
35
- data,
36
- isTooltipDisabled,
37
- maxCount,
38
- onAvatarClick,
39
- onMoreClick,
40
- overrides,
41
- showMoreButtonProps,
42
- size,
43
- testId,
44
- label,
45
- tooltipPosition,
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
- // (undocumented)
52
- avatar: AvatarProps;
53
- // (undocumented)
54
- index: number;
55
- // (undocumented)
56
- isActive?: boolean;
57
- // (undocumented)
58
- isHover?: boolean;
59
- // (undocumented)
60
- onAvatarClick?: onAvatarClickHandler;
61
- // (undocumented)
62
- testId?: string;
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
- // (undocumented)
68
- Avatar?: {
69
- render?: (
70
- Component: ElementType<AvatarProps> | typeof default_2,
71
- props: AvatarProps,
72
- index: number,
73
- ) => ReactNode;
74
- };
75
- // (undocumented)
76
- AvatarGroupItem?: {
77
- render?: (
78
- Component: ElementType<AvatarGroupItemProps>,
79
- props: AvatarGroupItemProps,
80
- index: number,
81
- ) => ReactNode;
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
- appearance?: 'grid' | 'stack';
88
- avatar?: ElementType<AvatarProps> | typeof Avatar;
89
- borderColor?: string;
90
- boundariesElement?: 'scrollParent' | 'viewport' | 'window';
91
- data: Array<AvatarProps>;
92
- isTooltipDisabled?: boolean;
93
- label?: string;
94
- maxCount?: number;
95
- onAvatarClick?: onAvatarClickHandler;
96
- onMoreClick?: MouseEventHandler;
97
- overrides?: AvatarGroupOverrides;
98
- showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
99
- size?: SizeType;
100
- testId?: string;
101
- tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
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
- name: string;
107
- key?: number | string;
107
+ name: string;
108
+ key?: number | string;
108
109
  };
109
110
 
110
111
  // @public (undocumented)
111
112
  type onAvatarClickHandler = (
112
- event: React.MouseEvent,
113
- analyticsEvent: AnalyticsEvent | undefined,
114
- index: number,
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
- "react": "^16.8.0"
129
+ "react": "^16.8.0"
129
130
  }
130
131
  ```
131
132