@atlaskit/media-avatar-picker 28.3.3 → 28.3.5

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 (12) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/avatar-picker-dialog/index.compiled.css +3 -0
  3. package/dist/cjs/avatar-picker-dialog/index.js +10 -3
  4. package/dist/cjs/avatar-picker-dialog/layout-const.js +1 -2
  5. package/dist/es2019/avatar-picker-dialog/index.compiled.css +3 -0
  6. package/dist/es2019/avatar-picker-dialog/index.js +12 -5
  7. package/dist/es2019/avatar-picker-dialog/layout-const.js +0 -1
  8. package/dist/esm/avatar-picker-dialog/index.compiled.css +3 -0
  9. package/dist/esm/avatar-picker-dialog/index.js +12 -5
  10. package/dist/esm/avatar-picker-dialog/layout-const.js +0 -1
  11. package/dist/types/avatar-picker-dialog/layout-const.d.ts +0 -1
  12. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/media-avatar-picker
2
2
 
3
+ ## 28.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`db4ffeaeaec78`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db4ffeaeaec78) -
8
+ Avatar picker dialog now keeps its 470px preferred height as a minimum and grows to fit the submit
9
+ error flag, so the Save and Cancel buttons stay within the modal.
10
+
11
+ ## 28.3.4
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 28.3.3
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/avatar-picker-dialog/index.compiled.css CHANGED
@@ -1,10 +1,13 @@
1
+ ._16jlkb7n{flex-grow:1}
1
2
  ._18u0idpf{margin-left:0}
2
3
  ._19pkidpf{margin-top:0}
3
4
  ._1bah1h6o{justify-content:center}
4
5
  ._1e0c1o8l{display:inline-block}
5
6
  ._1e0c1txw{display:flex}
7
+ ._1tke1784{min-height:470px}
6
8
  ._1tkeqbeb{min-height:339px}
7
9
  ._2hwxidpf{margin-right:0}
10
+ ._2lx21bp4{flex-direction:column}
8
11
  ._4cvr1y6m{align-items:flex-start}
9
12
  ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
10
13
  ._otyridpf{margin-bottom:0}
package/dist/cjs/avatar-picker-dialog/index.js CHANGED
@@ -57,6 +57,11 @@ var fixedCrop = exports.fixedCrop = {
57
57
  y: 0,
58
58
  size: _layoutConst.CONTAINER_INNER_SIZE
59
59
  };
60
+ // Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
61
+ var AVATAR_DIALOG_HEIGHT = 470;
62
+ var dialogContentStyles = {
63
+ root: "_1tke1784"
64
+ };
60
65
  var formStyles = null;
61
66
  var avatarPickerViewWrapperStyles = null;
62
67
  var altTextFieldStyles = {
@@ -258,10 +263,12 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
258
263
  key: "render",
259
264
  value: function render() {
260
265
  var content = /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
261
- height: "".concat(_layoutConst.AVATAR_DIALOG_HEIGHT, "px"),
262
266
  width: "".concat(_layoutConst.AVATAR_DIALOG_WIDTH, "px"),
263
267
  shouldScrollInViewport: true,
264
268
  onClose: this.props.onCancel
269
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
270
+ xcss: dialogContentStyles.root,
271
+ testId: "avatar-picker-dialog-content"
265
272
  }, this.props.avatars.length > 0 && /*#__PURE__*/_react.default.createElement(_SRLiveTitle.SRLiveTitle, {
266
273
  mode: this.state.mode
267
274
  }), /*#__PURE__*/_react.default.createElement(_modalHeader.default, {
@@ -270,10 +277,10 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
270
277
  }, /*#__PURE__*/_react.default.createElement(_modalTitle.default, null, this.props.title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
271
278
  "aria-label": "form",
272
279
  onSubmit: this.onSave,
273
- className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
280
+ className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
274
281
  }, /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
275
282
  className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
276
- }, this.renderBody())), this.footerContent()));
283
+ }, this.renderBody())), this.footerContent())));
277
284
  return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
278
285
  locale: "en"
279
286
  }, content);
package/dist/cjs/avatar-picker-dialog/layout-const.js CHANGED
@@ -3,11 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.IMAGE_MOVE_UNIT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_HEIGHT = void 0;
6
+ exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.IMAGE_MOVE_UNIT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = void 0;
7
7
  var _rectangle = require("@atlaskit/media-ui/rectangle");
8
8
  var DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
9
9
  var AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_WIDTH = 375;
10
- var AVATAR_DIALOG_HEIGHT = exports.AVATAR_DIALOG_HEIGHT = 470;
11
10
  var PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_WIDTH = 343;
12
11
  var PREDEFINED_AVATARS_VIEW_HEIGHT = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
13
12
  var CONTAINER_SIZE = exports.CONTAINER_SIZE = 8 * 32;
package/dist/es2019/avatar-picker-dialog/index.compiled.css CHANGED
@@ -1,10 +1,13 @@
1
+ ._16jlkb7n{flex-grow:1}
1
2
  ._18u0idpf{margin-left:0}
2
3
  ._19pkidpf{margin-top:0}
3
4
  ._1bah1h6o{justify-content:center}
4
5
  ._1e0c1o8l{display:inline-block}
5
6
  ._1e0c1txw{display:flex}
7
+ ._1tke1784{min-height:470px}
6
8
  ._1tkeqbeb{min-height:339px}
7
9
  ._2hwxidpf{margin-right:0}
10
+ ._2lx21bp4{flex-direction:column}
8
11
  ._4cvr1y6m{align-items:flex-start}
9
12
  ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
10
13
  ._otyridpf{margin-bottom:0}
package/dist/es2019/avatar-picker-dialog/index.js CHANGED
@@ -19,13 +19,13 @@ import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
19
19
  import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
20
20
  import ModalHeader from '@atlaskit/modal-dialog/modal-header';
21
21
  import ModalTitle from '@atlaskit/modal-dialog/modal-title';
22
- import { Box } from '@atlaskit/primitives/compiled';
22
+ import { Box, Stack } from '@atlaskit/primitives/compiled';
23
23
  import Textfield from '@atlaskit/textfield/text-field';
24
24
  import ImageNavigator from '../image-navigator';
25
25
  import { PredefinedAvatarList } from '../predefined-avatar-list';
26
26
  import { PredefinedAvatarView } from '../predefined-avatar-view';
27
27
  import { DEFAULT_VISIBLE_PREDEFINED_AVATARS } from './layout-const';
28
- import { AVATAR_DIALOG_WIDTH, AVATAR_DIALOG_HEIGHT, CONTAINER_INNER_SIZE } from './layout-const';
28
+ import { AVATAR_DIALOG_WIDTH, CONTAINER_INNER_SIZE } from './layout-const';
29
29
  import { SRLiveTitle } from './SRLiveTitle';
30
30
  import { SubmitErrorDialog } from './SubmitErrorDialog';
31
31
  import { Mode } from './types';
@@ -41,6 +41,11 @@ export const fixedCrop = {
41
41
  y: 0,
42
42
  size: CONTAINER_INNER_SIZE
43
43
  };
44
+ // Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
45
+ const AVATAR_DIALOG_HEIGHT = 470;
46
+ const dialogContentStyles = {
47
+ root: "_1tke1784"
48
+ };
44
49
  const formStyles = null;
45
50
  const avatarPickerViewWrapperStyles = null;
46
51
  const altTextFieldStyles = {
@@ -225,10 +230,12 @@ export class AvatarPickerDialog extends PureComponent {
225
230
  }
226
231
  render() {
227
232
  const content = /*#__PURE__*/React.createElement(ModalDialog, {
228
- height: `${AVATAR_DIALOG_HEIGHT}px`,
229
233
  width: `${AVATAR_DIALOG_WIDTH}px`,
230
234
  shouldScrollInViewport: true,
231
235
  onClose: this.props.onCancel
236
+ }, /*#__PURE__*/React.createElement(Stack, {
237
+ xcss: dialogContentStyles.root,
238
+ testId: "avatar-picker-dialog-content"
232
239
  }, this.props.avatars.length > 0 && /*#__PURE__*/React.createElement(SRLiveTitle, {
233
240
  mode: this.state.mode
234
241
  }), /*#__PURE__*/React.createElement(ModalHeader, {
@@ -237,10 +244,10 @@ export class AvatarPickerDialog extends PureComponent {
237
244
  }, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.title || /*#__PURE__*/React.createElement(FormattedMessage, messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/React.createElement(SubmitErrorDialog, null), /*#__PURE__*/React.createElement("form", {
238
245
  "aria-label": "form",
239
246
  onSubmit: this.onSave,
240
- className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
247
+ className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
241
248
  }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
242
249
  className: ax(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
243
- }, this.renderBody())), this.footerContent()));
250
+ }, this.renderBody())), this.footerContent())));
244
251
  return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
245
252
  locale: "en"
246
253
  }, content);
package/dist/es2019/avatar-picker-dialog/layout-const.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { Rectangle } from '@atlaskit/media-ui/rectangle';
2
2
  export const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
3
3
  export const AVATAR_DIALOG_WIDTH = 375;
4
- export const AVATAR_DIALOG_HEIGHT = 470;
5
4
  export const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
6
5
  export const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
7
6
  export const CONTAINER_SIZE = 8 * 32;
package/dist/esm/avatar-picker-dialog/index.compiled.css CHANGED
@@ -1,10 +1,13 @@
1
+ ._16jlkb7n{flex-grow:1}
1
2
  ._18u0idpf{margin-left:0}
2
3
  ._19pkidpf{margin-top:0}
3
4
  ._1bah1h6o{justify-content:center}
4
5
  ._1e0c1o8l{display:inline-block}
5
6
  ._1e0c1txw{display:flex}
7
+ ._1tke1784{min-height:470px}
6
8
  ._1tkeqbeb{min-height:339px}
7
9
  ._2hwxidpf{margin-right:0}
10
+ ._2lx21bp4{flex-direction:column}
8
11
  ._4cvr1y6m{align-items:flex-start}
9
12
  ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
10
13
  ._otyridpf{margin-bottom:0}
package/dist/esm/avatar-picker-dialog/index.js CHANGED
@@ -28,13 +28,13 @@ import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
28
28
  import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
29
29
  import ModalHeader from '@atlaskit/modal-dialog/modal-header';
30
30
  import ModalTitle from '@atlaskit/modal-dialog/modal-title';
31
- import { Box } from '@atlaskit/primitives/compiled';
31
+ import { Box, Stack } from '@atlaskit/primitives/compiled';
32
32
  import Textfield from '@atlaskit/textfield/text-field';
33
33
  import ImageNavigator from '../image-navigator';
34
34
  import { PredefinedAvatarList } from '../predefined-avatar-list';
35
35
  import { PredefinedAvatarView } from '../predefined-avatar-view';
36
36
  import { DEFAULT_VISIBLE_PREDEFINED_AVATARS } from './layout-const';
37
- import { AVATAR_DIALOG_WIDTH, AVATAR_DIALOG_HEIGHT, CONTAINER_INNER_SIZE } from './layout-const';
37
+ import { AVATAR_DIALOG_WIDTH, CONTAINER_INNER_SIZE } from './layout-const';
38
38
  import { SRLiveTitle } from './SRLiveTitle';
39
39
  import { SubmitErrorDialog } from './SubmitErrorDialog';
40
40
  import { Mode } from './types';
@@ -50,6 +50,11 @@ export var fixedCrop = {
50
50
  y: 0,
51
51
  size: CONTAINER_INNER_SIZE
52
52
  };
53
+ // Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
54
+ var AVATAR_DIALOG_HEIGHT = 470;
55
+ var dialogContentStyles = {
56
+ root: "_1tke1784"
57
+ };
53
58
  var formStyles = null;
54
59
  var avatarPickerViewWrapperStyles = null;
55
60
  var altTextFieldStyles = {
@@ -251,10 +256,12 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
251
256
  key: "render",
252
257
  value: function render() {
253
258
  var content = /*#__PURE__*/React.createElement(ModalDialog, {
254
- height: "".concat(AVATAR_DIALOG_HEIGHT, "px"),
255
259
  width: "".concat(AVATAR_DIALOG_WIDTH, "px"),
256
260
  shouldScrollInViewport: true,
257
261
  onClose: this.props.onCancel
262
+ }, /*#__PURE__*/React.createElement(Stack, {
263
+ xcss: dialogContentStyles.root,
264
+ testId: "avatar-picker-dialog-content"
258
265
  }, this.props.avatars.length > 0 && /*#__PURE__*/React.createElement(SRLiveTitle, {
259
266
  mode: this.state.mode
260
267
  }), /*#__PURE__*/React.createElement(ModalHeader, {
@@ -263,10 +270,10 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
263
270
  }, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.title || /*#__PURE__*/React.createElement(FormattedMessage, messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/React.createElement(SubmitErrorDialog, null), /*#__PURE__*/React.createElement("form", {
264
271
  "aria-label": "form",
265
272
  onSubmit: this.onSave,
266
- className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
273
+ className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
267
274
  }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
268
275
  className: ax(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
269
- }, this.renderBody())), this.footerContent()));
276
+ }, this.renderBody())), this.footerContent())));
270
277
  return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
271
278
  locale: "en"
272
279
  }, content);
package/dist/esm/avatar-picker-dialog/layout-const.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { Rectangle } from '@atlaskit/media-ui/rectangle';
2
2
  export var DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
3
3
  export var AVATAR_DIALOG_WIDTH = 375;
4
- export var AVATAR_DIALOG_HEIGHT = 470;
5
4
  export var PREDEFINED_AVATARS_VIEW_WIDTH = 343;
6
5
  export var PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
7
6
  export var CONTAINER_SIZE = 8 * 32;
package/dist/types/avatar-picker-dialog/layout-const.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { Rectangle } from '@atlaskit/media-ui/rectangle';
2
2
  export declare const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
3
3
  export declare const AVATAR_DIALOG_WIDTH = 375;
4
- export declare const AVATAR_DIALOG_HEIGHT = 470;
5
4
  export declare const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
6
5
  export declare const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
7
6
  export declare const CONTAINER_SIZE: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-avatar-picker",
3
- "version": "28.3.3",
3
+ "version": "28.3.5",
4
4
  "description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,18 +35,18 @@
35
35
  "dependencies": {
36
36
  "@atlaskit/button": "^25.4.0",
37
37
  "@atlaskit/css": "^1.1.0",
38
- "@atlaskit/flag": "^18.5.0",
39
- "@atlaskit/form": "^17.2.0",
40
- "@atlaskit/icon": "^37.7.0",
41
- "@atlaskit/media-ui": "^30.16.0",
42
- "@atlaskit/modal-dialog": "^16.6.0",
38
+ "@atlaskit/flag": "^19.0.0",
39
+ "@atlaskit/form": "^18.0.0",
40
+ "@atlaskit/icon": "^38.0.0",
41
+ "@atlaskit/media-ui": "^31.0.0",
42
+ "@atlaskit/modal-dialog": "^17.0.0",
43
43
  "@atlaskit/platform-feature-flags": "^2.2.0",
44
44
  "@atlaskit/primitives": "^22.5.0",
45
45
  "@atlaskit/range": "^12.2.0",
46
46
  "@atlaskit/react-compiler-gating": "^0.2.0",
47
47
  "@atlaskit/spinner": "^20.4.0",
48
48
  "@atlaskit/textfield": "^10.2.0",
49
- "@atlaskit/tokens": "^19.0.0",
49
+ "@atlaskit/tokens": "^20.1.0",
50
50
  "@atlaskit/visually-hidden": "^4.4.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@compiled/react": "^1.0.2",
@@ -59,8 +59,8 @@
59
59
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
60
60
  },
61
61
  "devDependencies": {
62
- "@atlaskit/media-core": "^38.2.0",
63
- "@atlaskit/media-test-helpers": "^42.4.0",
62
+ "@atlaskit/media-core": "^39.0.0",
63
+ "@atlaskit/media-test-helpers": "^43.0.0",
64
64
  "@atlaskit/page": "^15.3.0",
65
65
  "@atlassian/a11y-jest-testing": "^0.17.0",
66
66
  "@atlassian/feature-flags-test-utils": "^1.3.0",