@atlaskit/media-avatar-picker 26.1.0 → 26.1.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 (14) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/image-cropper/index.js +4 -8
  3. package/dist/cjs/image-navigator/dragZone.compiled.css +6 -2
  4. package/dist/cjs/image-navigator/dragZone.js +1 -4
  5. package/dist/cjs/image-navigator/slider.js +2 -1
  6. package/dist/es2019/image-cropper/index.js +4 -8
  7. package/dist/es2019/image-navigator/dragZone.compiled.css +4 -1
  8. package/dist/es2019/image-navigator/dragZone.js +1 -1
  9. package/dist/es2019/image-navigator/slider.js +2 -1
  10. package/dist/esm/image-cropper/index.js +4 -8
  11. package/dist/esm/image-navigator/dragZone.compiled.css +6 -2
  12. package/dist/esm/image-navigator/dragZone.js +1 -4
  13. package/dist/esm/image-navigator/slider.js +2 -1
  14. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/media-avatar-picker
2
2
 
3
+ ## 26.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#148734](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148734)
8
+ [`f64d4fd0fb594`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f64d4fd0fb594) -
9
+ Label content update for the zoom in/out button for image cropping functionality
10
+ - Updated dependencies
11
+
12
+ ## 26.1.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#148201](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148201)
17
+ [`8e811f1840de7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e811f1840de7) -
18
+ Either actively or pre-emptively fixes a bug with keyframe animations in CJS and ESM distribution
19
+ targets for packages using Compiled CSS-in-JS. This may not affect this package, but the change
20
+ was made so a future migration does not accidentally break it.
21
+ - Updated dependencies
22
+
3
23
  ## 26.1.0
4
24
 
5
25
  ### Minor Changes
package/dist/cjs/image-cropper/index.js CHANGED
@@ -88,26 +88,22 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
88
88
  switch (e.key) {
89
89
  case 'ArrowLeft':
90
90
  msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
91
- from: 'left',
92
- to: 'right'
91
+ key: 'left'
93
92
  });
94
93
  break;
95
94
  case 'ArrowRight':
96
95
  msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
97
- from: 'right',
98
- to: 'left'
96
+ key: 'right'
99
97
  });
100
98
  break;
101
99
  case 'ArrowUp':
102
100
  msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
103
- from: 'top',
104
- to: 'bottom'
101
+ key: 'top'
105
102
  });
106
103
  break;
107
104
  case 'ArrowDown':
108
105
  msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
109
- from: 'bottom',
110
- to: 'top'
106
+ key: 'bottom'
111
107
  });
112
108
  break;
113
109
  default:
package/dist/cjs/image-navigator/dragZone.compiled.css CHANGED
@@ -1,7 +1,6 @@
1
1
  ._14mj1osq:after{border-radius:100%}
2
2
  ._1yt41q64{padding:var(--ds-space-200,15px)}
3
3
  ._2rko1osq{border-radius:100%}
4
- ._46tsilf2:after{animation:var(--_s2m8ls)}
5
4
  ._eq43glyw:after{border:none}
6
5
  ._qc5o1qgh:after{transition:border-color .3s cubic-bezier(.19,1,.22,1)}
7
6
  ._v5641ggo{transition:background-color .3s cubic-bezier(.215,.61,.355,1)}
@@ -10,8 +9,11 @@
10
9
  ._8l3m1hxg:after{border-color:var(--ds-border-information,#0e56c4)}
11
10
  ._8l3m1lp0:after{border-color:var(--ds-border,#d0d6d0)}
12
11
  ._15l2idpf:after{top:0}
12
+ ._18f312c5:after{animation-iteration-count:infinite}
13
+ ._18lgp3kn:after{animation-timing-function:linear}
13
14
  ._18postnw:after{position:absolute}
14
15
  ._19doidpf:after{left:0}
16
+ ._19ohtakz:after{animation-name:k7rupus}
15
17
  ._1bah1h6o{justify-content:center}
16
18
  ._1bsbuuw1{width:200px}
17
19
  ._1e0c1txw{display:flex}
@@ -22,5 +24,7 @@
22
24
  ._aetrb3bt:after{content:""}
23
25
  ._bfhk1iy1{background-color:var(--ds-background-information-hovered,#ddecfe)}
24
26
  ._kqswh2mm{position:relative}
27
+ ._kwc012me:after{animation-duration:8s}
25
28
  ._re8d1dpy{display-name:DragZone}
26
- ._z0ai1osq:after{width:100%}
29
+ ._z0ai1osq:after{width:100%}
30
+ @keyframes k7rupus{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
package/dist/cjs/image-navigator/dragZone.js CHANGED
@@ -28,9 +28,6 @@ var DragZone = exports.DragZone = function DragZone(_ref) {
28
28
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
29
29
  "data-testid": "dragzone"
30
30
  }, props, {
31
- className: (0, _runtime.ax)(["_1yt41q64 _2rko1osq _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1osq _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "_bfhk1iy1 _46tsilf2 _8l3m1hxg", showBorder && "_39yqyh40 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"]),
32
- style: {
33
- "--_s2m8ls": (0, _runtime.ix)("".concat(spin, " 8s linear infinite"))
34
- }
31
+ className: (0, _runtime.ax)(["_1yt41q64 _2rko1osq _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1osq _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk1iy1 _8l3m1hxg _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yqyh40 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"])
35
32
  }), children);
36
33
  };
package/dist/cjs/image-navigator/slider.js CHANGED
@@ -60,7 +60,8 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
60
60
  "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_out)
61
61
  }), /*#__PURE__*/React.createElement(_range.default, {
62
62
  value: value,
63
- onChange: onChange
63
+ onChange: onChange,
64
+ "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_slider)
64
65
  }), /*#__PURE__*/React.createElement(_standardButton.default
65
66
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
66
67
  , {
package/dist/es2019/image-cropper/index.js CHANGED
@@ -69,26 +69,22 @@ export class ImageCropper extends Component {
69
69
  switch (e.key) {
70
70
  case 'ArrowLeft':
71
71
  msg = formatMessage(messages.image_cropper_image_moved, {
72
- from: 'left',
73
- to: 'right'
72
+ key: 'left'
74
73
  });
75
74
  break;
76
75
  case 'ArrowRight':
77
76
  msg = formatMessage(messages.image_cropper_image_moved, {
78
- from: 'right',
79
- to: 'left'
77
+ key: 'right'
80
78
  });
81
79
  break;
82
80
  case 'ArrowUp':
83
81
  msg = formatMessage(messages.image_cropper_image_moved, {
84
- from: 'top',
85
- to: 'bottom'
82
+ key: 'top'
86
83
  });
87
84
  break;
88
85
  case 'ArrowDown':
89
86
  msg = formatMessage(messages.image_cropper_image_moved, {
90
- from: 'bottom',
91
- to: 'top'
87
+ key: 'bottom'
92
88
  });
93
89
  break;
94
90
  default:
package/dist/es2019/image-navigator/dragZone.compiled.css CHANGED
@@ -1,7 +1,6 @@
1
1
  ._14mj1osq:after{border-radius:100%}
2
2
  ._1yt41q64{padding:var(--ds-space-200,15px)}
3
3
  ._2rko1osq{border-radius:100%}
4
- ._46ts17y1:after{animation:k7rupus 8s linear infinite}
5
4
  ._eq43glyw:after{border:none}
6
5
  ._qc5o1qgh:after{transition:border-color .3s cubic-bezier(.19,1,.22,1)}
7
6
  ._v5641ggo{transition:background-color .3s cubic-bezier(.215,.61,.355,1)}
@@ -10,8 +9,11 @@
10
9
  ._8l3m1hxg:after{border-color:var(--ds-border-information,#0e56c4)}
11
10
  ._8l3m1lp0:after{border-color:var(--ds-border,#d0d6d0)}
12
11
  ._15l2idpf:after{top:0}
12
+ ._18f312c5:after{animation-iteration-count:infinite}
13
+ ._18lgp3kn:after{animation-timing-function:linear}
13
14
  ._18postnw:after{position:absolute}
14
15
  ._19doidpf:after{left:0}
16
+ ._19ohtakz:after{animation-name:k7rupus}
15
17
  ._1bah1h6o{justify-content:center}
16
18
  ._1bsbuuw1{width:200px}
17
19
  ._1e0c1txw{display:flex}
@@ -22,6 +24,7 @@
22
24
  ._aetrb3bt:after{content:""}
23
25
  ._bfhk1iy1{background-color:var(--ds-background-information-hovered,#ddecfe)}
24
26
  ._kqswh2mm{position:relative}
27
+ ._kwc012me:after{animation-duration:8s}
25
28
  ._re8d1dpy{display-name:DragZone}
26
29
  ._z0ai1osq:after{width:100%}
27
30
  @keyframes k7rupus{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
package/dist/es2019/image-navigator/dragZone.js CHANGED
@@ -16,5 +16,5 @@ export const DragZone = ({
16
16
  }) => /*#__PURE__*/React.createElement("div", _extends({
17
17
  "data-testid": "dragzone"
18
18
  }, props, {
19
- className: ax(["_1yt41q64 _2rko1osq _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1osq _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk1iy1 _46ts17y1 _8l3m1hxg", showBorder && "_39yqyh40 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"])
19
+ className: ax(["_1yt41q64 _2rko1osq _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1osq _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk1iy1 _8l3m1hxg _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yqyh40 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"])
20
20
  }), children);
package/dist/es2019/image-navigator/slider.js CHANGED
@@ -37,7 +37,8 @@ export class Slider extends Component {
37
37
  "aria-label": formatMessage(messages.image_cropper_zoom_out)
38
38
  }), /*#__PURE__*/React.createElement(FieldRange, {
39
39
  value: value,
40
- onChange: onChange
40
+ onChange: onChange,
41
+ "aria-label": formatMessage(messages.image_cropper_zoom_slider)
41
42
  }), /*#__PURE__*/React.createElement(Button
42
43
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
43
44
  , {
package/dist/esm/image-cropper/index.js CHANGED
@@ -79,26 +79,22 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
79
79
  switch (e.key) {
80
80
  case 'ArrowLeft':
81
81
  msg = formatMessage(messages.image_cropper_image_moved, {
82
- from: 'left',
83
- to: 'right'
82
+ key: 'left'
84
83
  });
85
84
  break;
86
85
  case 'ArrowRight':
87
86
  msg = formatMessage(messages.image_cropper_image_moved, {
88
- from: 'right',
89
- to: 'left'
87
+ key: 'right'
90
88
  });
91
89
  break;
92
90
  case 'ArrowUp':
93
91
  msg = formatMessage(messages.image_cropper_image_moved, {
94
- from: 'top',
95
- to: 'bottom'
92
+ key: 'top'
96
93
  });
97
94
  break;
98
95
  case 'ArrowDown':
99
96
  msg = formatMessage(messages.image_cropper_image_moved, {
100
- from: 'bottom',
101
- to: 'top'
97
+ key: 'bottom'
102
98
  });
103
99
  break;
104
100
  default:
package/dist/esm/image-navigator/dragZone.compiled.css CHANGED
@@ -1,7 +1,6 @@
1
1
  ._14mj1osq:after{border-radius:100%}
2
2
  ._1yt41q64{padding:var(--ds-space-200,15px)}
3
3
  ._2rko1osq{border-radius:100%}
4
- ._46tsilf2:after{animation:var(--_s2m8ls)}
5
4
  ._eq43glyw:after{border:none}
6
5
  ._qc5o1qgh:after{transition:border-color .3s cubic-bezier(.19,1,.22,1)}
7
6
  ._v5641ggo{transition:background-color .3s cubic-bezier(.215,.61,.355,1)}
@@ -10,8 +9,11 @@
10
9
  ._8l3m1hxg:after{border-color:var(--ds-border-information,#0e56c4)}
11
10
  ._8l3m1lp0:after{border-color:var(--ds-border,#d0d6d0)}
12
11
  ._15l2idpf:after{top:0}
12
+ ._18f312c5:after{animation-iteration-count:infinite}
13
+ ._18lgp3kn:after{animation-timing-function:linear}
13
14
  ._18postnw:after{position:absolute}
14
15
  ._19doidpf:after{left:0}
16
+ ._19ohtakz:after{animation-name:k7rupus}
15
17
  ._1bah1h6o{justify-content:center}
16
18
  ._1bsbuuw1{width:200px}
17
19
  ._1e0c1txw{display:flex}
@@ -22,5 +24,7 @@
22
24
  ._aetrb3bt:after{content:""}
23
25
  ._bfhk1iy1{background-color:var(--ds-background-information-hovered,#ddecfe)}
24
26
  ._kqswh2mm{position:relative}
27
+ ._kwc012me:after{animation-duration:8s}
25
28
  ._re8d1dpy{display-name:DragZone}
26
- ._z0ai1osq:after{width:100%}
29
+ ._z0ai1osq:after{width:100%}
30
+ @keyframes k7rupus{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
package/dist/esm/image-navigator/dragZone.js CHANGED
@@ -18,9 +18,6 @@ export var DragZone = function DragZone(_ref) {
18
18
  return /*#__PURE__*/React.createElement("div", _extends({
19
19
  "data-testid": "dragzone"
20
20
  }, props, {
21
- className: ax(["_1yt41q64 _2rko1osq _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1osq _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "_bfhk1iy1 _46tsilf2 _8l3m1hxg", showBorder && "_39yqyh40 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"]),
22
- style: {
23
- "--_s2m8ls": ix("".concat(spin, " 8s linear infinite"))
24
- }
21
+ className: ax(["_1yt41q64 _2rko1osq _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1osq _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk1iy1 _8l3m1hxg _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yqyh40 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"])
25
22
  }), children);
26
23
  };
package/dist/esm/image-navigator/slider.js CHANGED
@@ -50,7 +50,8 @@ export var Slider = /*#__PURE__*/function (_Component) {
50
50
  "aria-label": formatMessage(messages.image_cropper_zoom_out)
51
51
  }), /*#__PURE__*/React.createElement(FieldRange, {
52
52
  value: value,
53
- onChange: onChange
53
+ onChange: onChange,
54
+ "aria-label": formatMessage(messages.image_cropper_zoom_slider)
54
55
  }), /*#__PURE__*/React.createElement(Button
55
56
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
56
57
  , {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-avatar-picker",
3
- "version": "26.1.0",
3
+ "version": "26.1.2",
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/"
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/icon": "^25.6.0",
43
43
  "@atlaskit/media-ui": "^28.1.0",
44
44
  "@atlaskit/modal-dialog": "^14.1.0",
45
- "@atlaskit/primitives": "^14.4.0",
45
+ "@atlaskit/primitives": "^14.7.0",
46
46
  "@atlaskit/range": "^9.0.0",
47
47
  "@atlaskit/spinner": "^18.0.0",
48
48
  "@atlaskit/textfield": "^8.0.0",
@@ -60,9 +60,9 @@
60
60
  "react-intl-next": "npm:react-intl@^5.18.1"
61
61
  },
62
62
  "devDependencies": {
63
- "@atlaskit/media-core": "^35.0.0",
64
- "@atlaskit/media-test-helpers": "^35.0.0",
65
- "@atlaskit/visual-regression": "^0.10.0",
63
+ "@atlaskit/media-core": "^36.0.0",
64
+ "@atlaskit/media-test-helpers": "^36.0.0",
65
+ "@atlaskit/visual-regression": "workspace:^",
66
66
  "@testing-library/react": "^13.4.0",
67
67
  "@testing-library/user-event": "^14.4.3",
68
68
  "@types/enzyme": "3.1.15",