@atlaskit/avatar 25.9.0 → 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 +14 -0
- package/dist/cjs/avatar-content.js +22 -21
- package/dist/cjs/avatar-item.js +2 -2
- package/dist/cjs/avatar.js +11 -9
- 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 +7 -5
- 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 +7 -5
- 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 +3 -3
- 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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/avatar
|
|
2
2
|
|
|
3
|
+
## 25.9.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`1ba6ced5fedb9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1ba6ced5fedb9) -
|
|
8
|
+
Move some internal API into dedicated files to avoid them being inadvertently exported via
|
|
9
|
+
entrypoints.
|
|
10
|
+
|
|
11
|
+
## 25.9.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 25.9.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -14,7 +14,8 @@ var _runtime = require("@compiled/react/runtime");
|
|
|
14
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
|
-
var
|
|
17
|
+
var _contentContext = require("./internal/content-context");
|
|
18
|
+
var _ensureIsInsideAvatarContext = require("./internal/ensure-is-inside-avatar-context");
|
|
18
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
19
20
|
var boxShadowCssVar = '--avatar-box-shadow';
|
|
20
21
|
var bgColorCssVar = '--avatar-bg-color';
|
|
@@ -62,26 +63,26 @@ var marginAdjustmentMap = {
|
|
|
62
63
|
*/
|
|
63
64
|
var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
64
65
|
var children = _ref.children;
|
|
65
|
-
(0,
|
|
66
|
-
var
|
|
67
|
-
Container =
|
|
68
|
-
appearance =
|
|
69
|
-
avatarImage =
|
|
70
|
-
|
|
71
|
-
borderColor =
|
|
72
|
-
href =
|
|
73
|
-
isDisabled =
|
|
74
|
-
label =
|
|
75
|
-
onClick =
|
|
76
|
-
contextRef =
|
|
77
|
-
tabIndex =
|
|
78
|
-
target =
|
|
79
|
-
testId =
|
|
80
|
-
size =
|
|
81
|
-
stackIndex =
|
|
82
|
-
ariaControls =
|
|
83
|
-
ariaExpanded =
|
|
84
|
-
ariaHasPopup =
|
|
66
|
+
(0, _ensureIsInsideAvatarContext.useEnsureIsInsideAvatar)();
|
|
67
|
+
var _useContext = (0, _react.useContext)(_contentContext.AvatarContentContext),
|
|
68
|
+
Container = _useContext.as,
|
|
69
|
+
appearance = _useContext.appearance,
|
|
70
|
+
avatarImage = _useContext.avatarImage,
|
|
71
|
+
_useContext$borderCol = _useContext.borderColor,
|
|
72
|
+
borderColor = _useContext$borderCol === void 0 ? "var(--ds-surface, #FFFFFF)" : _useContext$borderCol,
|
|
73
|
+
href = _useContext.href,
|
|
74
|
+
isDisabled = _useContext.isDisabled,
|
|
75
|
+
label = _useContext.label,
|
|
76
|
+
onClick = _useContext.onClick,
|
|
77
|
+
contextRef = _useContext.ref,
|
|
78
|
+
tabIndex = _useContext.tabIndex,
|
|
79
|
+
target = _useContext.target,
|
|
80
|
+
testId = _useContext.testId,
|
|
81
|
+
size = _useContext.size,
|
|
82
|
+
stackIndex = _useContext.stackIndex,
|
|
83
|
+
ariaControls = _useContext['aria-controls'],
|
|
84
|
+
ariaExpanded = _useContext['aria-expanded'],
|
|
85
|
+
ariaHasPopup = _useContext['aria-haspopup'];
|
|
85
86
|
var isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
|
|
86
87
|
var renderedContent = /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
|
|
87
88
|
style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
|
package/dist/cjs/avatar-item.js
CHANGED
|
@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
17
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
18
|
-
var
|
|
18
|
+
var _getCustomElement = _interopRequireDefault(require("./internal/get-custom-element"));
|
|
19
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
20
20
|
var bgColorCssVar = '--avatar-item-bg-color';
|
|
21
21
|
var styles = {
|
|
@@ -48,7 +48,7 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
48
48
|
target = _ref.target,
|
|
49
49
|
testId = _ref.testId,
|
|
50
50
|
label = _ref.label;
|
|
51
|
-
var Container = (0,
|
|
51
|
+
var Container = (0, _getCustomElement.default)(isDisabled, href, onClick);
|
|
52
52
|
var isInteractive = Boolean(onClick || href);
|
|
53
53
|
return /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
|
|
54
54
|
style: (0, _defineProperty2.default)({}, bgColorCssVar, backgroundColor),
|
package/dist/cjs/avatar.js
CHANGED
|
@@ -17,14 +17,16 @@ var _useId = require("@atlaskit/ds-lib/use-id");
|
|
|
17
17
|
var _avatarContent = require("./avatar-content");
|
|
18
18
|
var _context = require("./context");
|
|
19
19
|
var _avatarImage = _interopRequireDefault(require("./internal/avatar-image"));
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
20
|
+
var _contentContext = require("./internal/content-context");
|
|
21
|
+
var _ensureIsInsideAvatarContext = require("./internal/ensure-is-inside-avatar-context");
|
|
22
|
+
var _getCustomElement = _interopRequireDefault(require("./internal/get-custom-element"));
|
|
23
|
+
var _presenceWrapper = _interopRequireDefault(require("./internal/presence-wrapper"));
|
|
24
|
+
var _statusWrapper = _interopRequireDefault(require("./internal/status-wrapper"));
|
|
23
25
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
24
26
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
25
27
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
26
28
|
var packageName = "@atlaskit/avatar";
|
|
27
|
-
var packageVersion = "
|
|
29
|
+
var packageVersion = "0.0.0-development";
|
|
28
30
|
var containerStyles = null;
|
|
29
31
|
|
|
30
32
|
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
|
@@ -118,7 +120,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
118
120
|
var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
|
|
119
121
|
var isInteractive = onClick || href || isDisabled || ariaHasPopup;
|
|
120
122
|
var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
|
|
121
|
-
return /*#__PURE__*/React.createElement(
|
|
123
|
+
return /*#__PURE__*/React.createElement(_ensureIsInsideAvatarContext.EnsureIsInsideAvatarContext.Provider, {
|
|
122
124
|
value: true
|
|
123
125
|
}, /*#__PURE__*/React.createElement(AvatarContainer, {
|
|
124
126
|
"data-testid": testId,
|
|
@@ -128,9 +130,9 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
128
130
|
zIndex: stackIndex
|
|
129
131
|
},
|
|
130
132
|
className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
|
|
131
|
-
}, /*#__PURE__*/React.createElement(
|
|
133
|
+
}, /*#__PURE__*/React.createElement(_contentContext.AvatarContentContext.Provider, {
|
|
132
134
|
value: {
|
|
133
|
-
as: (0,
|
|
135
|
+
as: (0, _getCustomElement.default)(isDisabled, href, onClick, ariaHasPopup),
|
|
134
136
|
appearance: appearance,
|
|
135
137
|
borderColor: borderColor,
|
|
136
138
|
href: href,
|
|
@@ -154,12 +156,12 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
154
156
|
imgLoading: imgLoading
|
|
155
157
|
})
|
|
156
158
|
}
|
|
157
|
-
}, children || /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null)), isPresence && /*#__PURE__*/React.createElement(
|
|
159
|
+
}, children || /*#__PURE__*/React.createElement(_avatarContent.AvatarContent, null)), isPresence && /*#__PURE__*/React.createElement(_presenceWrapper.default, {
|
|
158
160
|
appearance: appearance,
|
|
159
161
|
size: size,
|
|
160
162
|
presence: typeof presence === 'string' ? presence : undefined,
|
|
161
163
|
testId: testId
|
|
162
|
-
}, customPresenceNode), isStatus && /*#__PURE__*/React.createElement(
|
|
164
|
+
}, customPresenceNode), isStatus && /*#__PURE__*/React.createElement(_statusWrapper.default, {
|
|
163
165
|
appearance: appearance,
|
|
164
166
|
size: size,
|
|
165
167
|
borderColor: borderColor,
|
package/dist/cjs/constants.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
|
|
7
7
|
var AVATAR_SIZES = exports.AVATAR_SIZES = {
|
|
8
8
|
xsmall: 16,
|
|
9
9
|
small: 24,
|
|
@@ -23,17 +23,4 @@ var AVATAR_RADIUS = exports.AVATAR_RADIUS = {
|
|
|
23
23
|
xxlarge: 12
|
|
24
24
|
};
|
|
25
25
|
var BORDER_WIDTH = exports.BORDER_WIDTH = 2;
|
|
26
|
-
var ACTIVE_SCALE_FACTOR = exports.ACTIVE_SCALE_FACTOR = 0.9;
|
|
27
|
-
var CSS_VAR_AVATAR_BGCOLOR = exports.CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
|
|
28
|
-
var ICON_SIZES = exports.ICON_SIZES = {
|
|
29
|
-
small: 12,
|
|
30
|
-
medium: 14,
|
|
31
|
-
large: 15,
|
|
32
|
-
xlarge: 18
|
|
33
|
-
};
|
|
34
|
-
var ICON_OFFSET = exports.ICON_OFFSET = {
|
|
35
|
-
small: 0,
|
|
36
|
-
medium: 0,
|
|
37
|
-
large: 1,
|
|
38
|
-
xlarge: 7
|
|
39
|
-
};
|
|
26
|
+
var ACTIVE_SCALE_FACTOR = exports.ACTIVE_SCALE_FACTOR = 0.9;
|
package/dist/cjs/context.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useAvatarContext = exports.AvatarContext = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
/**
|
|
9
9
|
* __Avatar context__
|
|
@@ -21,34 +21,4 @@ var _react = require("react");
|
|
|
21
21
|
var AvatarContext = exports.AvatarContext = /*#__PURE__*/(0, _react.createContext)(undefined);
|
|
22
22
|
var useAvatarContext = exports.useAvatarContext = function useAvatarContext() {
|
|
23
23
|
return (0, _react.useContext)(AvatarContext);
|
|
24
|
-
};
|
|
25
|
-
var defaultAvatarContentProps = {
|
|
26
|
-
as: 'span',
|
|
27
|
-
appearance: 'circle',
|
|
28
|
-
avatarImage: null,
|
|
29
|
-
ref: null,
|
|
30
|
-
size: 'medium'
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* __Avatar content context__
|
|
35
|
-
*
|
|
36
|
-
* This context provides the props for the AvatarContent component, enabling
|
|
37
|
-
* consumers to compose the AvatarContent with the Avatar component.
|
|
38
|
-
*/
|
|
39
|
-
var AvatarContentContext = exports.AvatarContentContext = /*#__PURE__*/(0, _react.createContext)(defaultAvatarContentProps);
|
|
40
|
-
var useAvatarContent = exports.useAvatarContent = function useAvatarContent() {
|
|
41
|
-
return (0, _react.useContext)(AvatarContentContext);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Used to ensure Avatar sub-components are used within a Avatar component,
|
|
46
|
-
* and provide a useful error message if not.
|
|
47
|
-
*/
|
|
48
|
-
var EnsureIsInsideAvatarContext = exports.EnsureIsInsideAvatarContext = /*#__PURE__*/(0, _react.createContext)(false);
|
|
49
|
-
var useEnsureIsInsideAvatar = exports.useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
|
|
50
|
-
var context = (0, _react.useContext)(EnsureIsInsideAvatarContext);
|
|
51
|
-
if (!context) {
|
|
52
|
-
throw new Error('Avatar sub-components must be used within a Avatar component.');
|
|
53
|
-
}
|
|
54
24
|
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var getAppearanceForAppType = function getAppearanceForAppType(appType) {
|
|
8
|
+
switch (appType) {
|
|
9
|
+
case 'agent':
|
|
10
|
+
return 'hexagon';
|
|
11
|
+
case 'user':
|
|
12
|
+
case 'system':
|
|
13
|
+
default:
|
|
14
|
+
return 'circle';
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var _default = exports.default = getAppearanceForAppType;
|
package/dist/cjs/index.js
CHANGED
|
@@ -73,7 +73,7 @@ Object.defineProperty(exports, "default", {
|
|
|
73
73
|
Object.defineProperty(exports, "getAppearanceForAppType", {
|
|
74
74
|
enumerable: true,
|
|
75
75
|
get: function get() {
|
|
76
|
-
return
|
|
76
|
+
return _getAppearance.default;
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
79
|
Object.defineProperty(exports, "useAvatarContext", {
|
|
@@ -88,6 +88,6 @@ var _avatarItem = _interopRequireDefault(require("./avatar-item"));
|
|
|
88
88
|
var _presence = _interopRequireDefault(require("./presence"));
|
|
89
89
|
var _status = _interopRequireDefault(require("./status"));
|
|
90
90
|
var _skeleton = _interopRequireDefault(require("./skeleton"));
|
|
91
|
-
var
|
|
91
|
+
var _getAppearance = _interopRequireDefault(require("./get-appearance"));
|
|
92
92
|
var _context = require("./context");
|
|
93
93
|
var _constants = require("./constants");
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.AvatarContentContext = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var defaultAvatarContentProps = {
|
|
9
|
+
as: 'span',
|
|
10
|
+
appearance: 'circle',
|
|
11
|
+
avatarImage: null,
|
|
12
|
+
ref: null,
|
|
13
|
+
size: 'medium'
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* __Avatar content context__
|
|
18
|
+
*
|
|
19
|
+
* This context provides the props for the AvatarContent component, enabling
|
|
20
|
+
* consumers to compose the AvatarContent with the Avatar component.
|
|
21
|
+
*/
|
|
22
|
+
var AvatarContentContext = exports.AvatarContentContext = /*#__PURE__*/(0, _react.createContext)(defaultAvatarContentProps);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useEnsureIsInsideAvatar = exports.EnsureIsInsideAvatarContext = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
/**
|
|
9
|
+
* Used to ensure Avatar sub-components are used within a Avatar component,
|
|
10
|
+
* and provide a useful error message if not.
|
|
11
|
+
*/
|
|
12
|
+
var EnsureIsInsideAvatarContext = exports.EnsureIsInsideAvatarContext = /*#__PURE__*/(0, _react.createContext)(false);
|
|
13
|
+
var useEnsureIsInsideAvatar = exports.useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
|
|
14
|
+
var context = (0, _react.useContext)(EnsureIsInsideAvatarContext);
|
|
15
|
+
if (!context) {
|
|
16
|
+
throw new Error('Avatar sub-components must be used within a Avatar component.');
|
|
17
|
+
}
|
|
18
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
|
|
8
|
+
if (href && !isDisabled) {
|
|
9
|
+
return 'a';
|
|
10
|
+
}
|
|
11
|
+
if (onClick || isDisabled || ariaHasPopup) {
|
|
12
|
+
return 'button';
|
|
13
|
+
}
|
|
14
|
+
return 'span';
|
|
15
|
+
};
|
|
16
|
+
var _default = exports.default = getCustomElement;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/* presence-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = void 0;
|
|
10
|
+
require("./presence-wrapper.compiled.css");
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _runtime = require("@compiled/react/runtime");
|
|
13
|
+
var _presence = _interopRequireDefault(require("../presence"));
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
15
|
+
var styles = {
|
|
16
|
+
root: "_kqswstnw _lcxvglyw"
|
|
17
|
+
};
|
|
18
|
+
var iconSizeMap = {
|
|
19
|
+
small: "_4t3i1crf _1bsb1crf",
|
|
20
|
+
medium: "_4t3idlk8 _1bsbdlk8",
|
|
21
|
+
large: "_4t3io7ao _1bsbo7ao",
|
|
22
|
+
xlarge: "_4t3if6fq _1bsbf6fq"
|
|
23
|
+
};
|
|
24
|
+
var circleIconOffsetMap = {
|
|
25
|
+
small: "_94n5idpf _1xi2idpf",
|
|
26
|
+
medium: "_94n5idpf _1xi2idpf",
|
|
27
|
+
large: "_94n5t94y _1xi2t94y",
|
|
28
|
+
xlarge: "_94n51v6z _1xi21v6z"
|
|
29
|
+
};
|
|
30
|
+
var squareIconOffsetMap = {
|
|
31
|
+
root: "_94n5myb0 _1xi2myb0"
|
|
32
|
+
};
|
|
33
|
+
var hexagonIconOffsetMap = {
|
|
34
|
+
small: "_94n51n1a _1xi21n1a",
|
|
35
|
+
medium: "_94n51n1a _1xi21n1a",
|
|
36
|
+
large: "_94n51y44 _1xi2myb0",
|
|
37
|
+
xlarge: "_94n5l52n _1xi21lpd"
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* __Presence wrapper__
|
|
42
|
+
*
|
|
43
|
+
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
44
|
+
*/
|
|
45
|
+
var PresenceWrapper = function PresenceWrapper(_ref) {
|
|
46
|
+
var size = _ref.size,
|
|
47
|
+
appearance = _ref.appearance,
|
|
48
|
+
children = _ref.children,
|
|
49
|
+
borderColor = _ref.borderColor,
|
|
50
|
+
presence = _ref.presence,
|
|
51
|
+
testId = _ref.testId;
|
|
52
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
53
|
+
"aria-hidden": "true",
|
|
54
|
+
"data-testid": testId && "".concat(testId, "--presence"),
|
|
55
|
+
className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
|
|
56
|
+
}, /*#__PURE__*/React.createElement(_presence.default, {
|
|
57
|
+
borderColor: borderColor,
|
|
58
|
+
presence: !children ? presence : undefined
|
|
59
|
+
}, children));
|
|
60
|
+
};
|
|
61
|
+
var _default = exports.default = PresenceWrapper;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/* status-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = void 0;
|
|
10
|
+
require("./status-wrapper.compiled.css");
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _runtime = require("@compiled/react/runtime");
|
|
13
|
+
var _status = _interopRequireDefault(require("../status"));
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
15
|
+
var styles = {
|
|
16
|
+
root: "_kqswstnw"
|
|
17
|
+
};
|
|
18
|
+
var iconSizeMap = {
|
|
19
|
+
small: "_4t3i1crf _1bsb1crf",
|
|
20
|
+
medium: "_4t3idlk8 _1bsbdlk8",
|
|
21
|
+
large: "_4t3io7ao _1bsbo7ao",
|
|
22
|
+
xlarge: "_4t3if6fq _1bsbf6fq"
|
|
23
|
+
};
|
|
24
|
+
var circleIconOffsetMap = {
|
|
25
|
+
small: "_rjxpidpf _152tidpf",
|
|
26
|
+
medium: "_rjxpidpf _152tidpf",
|
|
27
|
+
large: "_rjxpt94y _152tt94y",
|
|
28
|
+
xlarge: "_rjxp1v6z _152t1v6z"
|
|
29
|
+
};
|
|
30
|
+
var squareIconOffsetMap = {
|
|
31
|
+
root: "_rjxpidpf _152tidpf"
|
|
32
|
+
};
|
|
33
|
+
var hexagonIconOffsetMap = {
|
|
34
|
+
small: "_rjxp1n1a _152t1n1a",
|
|
35
|
+
medium: "_rjxp1n1a _152t1n1a",
|
|
36
|
+
large: "_rjxpmyb0 _152t1y44",
|
|
37
|
+
xlarge: "_rjxp1lpd _152tl52n"
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* __Status wrapper__
|
|
41
|
+
*
|
|
42
|
+
* A status wrapper is used internally to position status on top of the avatar.
|
|
43
|
+
*/
|
|
44
|
+
var StatusWrapper = function StatusWrapper(_ref) {
|
|
45
|
+
var size = _ref.size,
|
|
46
|
+
status = _ref.status,
|
|
47
|
+
appearance = _ref.appearance,
|
|
48
|
+
borderColor = _ref.borderColor,
|
|
49
|
+
children = _ref.children,
|
|
50
|
+
testId = _ref.testId;
|
|
51
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
52
|
+
"aria-hidden": "true",
|
|
53
|
+
"data-testid": testId && "".concat(testId, "--status"),
|
|
54
|
+
className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
|
|
55
|
+
}, /*#__PURE__*/React.createElement(_status.default, {
|
|
56
|
+
borderColor: borderColor,
|
|
57
|
+
status: !children ? status : undefined
|
|
58
|
+
}, children));
|
|
59
|
+
};
|
|
60
|
+
var _default = exports.default = StatusWrapper;
|
package/dist/cjs/presence.js
CHANGED
|
@@ -6,8 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
6
6
|
Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
value: true
|
|
8
8
|
});
|
|
9
|
-
exports.default =
|
|
10
|
-
require("./presence.compiled.css");
|
|
9
|
+
exports.default = void 0;
|
|
11
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
11
|
var React = _react;
|
|
13
12
|
var _runtime = require("@compiled/react/runtime");
|
|
@@ -76,50 +75,4 @@ var AvatarPresence = function AvatarPresence(_ref) {
|
|
|
76
75
|
xmlns: "http://www.w3.org/2000/svg"
|
|
77
76
|
}, getPresence(presence)) : children);
|
|
78
77
|
};
|
|
79
|
-
var _default = exports.default = AvatarPresence;
|
|
80
|
-
var styles = {
|
|
81
|
-
root: "_kqswstnw _lcxvglyw"
|
|
82
|
-
};
|
|
83
|
-
var iconSizeMap = {
|
|
84
|
-
small: "_4t3i1crf _1bsb1crf",
|
|
85
|
-
medium: "_4t3idlk8 _1bsbdlk8",
|
|
86
|
-
large: "_4t3io7ao _1bsbo7ao",
|
|
87
|
-
xlarge: "_4t3if6fq _1bsbf6fq"
|
|
88
|
-
};
|
|
89
|
-
var circleIconOffsetMap = {
|
|
90
|
-
small: "_94n5idpf _1xi2idpf",
|
|
91
|
-
medium: "_94n5idpf _1xi2idpf",
|
|
92
|
-
large: "_94n5t94y _1xi2t94y",
|
|
93
|
-
xlarge: "_94n51v6z _1xi21v6z"
|
|
94
|
-
};
|
|
95
|
-
var squareIconOffsetMap = {
|
|
96
|
-
root: "_94n5myb0 _1xi2myb0"
|
|
97
|
-
};
|
|
98
|
-
var hexagonIconOffsetMap = {
|
|
99
|
-
small: "_94n51n1a _1xi21n1a",
|
|
100
|
-
medium: "_94n51n1a _1xi21n1a",
|
|
101
|
-
large: "_94n51y44 _1xi2myb0",
|
|
102
|
-
xlarge: "_94n5l52n _1xi21lpd"
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* __Presence wrapper__
|
|
107
|
-
*
|
|
108
|
-
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
109
|
-
*/
|
|
110
|
-
var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2) {
|
|
111
|
-
var size = _ref2.size,
|
|
112
|
-
appearance = _ref2.appearance,
|
|
113
|
-
children = _ref2.children,
|
|
114
|
-
borderColor = _ref2.borderColor,
|
|
115
|
-
presence = _ref2.presence,
|
|
116
|
-
testId = _ref2.testId;
|
|
117
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
118
|
-
"aria-hidden": "true",
|
|
119
|
-
"data-testid": testId && "".concat(testId, "--presence"),
|
|
120
|
-
className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
|
|
121
|
-
}, /*#__PURE__*/React.createElement(AvatarPresence, {
|
|
122
|
-
borderColor: borderColor,
|
|
123
|
-
presence: !children ? presence : undefined
|
|
124
|
-
}, children));
|
|
125
|
-
};
|
|
78
|
+
var _default = exports.default = AvatarPresence;
|
package/dist/cjs/status.js
CHANGED
|
@@ -6,38 +6,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
6
6
|
Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
value: true
|
|
8
8
|
});
|
|
9
|
-
exports.default =
|
|
10
|
-
require("./status.compiled.css");
|
|
9
|
+
exports.default = void 0;
|
|
11
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
11
|
var React = _react;
|
|
13
12
|
var _runtime = require("@compiled/react/runtime");
|
|
14
13
|
var _colors = require("@atlaskit/theme/colors");
|
|
15
14
|
var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
|
|
16
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
17
|
-
var styles = {
|
|
18
|
-
root: "_kqswstnw"
|
|
19
|
-
};
|
|
20
|
-
var iconSizeMap = {
|
|
21
|
-
small: "_4t3i1crf _1bsb1crf",
|
|
22
|
-
medium: "_4t3idlk8 _1bsbdlk8",
|
|
23
|
-
large: "_4t3io7ao _1bsbo7ao",
|
|
24
|
-
xlarge: "_4t3if6fq _1bsbf6fq"
|
|
25
|
-
};
|
|
26
|
-
var circleIconOffsetMap = {
|
|
27
|
-
small: "_rjxpidpf _152tidpf",
|
|
28
|
-
medium: "_rjxpidpf _152tidpf",
|
|
29
|
-
large: "_rjxpt94y _152tt94y",
|
|
30
|
-
xlarge: "_rjxp1v6z _152t1v6z"
|
|
31
|
-
};
|
|
32
|
-
var squareIconOffsetMap = {
|
|
33
|
-
root: "_rjxpidpf _152tidpf"
|
|
34
|
-
};
|
|
35
|
-
var hexagonIconOffsetMap = {
|
|
36
|
-
small: "_rjxp1n1a _152t1n1a",
|
|
37
|
-
medium: "_rjxp1n1a _152t1n1a",
|
|
38
|
-
large: "_rjxpmyb0 _152t1y44",
|
|
39
|
-
xlarge: "_rjxp1lpd _152tl52n"
|
|
40
|
-
};
|
|
41
16
|
var ApprovedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
|
|
42
17
|
fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
|
|
43
18
|
cx: "4",
|
|
@@ -98,25 +73,4 @@ var AvatarStatus = function AvatarStatus(_ref) {
|
|
|
98
73
|
xmlns: "http://www.w3.org/2000/svg"
|
|
99
74
|
}, getStatus(status)) : children);
|
|
100
75
|
};
|
|
101
|
-
var _default = exports.default = AvatarStatus;
|
|
102
|
-
/**
|
|
103
|
-
* __Status wrapper__
|
|
104
|
-
*
|
|
105
|
-
* A status wrapper is used internally to position status on top of the avatar.
|
|
106
|
-
*/
|
|
107
|
-
var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
|
|
108
|
-
var size = _ref2.size,
|
|
109
|
-
status = _ref2.status,
|
|
110
|
-
appearance = _ref2.appearance,
|
|
111
|
-
borderColor = _ref2.borderColor,
|
|
112
|
-
children = _ref2.children,
|
|
113
|
-
testId = _ref2.testId;
|
|
114
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
115
|
-
"aria-hidden": "true",
|
|
116
|
-
"data-testid": testId && "".concat(testId, "--status"),
|
|
117
|
-
className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
|
|
118
|
-
}, /*#__PURE__*/React.createElement(AvatarStatus, {
|
|
119
|
-
borderColor: borderColor,
|
|
120
|
-
status: !children ? status : undefined
|
|
121
|
-
}, children));
|
|
122
|
-
};
|
|
76
|
+
var _default = exports.default = AvatarStatus;
|
|
@@ -3,9 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
import "./avatar-content.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
-
import { forwardRef } from 'react';
|
|
6
|
+
import { forwardRef, useContext } from 'react';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
-
import {
|
|
8
|
+
import { AvatarContentContext } from './internal/content-context';
|
|
9
|
+
import { useEnsureIsInsideAvatar } from './internal/ensure-is-inside-avatar-context';
|
|
9
10
|
const boxShadowCssVar = '--avatar-box-shadow';
|
|
10
11
|
const bgColorCssVar = '--avatar-bg-color';
|
|
11
12
|
const styles = {
|
|
@@ -72,7 +73,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
|
|
|
72
73
|
'aria-controls': ariaControls,
|
|
73
74
|
'aria-expanded': ariaExpanded,
|
|
74
75
|
'aria-haspopup': ariaHasPopup
|
|
75
|
-
} =
|
|
76
|
+
} = useContext(AvatarContentContext);
|
|
76
77
|
const isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
|
|
77
78
|
const renderedContent = /*#__PURE__*/React.createElement(Container, _extends({
|
|
78
79
|
style: {
|
|
@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
import { forwardRef, Fragment } from 'react';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
import { Text } from '@atlaskit/primitives/compiled';
|
|
9
|
-
import
|
|
9
|
+
import getCustomElement from './internal/get-custom-element';
|
|
10
10
|
const bgColorCssVar = '--avatar-item-bg-color';
|
|
11
11
|
const styles = {
|
|
12
12
|
root: "_2rkofajl _12ji1r31 _1qu2glyw _12y31o36 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1txw _vchhusvi _1bsb1osq _4cvr1h6o _bfhk1g13 _syaz1kw7 _1wyb1kw7 _zg8l4jg8 _k48pi7a9 _vwz4kb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i51b66 _1q511b66 _y4ti1b66 _bozg1b66 _y3gn1e5h",
|
package/dist/es2019/avatar.js
CHANGED
|
@@ -6,13 +6,15 @@ import { forwardRef, isValidElement, useCallback, useEffect, useRef } from 'reac
|
|
|
6
6
|
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
7
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
8
8
|
import { AvatarContent } from './avatar-content';
|
|
9
|
-
import {
|
|
9
|
+
import { useAvatarContext } from './context';
|
|
10
10
|
import AvatarImage from './internal/avatar-image';
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
11
|
+
import { AvatarContentContext } from './internal/content-context';
|
|
12
|
+
import { EnsureIsInsideAvatarContext } from './internal/ensure-is-inside-avatar-context';
|
|
13
|
+
import getCustomElement from './internal/get-custom-element';
|
|
14
|
+
import PresenceWrapper from './internal/presence-wrapper';
|
|
15
|
+
import StatusWrapper from './internal/status-wrapper';
|
|
14
16
|
const packageName = "@atlaskit/avatar";
|
|
15
|
-
const packageVersion = "
|
|
17
|
+
const packageVersion = "0.0.0-development";
|
|
16
18
|
const containerStyles = null;
|
|
17
19
|
|
|
18
20
|
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
package/dist/es2019/constants.js
CHANGED
|
@@ -17,17 +17,4 @@ export const AVATAR_RADIUS = {
|
|
|
17
17
|
xxlarge: 12
|
|
18
18
|
};
|
|
19
19
|
export const BORDER_WIDTH = 2;
|
|
20
|
-
export const ACTIVE_SCALE_FACTOR = 0.9;
|
|
21
|
-
export const CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
|
|
22
|
-
export const ICON_SIZES = {
|
|
23
|
-
small: 12,
|
|
24
|
-
medium: 14,
|
|
25
|
-
large: 15,
|
|
26
|
-
xlarge: 18
|
|
27
|
-
};
|
|
28
|
-
export const ICON_OFFSET = {
|
|
29
|
-
small: 0,
|
|
30
|
-
medium: 0,
|
|
31
|
-
large: 1,
|
|
32
|
-
xlarge: 7
|
|
33
|
-
};
|
|
20
|
+
export const ACTIVE_SCALE_FACTOR = 0.9;
|