@atlaskit/avatar-group 9.1.1 → 9.1.3

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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 9.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 9.1.2
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 9.1.1
4
16
 
5
17
  ### Patch Changes
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.1.1",
3
+ "version": "9.1.3",
4
4
  "sideEffects": false
5
5
  }
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.1.1",
3
+ "version": "9.1.3",
4
4
  "sideEffects": false
5
5
  }
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.1.1",
3
+ "version": "9.1.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.1.1",
3
+ "version": "9.1.3",
4
4
  "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.0 <4.5": {
17
- "*": [
18
- "dist/types-ts4.0/*",
19
- "dist/types-ts4.0/index.d.ts"
20
- ]
21
- }
22
- },
23
15
  "sideEffects": false,
24
16
  "atlaskit:src": "src/index.tsx",
25
17
  "atlassian": {
@@ -36,10 +28,10 @@
36
28
  },
37
29
  "dependencies": {
38
30
  "@atlaskit/avatar": "^21.1.0",
39
- "@atlaskit/menu": "^1.3.0",
31
+ "@atlaskit/menu": "^1.4.0",
40
32
  "@atlaskit/popup": "^1.5.0",
41
33
  "@atlaskit/theme": "^12.2.0",
42
- "@atlaskit/tokens": "^0.10.0",
34
+ "@atlaskit/tokens": "^0.12.0",
43
35
  "@atlaskit/tooltip": "^17.6.0",
44
36
  "@babel/runtime": "^7.0.0",
45
37
  "@emotion/react": "^11.7.1"
@@ -49,11 +41,11 @@
49
41
  },
50
42
  "devDependencies": {
51
43
  "@atlaskit/analytics-next": "^8.2.0",
52
- "@atlaskit/button": "^16.3.0",
44
+ "@atlaskit/button": "^16.5.0",
53
45
  "@atlaskit/code": "^14.4.0",
54
46
  "@atlaskit/docs": "*",
55
47
  "@atlaskit/ds-lib": "^2.1.1",
56
- "@atlaskit/form": "^8.6.0",
48
+ "@atlaskit/form": "^8.8.0",
57
49
  "@atlaskit/icon": "^21.11.0",
58
50
  "@atlaskit/modal-dialog": "^12.4.0",
59
51
  "@atlaskit/section-message": "^6.3.0",
package/report.api.md CHANGED
@@ -1,8 +1,17 @@
1
- ## API Report File for "@atlaskit/avatar-group".
1
+ <!-- API Report Version: 2.2 -->
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ ## API Report File for "@atlaskit/avatar-group"
4
4
 
5
- [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
5
+ > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
6
+ > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
+
8
+ ### Table of contents
9
+
10
+ - [Main Entry Types](#main-entry-types)
11
+
12
+ ### Main Entry Types
13
+
14
+ <!--SECTION START: Main Entry Types-->
6
15
 
7
16
  ```ts
8
17
  import type { AnalyticsEvent } from '@atlaskit/analytics-next';
@@ -13,16 +22,8 @@ import { MouseEventHandler } from 'react';
13
22
  import type { ReactNode } from 'react';
14
23
  import { SizeType } from '@atlaskit/avatar';
15
24
 
16
- /**
17
- * __Avatar group__
18
- *
19
- * An avatar group displays a number of avatars grouped together in a stack or grid.
20
- *
21
- * - [Examples](https://atlassian.design/components/avatar-group/examples)
22
- * - [Code](https://atlassian.design/components/avatar-group/code)
23
- * - [Usage](https://atlassian.design/components/avatar-group/usage)
24
- */
25
- declare const AvatarGroup: ({
25
+ // @public
26
+ const AvatarGroup: ({
26
27
  appearance,
27
28
  avatar,
28
29
  borderColor,
@@ -40,131 +41,75 @@ declare const AvatarGroup: ({
40
41
  }: AvatarGroupProps) => jsx.JSX.Element;
41
42
  export default AvatarGroup;
42
43
 
43
- declare interface AvatarGroupItemProps {
44
+ // @public (undocumented)
45
+ interface AvatarGroupItemProps {
46
+ // (undocumented)
44
47
  avatar: AvatarProps;
48
+ // (undocumented)
49
+ index: number;
50
+ // (undocumented)
45
51
  isActive?: boolean;
52
+ // (undocumented)
46
53
  isHover?: boolean;
47
- index: number;
54
+ // (undocumented)
48
55
  onAvatarClick?: onAvatarClickHandler;
56
+ // (undocumented)
49
57
  testId?: string;
50
58
  }
51
59
 
52
- declare interface AvatarGroupOverrides {
53
- AvatarGroupItem?: {
60
+ // @public (undocumented)
61
+ interface AvatarGroupOverrides {
62
+ // (undocumented)
63
+ Avatar?: {
54
64
  render?: (
55
- Component: ElementType<AvatarGroupItemProps>,
56
- props: AvatarGroupItemProps,
65
+ Component: ElementType<AvatarProps>,
66
+ props: AvatarProps,
57
67
  index: number,
58
68
  ) => ReactNode;
59
69
  };
60
- Avatar?: {
70
+ // (undocumented)
71
+ AvatarGroupItem?: {
61
72
  render?: (
62
- Component: ElementType<AvatarProps>,
63
- props: AvatarProps,
73
+ Component: ElementType<AvatarGroupItemProps>,
74
+ props: AvatarGroupItemProps,
64
75
  index: number,
65
76
  ) => ReactNode;
66
77
  };
67
78
  }
68
79
 
69
- export declare interface AvatarGroupProps {
70
- /**
71
- * Indicates the layout of the avatar-group.
72
- * Avatars will either be overlapped in a stack, or
73
- * laid out in an even grid formation
74
- * Defaults to "stack".
75
- */
80
+ // @public (undocumented)
81
+ export interface AvatarGroupProps {
76
82
  appearance?: 'grid' | 'stack';
77
- /**
78
- * Component used to render each avatar
79
- */
80
83
  avatar?: ElementType<AvatarProps>;
81
- /**
82
- * The maximum number of avatars allowed in the list.
83
- * Defaults to 5 when displayed as a stack,
84
- * and 11 when displayed as a grid.
85
- */
86
- maxCount?: number;
87
- /**
88
- * Defines the size of the avatar.
89
- * Defaults to "medium".
90
- */
91
- size?: SizeType;
92
- /**
93
- * Typically the background color that the avatar is presented on.
94
- * Accepts any color argument that the CSS border-color property accepts.
95
- */
96
84
  borderColor?: string;
97
- /**
98
- * Array of avatar data passed to each `avatar` component.
99
- * These props will be spread on to the component passed into avatar.
100
- */
85
+ boundariesElement?: 'scrollParent' | 'viewport' | 'window';
101
86
  data: Array<AvatarProps>;
102
- /**
103
- * Handle the click event on the avatar item.
104
- * Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.
105
- */
87
+ isTooltipDisabled?: boolean;
88
+ label?: string;
89
+ maxCount?: number;
106
90
  onAvatarClick?: onAvatarClickHandler;
107
- /**
108
- * Take control of the click event on the more indicator.
109
- * This will cancel the default dropdown behavior.
110
- */
111
91
  onMoreClick?: MouseEventHandler;
112
- /**
113
- * Provide additional props to the MoreButton.
114
- * Example use cases: altering tab order by providing tabIndex;
115
- * adding onClick behaviour without losing the default dropdown
116
- */
92
+ overrides?: AvatarGroupOverrides;
117
93
  showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
118
- /**
119
- * Element the overflow popup should be attached to.
120
- * Defaults to "viewport".
121
- */
122
- boundariesElement?: 'viewport' | 'window' | 'scrollParent';
123
- /**
124
- * A `testId` prop is provided for specified elements,
125
- * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
126
- * serving as a hook for automated tests.
127
- */
128
- /**
129
- * Will set these elements when defined:
130
- * - Container element - `{testId}--avatar-group`
131
- * - Avatar items - `{testId}--avatar-{index}`
132
- * - Overflow menu button - `{testId}--overflow-menu--trigger`
133
- * - Overflow menu content - `{testId}--overflow-menu--content`
134
- */
94
+ size?: SizeType;
135
95
  testId?: string;
136
- /**
137
- * Custom overrides for the composed components.
138
- */
139
- overrides?: AvatarGroupOverrides;
140
- /**
141
- * Disables tooltips
142
- */
143
- isTooltipDisabled?: boolean;
144
- /**
145
- Text to be used as aria-label for the list of avatars.
146
- Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
147
-
148
- The label should describe the `AvatarGroup`'s entities, for instance:
149
- - `label="team members"`, screen reader announcement would be `list team members, X items`
150
- - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
151
-
152
- When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
153
- */
154
- label?: string;
155
96
  }
156
97
 
157
- export declare type AvatarProps = AvatarPropTypes & {
98
+ // @public (undocumented)
99
+ export type AvatarProps = AvatarPropTypes & {
158
100
  name: string;
159
101
  enableTooltip?: boolean;
160
- key?: string | number;
102
+ key?: number | string;
161
103
  };
162
104
 
163
- declare type onAvatarClickHandler = (
105
+ // @public (undocumented)
106
+ type onAvatarClickHandler = (
164
107
  event: React.MouseEvent,
165
108
  analyticsEvent: AnalyticsEvent | undefined,
166
109
  index: number,
167
110
  ) => void;
168
111
 
169
- export {};
112
+ // (No @packageDocumentation comment for this package)
170
113
  ```
114
+
115
+ <!--SECTION END: Main Entry Types-->
@@ -1,12 +0,0 @@
1
- import { FC } from 'react';
2
- import { AvatarProps, onAvatarClickHandler } from './types';
3
- export interface AvatarGroupItemProps {
4
- avatar: AvatarProps;
5
- isActive?: boolean;
6
- isHover?: boolean;
7
- index: number;
8
- onAvatarClick?: onAvatarClickHandler;
9
- testId?: string;
10
- }
11
- declare const AvatarGroupItem: FC<AvatarGroupItemProps>;
12
- export default AvatarGroupItem;
@@ -1,103 +0,0 @@
1
- /** @jsx jsx */
2
- import { ElementType, MouseEventHandler } from 'react';
3
- import { jsx } from '@emotion/react';
4
- import { SizeType } from '@atlaskit/avatar';
5
- import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
6
- export interface AvatarGroupProps {
7
- /**
8
- * Indicates the layout of the avatar-group.
9
- * Avatars will either be overlapped in a stack, or
10
- * laid out in an even grid formation
11
- * Defaults to "stack".
12
- */
13
- appearance?: 'grid' | 'stack';
14
- /**
15
- * Component used to render each avatar
16
- */
17
- avatar?: ElementType<AvatarProps>;
18
- /**
19
- * The maximum number of avatars allowed in the list.
20
- * Defaults to 5 when displayed as a stack,
21
- * and 11 when displayed as a grid.
22
- */
23
- maxCount?: number;
24
- /**
25
- * Defines the size of the avatar.
26
- * Defaults to "medium".
27
- */
28
- size?: SizeType;
29
- /**
30
- * Typically the background color that the avatar is presented on.
31
- * Accepts any color argument that the CSS border-color property accepts.
32
- */
33
- borderColor?: string;
34
- /**
35
- * Array of avatar data passed to each `avatar` component.
36
- * These props will be spread on to the component passed into avatar.
37
- */
38
- data: Array<AvatarProps>;
39
- /**
40
- * Handle the click event on the avatar item.
41
- * Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.
42
- */
43
- onAvatarClick?: onAvatarClickHandler;
44
- /**
45
- * Take control of the click event on the more indicator.
46
- * This will cancel the default dropdown behavior.
47
- */
48
- onMoreClick?: MouseEventHandler;
49
- /**
50
- * Provide additional props to the MoreButton.
51
- * Example use cases: altering tab order by providing tabIndex;
52
- * adding onClick behaviour without losing the default dropdown
53
- */
54
- showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
55
- /**
56
- * Element the overflow popup should be attached to.
57
- * Defaults to "viewport".
58
- */
59
- boundariesElement?: 'viewport' | 'window' | 'scrollParent';
60
- /**
61
- * A `testId` prop is provided for specified elements,
62
- * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
63
- * serving as a hook for automated tests.
64
- */
65
- /**
66
- * Will set these elements when defined:
67
- * - Container element - `{testId}--avatar-group`
68
- * - Avatar items - `{testId}--avatar-{index}`
69
- * - Overflow menu button - `{testId}--overflow-menu--trigger`
70
- * - Overflow menu content - `{testId}--overflow-menu--content`
71
- */
72
- testId?: string;
73
- /**
74
- * Custom overrides for the composed components.
75
- */
76
- overrides?: AvatarGroupOverrides;
77
- /**
78
- * Disables tooltips
79
- */
80
- isTooltipDisabled?: boolean;
81
- /**
82
- Text to be used as aria-label for the list of avatars.
83
- Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
84
-
85
- The label should describe the `AvatarGroup`'s entities, for instance:
86
- - `label="team members"`, screen reader announcement would be `list team members, X items`
87
- - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
88
-
89
- When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
90
- */
91
- label?: string;
92
- }
93
- /**
94
- * __Avatar group__
95
- *
96
- * An avatar group displays a number of avatars grouped together in a stack or grid.
97
- *
98
- * - [Examples](https://atlassian.design/components/avatar-group/examples)
99
- * - [Code](https://atlassian.design/components/avatar-group/code)
100
- * - [Usage](https://atlassian.design/components/avatar-group/usage)
101
- */
102
- declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, }: AvatarGroupProps) => jsx.JSX.Element;
103
- export default AvatarGroup;
@@ -1,8 +0,0 @@
1
- /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
3
- declare const Grid: FC<{
4
- children: ReactNode;
5
- testId?: string;
6
- 'aria-label': string;
7
- }>;
8
- export default Grid;
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import { AvatarClickEventHandler, AvatarPropTypes } from '@atlaskit/avatar';
3
- export interface MoreIndicatorProps extends AvatarPropTypes {
4
- count: number;
5
- 'aria-controls'?: string;
6
- 'aria-expanded'?: boolean;
7
- 'aria-haspopup'?: boolean;
8
- buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
9
- onClick: AvatarClickEventHandler;
10
- isActive: boolean;
11
- }
12
- declare const MoreIndicator: import("react").ForwardRefExoticComponent<MoreIndicatorProps & import("react").RefAttributes<HTMLButtonElement>>;
13
- export default MoreIndicator;
@@ -1,8 +0,0 @@
1
- /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
3
- declare const Stack: FC<{
4
- children: ReactNode;
5
- testId?: string;
6
- 'aria-label': string;
7
- }>;
8
- export default Stack;
@@ -1,21 +0,0 @@
1
- import type { ElementType, ReactNode } from 'react';
2
- import type { AnalyticsEvent } from '@atlaskit/analytics-next';
3
- import type { AvatarPropTypes } from '@atlaskit/avatar';
4
- import type { AvatarGroupItemProps } from './avatar-group-item';
5
- export declare type DeepRequired<T> = {
6
- [P in keyof T]-?: Required<T[P]>;
7
- };
8
- export declare type AvatarProps = AvatarPropTypes & {
9
- name: string;
10
- enableTooltip?: boolean;
11
- key?: string | number;
12
- };
13
- export interface AvatarGroupOverrides {
14
- AvatarGroupItem?: {
15
- render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
16
- };
17
- Avatar?: {
18
- render?: (Component: ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
19
- };
20
- }
21
- export declare type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
@@ -1,2 +0,0 @@
1
- import { AvatarProps } from './types';
2
- export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;
@@ -1,3 +0,0 @@
1
- export { default } from './components/avatar-group';
2
- export type { AvatarGroupProps } from './components/avatar-group';
3
- export type { AvatarProps } from './components/types';