@atlaskit/avatar 25.14.1 → 25.14.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.
Files changed (44) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/avatar-content.js +2 -2
  3. package/dist/cjs/avatar-radius.js +15 -0
  4. package/dist/cjs/avatar-sizes.js +14 -0
  5. package/dist/cjs/avatar.js +1 -1
  6. package/dist/cjs/constants.js +1 -19
  7. package/dist/cjs/entry-points/constants.js +5 -3
  8. package/dist/cjs/index.js +5 -3
  9. package/dist/cjs/internal/ensure-is-inside-avatar-context.js +2 -8
  10. package/dist/cjs/internal/use-ensure-is-inside-avatar.js +14 -0
  11. package/dist/es2019/avatar-content.js +1 -1
  12. package/dist/es2019/avatar-radius.js +9 -0
  13. package/dist/es2019/avatar-sizes.js +8 -0
  14. package/dist/es2019/avatar.js +1 -1
  15. package/dist/es2019/constants.js +0 -18
  16. package/dist/es2019/entry-points/constants.js +3 -1
  17. package/dist/es2019/index.js +3 -1
  18. package/dist/es2019/internal/ensure-is-inside-avatar-context.js +2 -8
  19. package/dist/es2019/internal/use-ensure-is-inside-avatar.js +8 -0
  20. package/dist/esm/avatar-content.js +1 -1
  21. package/dist/esm/avatar-radius.js +9 -0
  22. package/dist/esm/avatar-sizes.js +8 -0
  23. package/dist/esm/avatar.js +1 -1
  24. package/dist/esm/constants.js +0 -18
  25. package/dist/esm/entry-points/constants.js +3 -1
  26. package/dist/esm/index.js +3 -1
  27. package/dist/esm/internal/ensure-is-inside-avatar-context.js +2 -8
  28. package/dist/esm/internal/use-ensure-is-inside-avatar.js +8 -0
  29. package/dist/types/avatar-radius.d.ts +2 -0
  30. package/dist/types/avatar-sizes.d.ts +2 -0
  31. package/dist/types/constants.d.ts +0 -3
  32. package/dist/types/entry-points/constants.d.ts +3 -1
  33. package/dist/types/index.d.ts +3 -1
  34. package/dist/types/internal/ensure-is-inside-avatar-context.d.ts +0 -1
  35. package/dist/types/internal/use-ensure-is-inside-avatar.d.ts +1 -0
  36. package/dist/types-ts4.5/avatar-radius.d.ts +2 -0
  37. package/dist/types-ts4.5/avatar-sizes.d.ts +2 -0
  38. package/dist/types-ts4.5/constants.d.ts +0 -3
  39. package/dist/types-ts4.5/entry-points/constants.d.ts +3 -1
  40. package/dist/types-ts4.5/index.d.ts +3 -1
  41. package/dist/types-ts4.5/internal/ensure-is-inside-avatar-context.d.ts +0 -1
  42. package/dist/types-ts4.5/internal/use-ensure-is-inside-avatar.d.ts +1 -0
  43. package/package.json +7 -7
  44. package/offerings.json +0 -184
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.14.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 25.14.1
4
10
 
5
11
  ### Patch Changes
@@ -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 _contentContext = require("./internal/content-context");
18
- var _ensureIsInsideAvatarContext = require("./internal/ensure-is-inside-avatar-context");
18
+ var _useEnsureIsInsideAvatar = require("./internal/use-ensure-is-inside-avatar");
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 boxShadowCssVar = '--avatar-box-shadow';
21
21
  var bgColorCssVar = '--avatar-bg-color';
@@ -66,7 +66,7 @@ var marginAdjustmentMap = {
66
66
  */
67
67
  var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
68
68
  var children = _ref.children;
69
- (0, _ensureIsInsideAvatarContext.useEnsureIsInsideAvatar)();
69
+ (0, _useEnsureIsInsideAvatar.useEnsureIsInsideAvatar)();
70
70
  var _useContext = (0, _react.useContext)(_contentContext.AvatarContentContext),
71
71
  Container = _useContext.as,
72
72
  appearance = _useContext.appearance,
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.AVATAR_RADIUS = void 0;
7
+ // border radius only applies to "square" avatars
8
+ var AVATAR_RADIUS = exports.AVATAR_RADIUS = {
9
+ xsmall: 2,
10
+ small: 2,
11
+ medium: 3,
12
+ large: 3,
13
+ xlarge: 6,
14
+ xxlarge: 12
15
+ };
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.AVATAR_SIZES = void 0;
7
+ var AVATAR_SIZES = exports.AVATAR_SIZES = {
8
+ xsmall: 16,
9
+ small: 24,
10
+ medium: 32,
11
+ large: 40,
12
+ xlarge: 96,
13
+ xxlarge: 128
14
+ };
@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
26
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; }
27
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; }
28
28
  var packageName = "@atlaskit/avatar";
29
- var packageVersion = "0.0.0-development";
29
+ var packageVersion = "25.14.1";
30
30
  var containerStyles = null;
31
31
 
32
32
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -3,24 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
7
- var AVATAR_SIZES = exports.AVATAR_SIZES = {
8
- xsmall: 16,
9
- small: 24,
10
- medium: 32,
11
- large: 40,
12
- xlarge: 96,
13
- xxlarge: 128
14
- };
15
-
16
- // border radius only applies to "square" avatars
17
- var AVATAR_RADIUS = exports.AVATAR_RADIUS = {
18
- xsmall: 2,
19
- small: 2,
20
- medium: 3,
21
- large: 3,
22
- xlarge: 6,
23
- xxlarge: 12
24
- };
6
+ exports.BORDER_WIDTH = exports.ACTIVE_SCALE_FACTOR = void 0;
25
7
  var BORDER_WIDTH = exports.BORDER_WIDTH = 2;
26
8
  var ACTIVE_SCALE_FACTOR = exports.ACTIVE_SCALE_FACTOR = 0.9;
@@ -12,13 +12,13 @@ Object.defineProperty(exports, "ACTIVE_SCALE_FACTOR", {
12
12
  Object.defineProperty(exports, "AVATAR_RADIUS", {
13
13
  enumerable: true,
14
14
  get: function get() {
15
- return _constants.AVATAR_RADIUS;
15
+ return _avatarRadius.AVATAR_RADIUS;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "AVATAR_SIZES", {
19
19
  enumerable: true,
20
20
  get: function get() {
21
- return _constants.AVATAR_SIZES;
21
+ return _avatarSizes.AVATAR_SIZES;
22
22
  }
23
23
  });
24
24
  Object.defineProperty(exports, "BORDER_WIDTH", {
@@ -27,4 +27,6 @@ Object.defineProperty(exports, "BORDER_WIDTH", {
27
27
  return _constants.BORDER_WIDTH;
28
28
  }
29
29
  });
30
- var _constants = require("../constants");
30
+ var _constants = require("../constants");
31
+ var _avatarRadius = require("../avatar-radius");
32
+ var _avatarSizes = require("../avatar-sizes");
package/dist/cjs/index.js CHANGED
@@ -13,13 +13,13 @@ Object.defineProperty(exports, "ACTIVE_SCALE_FACTOR", {
13
13
  Object.defineProperty(exports, "AVATAR_RADIUS", {
14
14
  enumerable: true,
15
15
  get: function get() {
16
- return _constants.AVATAR_RADIUS;
16
+ return _avatarRadius.AVATAR_RADIUS;
17
17
  }
18
18
  });
19
19
  Object.defineProperty(exports, "AVATAR_SIZES", {
20
20
  enumerable: true,
21
21
  get: function get() {
22
- return _constants.AVATAR_SIZES;
22
+ return _avatarSizes.AVATAR_SIZES;
23
23
  }
24
24
  });
25
25
  Object.defineProperty(exports, "AvatarContent", {
@@ -91,4 +91,6 @@ var _skeleton = _interopRequireDefault(require("./skeleton"));
91
91
  var _getAppearance = _interopRequireDefault(require("./get-appearance"));
92
92
  var _avatarContext = require("./avatar-context");
93
93
  var _useAvatarContext = require("./use-avatar-context");
94
- var _constants = require("./constants");
94
+ var _constants = require("./constants");
95
+ var _avatarSizes = require("./avatar-sizes");
96
+ var _avatarRadius = require("./avatar-radius");
@@ -3,16 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useEnsureIsInsideAvatar = exports.EnsureIsInsideAvatarContext = void 0;
6
+ exports.EnsureIsInsideAvatarContext = void 0;
7
7
  var _react = require("react");
8
8
  /**
9
9
  * Used to ensure Avatar sub-components are used within a Avatar component,
10
10
  * and provide a useful error message if not.
11
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
- };
12
+ var EnsureIsInsideAvatarContext = exports.EnsureIsInsideAvatarContext = /*#__PURE__*/(0, _react.createContext)(false);
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useEnsureIsInsideAvatar = void 0;
7
+ var _react = require("react");
8
+ var _ensureIsInsideAvatarContext = require("./ensure-is-inside-avatar-context");
9
+ var useEnsureIsInsideAvatar = exports.useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
10
+ var context = (0, _react.useContext)(_ensureIsInsideAvatarContext.EnsureIsInsideAvatarContext);
11
+ if (!context) {
12
+ throw new Error('Avatar sub-components must be used within a Avatar component.');
13
+ }
14
+ };
@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef, useContext } from 'react';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
8
  import { AvatarContentContext } from './internal/content-context';
9
- import { useEnsureIsInsideAvatar } from './internal/ensure-is-inside-avatar-context';
9
+ import { useEnsureIsInsideAvatar } from './internal/use-ensure-is-inside-avatar';
10
10
  const boxShadowCssVar = '--avatar-box-shadow';
11
11
  const bgColorCssVar = '--avatar-bg-color';
12
12
  const styles = {
@@ -0,0 +1,9 @@
1
+ // border radius only applies to "square" avatars
2
+ export const AVATAR_RADIUS = {
3
+ xsmall: 2,
4
+ small: 2,
5
+ medium: 3,
6
+ large: 3,
7
+ xlarge: 6,
8
+ xxlarge: 12
9
+ };
@@ -0,0 +1,8 @@
1
+ export const AVATAR_SIZES = {
2
+ xsmall: 16,
3
+ small: 24,
4
+ medium: 32,
5
+ large: 40,
6
+ xlarge: 96,
7
+ xxlarge: 128
8
+ };
@@ -14,7 +14,7 @@ import PresenceWrapper from './internal/presence-wrapper';
14
14
  import StatusWrapper from './internal/status-wrapper';
15
15
  import { useAvatarContext } from './use-avatar-context';
16
16
  const packageName = "@atlaskit/avatar";
17
- const packageVersion = "0.0.0-development";
17
+ const packageVersion = "25.14.1";
18
18
  const containerStyles = null;
19
19
 
20
20
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -1,20 +1,2 @@
1
- export const AVATAR_SIZES = {
2
- xsmall: 16,
3
- small: 24,
4
- medium: 32,
5
- large: 40,
6
- xlarge: 96,
7
- xxlarge: 128
8
- };
9
-
10
- // border radius only applies to "square" avatars
11
- export const AVATAR_RADIUS = {
12
- xsmall: 2,
13
- small: 2,
14
- medium: 3,
15
- large: 3,
16
- xlarge: 6,
17
- xxlarge: 12
18
- };
19
1
  export const BORDER_WIDTH = 2;
20
2
  export const ACTIVE_SCALE_FACTOR = 0.9;
@@ -1 +1,3 @@
1
- export { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from '../constants';
1
+ export { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '../constants';
2
+ export { AVATAR_RADIUS } from '../avatar-radius';
3
+ export { AVATAR_SIZES } from '../avatar-sizes';
@@ -7,4 +7,6 @@ export { default as Skeleton } from './skeleton';
7
7
  export { default as getAppearanceForAppType } from './get-appearance';
8
8
  export { AvatarContext } from './avatar-context';
9
9
  export { useAvatarContext } from './use-avatar-context';
10
- export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';
10
+ export { BORDER_WIDTH, ACTIVE_SCALE_FACTOR } from './constants';
11
+ export { AVATAR_SIZES } from './avatar-sizes';
12
+ export { AVATAR_RADIUS } from './avatar-radius';
@@ -1,13 +1,7 @@
1
- import { createContext, useContext } from 'react';
1
+ import { createContext } from 'react';
2
2
 
3
3
  /**
4
4
  * Used to ensure Avatar sub-components are used within a Avatar component,
5
5
  * and provide a useful error message if not.
6
6
  */
7
- export const EnsureIsInsideAvatarContext = /*#__PURE__*/createContext(false);
8
- export const useEnsureIsInsideAvatar = () => {
9
- const context = useContext(EnsureIsInsideAvatarContext);
10
- if (!context) {
11
- throw new Error('Avatar sub-components must be used within a Avatar component.');
12
- }
13
- };
7
+ export const EnsureIsInsideAvatarContext = /*#__PURE__*/createContext(false);
@@ -0,0 +1,8 @@
1
+ import { useContext } from 'react';
2
+ import { EnsureIsInsideAvatarContext } from './ensure-is-inside-avatar-context';
3
+ export const useEnsureIsInsideAvatar = () => {
4
+ const context = useContext(EnsureIsInsideAvatarContext);
5
+ if (!context) {
6
+ throw new Error('Avatar sub-components must be used within a Avatar component.');
7
+ }
8
+ };
@@ -7,7 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
  import { forwardRef, useContext } from 'react';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { AvatarContentContext } from './internal/content-context';
10
- import { useEnsureIsInsideAvatar } from './internal/ensure-is-inside-avatar-context';
10
+ import { useEnsureIsInsideAvatar } from './internal/use-ensure-is-inside-avatar';
11
11
  var boxShadowCssVar = '--avatar-box-shadow';
12
12
  var bgColorCssVar = '--avatar-bg-color';
13
13
  var styles = {
@@ -0,0 +1,9 @@
1
+ // border radius only applies to "square" avatars
2
+ export var AVATAR_RADIUS = {
3
+ xsmall: 2,
4
+ small: 2,
5
+ medium: 3,
6
+ large: 3,
7
+ xlarge: 6,
8
+ xxlarge: 12
9
+ };
@@ -0,0 +1,8 @@
1
+ export var AVATAR_SIZES = {
2
+ xsmall: 16,
3
+ small: 24,
4
+ medium: 32,
5
+ large: 40,
6
+ xlarge: 96,
7
+ xxlarge: 128
8
+ };
@@ -17,7 +17,7 @@ import PresenceWrapper from './internal/presence-wrapper';
17
17
  import StatusWrapper from './internal/status-wrapper';
18
18
  import { useAvatarContext } from './use-avatar-context';
19
19
  var packageName = "@atlaskit/avatar";
20
- var packageVersion = "0.0.0-development";
20
+ var packageVersion = "25.14.1";
21
21
  var containerStyles = null;
22
22
 
23
23
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -1,20 +1,2 @@
1
- export var AVATAR_SIZES = {
2
- xsmall: 16,
3
- small: 24,
4
- medium: 32,
5
- large: 40,
6
- xlarge: 96,
7
- xxlarge: 128
8
- };
9
-
10
- // border radius only applies to "square" avatars
11
- export var AVATAR_RADIUS = {
12
- xsmall: 2,
13
- small: 2,
14
- medium: 3,
15
- large: 3,
16
- xlarge: 6,
17
- xxlarge: 12
18
- };
19
1
  export var BORDER_WIDTH = 2;
20
2
  export var ACTIVE_SCALE_FACTOR = 0.9;
@@ -1 +1,3 @@
1
- export { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from '../constants';
1
+ export { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '../constants';
2
+ export { AVATAR_RADIUS } from '../avatar-radius';
3
+ export { AVATAR_SIZES } from '../avatar-sizes';
package/dist/esm/index.js CHANGED
@@ -7,4 +7,6 @@ export { default as Skeleton } from './skeleton';
7
7
  export { default as getAppearanceForAppType } from './get-appearance';
8
8
  export { AvatarContext } from './avatar-context';
9
9
  export { useAvatarContext } from './use-avatar-context';
10
- export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';
10
+ export { BORDER_WIDTH, ACTIVE_SCALE_FACTOR } from './constants';
11
+ export { AVATAR_SIZES } from './avatar-sizes';
12
+ export { AVATAR_RADIUS } from './avatar-radius';
@@ -1,13 +1,7 @@
1
- import { createContext, useContext } from 'react';
1
+ import { createContext } from 'react';
2
2
 
3
3
  /**
4
4
  * Used to ensure Avatar sub-components are used within a Avatar component,
5
5
  * and provide a useful error message if not.
6
6
  */
7
- export var EnsureIsInsideAvatarContext = /*#__PURE__*/createContext(false);
8
- export var useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
9
- var context = useContext(EnsureIsInsideAvatarContext);
10
- if (!context) {
11
- throw new Error('Avatar sub-components must be used within a Avatar component.');
12
- }
13
- };
7
+ export var EnsureIsInsideAvatarContext = /*#__PURE__*/createContext(false);
@@ -0,0 +1,8 @@
1
+ import { useContext } from 'react';
2
+ import { EnsureIsInsideAvatarContext } from './ensure-is-inside-avatar-context';
3
+ export var useEnsureIsInsideAvatar = function useEnsureIsInsideAvatar() {
4
+ var context = useContext(EnsureIsInsideAvatarContext);
5
+ if (!context) {
6
+ throw new Error('Avatar sub-components must be used within a Avatar component.');
7
+ }
8
+ };
@@ -0,0 +1,2 @@
1
+ import { type AvatarSizeMap } from './types';
2
+ export declare const AVATAR_RADIUS: AvatarSizeMap;
@@ -0,0 +1,2 @@
1
+ import { type AvatarSizeMap } from './types';
2
+ export declare const AVATAR_SIZES: AvatarSizeMap;
@@ -1,5 +1,2 @@
1
- import { type AvatarSizeMap } from './types';
2
- export declare const AVATAR_SIZES: AvatarSizeMap;
3
- export declare const AVATAR_RADIUS: AvatarSizeMap;
4
1
  export declare const BORDER_WIDTH = 2;
5
2
  export declare const ACTIVE_SCALE_FACTOR = 0.9;
@@ -1 +1,3 @@
1
- export { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from '../constants';
1
+ export { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '../constants';
2
+ export { AVATAR_RADIUS } from '../avatar-radius';
3
+ export { AVATAR_SIZES } from '../avatar-sizes';
@@ -13,5 +13,7 @@ export { default as getAppearanceForAppType } from './get-appearance';
13
13
  export { AvatarContext } from './avatar-context';
14
14
  export type { AvatarContextProps } from './avatar-context';
15
15
  export { useAvatarContext } from './use-avatar-context';
16
- export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';
16
+ export { BORDER_WIDTH, ACTIVE_SCALE_FACTOR } from './constants';
17
+ export { AVATAR_SIZES } from './avatar-sizes';
18
+ export { AVATAR_RADIUS } from './avatar-radius';
17
19
  export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';
@@ -3,4 +3,3 @@
3
3
  * and provide a useful error message if not.
4
4
  */
5
5
  export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
6
- export declare const useEnsureIsInsideAvatar: () => void;
@@ -0,0 +1 @@
1
+ export declare const useEnsureIsInsideAvatar: () => void;
@@ -0,0 +1,2 @@
1
+ import { type AvatarSizeMap } from './types';
2
+ export declare const AVATAR_RADIUS: AvatarSizeMap;
@@ -0,0 +1,2 @@
1
+ import { type AvatarSizeMap } from './types';
2
+ export declare const AVATAR_SIZES: AvatarSizeMap;
@@ -1,5 +1,2 @@
1
- import { type AvatarSizeMap } from './types';
2
- export declare const AVATAR_SIZES: AvatarSizeMap;
3
- export declare const AVATAR_RADIUS: AvatarSizeMap;
4
1
  export declare const BORDER_WIDTH = 2;
5
2
  export declare const ACTIVE_SCALE_FACTOR = 0.9;
@@ -1 +1,3 @@
1
- export { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from '../constants';
1
+ export { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '../constants';
2
+ export { AVATAR_RADIUS } from '../avatar-radius';
3
+ export { AVATAR_SIZES } from '../avatar-sizes';
@@ -13,5 +13,7 @@ export { default as getAppearanceForAppType } from './get-appearance';
13
13
  export { AvatarContext } from './avatar-context';
14
14
  export type { AvatarContextProps } from './avatar-context';
15
15
  export { useAvatarContext } from './use-avatar-context';
16
- export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';
16
+ export { BORDER_WIDTH, ACTIVE_SCALE_FACTOR } from './constants';
17
+ export { AVATAR_SIZES } from './avatar-sizes';
18
+ export { AVATAR_RADIUS } from './avatar-radius';
17
19
  export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';
@@ -3,4 +3,3 @@
3
3
  * and provide a useful error message if not.
4
4
  */
5
5
  export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
6
- export declare const useEnsureIsInsideAvatar: () => void;
@@ -0,0 +1 @@
1
+ export declare const useEnsureIsInsideAvatar: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "25.14.1",
3
+ "version": "25.14.2",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/analytics-next": "^11.2.0",
43
43
  "@atlaskit/css": "^0.19.0",
44
44
  "@atlaskit/ds-lib": "^7.0.0",
45
- "@atlaskit/icon": "^34.3.0",
45
+ "@atlaskit/icon": "^35.0.0",
46
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
47
47
  "@atlaskit/primitives": "^19.0.0",
48
48
  "@atlaskit/tokens": "^13.0.0",
@@ -57,20 +57,20 @@
57
57
  "@af/integration-testing": "workspace:^",
58
58
  "@af/visual-regression": "workspace:^",
59
59
  "@atlaskit/button": "^23.11.0",
60
- "@atlaskit/code": "^17.4.0",
60
+ "@atlaskit/code": "^17.5.0",
61
61
  "@atlaskit/docs": "^11.8.0",
62
62
  "@atlaskit/form": "^15.5.0",
63
63
  "@atlaskit/heading": "^5.4.0",
64
64
  "@atlaskit/link": "^3.4.0",
65
- "@atlaskit/range": "^10.0.0",
65
+ "@atlaskit/range": "^10.1.0",
66
66
  "@atlaskit/section-message": "^8.12.0",
67
67
  "@atlaskit/textfield": "^8.3.0",
68
- "@atlaskit/tooltip": "^21.2.0",
69
- "@atlassian/feature-flags-test-utils": "^1.0.0",
68
+ "@atlaskit/tooltip": "^22.2.0",
69
+ "@atlassian/feature-flags-test-utils": "^1.1.0",
70
70
  "@atlassian/react-compiler-gating": "workspace:^",
71
71
  "@atlassian/ssr-tests": "workspace:^",
72
72
  "@atlassian/structured-docs-types": "workspace:^",
73
- "@atlassian/testing-library": "^0.5.0",
73
+ "@atlassian/testing-library": "^0.6.0",
74
74
  "@testing-library/react": "^16.3.0",
75
75
  "@testing-library/user-event": "^14.4.3",
76
76
  "jest-in-case": "^1.0.2",
package/offerings.json DELETED
@@ -1,184 +0,0 @@
1
- [
2
- {
3
- "name": "Avatar",
4
- "package": "@atlaskit/avatar",
5
- "import": {
6
- "name": "Avatar",
7
- "package": "@atlaskit/avatar",
8
- "type": "default"
9
- },
10
- "keywords": ["avatar", "user", "profile", "image", "presence", "status", "representation"],
11
- "categories": ["images", "data-display"],
12
- "shortDescription": "A component for displaying user avatars with support for images, initials, and status indicators. An avatar is a visual representation of a user or entity. It can display user images, initials, presence indicators, and status indicators. Avatars help users quickly identify people and entities in your application. They provide visual context and make interfaces more personal and engaging.",
13
- "status": "general-availability",
14
- "example": "import Avatar from '@atlaskit/avatar';\n\n<Avatar\n\tsrc=\"https://example.com/avatar.jpg\"\n\tstatus=\"online\"\n\tsize=\"large\"\n/>",
15
- "usageGuidelines": [
16
- "Use consistent sizing within the same context",
17
- "Place avatars in logical groupings (e.g., team members)",
18
- "Use presence indicators sparingly for real-time status only",
19
- "Use status indicators for approval/permission states",
20
- "Provide fallback initials when images fail to load",
21
- "Use avatars to represent users, teams, projects, or any other entity that needs visual identification",
22
- "Always provide meaningful names for accessibility",
23
- "Use the `name` prop to include alternative text for screen readers",
24
- "For decorative images, remove the `name` prop or leave it empty so it will be ignored by assistive technologies",
25
- "Don't use a tooltip with an avatar when it's non-interactive or disabled. The tooltip won't work for keyboard users and screen readers"
26
- ],
27
- "contentGuidelines": [
28
- "Use full names when possible for better recognition",
29
- "For companies/projects, use descriptive names",
30
- "Avoid generic terms like 'User' or 'Admin'",
31
- "Use consistent naming conventions across your app",
32
- "Keep names concise but meaningful"
33
- ],
34
- "generativeInstructions": "./docs/ai/avatar-instructions.md",
35
- "examples": ["./examples/ai/avatar.tsx"]
36
- },
37
- {
38
- "name": "AvatarItem",
39
- "package": "@atlaskit/avatar",
40
- "import": {
41
- "name": "AvatarItem",
42
- "package": "@atlaskit/avatar",
43
- "type": "named"
44
- },
45
- "keywords": ["avatar", "item", "list", "user", "profile", "interactive"],
46
- "categories": ["images", "data-display", "interaction"],
47
- "shortDescription": "A component that combines an avatar with text content for displaying user information in lists. AvatarItem combines an avatar with primary and secondary text to create a rich user representation in lists and menus. It supports both interactive (clickable) and non-interactive modes, making it perfect for user lists, team members, or any context where you need to display user information with actions.",
48
- "status": "general-availability",
49
- "usageGuidelines": [
50
- "Use for displaying user information in lists and menus",
51
- "Choose between interactive and display-only based on context",
52
- "Provide clear primary and secondary text hierarchy",
53
- "Use consistent spacing and alignment within lists",
54
- "Consider the interaction pattern before implementation",
55
- "Use AvatarItem when you need to show user information with additional context like names, emails, or status information",
56
- "Provide clear primary and secondary text",
57
- "Use meaningful labels for accessibility",
58
- "Consider the interaction pattern (clickable vs display-only) based on your use case"
59
- ],
60
- "contentGuidelines": [
61
- "Use clear, descriptive primary text (usually names)",
62
- "Provide relevant secondary text (emails, roles, etc.)",
63
- "Keep text concise but informative",
64
- "Use consistent formatting across similar items",
65
- "Avoid redundant information between primary and secondary text"
66
- ],
67
- "examples": ["./examples/ai/avatar-item.tsx"]
68
- },
69
- {
70
- "name": "Presence",
71
- "package": "@atlaskit/avatar",
72
- "import": {
73
- "name": "Presence",
74
- "package": "@atlaskit/avatar",
75
- "type": "named"
76
- },
77
- "keywords": ["presence", "status", "online", "offline", "busy", "focus", "indicator"],
78
- "categories": ["status", "data-display"],
79
- "shortDescription": "A standalone component for displaying user presence indicators. Presence indicators show the current availability status of users. They help other users understand when someone is available for communication and are useful in collaborative applications where knowing someone's availability is important for workflow.",
80
- "status": "general-availability",
81
- "usageGuidelines": [
82
- "Prefer using `<Avatar presence=\"…\" />` instead of `<Presence presence=\"…\" />`",
83
- "Use sparingly for real-time status only",
84
- "Don't overuse as they can create visual clutter",
85
- "Show presence only when relevant to user workflow",
86
- "Use consistent presence states across the application",
87
- "Consider the context and user needs before showing presence",
88
- "Use presence indicators sparingly for real-time status",
89
- "Don't overuse them as they can create visual clutter",
90
- "Only show presence when it's relevant to the user's workflow"
91
- ],
92
- "contentGuidelines": [
93
- "Use clear, universally understood presence states",
94
- "Be consistent with presence terminology",
95
- "Provide clear visual distinction between states",
96
- "Avoid ambiguous or unclear presence indicators"
97
- ],
98
- "examples": ["./examples/ai/presence.tsx"]
99
- },
100
- {
101
- "name": "Status",
102
- "package": "@atlaskit/avatar",
103
- "import": {
104
- "name": "Status",
105
- "package": "@atlaskit/avatar",
106
- "type": "named"
107
- },
108
- "keywords": ["status", "approved", "declined", "locked", "indicator", "permission"],
109
- "categories": ["status", "data-display"],
110
- "shortDescription": "A standalone component for displaying status indicators. Status indicators show the approval or permission state of users or entities. They help communicate important state information at a glance and are useful in workflow applications where approval states or permissions are important for user understanding.",
111
- "status": "general-availability",
112
- "usageGuidelines": [
113
- "Prefer using `<Avatar status=\"…\" />` instead of `<Status status=\"…\" />`",
114
- "Use for approval states, permission levels, or important state information",
115
- "Make sure the status is relevant and helpful to user workflow",
116
- "Use consistent status states across the application",
117
- "Consider the context and user needs before showing status",
118
- "Don't overuse status indicators to avoid visual clutter",
119
- "Use status indicators to show approval states, permission levels, or other important state information that affects how users should interact with the entity",
120
- "Make sure the status is relevant and helpful to the user's workflow"
121
- ],
122
- "contentGuidelines": [
123
- "Use clear, universally understood status states",
124
- "Be consistent with status terminology",
125
- "Provide clear visual distinction between states",
126
- "Avoid ambiguous or unclear status indicators"
127
- ],
128
- "examples": ["./examples/ai/status.tsx"]
129
- },
130
- {
131
- "name": "Skeleton",
132
- "package": "@atlaskit/avatar",
133
- "import": {
134
- "name": "Skeleton",
135
- "package": "@atlaskit/avatar",
136
- "type": "named"
137
- },
138
- "keywords": ["skeleton", "loading", "placeholder", "shimmer", "avatar"],
139
- "categories": ["loading", "data-display"],
140
- "shortDescription": "A skeleton loading component for avatars that shows a placeholder while content is loading. Skeleton components provide visual feedback during loading states, helping users understand that content is being fetched. Skeleton components should match the size and shape of the actual content they're replacing to prevent layout shifts.",
141
- "status": "general-availability",
142
- "usageGuidelines": [
143
- "Use during loading states to maintain layout stability",
144
- "Match the size and shape of the actual avatar content",
145
- "Prevent layout shifts by maintaining consistent dimensions",
146
- "Use for short loading periods (under 3 seconds)",
147
- "Consider using spinners for longer loading times",
148
- "Use skeleton avatars when user data is loading to maintain layout stability and provide visual feedback",
149
- "Match the size and shape of the actual avatar content to prevent layout shifts"
150
- ],
151
- "contentGuidelines": [
152
- "Keep skeleton content minimal and non-distracting",
153
- "Use consistent skeleton patterns across similar components",
154
- "Avoid overly detailed skeleton content",
155
- "Ensure skeleton content is clearly distinguishable from real content"
156
- ],
157
- "examples": ["./examples/ai/skeleton.tsx"]
158
- },
159
- {
160
- "name": "AvatarContent",
161
- "package": "@atlaskit/avatar",
162
- "import": {
163
- "name": "AvatarContent",
164
- "package": "@atlaskit/avatar",
165
- "type": "named"
166
- },
167
- "keywords": ["avatar", "content", "custom", "children", "wrapper"],
168
- "categories": ["images", "data-display"],
169
- "shortDescription": "A wrapper component for custom avatar content that provides consistent styling and behavior.",
170
- "status": "general-availability",
171
- "usageGuidelines": [
172
- "Use for custom avatar content that needs consistent styling",
173
- "Wrap custom content to maintain avatar behavior",
174
- "Ensure custom content follows avatar design principles",
175
- "Use when standard avatar props don't meet your needs"
176
- ],
177
- "contentGuidelines": [
178
- "Ensure custom content is appropriate for avatar context",
179
- "Maintain consistent visual hierarchy",
180
- "Keep custom content simple and clear"
181
- ],
182
- "examples": ["./examples/ai/avatar-content.tsx"]
183
- }
184
- ]