@atlaskit/avatar 21.5.2 → 21.6.1

package/dist/cjs/Avatar.js

@@ -14,6 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _colors = require("@atlaskit/theme/colors");
 var _AvatarImage = _interopRequireDefault(require("./AvatarImage"));
 var _constants = require("./constants");
+var _context = require("./context");
 var _Presence = require("./Presence");
 var _Status = require("./Status");
 var _utilities = require("./utilities");
@@ -23,7 +24,7 @@ var _templateObject;
 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; }
 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; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.5.2";
+var packageVersion = "21.6.1";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -63,7 +64,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     onClick = _ref2.onClick,
     presence = _ref2.presence,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    sizeProp = _ref2$size === void 0 ? 'medium' : _ref2$size,
     src = _ref2.src,
     stackIndex = _ref2.stackIndex,
     status = _ref2.status,
@@ -73,6 +74,8 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     AvatarContainer = _ref2$as === void 0 ? 'div' : _ref2$as;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var context = (0, _context.useAvatarContext)();
+  var size = (context === null || context === void 0 ? void 0 : context.size) || sizeProp;
   var customPresenceNode = /*#__PURE__*/(0, _react.isValidElement)(presence) ? presence : null;
   var customStatusNode = /*#__PURE__*/(0, _react.isValidElement)(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';

package/dist/cjs/context.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAvatarContext = exports.AvatarContext = void 0;
+var _react = require("react");
+/**
+ * __Avatar context__
+ *
+ * This allows setting the size of all avatars under a context provider.
+ *
+ * ```tsx
+ * <AvatarContext.Provider value={{ size: 'small' }}>
+ *   <Avatar
+ *     // ...props
+ *   />
+ * </AvatarContext.Provider>
+ * ```
+ */
+var AvatarContext = exports.AvatarContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useAvatarContext = exports.useAvatarContext = function useAvatarContext() {
+  return (0, _react.useContext)(AvatarContext);
+};

package/dist/cjs/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "AVATAR_SIZES", {
     return _constants.AVATAR_SIZES;
   }
 });
+Object.defineProperty(exports, "AvatarContext", {
+  enumerable: true,
+  get: function get() {
+    return _context.AvatarContext;
+  }
+});
 Object.defineProperty(exports, "AvatarItem", {
   enumerable: true,
   get: function get() {
@@ -58,9 +64,16 @@ Object.defineProperty(exports, "default", {
     return _Avatar.default;
   }
 });
+Object.defineProperty(exports, "useAvatarContext", {
+  enumerable: true,
+  get: function get() {
+    return _context.useAvatarContext;
+  }
+});
 var _Avatar = _interopRequireDefault(require("./Avatar"));
 var _AvatarItem = _interopRequireDefault(require("./AvatarItem"));
 var _Presence = _interopRequireDefault(require("./Presence"));
 var _Status = _interopRequireDefault(require("./Status"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+var _context = require("./context");
 var _constants = require("./constants");

package/dist/es2019/Avatar.js

@@ -7,11 +7,12 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
+import { useAvatarContext } from './context';
 import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.5.2";
+const packageVersion = "21.6.1";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -136,7 +137,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
   name,
   onClick,
   presence,
-  size = 'medium',
+  size: sizeProp = 'medium',
   src,
   stackIndex,
   status,
@@ -147,6 +148,8 @@ const Avatar = /*#__PURE__*/forwardRef(({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const context = useAvatarContext();
+  const size = (context === null || context === void 0 ? void 0 : context.size) || sizeProp;
   const customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
   const customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   const isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';

package/dist/es2019/context.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+/**
+ * __Avatar context__
+ *
+ * This allows setting the size of all avatars under a context provider.
+ *
+ * ```tsx
+ * <AvatarContext.Provider value={{ size: 'small' }}>
+ *   <Avatar
+ *     // ...props
+ *   />
+ * </AvatarContext.Provider>
+ * ```
+ */
+export const AvatarContext = /*#__PURE__*/createContext(undefined);
+export const useAvatarContext = () => useContext(AvatarContext);

package/dist/es2019/index.js

@@ -4,4 +4,5 @@ export { default as AvatarItem } from './AvatarItem';
 export { default as Presence } from './Presence';
 export { default as Status } from './Status';
 export { default as Skeleton } from './Skeleton';
+export { AvatarContext, useAvatarContext } from './context';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';

package/dist/esm/Avatar.js

@@ -12,11 +12,12 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
+import { useAvatarContext } from './context';
 import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.5.2";
+var packageVersion = "21.6.1";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -56,7 +57,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onClick = _ref2.onClick,
     presence = _ref2.presence,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    sizeProp = _ref2$size === void 0 ? 'medium' : _ref2$size,
     src = _ref2.src,
     stackIndex = _ref2.stackIndex,
     status = _ref2.status,
@@ -66,6 +67,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     AvatarContainer = _ref2$as === void 0 ? 'div' : _ref2$as;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var context = useAvatarContext();
+  var size = (context === null || context === void 0 ? void 0 : context.size) || sizeProp;
   var customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
   var customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';

package/dist/esm/context.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+/**
+ * __Avatar context__
+ *
+ * This allows setting the size of all avatars under a context provider.
+ *
+ * ```tsx
+ * <AvatarContext.Provider value={{ size: 'small' }}>
+ *   <Avatar
+ *     // ...props
+ *   />
+ * </AvatarContext.Provider>
+ * ```
+ */
+export var AvatarContext = /*#__PURE__*/createContext(undefined);
+export var useAvatarContext = function useAvatarContext() {
+  return useContext(AvatarContext);
+};

package/dist/esm/index.js

@@ -4,4 +4,5 @@ export { default as AvatarItem } from './AvatarItem';
 export { default as Presence } from './Presence';
 export { default as Status } from './Status';
 export { default as Skeleton } from './Skeleton';
+export { AvatarContext, useAvatarContext } from './context';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR } from './constants';

package/dist/types/Avatar.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } from './types';
+import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types';
 export interface CustomAvatarProps {
     /**
      * This is used in render props so is okay to be defined.

package/dist/types/context.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type SizeType } from './types';
+export type AvatarContextProps = {
+    size: SizeType;
+};
+/**
+ * __Avatar context__
+ *
+ * This allows setting the size of all avatars under a context provider.
+ *
+ * ```tsx
+ * <AvatarContext.Provider value={{ size: 'small' }}>
+ *   <Avatar
+ *     // ...props
+ *   />
+ * </AvatarContext.Provider>
+ * ```
+ */
+export declare const AvatarContext: import("react").Context<AvatarContextProps | undefined>;
+export declare const useAvatarContext: () => AvatarContextProps | undefined;

package/dist/types/index.d.ts

@@ -8,5 +8,6 @@ export { default as Status } from './Status';
 export type { StatusProps } from './Status';
 export { default as Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
+export { AvatarContext, type AvatarContextProps, useAvatarContext, } from './context';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR, } from './constants';
 export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';

package/dist/types-ts4.5/Avatar.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } from './types';
+import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types';
 export interface CustomAvatarProps {
     /**
      * This is used in render props so is okay to be defined.

package/dist/types-ts4.5/context.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type SizeType } from './types';
+export type AvatarContextProps = {
+    size: SizeType;
+};
+/**
+ * __Avatar context__
+ *
+ * This allows setting the size of all avatars under a context provider.
+ *
+ * ```tsx
+ * <AvatarContext.Provider value={{ size: 'small' }}>
+ *   <Avatar
+ *     // ...props
+ *   />
+ * </AvatarContext.Provider>
+ * ```
+ */
+export declare const AvatarContext: import("react").Context<AvatarContextProps | undefined>;
+export declare const useAvatarContext: () => AvatarContextProps | undefined;

package/dist/types-ts4.5/index.d.ts

@@ -8,5 +8,6 @@ export { default as Status } from './Status';
 export type { StatusProps } from './Status';
 export { default as Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
+export { AvatarContext, type AvatarContextProps, useAvatarContext, } from './context';
 export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR, } from './constants';
 export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.5.2",
+  "version": "21.6.1",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,10 +43,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.45.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -58,9 +58,9 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/tooltip": "^18.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",