@atlaskit/avatar 25.9.1 → 25.9.2
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/dist/cjs/avatar-content.js +22 -21
- package/dist/cjs/avatar-item.js +2 -2
- package/dist/cjs/avatar.js +10 -8
- package/dist/cjs/constants.js +2 -15
- package/dist/cjs/context.js +1 -31
- package/dist/cjs/get-appearance.js +17 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/internal/content-context.js +22 -0
- package/dist/cjs/internal/ensure-is-inside-avatar-context.js +18 -0
- package/dist/cjs/internal/get-custom-element.js +16 -0
- package/dist/cjs/internal/presence-wrapper.js +61 -0
- package/dist/cjs/internal/status-wrapper.js +60 -0
- package/dist/cjs/presence.js +2 -49
- package/dist/cjs/status.js +2 -48
- package/dist/es2019/avatar-content.js +4 -3
- package/dist/es2019/avatar-item.js +1 -1
- package/dist/es2019/avatar.js +6 -4
- package/dist/es2019/constants.js +1 -14
- package/dist/es2019/context.js +1 -29
- package/dist/es2019/get-appearance.js +11 -0
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/internal/content-context.js +16 -0
- package/dist/es2019/internal/ensure-is-inside-avatar-context.js +13 -0
- package/dist/es2019/internal/get-custom-element.js +10 -0
- package/dist/es2019/internal/presence-wrapper.js +53 -0
- package/dist/es2019/internal/status-wrapper.js +52 -0
- package/dist/es2019/presence.js +1 -49
- package/dist/es2019/status.js +1 -48
- package/dist/esm/avatar-content.js +22 -21
- package/dist/esm/avatar-item.js +1 -1
- package/dist/esm/avatar.js +6 -4
- package/dist/esm/constants.js +1 -14
- package/dist/esm/context.js +0 -30
- package/dist/esm/get-appearance.js +11 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/internal/content-context.js +16 -0
- package/dist/esm/internal/ensure-is-inside-avatar-context.js +13 -0
- package/dist/esm/internal/get-custom-element.js +10 -0
- package/dist/esm/internal/presence-wrapper.js +52 -0
- package/dist/esm/internal/status-wrapper.js +51 -0
- package/dist/esm/presence.js +1 -48
- package/dist/esm/status.js +1 -47
- package/dist/types/constants.d.ts +1 -4
- package/dist/types/context.d.ts +1 -36
- package/dist/types/get-appearance.d.ts +3 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/internal/content-context.d.ts +29 -0
- package/dist/types/internal/ensure-is-inside-avatar-context.d.ts +6 -0
- package/dist/types/internal/get-custom-element.d.ts +3 -0
- package/dist/types/internal/presence-wrapper.d.ts +19 -0
- package/dist/types/internal/status-wrapper.d.ts +19 -0
- package/dist/types/presence.d.ts +1 -12
- package/dist/types/status.d.ts +1 -12
- package/dist/types-ts4.5/constants.d.ts +1 -4
- package/dist/types-ts4.5/context.d.ts +1 -36
- package/dist/types-ts4.5/get-appearance.d.ts +3 -0
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/internal/content-context.d.ts +29 -0
- package/dist/types-ts4.5/internal/ensure-is-inside-avatar-context.d.ts +6 -0
- package/dist/types-ts4.5/internal/get-custom-element.d.ts +3 -0
- package/dist/types-ts4.5/internal/presence-wrapper.d.ts +19 -0
- package/dist/types-ts4.5/internal/status-wrapper.d.ts +19 -0
- package/dist/types-ts4.5/presence.d.ts +1 -12
- package/dist/types-ts4.5/status.d.ts +1 -12
- package/package.json +1 -1
- package/dist/cjs/utilities.js +0 -26
- package/dist/es2019/utilities.js +0 -19
- package/dist/esm/utilities.js +0 -19
- package/dist/types/utilities.d.ts +0 -4
- package/dist/types-ts4.5/utilities.d.ts +0 -4
- /package/dist/cjs/{presence.compiled.css → internal/presence-wrapper.compiled.css} +0 -0
- /package/dist/cjs/{status.compiled.css → internal/status-wrapper.compiled.css} +0 -0
- /package/dist/es2019/{presence.compiled.css → internal/presence-wrapper.compiled.css} +0 -0
- /package/dist/es2019/{status.compiled.css → internal/status-wrapper.compiled.css} +0 -0
- /package/dist/esm/{presence.compiled.css → internal/presence-wrapper.compiled.css} +0 -0
- /package/dist/esm/{status.compiled.css → internal/status-wrapper.compiled.css} +0 -0
package/dist/esm/presence.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/* presence.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
-
import "./presence.compiled.css";
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
4
|
import { Fragment } from 'react';
|
|
@@ -67,50 +66,4 @@ var AvatarPresence = function AvatarPresence(_ref) {
|
|
|
67
66
|
xmlns: "http://www.w3.org/2000/svg"
|
|
68
67
|
}, getPresence(presence)) : children);
|
|
69
68
|
};
|
|
70
|
-
export default AvatarPresence;
|
|
71
|
-
var styles = {
|
|
72
|
-
root: "_kqswstnw _lcxvglyw"
|
|
73
|
-
};
|
|
74
|
-
var iconSizeMap = {
|
|
75
|
-
small: "_4t3i1crf _1bsb1crf",
|
|
76
|
-
medium: "_4t3idlk8 _1bsbdlk8",
|
|
77
|
-
large: "_4t3io7ao _1bsbo7ao",
|
|
78
|
-
xlarge: "_4t3if6fq _1bsbf6fq"
|
|
79
|
-
};
|
|
80
|
-
var circleIconOffsetMap = {
|
|
81
|
-
small: "_94n5idpf _1xi2idpf",
|
|
82
|
-
medium: "_94n5idpf _1xi2idpf",
|
|
83
|
-
large: "_94n5t94y _1xi2t94y",
|
|
84
|
-
xlarge: "_94n51v6z _1xi21v6z"
|
|
85
|
-
};
|
|
86
|
-
var squareIconOffsetMap = {
|
|
87
|
-
root: "_94n5myb0 _1xi2myb0"
|
|
88
|
-
};
|
|
89
|
-
var hexagonIconOffsetMap = {
|
|
90
|
-
small: "_94n51n1a _1xi21n1a",
|
|
91
|
-
medium: "_94n51n1a _1xi21n1a",
|
|
92
|
-
large: "_94n51y44 _1xi2myb0",
|
|
93
|
-
xlarge: "_94n5l52n _1xi21lpd"
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* __Presence wrapper__
|
|
98
|
-
*
|
|
99
|
-
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
100
|
-
*/
|
|
101
|
-
export var PresenceWrapper = function PresenceWrapper(_ref2) {
|
|
102
|
-
var size = _ref2.size,
|
|
103
|
-
appearance = _ref2.appearance,
|
|
104
|
-
children = _ref2.children,
|
|
105
|
-
borderColor = _ref2.borderColor,
|
|
106
|
-
presence = _ref2.presence,
|
|
107
|
-
testId = _ref2.testId;
|
|
108
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
109
|
-
"aria-hidden": "true",
|
|
110
|
-
"data-testid": testId && "".concat(testId, "--presence"),
|
|
111
|
-
className: ax([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
|
|
112
|
-
}, /*#__PURE__*/React.createElement(AvatarPresence, {
|
|
113
|
-
borderColor: borderColor,
|
|
114
|
-
presence: !children ? presence : undefined
|
|
115
|
-
}, children));
|
|
116
|
-
};
|
|
69
|
+
export default AvatarPresence;
|
package/dist/esm/status.js
CHANGED
|
@@ -1,34 +1,9 @@
|
|
|
1
1
|
/* status.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
-
import "./status.compiled.css";
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
4
|
import { Fragment } from 'react';
|
|
6
5
|
import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
|
|
7
6
|
import IconWrapper from './internal/icon-wrapper';
|
|
8
|
-
var styles = {
|
|
9
|
-
root: "_kqswstnw"
|
|
10
|
-
};
|
|
11
|
-
var iconSizeMap = {
|
|
12
|
-
small: "_4t3i1crf _1bsb1crf",
|
|
13
|
-
medium: "_4t3idlk8 _1bsbdlk8",
|
|
14
|
-
large: "_4t3io7ao _1bsbo7ao",
|
|
15
|
-
xlarge: "_4t3if6fq _1bsbf6fq"
|
|
16
|
-
};
|
|
17
|
-
var circleIconOffsetMap = {
|
|
18
|
-
small: "_rjxpidpf _152tidpf",
|
|
19
|
-
medium: "_rjxpidpf _152tidpf",
|
|
20
|
-
large: "_rjxpt94y _152tt94y",
|
|
21
|
-
xlarge: "_rjxp1v6z _152t1v6z"
|
|
22
|
-
};
|
|
23
|
-
var squareIconOffsetMap = {
|
|
24
|
-
root: "_rjxpidpf _152tidpf"
|
|
25
|
-
};
|
|
26
|
-
var hexagonIconOffsetMap = {
|
|
27
|
-
small: "_rjxp1n1a _152t1n1a",
|
|
28
|
-
medium: "_rjxp1n1a _152t1n1a",
|
|
29
|
-
large: "_rjxpmyb0 _152t1y44",
|
|
30
|
-
xlarge: "_rjxp1lpd _152tl52n"
|
|
31
|
-
};
|
|
32
7
|
var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
|
|
33
8
|
fill: "var(--ds-icon-success, ".concat(G400, ")"),
|
|
34
9
|
cx: "4",
|
|
@@ -89,25 +64,4 @@ var AvatarStatus = function AvatarStatus(_ref) {
|
|
|
89
64
|
xmlns: "http://www.w3.org/2000/svg"
|
|
90
65
|
}, getStatus(status)) : children);
|
|
91
66
|
};
|
|
92
|
-
export default AvatarStatus;
|
|
93
|
-
/**
|
|
94
|
-
* __Status wrapper__
|
|
95
|
-
*
|
|
96
|
-
* A status wrapper is used internally to position status on top of the avatar.
|
|
97
|
-
*/
|
|
98
|
-
export var StatusWrapper = function StatusWrapper(_ref2) {
|
|
99
|
-
var size = _ref2.size,
|
|
100
|
-
status = _ref2.status,
|
|
101
|
-
appearance = _ref2.appearance,
|
|
102
|
-
borderColor = _ref2.borderColor,
|
|
103
|
-
children = _ref2.children,
|
|
104
|
-
testId = _ref2.testId;
|
|
105
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
106
|
-
"aria-hidden": "true",
|
|
107
|
-
"data-testid": testId && "".concat(testId, "--status"),
|
|
108
|
-
className: ax([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
|
|
109
|
-
}, /*#__PURE__*/React.createElement(AvatarStatus, {
|
|
110
|
-
borderColor: borderColor,
|
|
111
|
-
status: !children ? status : undefined
|
|
112
|
-
}, children));
|
|
113
|
-
};
|
|
67
|
+
export default AvatarStatus;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import { type AvatarSizeMap
|
|
1
|
+
import { type AvatarSizeMap } from './types';
|
|
2
2
|
export declare const AVATAR_SIZES: AvatarSizeMap;
|
|
3
3
|
export declare const AVATAR_RADIUS: AvatarSizeMap;
|
|
4
4
|
export declare const BORDER_WIDTH = 2;
|
|
5
5
|
export declare const ACTIVE_SCALE_FACTOR = 0.9;
|
|
6
|
-
export declare const CSS_VAR_AVATAR_BGCOLOR = "--avatar-background-color";
|
|
7
|
-
export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
|
|
8
|
-
export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;
|
package/dist/types/context.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type AppearanceType, type SizeType } from './types';
|
|
1
|
+
import { type SizeType } from './types';
|
|
3
2
|
export type AvatarContextProps = {
|
|
4
3
|
size: SizeType;
|
|
5
4
|
};
|
|
@@ -18,37 +17,3 @@ export type AvatarContextProps = {
|
|
|
18
17
|
*/
|
|
19
18
|
export declare const AvatarContext: import('react').Context<AvatarContextProps | undefined>;
|
|
20
19
|
export declare const useAvatarContext: () => AvatarContextProps | undefined;
|
|
21
|
-
type AvatarContentContextProps = {
|
|
22
|
-
as: 'a' | 'button' | 'span';
|
|
23
|
-
appearance: AppearanceType;
|
|
24
|
-
avatarImage: ReactNode;
|
|
25
|
-
borderColor?: string;
|
|
26
|
-
href?: string;
|
|
27
|
-
isDisabled?: boolean;
|
|
28
|
-
label?: string;
|
|
29
|
-
onClick?: MouseEventHandler;
|
|
30
|
-
ref: ForwardedRef<HTMLElement>;
|
|
31
|
-
tabIndex?: number;
|
|
32
|
-
target?: '_blank' | '_self' | '_top' | '_parent';
|
|
33
|
-
testId?: string;
|
|
34
|
-
size: SizeType;
|
|
35
|
-
stackIndex?: number;
|
|
36
|
-
'aria-controls'?: string;
|
|
37
|
-
'aria-expanded'?: boolean;
|
|
38
|
-
'aria-haspopup'?: boolean | 'dialog';
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* __Avatar content context__
|
|
42
|
-
*
|
|
43
|
-
* This context provides the props for the AvatarContent component, enabling
|
|
44
|
-
* consumers to compose the AvatarContent with the Avatar component.
|
|
45
|
-
*/
|
|
46
|
-
export declare const AvatarContentContext: import('react').Context<AvatarContentContextProps>;
|
|
47
|
-
export declare const useAvatarContent: () => AvatarContentContextProps;
|
|
48
|
-
/**
|
|
49
|
-
* Used to ensure Avatar sub-components are used within a Avatar component,
|
|
50
|
-
* and provide a useful error message if not.
|
|
51
|
-
*/
|
|
52
|
-
export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
|
|
53
|
-
export declare const useEnsureIsInsideAvatar: () => void;
|
|
54
|
-
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export { default as Status } from './status';
|
|
|
9
9
|
export type { StatusProps } from './status';
|
|
10
10
|
export { default as Skeleton } from './skeleton';
|
|
11
11
|
export type { SkeletonProps } from './skeleton';
|
|
12
|
-
export { getAppearanceForAppType } from './
|
|
12
|
+
export { default as getAppearanceForAppType } from './get-appearance';
|
|
13
13
|
export { AvatarContext, type AvatarContextProps, useAvatarContext } from './context';
|
|
14
14
|
export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';
|
|
15
15
|
export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type ForwardedRef, type MouseEventHandler, type ReactNode } from 'react';
|
|
2
|
+
import { type AppearanceType, type SizeType } from '../types';
|
|
3
|
+
type AvatarContentContextProps = {
|
|
4
|
+
as: 'a' | 'button' | 'span';
|
|
5
|
+
appearance: AppearanceType;
|
|
6
|
+
avatarImage: ReactNode;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
href?: string;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
label?: string;
|
|
11
|
+
onClick?: MouseEventHandler;
|
|
12
|
+
ref: ForwardedRef<HTMLElement>;
|
|
13
|
+
tabIndex?: number;
|
|
14
|
+
target?: '_blank' | '_self' | '_top' | '_parent';
|
|
15
|
+
testId?: string;
|
|
16
|
+
size: SizeType;
|
|
17
|
+
stackIndex?: number;
|
|
18
|
+
'aria-controls'?: string;
|
|
19
|
+
'aria-expanded'?: boolean;
|
|
20
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* __Avatar content context__
|
|
24
|
+
*
|
|
25
|
+
* This context provides the props for the AvatarContent component, enabling
|
|
26
|
+
* consumers to compose the AvatarContent with the Avatar component.
|
|
27
|
+
*/
|
|
28
|
+
export declare const AvatarContentContext: import('react').Context<AvatarContentContextProps>;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Used to ensure Avatar sub-components are used within a Avatar component,
|
|
3
|
+
* and provide a useful error message if not.
|
|
4
|
+
*/
|
|
5
|
+
export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
|
|
6
|
+
export declare const useEnsureIsInsideAvatar: () => void;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type FC } from 'react';
|
|
6
|
+
import { type PresenceProps } from '../presence';
|
|
7
|
+
import { type AppearanceType, type IndicatorSizeType } from '../types';
|
|
8
|
+
interface PresenceWrapperProps extends PresenceProps {
|
|
9
|
+
appearance: AppearanceType;
|
|
10
|
+
size: IndicatorSizeType;
|
|
11
|
+
testId?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* __Presence wrapper__
|
|
15
|
+
*
|
|
16
|
+
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
17
|
+
*/
|
|
18
|
+
declare const PresenceWrapper: FC<PresenceWrapperProps>;
|
|
19
|
+
export default PresenceWrapper;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type FC } from 'react';
|
|
6
|
+
import { type StatusProps } from '../status';
|
|
7
|
+
import { type AppearanceType, type IndicatorSizeType } from '../types';
|
|
8
|
+
interface StatusWrapperProps extends StatusProps {
|
|
9
|
+
appearance: AppearanceType;
|
|
10
|
+
size: IndicatorSizeType;
|
|
11
|
+
testId?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* __Status wrapper__
|
|
15
|
+
*
|
|
16
|
+
* A status wrapper is used internally to position status on top of the avatar.
|
|
17
|
+
*/
|
|
18
|
+
declare const StatusWrapper: FC<StatusWrapperProps>;
|
|
19
|
+
export default StatusWrapper;
|
package/dist/types/presence.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
import { type
|
|
6
|
+
import { type Presence } from './types';
|
|
7
7
|
export interface PresenceProps {
|
|
8
8
|
/**
|
|
9
9
|
* Used to override the default border color of the presence indicator.
|
|
@@ -31,14 +31,3 @@ export interface PresenceProps {
|
|
|
31
31
|
*/
|
|
32
32
|
declare const AvatarPresence: FC<PresenceProps>;
|
|
33
33
|
export default AvatarPresence;
|
|
34
|
-
interface PresenceWrapperProps extends PresenceProps {
|
|
35
|
-
appearance: AppearanceType;
|
|
36
|
-
size: IndicatorSizeType;
|
|
37
|
-
testId?: string;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* __Presence wrapper__
|
|
41
|
-
*
|
|
42
|
-
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
43
|
-
*/
|
|
44
|
-
export declare const PresenceWrapper: FC<PresenceWrapperProps>;
|
package/dist/types/status.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
import { type
|
|
6
|
+
import { type Status } from './types';
|
|
7
7
|
export interface StatusProps {
|
|
8
8
|
/**
|
|
9
9
|
* Override the default border color of the status indicator. This accepts
|
|
@@ -30,14 +30,3 @@ export interface StatusProps {
|
|
|
30
30
|
*/
|
|
31
31
|
declare const AvatarStatus: FC<StatusProps>;
|
|
32
32
|
export default AvatarStatus;
|
|
33
|
-
interface StatusWrapperProps extends StatusProps {
|
|
34
|
-
appearance: AppearanceType;
|
|
35
|
-
size: IndicatorSizeType;
|
|
36
|
-
testId?: string;
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* __Status wrapper__
|
|
40
|
-
*
|
|
41
|
-
* A status wrapper is used internally to position status on top of the avatar.
|
|
42
|
-
*/
|
|
43
|
-
export declare const StatusWrapper: FC<StatusWrapperProps>;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import { type AvatarSizeMap
|
|
1
|
+
import { type AvatarSizeMap } from './types';
|
|
2
2
|
export declare const AVATAR_SIZES: AvatarSizeMap;
|
|
3
3
|
export declare const AVATAR_RADIUS: AvatarSizeMap;
|
|
4
4
|
export declare const BORDER_WIDTH = 2;
|
|
5
5
|
export declare const ACTIVE_SCALE_FACTOR = 0.9;
|
|
6
|
-
export declare const CSS_VAR_AVATAR_BGCOLOR = "--avatar-background-color";
|
|
7
|
-
export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
|
|
8
|
-
export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type AppearanceType, type SizeType } from './types';
|
|
1
|
+
import { type SizeType } from './types';
|
|
3
2
|
export type AvatarContextProps = {
|
|
4
3
|
size: SizeType;
|
|
5
4
|
};
|
|
@@ -18,37 +17,3 @@ export type AvatarContextProps = {
|
|
|
18
17
|
*/
|
|
19
18
|
export declare const AvatarContext: import('react').Context<AvatarContextProps | undefined>;
|
|
20
19
|
export declare const useAvatarContext: () => AvatarContextProps | undefined;
|
|
21
|
-
type AvatarContentContextProps = {
|
|
22
|
-
as: 'a' | 'button' | 'span';
|
|
23
|
-
appearance: AppearanceType;
|
|
24
|
-
avatarImage: ReactNode;
|
|
25
|
-
borderColor?: string;
|
|
26
|
-
href?: string;
|
|
27
|
-
isDisabled?: boolean;
|
|
28
|
-
label?: string;
|
|
29
|
-
onClick?: MouseEventHandler;
|
|
30
|
-
ref: ForwardedRef<HTMLElement>;
|
|
31
|
-
tabIndex?: number;
|
|
32
|
-
target?: '_blank' | '_self' | '_top' | '_parent';
|
|
33
|
-
testId?: string;
|
|
34
|
-
size: SizeType;
|
|
35
|
-
stackIndex?: number;
|
|
36
|
-
'aria-controls'?: string;
|
|
37
|
-
'aria-expanded'?: boolean;
|
|
38
|
-
'aria-haspopup'?: boolean | 'dialog';
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* __Avatar content context__
|
|
42
|
-
*
|
|
43
|
-
* This context provides the props for the AvatarContent component, enabling
|
|
44
|
-
* consumers to compose the AvatarContent with the Avatar component.
|
|
45
|
-
*/
|
|
46
|
-
export declare const AvatarContentContext: import('react').Context<AvatarContentContextProps>;
|
|
47
|
-
export declare const useAvatarContent: () => AvatarContentContextProps;
|
|
48
|
-
/**
|
|
49
|
-
* Used to ensure Avatar sub-components are used within a Avatar component,
|
|
50
|
-
* and provide a useful error message if not.
|
|
51
|
-
*/
|
|
52
|
-
export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
|
|
53
|
-
export declare const useEnsureIsInsideAvatar: () => void;
|
|
54
|
-
export {};
|
|
@@ -9,7 +9,7 @@ export { default as Status } from './status';
|
|
|
9
9
|
export type { StatusProps } from './status';
|
|
10
10
|
export { default as Skeleton } from './skeleton';
|
|
11
11
|
export type { SkeletonProps } from './skeleton';
|
|
12
|
-
export { getAppearanceForAppType } from './
|
|
12
|
+
export { default as getAppearanceForAppType } from './get-appearance';
|
|
13
13
|
export { AvatarContext, type AvatarContextProps, useAvatarContext } from './context';
|
|
14
14
|
export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';
|
|
15
15
|
export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type ForwardedRef, type MouseEventHandler, type ReactNode } from 'react';
|
|
2
|
+
import { type AppearanceType, type SizeType } from '../types';
|
|
3
|
+
type AvatarContentContextProps = {
|
|
4
|
+
as: 'a' | 'button' | 'span';
|
|
5
|
+
appearance: AppearanceType;
|
|
6
|
+
avatarImage: ReactNode;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
href?: string;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
label?: string;
|
|
11
|
+
onClick?: MouseEventHandler;
|
|
12
|
+
ref: ForwardedRef<HTMLElement>;
|
|
13
|
+
tabIndex?: number;
|
|
14
|
+
target?: '_blank' | '_self' | '_top' | '_parent';
|
|
15
|
+
testId?: string;
|
|
16
|
+
size: SizeType;
|
|
17
|
+
stackIndex?: number;
|
|
18
|
+
'aria-controls'?: string;
|
|
19
|
+
'aria-expanded'?: boolean;
|
|
20
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* __Avatar content context__
|
|
24
|
+
*
|
|
25
|
+
* This context provides the props for the AvatarContent component, enabling
|
|
26
|
+
* consumers to compose the AvatarContent with the Avatar component.
|
|
27
|
+
*/
|
|
28
|
+
export declare const AvatarContentContext: import('react').Context<AvatarContentContextProps>;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Used to ensure Avatar sub-components are used within a Avatar component,
|
|
3
|
+
* and provide a useful error message if not.
|
|
4
|
+
*/
|
|
5
|
+
export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
|
|
6
|
+
export declare const useEnsureIsInsideAvatar: () => void;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type FC } from 'react';
|
|
6
|
+
import { type PresenceProps } from '../presence';
|
|
7
|
+
import { type AppearanceType, type IndicatorSizeType } from '../types';
|
|
8
|
+
interface PresenceWrapperProps extends PresenceProps {
|
|
9
|
+
appearance: AppearanceType;
|
|
10
|
+
size: IndicatorSizeType;
|
|
11
|
+
testId?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* __Presence wrapper__
|
|
15
|
+
*
|
|
16
|
+
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
17
|
+
*/
|
|
18
|
+
declare const PresenceWrapper: FC<PresenceWrapperProps>;
|
|
19
|
+
export default PresenceWrapper;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type FC } from 'react';
|
|
6
|
+
import { type StatusProps } from '../status';
|
|
7
|
+
import { type AppearanceType, type IndicatorSizeType } from '../types';
|
|
8
|
+
interface StatusWrapperProps extends StatusProps {
|
|
9
|
+
appearance: AppearanceType;
|
|
10
|
+
size: IndicatorSizeType;
|
|
11
|
+
testId?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* __Status wrapper__
|
|
15
|
+
*
|
|
16
|
+
* A status wrapper is used internally to position status on top of the avatar.
|
|
17
|
+
*/
|
|
18
|
+
declare const StatusWrapper: FC<StatusWrapperProps>;
|
|
19
|
+
export default StatusWrapper;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
import { type
|
|
6
|
+
import { type Presence } from './types';
|
|
7
7
|
export interface PresenceProps {
|
|
8
8
|
/**
|
|
9
9
|
* Used to override the default border color of the presence indicator.
|
|
@@ -31,14 +31,3 @@ export interface PresenceProps {
|
|
|
31
31
|
*/
|
|
32
32
|
declare const AvatarPresence: FC<PresenceProps>;
|
|
33
33
|
export default AvatarPresence;
|
|
34
|
-
interface PresenceWrapperProps extends PresenceProps {
|
|
35
|
-
appearance: AppearanceType;
|
|
36
|
-
size: IndicatorSizeType;
|
|
37
|
-
testId?: string;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* __Presence wrapper__
|
|
41
|
-
*
|
|
42
|
-
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
43
|
-
*/
|
|
44
|
-
export declare const PresenceWrapper: FC<PresenceWrapperProps>;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
import { type
|
|
6
|
+
import { type Status } from './types';
|
|
7
7
|
export interface StatusProps {
|
|
8
8
|
/**
|
|
9
9
|
* Override the default border color of the status indicator. This accepts
|
|
@@ -30,14 +30,3 @@ export interface StatusProps {
|
|
|
30
30
|
*/
|
|
31
31
|
declare const AvatarStatus: FC<StatusProps>;
|
|
32
32
|
export default AvatarStatus;
|
|
33
|
-
interface StatusWrapperProps extends StatusProps {
|
|
34
|
-
appearance: AppearanceType;
|
|
35
|
-
size: IndicatorSizeType;
|
|
36
|
-
testId?: string;
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* __Status wrapper__
|
|
40
|
-
*
|
|
41
|
-
* A status wrapper is used internally to position status on top of the avatar.
|
|
42
|
-
*/
|
|
43
|
-
export declare const StatusWrapper: FC<StatusWrapperProps>;
|
package/package.json
CHANGED
package/dist/cjs/utilities.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getAppearanceForAppType = getAppearanceForAppType;
|
|
7
|
-
exports.getCustomElement = void 0;
|
|
8
|
-
var getCustomElement = exports.getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
|
|
9
|
-
if (href && !isDisabled) {
|
|
10
|
-
return 'a';
|
|
11
|
-
}
|
|
12
|
-
if (onClick || isDisabled || ariaHasPopup) {
|
|
13
|
-
return 'button';
|
|
14
|
-
}
|
|
15
|
-
return 'span';
|
|
16
|
-
};
|
|
17
|
-
function getAppearanceForAppType(appType) {
|
|
18
|
-
switch (appType) {
|
|
19
|
-
case 'agent':
|
|
20
|
-
return 'hexagon';
|
|
21
|
-
case 'user':
|
|
22
|
-
case 'system':
|
|
23
|
-
default:
|
|
24
|
-
return 'circle';
|
|
25
|
-
}
|
|
26
|
-
}
|
package/dist/es2019/utilities.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export const getCustomElement = (isDisabled, href, onClick, ariaHasPopup) => {
|
|
2
|
-
if (href && !isDisabled) {
|
|
3
|
-
return 'a';
|
|
4
|
-
}
|
|
5
|
-
if (onClick || isDisabled || ariaHasPopup) {
|
|
6
|
-
return 'button';
|
|
7
|
-
}
|
|
8
|
-
return 'span';
|
|
9
|
-
};
|
|
10
|
-
export function getAppearanceForAppType(appType) {
|
|
11
|
-
switch (appType) {
|
|
12
|
-
case 'agent':
|
|
13
|
-
return 'hexagon';
|
|
14
|
-
case 'user':
|
|
15
|
-
case 'system':
|
|
16
|
-
default:
|
|
17
|
-
return 'circle';
|
|
18
|
-
}
|
|
19
|
-
}
|
package/dist/esm/utilities.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export var getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
|
|
2
|
-
if (href && !isDisabled) {
|
|
3
|
-
return 'a';
|
|
4
|
-
}
|
|
5
|
-
if (onClick || isDisabled || ariaHasPopup) {
|
|
6
|
-
return 'button';
|
|
7
|
-
}
|
|
8
|
-
return 'span';
|
|
9
|
-
};
|
|
10
|
-
export function getAppearanceForAppType(appType) {
|
|
11
|
-
switch (appType) {
|
|
12
|
-
case 'agent':
|
|
13
|
-
return 'hexagon';
|
|
14
|
-
case 'user':
|
|
15
|
-
case 'system':
|
|
16
|
-
default:
|
|
17
|
-
return 'circle';
|
|
18
|
-
}
|
|
19
|
-
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { type MouseEventHandler } from 'react';
|
|
2
|
-
import type { AppearanceType } from './types';
|
|
3
|
-
export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler, ariaHasPopup?: boolean | 'dialog') => 'a' | 'button' | 'span';
|
|
4
|
-
export declare function getAppearanceForAppType(appType: string | null | undefined): AppearanceType;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { type MouseEventHandler } from 'react';
|
|
2
|
-
import type { AppearanceType } from './types';
|
|
3
|
-
export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler, ariaHasPopup?: boolean | 'dialog') => 'a' | 'button' | 'span';
|
|
4
|
-
export declare function getAppearanceForAppType(appType: string | null | undefined): AppearanceType;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|