@atlaskit/media-avatar-picker 24.3.18 → 24.3.20

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-avatar-picker
 
+## 24.3.20
+
+### Patch Changes
+
+- [#67778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67778) [`70c7f71eb643`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70c7f71eb643) - [ux] fix missing modal heading
+
+## 24.3.19
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.3.18
 
 ### Patch Changes

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

@@ -47,6 +47,15 @@ var fixedCrop = exports.fixedCrop = {
   y: 0,
   size: _layoutConst.CONTAINER_INNER_SIZE
 };
+var HeaderContent = function HeaderContent(_ref) {
+  var title = _ref.title;
+  var modal = (0, _modalDialog.useModal)();
+  return (0, _react2.jsx)("h2", {
+    css: _styles.modalHeaderStyles,
+    "data-test-id": "modal-header",
+    id: modal.titleId
+  }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar));
+};
 var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(AvatarPickerDialog, _PureComponent);
   var _super = _createSuper(AvatarPickerDialog);
@@ -66,7 +75,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       isSubmitted: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setSelectedImageState", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(selectedImage) {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(selectedImage) {
         var dataURI;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -94,7 +103,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         }, _callee, null, [[0, 8]]);
       }));
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setSelectedAvatarState", function (avatar) {
@@ -181,13 +190,6 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function (errorMessage) {
       _this.setErrorState(errorMessage);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerContent", function () {
-      var title = _this.props.title;
-      return (0, _react2.jsx)("div", {
-        css: _styles.modalHeaderStyles,
-        "data-test-id": "modal-header"
-      }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar));
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "footerContent", function () {
       var _this$props2 = _this.props,
         primaryButtonText = _this$props2.primaryButtonText,
@@ -214,7 +216,9 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         onClose: this.props.onCancel
       }, this.props.avatars.length > 0 && (0, _react2.jsx)(_SRLiveTitle.SRLiveTitle, {
         mode: this.state.mode
-      }), this.headerContent(), this.state.isSubmitted && (0, _react2.jsx)(_SubmitErrorDialog.SubmitErrorDialog, null), (0, _react2.jsx)("form", {
+      }), (0, _react2.jsx)(HeaderContent, {
+        title: this.props.title
+      }), this.state.isSubmitted && (0, _react2.jsx)(_SubmitErrorDialog.SubmitErrorDialog, null), (0, _react2.jsx)("form", {
         noValidate: true,
         onSubmit: this.onSave,
         css: _styles.formStyles

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import ModalDialog, { ModalFooter, ModalBody } from '@atlaskit/modal-dialog';
+import ModalDialog, { ModalFooter, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import Button from '@atlaskit/button/standard-button';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
 import { fileToDataURI, dataURItoFile, messages } from '@atlaskit/media-ui';
@@ -30,6 +30,16 @@ export const fixedCrop = {
   y: 0,
   size: CONTAINER_INNER_SIZE
 };
+const HeaderContent = ({
+  title
+}) => {
+  const modal = useModal();
+  return jsx("h2", {
+    css: modalHeaderStyles,
+    "data-test-id": "modal-header",
+    id: modal.titleId
+  }, title || jsx(FormattedMessage, messages.upload_an_avatar));
+};
 export class AvatarPickerDialog extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -138,15 +148,6 @@ export class AvatarPickerDialog extends PureComponent {
     _defineProperty(this, "onImageError", errorMessage => {
       this.setErrorState(errorMessage);
     });
-    _defineProperty(this, "headerContent", () => {
-      const {
-        title
-      } = this.props;
-      return jsx("div", {
-        css: modalHeaderStyles,
-        "data-test-id": "modal-header"
-      }, title || jsx(FormattedMessage, messages.upload_an_avatar));
-    });
     _defineProperty(this, "footerContent", () => {
       const {
         primaryButtonText,
@@ -171,7 +172,9 @@ export class AvatarPickerDialog extends PureComponent {
       onClose: this.props.onCancel
     }, this.props.avatars.length > 0 && jsx(SRLiveTitle, {
       mode: this.state.mode
-    }), this.headerContent(), this.state.isSubmitted && jsx(SubmitErrorDialog, null), jsx("form", {
+    }), jsx(HeaderContent, {
+      title: this.props.title
+    }), this.state.isSubmitted && jsx(SubmitErrorDialog, null), jsx("form", {
       noValidate: true,
       onSubmit: this.onSave,
       css: formStyles

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import ModalDialog, { ModalFooter, ModalBody } from '@atlaskit/modal-dialog';
+import ModalDialog, { ModalFooter, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import Button from '@atlaskit/button/standard-button';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
 import { fileToDataURI, dataURItoFile, messages } from '@atlaskit/media-ui';
@@ -40,6 +40,15 @@ export var fixedCrop = {
   y: 0,
   size: CONTAINER_INNER_SIZE
 };
+var HeaderContent = function HeaderContent(_ref) {
+  var title = _ref.title;
+  var modal = useModal();
+  return jsx("h2", {
+    css: modalHeaderStyles,
+    "data-test-id": "modal-header",
+    id: modal.titleId
+  }, title || jsx(FormattedMessage, messages.upload_an_avatar));
+};
 export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   _inherits(AvatarPickerDialog, _PureComponent);
   var _super = _createSuper(AvatarPickerDialog);
@@ -59,7 +68,7 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       isSubmitted: false
     });
     _defineProperty(_assertThisInitialized(_this), "setSelectedImageState", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selectedImage) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selectedImage) {
         var dataURI;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -87,7 +96,7 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         }, _callee, null, [[0, 8]]);
       }));
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }());
     _defineProperty(_assertThisInitialized(_this), "setSelectedAvatarState", function (avatar) {
@@ -174,13 +183,6 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "onImageError", function (errorMessage) {
       _this.setErrorState(errorMessage);
     });
-    _defineProperty(_assertThisInitialized(_this), "headerContent", function () {
-      var title = _this.props.title;
-      return jsx("div", {
-        css: modalHeaderStyles,
-        "data-test-id": "modal-header"
-      }, title || jsx(FormattedMessage, messages.upload_an_avatar));
-    });
     _defineProperty(_assertThisInitialized(_this), "footerContent", function () {
       var _this$props2 = _this.props,
         primaryButtonText = _this$props2.primaryButtonText,
@@ -207,7 +209,9 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         onClose: this.props.onCancel
       }, this.props.avatars.length > 0 && jsx(SRLiveTitle, {
         mode: this.state.mode
-      }), this.headerContent(), this.state.isSubmitted && jsx(SubmitErrorDialog, null), jsx("form", {
+      }), jsx(HeaderContent, {
+        title: this.props.title
+      }), this.state.isSubmitted && jsx(SubmitErrorDialog, null), jsx("form", {
         noValidate: true,
         onSubmit: this.onSave,
         css: formStyles

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

@@ -38,7 +38,6 @@ export declare class AvatarPickerDialog extends PureComponent<AvatarPickerDialog
     onImageUploaded: () => void;
     onImageError: (errorMessage: string) => void;
     render(): jsx.JSX.Element;
-    headerContent: () => jsx.JSX.Element;
     footerContent: () => jsx.JSX.Element;
     getPredefinedAvatars(): Avatar[];
     renderPredefinedAvatarList(): jsx.JSX.Element | null;

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

@@ -38,7 +38,6 @@ export declare class AvatarPickerDialog extends PureComponent<AvatarPickerDialog
     onImageUploaded: () => void;
     onImageError: (errorMessage: string) => void;
     render(): jsx.JSX.Element;
-    headerContent: () => jsx.JSX.Element;
     footerContent: () => jsx.JSX.Element;
     getPredefinedAvatars(): Avatar[];
     renderPredefinedAvatarList(): jsx.JSX.Element | null;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/media-avatar-picker",
-  "version": "24.3.18",
+  "version": "24.3.20",
   "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/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -34,7 +34,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/flag": "^15.2.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-ui": "^25.0.0",
@@ -42,7 +42,7 @@
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "exenv": "^1.2.2"