@atlaskit/media-avatar-picker 26.2.2 → 26.2.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-avatar-picker
 
+## 26.2.4
+
+### Patch Changes
+
+- [`68012a7424ed5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/68012a7424ed5) -
+  Bring the focus to the Go Back icon when coming to Predefined Avatars List view
+
+## 26.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.2.2
 
 ### Patch Changes

package/dist/cjs/avatar-picker-dialog/index.js

@@ -70,6 +70,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
     }
     _this = _callSuper(this, AvatarPickerDialog, [].concat(args));
     (0, _defineProperty2.default)(_this, "moreRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)(_this, "goBackRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)(_this, "state", {
       mode: _types.Mode.Cropping,
       selectedAvatar: _this.props.defaultSelectedAvatar,
@@ -179,6 +180,10 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         mode: _types.Mode.PredefinedAvatars,
         isSubmitted: false
       });
+      requestAnimationFrame(function () {
+        var _this$goBackRef$curre;
+        (_this$goBackRef$curre = _this.goBackRef.current) === null || _this$goBackRef$curre === void 0 || _this$goBackRef$curre.focus();
+      });
     });
     (0, _defineProperty2.default)(_this, "onGoBack", function () {
       _this.clearErrorState();
@@ -405,7 +410,8 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
             onAvatarSelected: this.setSelectedAvatarState,
             onGoBack: this.onGoBack,
             selectedAvatar: selectedAvatar,
-            predefinedAvatarsText: predefinedAvatarsText
+            predefinedAvatarsText: predefinedAvatarsText,
+            ref: this.goBackRef
           }), requireAltText && this.renderAltTextField());
       }
     }

package/dist/cjs/predefined-avatar-view/index.js

@@ -30,7 +30,7 @@ var labelStyles = null;
 var headerStyles = null;
 var descriptionStyles = null;
 var backButtonStyles = null;
-var PredefinedAvatarView = exports.PredefinedAvatarView = function PredefinedAvatarView(_ref) {
+var PredefinedAvatarView = exports.PredefinedAvatarView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, goBackRef) {
   var _ref$avatars = _ref.avatars,
     avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
     onAvatarSelected = _ref.onAvatarSelected,
@@ -92,6 +92,7 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = function PredefinedAva
       label: ""
     }),
     onClick: onGoBack,
+    ref: goBackRef,
     className: (0, _runtime.ax)(["_2rko1q77 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsbzwfg _4t3izwfg _4cvr1h6o _1bah1h6o"])
   }), /*#__PURE__*/React.createElement("h2", {
     className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _11c82smr _19bvu2gc"])
@@ -100,4 +101,4 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = function PredefinedAva
     "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar),
     className: (0, _runtime.ax)(["_2lx2vrvc _1n261g80 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _1bsb1665 _c71lgrxc _18m91wug _ca0qu2gc _u5f3idpf _n3tdidpf _19bvidpf"])
   }, cards));
-};
+});

package/dist/es2019/avatar-picker-dialog/index.js

@@ -49,6 +49,7 @@ export class AvatarPickerDialog extends PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "moreRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "goBackRef", /*#__PURE__*/createRef());
     _defineProperty(this, "state", {
       mode: Mode.Cropping,
       selectedAvatar: this.props.defaultSelectedAvatar,
@@ -141,6 +142,10 @@ export class AvatarPickerDialog extends PureComponent {
         mode: Mode.PredefinedAvatars,
         isSubmitted: false
       });
+      requestAnimationFrame(() => {
+        var _this$goBackRef$curre;
+        (_this$goBackRef$curre = this.goBackRef.current) === null || _this$goBackRef$curre === void 0 ? void 0 : _this$goBackRef$curre.focus();
+      });
     });
     _defineProperty(this, "onGoBack", () => {
       this.clearErrorState();
@@ -361,7 +366,8 @@ export class AvatarPickerDialog extends PureComponent {
           onAvatarSelected: this.setSelectedAvatarState,
           onGoBack: this.onGoBack,
           selectedAvatar: selectedAvatar,
-          predefinedAvatarsText: predefinedAvatarsText
+          predefinedAvatarsText: predefinedAvatarsText,
+          ref: this.goBackRef
         }), requireAltText && this.renderAltTextField());
     }
   }

package/dist/es2019/predefined-avatar-view/index.js

@@ -7,7 +7,7 @@ import { messages } from '@atlaskit/media-ui';
 import ArrowLeftIcon from '@atlaskit/icon/core/migration/arrow-left';
 import Button from '@atlaskit/button/standard-button';
 import { B200, B100 } from '@atlaskit/theme/colors';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 const largeAvatarImageStyles = null;
 const largeAvatarImageCheckedStyles = null;
 const largeAvatarImageFocusedStyles = null;
@@ -17,14 +17,14 @@ const labelStyles = null;
 const headerStyles = null;
 const descriptionStyles = null;
 const backButtonStyles = null;
-export const PredefinedAvatarView = ({
+export const PredefinedAvatarView = /*#__PURE__*/forwardRef(({
   avatars = [],
   onAvatarSelected,
   selectedAvatar,
   onGoBack,
   predefinedAvatarsText,
   selectAvatarLabel
-}) => {
+}, goBackRef) => {
   const intl = useIntl();
   const [isFocused, setIsFocused] = useState(Object.fromEntries(avatars.map(avatar => [avatar.dataURI, false])));
   const createOnItemClickHandler = avatar => {
@@ -72,6 +72,7 @@ export const PredefinedAvatarView = ({
       label: ""
     }),
     onClick: onGoBack,
+    ref: goBackRef,
     className: ax(["_2rko1q77 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsbzwfg _4t3izwfg _4cvr1h6o _1bah1h6o"])
   }), /*#__PURE__*/React.createElement("h2", {
     className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _11c82smr _19bvu2gc"])
@@ -80,4 +81,4 @@ export const PredefinedAvatarView = ({
     "aria-label": selectAvatarLabel || intl.formatMessage(messages.select_an_avatar),
     className: ax(["_2lx2vrvc _1n261g80 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _1bsb1665 _c71lgrxc _18m91wug _ca0qu2gc _u5f3idpf _n3tdidpf _19bvidpf"])
   }, cards));
-};
+});

package/dist/esm/avatar-picker-dialog/index.js

@@ -63,6 +63,7 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _callSuper(this, AvatarPickerDialog, [].concat(args));
     _defineProperty(_this, "moreRef", /*#__PURE__*/createRef());
+    _defineProperty(_this, "goBackRef", /*#__PURE__*/createRef());
     _defineProperty(_this, "state", {
       mode: Mode.Cropping,
       selectedAvatar: _this.props.defaultSelectedAvatar,
@@ -172,6 +173,10 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         mode: Mode.PredefinedAvatars,
         isSubmitted: false
       });
+      requestAnimationFrame(function () {
+        var _this$goBackRef$curre;
+        (_this$goBackRef$curre = _this.goBackRef.current) === null || _this$goBackRef$curre === void 0 || _this$goBackRef$curre.focus();
+      });
     });
     _defineProperty(_this, "onGoBack", function () {
       _this.clearErrorState();
@@ -398,7 +403,8 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
             onAvatarSelected: this.setSelectedAvatarState,
             onGoBack: this.onGoBack,
             selectedAvatar: selectedAvatar,
-            predefinedAvatarsText: predefinedAvatarsText
+            predefinedAvatarsText: predefinedAvatarsText,
+            ref: this.goBackRef
           }), requireAltText && this.renderAltTextField());
       }
     }

package/dist/esm/predefined-avatar-view/index.js

@@ -11,7 +11,7 @@ import { messages } from '@atlaskit/media-ui';
 import ArrowLeftIcon from '@atlaskit/icon/core/migration/arrow-left';
 import Button from '@atlaskit/button/standard-button';
 import { B200, B100 } from '@atlaskit/theme/colors';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 var largeAvatarImageStyles = null;
 var largeAvatarImageCheckedStyles = null;
 var largeAvatarImageFocusedStyles = null;
@@ -21,7 +21,7 @@ var labelStyles = null;
 var headerStyles = null;
 var descriptionStyles = null;
 var backButtonStyles = null;
-export var PredefinedAvatarView = function PredefinedAvatarView(_ref) {
+export var PredefinedAvatarView = /*#__PURE__*/forwardRef(function (_ref, goBackRef) {
   var _ref$avatars = _ref.avatars,
     avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
     onAvatarSelected = _ref.onAvatarSelected,
@@ -83,6 +83,7 @@ export var PredefinedAvatarView = function PredefinedAvatarView(_ref) {
       label: ""
     }),
     onClick: onGoBack,
+    ref: goBackRef,
     className: ax(["_2rko1q77 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsbzwfg _4t3izwfg _4cvr1h6o _1bah1h6o"])
   }), /*#__PURE__*/React.createElement("h2", {
     className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _11c82smr _19bvu2gc"])
@@ -91,4 +92,4 @@ export var PredefinedAvatarView = function PredefinedAvatarView(_ref) {
     "aria-label": selectAvatarLabel || intl.formatMessage(messages.select_an_avatar),
     className: ax(["_2lx2vrvc _1n261g80 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _1bsb1665 _c71lgrxc _18m91wug _ca0qu2gc _u5f3idpf _n3tdidpf _19bvidpf"])
   }, cards));
-};
+});

package/dist/types/avatar-picker-dialog/index.d.ts

@@ -23,6 +23,7 @@ export declare class AvatarPickerDialog extends PureComponent<AvatarPickerDialog
         avatars: never[];
     };
     moreRef: React.RefObject<HTMLButtonElement>;
+    goBackRef: React.RefObject<HTMLButtonElement>;
     state: AvatarPickerDialogState;
     setSelectedImageState: (selectedImage: File) => Promise<void>;
     setSelectedAvatarState: (avatar: Avatar) => void;

package/dist/types/predefined-avatar-view/index.d.ts

@@ -7,4 +7,4 @@ export interface PredefinedAvatarViewProps {
     predefinedAvatarsText?: string;
     selectAvatarLabel?: string;
 }
-export declare const PredefinedAvatarView: ({ avatars, onAvatarSelected, selectedAvatar, onGoBack, predefinedAvatarsText, selectAvatarLabel, }: PredefinedAvatarViewProps) => JSX.Element;
+export declare const PredefinedAvatarView: import("react").ForwardRefExoticComponent<PredefinedAvatarViewProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/avatar-picker-dialog/index.d.ts

@@ -23,6 +23,7 @@ export declare class AvatarPickerDialog extends PureComponent<AvatarPickerDialog
         avatars: never[];
     };
     moreRef: React.RefObject<HTMLButtonElement>;
+    goBackRef: React.RefObject<HTMLButtonElement>;
     state: AvatarPickerDialogState;
     setSelectedImageState: (selectedImage: File) => Promise<void>;
     setSelectedAvatarState: (avatar: Avatar) => void;

package/dist/types-ts4.5/predefined-avatar-view/index.d.ts

@@ -7,4 +7,4 @@ export interface PredefinedAvatarViewProps {
     predefinedAvatarsText?: string;
     selectAvatarLabel?: string;
 }
-export declare const PredefinedAvatarView: ({ avatars, onAvatarSelected, selectedAvatar, onGoBack, predefinedAvatarsText, selectAvatarLabel, }: PredefinedAvatarViewProps) => JSX.Element;
+export declare const PredefinedAvatarView: import("react").ForwardRefExoticComponent<PredefinedAvatarViewProps & import("react").RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "26.2.2",
+	"version": "26.2.4",
 	"description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,8 +37,8 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/flag": "^17.3.0",
-		"@atlaskit/form": "^12.1.0",
-		"@atlaskit/icon": "^27.12.0",
+		"@atlaskit/form": "^12.2.0",
+		"@atlaskit/icon": "^28.0.0",
 		"@atlaskit/media-ui": "^28.6.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/primitives": "^14.11.0",