@atlaskit/media-avatar-picker 24.6.6 → 24.6.8

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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/image-cropper/index.js +25 -38
  3. package/dist/es2019/image-cropper/index.js +20 -38
  4. package/dist/esm/image-cropper/index.js +22 -38
  5. package/dist/types/image-cropper/index.d.ts +1 -3
  6. package/dist/types-ts4.5/image-cropper/index.d.ts +1 -3
  7. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/media-avatar-picker
2
2
 
3
+ ## 24.6.8
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 24.6.7
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 24.6.6
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/image-cropper/index.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = exports.ImageCropper = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
11
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
11
12
  var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -13,40 +14,20 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
13
14
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
14
15
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
15
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- var _react = require("@emotion/react");
17
- var _react2 = _interopRequireWildcard(require("react"));
17
+ var _react = _interopRequireWildcard(require("react"));
18
18
  var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
19
19
  var _reactIntlNext = require("react-intl-next");
20
20
  var _mediaUi = require("@atlaskit/media-ui");
21
21
  var _isImageRemote = require("./isImageRemote");
22
22
  var _styles = require("./styles");
23
- var _colors = require("@atlaskit/theme/colors");
23
+ var _new = require("@atlaskit/button/new");
24
24
  var _primitives = require("@atlaskit/primitives");
25
25
  var _avatarPickerDialog = require("../avatar-picker-dialog");
26
26
  var _layoutConst = require("../avatar-picker-dialog/layout-const");
27
27
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
28
28
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
29
29
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
30
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
32
- var removeImageButtonStyles = (0, _react.css)({
33
- borderRadius: "var(--ds-border-radius-050, 3px)",
34
- backgroundColor: 'transparent',
35
- width: '24px',
36
- height: '24px',
37
- border: 'none',
38
- cursor: 'pointer',
39
- padding: 0,
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
41
- svg: {
42
- position: 'absolute',
43
- top: "var(--ds-space-050, 4px)",
44
- left: "var(--ds-space-050, 4px)"
45
- },
46
- '&:hover': {
47
- backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N50A, ")")
48
- }
49
- });
30
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
50
31
  var removeImageContainerStyles = (0, _primitives.xcss)({
51
32
  position: 'absolute',
52
33
  right: 'space.050',
@@ -165,13 +146,13 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
165
146
  } catch (e) {
166
147
  return null;
167
148
  }
168
- return (0, _react.jsx)(_primitives.Box, {
149
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
169
150
  id: "container",
170
151
  xcss: [containerStyles, containerDimensions]
171
- }, (0, _react.jsx)(_primitives.Box, {
152
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
172
153
  id: "image-container",
173
154
  xcss: [imageContainerStyles, imageContainerDynamicStyles]
174
- }, (0, _react.jsx)(_mediaUi.MediaImage, {
155
+ }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
175
156
  crossOrigin: crossOrigin,
176
157
  dataURI: imageSource,
177
158
  crop: false,
@@ -180,34 +161,40 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
180
161
  onImageLoad: onImageLoaded,
181
162
  onImageError: this.onImageError
182
163
  })), isCircularMask ?
164
+ /*#__PURE__*/
183
165
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
184
- (0, _react.jsx)(_primitives.Box, {
166
+ _react.default.createElement(_primitives.Box, {
185
167
  xcss: [maskStyles, circularMaskStyles],
186
168
  style: maskShadow
187
169
  }) :
170
+ /*#__PURE__*/
188
171
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
189
- (0, _react.jsx)(_primitives.Box, {
172
+ _react.default.createElement(_primitives.Box, {
190
173
  xcss: [maskStyles, rectMaskStyles],
191
174
  style: maskShadow
192
- }), (0, _react.jsx)(_primitives.Box, {
175
+ }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
193
176
  id: "drag-overlay",
194
177
  xcss: dragOverlayStyles,
195
178
  onMouseDown: this.onDragStarted
196
- }), (0, _react.jsx)(_primitives.Box, {
179
+ }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
197
180
  id: "remove-image-container",
198
181
  xcss: removeImageContainerStyles
199
- }, (0, _react.jsx)("button", {
182
+ }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
200
183
  id: "remove-image-button",
201
- css: removeImageButtonStyles,
202
- onClick: onRemoveImage
203
- }, (0, _react.jsx)(_cross.default, {
204
- size: "small",
205
- label: formatMessage(_mediaUi.messages.remove_image)
206
- }))));
184
+ icon: function icon(iconProps) {
185
+ return /*#__PURE__*/_react.default.createElement(_cross.default, (0, _extends2.default)({}, iconProps, {
186
+ size: "small"
187
+ }));
188
+ },
189
+ onClick: onRemoveImage,
190
+ label: formatMessage(_mediaUi.messages.remove_image),
191
+ spacing: "compact",
192
+ appearance: "subtle"
193
+ })));
207
194
  }
208
195
  }]);
209
196
  return ImageCropper;
210
- }(_react2.Component);
197
+ }(_react.Component);
211
198
  (0, _defineProperty2.default)(ImageCropper, "defaultProps", {
212
199
  containerSize: _layoutConst.CONTAINER_INNER_SIZE,
213
200
  isCircleMask: false,
package/dist/es2019/image-cropper/index.js CHANGED
@@ -1,7 +1,5 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- /** @jsx jsx */
3
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
- import { jsx } from '@emotion/react';
5
3
  import React from 'react';
6
4
  import { Component } from 'react';
7
5
  import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -9,30 +7,10 @@ import { injectIntl } from 'react-intl-next';
9
7
  import { messages, MediaImage } from '@atlaskit/media-ui';
10
8
  import { isImageRemote } from './isImageRemote';
11
9
  import { CONTAINER_PADDING } from './styles';
12
- import { N50A } from '@atlaskit/theme/colors';
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
- import { css } from '@emotion/react';
10
+ import { IconButton } from '@atlaskit/button/new';
15
11
  import { Box, xcss } from '@atlaskit/primitives';
16
12
  import { ERROR } from '../avatar-picker-dialog';
17
13
  import { CONTAINER_INNER_SIZE } from '../avatar-picker-dialog/layout-const';
18
- const removeImageButtonStyles = css({
19
- borderRadius: "var(--ds-border-radius-050, 3px)",
20
- backgroundColor: 'transparent',
21
- width: '24px',
22
- height: '24px',
23
- border: 'none',
24
- cursor: 'pointer',
25
- padding: 0,
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
27
- svg: {
28
- position: 'absolute',
29
- top: "var(--ds-space-050, 4px)",
30
- left: "var(--ds-space-050, 4px)"
31
- },
32
- '&:hover': {
33
- backgroundColor: `var(--ds-background-neutral-hovered, ${N50A})`
34
- }
35
- });
36
14
  const removeImageContainerStyles = xcss({
37
15
  position: 'absolute',
38
16
  right: 'space.050',
@@ -148,13 +126,13 @@ export class ImageCropper extends Component {
148
126
  } catch (e) {
149
127
  return null;
150
128
  }
151
- return jsx(Box, {
129
+ return /*#__PURE__*/React.createElement(Box, {
152
130
  id: "container",
153
131
  xcss: [containerStyles, containerDimensions]
154
- }, jsx(Box, {
132
+ }, /*#__PURE__*/React.createElement(Box, {
155
133
  id: "image-container",
156
134
  xcss: [imageContainerStyles, imageContainerDynamicStyles]
157
- }, jsx(MediaImage, {
135
+ }, /*#__PURE__*/React.createElement(MediaImage, {
158
136
  crossOrigin: crossOrigin,
159
137
  dataURI: imageSource,
160
138
  crop: false,
@@ -163,30 +141,34 @@ export class ImageCropper extends Component {
163
141
  onImageLoad: onImageLoaded,
164
142
  onImageError: this.onImageError
165
143
  })), isCircularMask ?
144
+ /*#__PURE__*/
166
145
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
167
- jsx(Box, {
146
+ React.createElement(Box, {
168
147
  xcss: [maskStyles, circularMaskStyles],
169
148
  style: maskShadow
170
149
  }) :
150
+ /*#__PURE__*/
171
151
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
172
- jsx(Box, {
152
+ React.createElement(Box, {
173
153
  xcss: [maskStyles, rectMaskStyles],
174
154
  style: maskShadow
175
- }), jsx(Box, {
155
+ }), /*#__PURE__*/React.createElement(Box, {
176
156
  id: "drag-overlay",
177
157
  xcss: dragOverlayStyles,
178
158
  onMouseDown: this.onDragStarted
179
- }), jsx(Box, {
159
+ }), /*#__PURE__*/React.createElement(Box, {
180
160
  id: "remove-image-container",
181
161
  xcss: removeImageContainerStyles
182
- }, jsx("button", {
162
+ }, /*#__PURE__*/React.createElement(IconButton, {
183
163
  id: "remove-image-button",
184
- css: removeImageButtonStyles,
185
- onClick: onRemoveImage
186
- }, jsx(CrossIcon, {
187
- size: "small",
188
- label: formatMessage(messages.remove_image)
189
- }))));
164
+ icon: iconProps => /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
165
+ size: "small"
166
+ })),
167
+ onClick: onRemoveImage,
168
+ label: formatMessage(messages.remove_image),
169
+ spacing: "compact",
170
+ appearance: "subtle"
171
+ })));
190
172
  }
191
173
  }
192
174
  _defineProperty(ImageCropper, "defaultProps", {
package/dist/esm/image-cropper/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
3
  import _createClass from "@babel/runtime/helpers/createClass";
3
4
  import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,9 +8,6 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
9
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
9
10
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
10
- /** @jsx jsx */
11
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
- import { jsx } from '@emotion/react';
13
11
  import React from 'react';
14
12
  import { Component } from 'react';
15
13
  import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -17,30 +15,10 @@ import { injectIntl } from 'react-intl-next';
17
15
  import { messages, MediaImage } from '@atlaskit/media-ui';
18
16
  import { isImageRemote } from './isImageRemote';
19
17
  import { CONTAINER_PADDING } from './styles';
20
- import { N50A } from '@atlaskit/theme/colors';
21
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
22
- import { css } from '@emotion/react';
18
+ import { IconButton } from '@atlaskit/button/new';
23
19
  import { Box, xcss } from '@atlaskit/primitives';
24
20
  import { ERROR } from '../avatar-picker-dialog';
25
21
  import { CONTAINER_INNER_SIZE } from '../avatar-picker-dialog/layout-const';
26
- var removeImageButtonStyles = css({
27
- borderRadius: "var(--ds-border-radius-050, 3px)",
28
- backgroundColor: 'transparent',
29
- width: '24px',
30
- height: '24px',
31
- border: 'none',
32
- cursor: 'pointer',
33
- padding: 0,
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
35
- svg: {
36
- position: 'absolute',
37
- top: "var(--ds-space-050, 4px)",
38
- left: "var(--ds-space-050, 4px)"
39
- },
40
- '&:hover': {
41
- backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N50A, ")")
42
- }
43
- });
44
22
  var removeImageContainerStyles = xcss({
45
23
  position: 'absolute',
46
24
  right: 'space.050',
@@ -159,13 +137,13 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
159
137
  } catch (e) {
160
138
  return null;
161
139
  }
162
- return jsx(Box, {
140
+ return /*#__PURE__*/React.createElement(Box, {
163
141
  id: "container",
164
142
  xcss: [containerStyles, containerDimensions]
165
- }, jsx(Box, {
143
+ }, /*#__PURE__*/React.createElement(Box, {
166
144
  id: "image-container",
167
145
  xcss: [imageContainerStyles, imageContainerDynamicStyles]
168
- }, jsx(MediaImage, {
146
+ }, /*#__PURE__*/React.createElement(MediaImage, {
169
147
  crossOrigin: crossOrigin,
170
148
  dataURI: imageSource,
171
149
  crop: false,
@@ -174,30 +152,36 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
174
152
  onImageLoad: onImageLoaded,
175
153
  onImageError: this.onImageError
176
154
  })), isCircularMask ?
155
+ /*#__PURE__*/
177
156
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
178
- jsx(Box, {
157
+ React.createElement(Box, {
179
158
  xcss: [maskStyles, circularMaskStyles],
180
159
  style: maskShadow
181
160
  }) :
161
+ /*#__PURE__*/
182
162
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
183
- jsx(Box, {
163
+ React.createElement(Box, {
184
164
  xcss: [maskStyles, rectMaskStyles],
185
165
  style: maskShadow
186
- }), jsx(Box, {
166
+ }), /*#__PURE__*/React.createElement(Box, {
187
167
  id: "drag-overlay",
188
168
  xcss: dragOverlayStyles,
189
169
  onMouseDown: this.onDragStarted
190
- }), jsx(Box, {
170
+ }), /*#__PURE__*/React.createElement(Box, {
191
171
  id: "remove-image-container",
192
172
  xcss: removeImageContainerStyles
193
- }, jsx("button", {
173
+ }, /*#__PURE__*/React.createElement(IconButton, {
194
174
  id: "remove-image-button",
195
- css: removeImageButtonStyles,
196
- onClick: onRemoveImage
197
- }, jsx(CrossIcon, {
198
- size: "small",
199
- label: formatMessage(messages.remove_image)
200
- }))));
175
+ icon: function icon(iconProps) {
176
+ return /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
177
+ size: "small"
178
+ }));
179
+ },
180
+ onClick: onRemoveImage,
181
+ label: formatMessage(messages.remove_image),
182
+ spacing: "compact",
183
+ appearance: "subtle"
184
+ })));
201
185
  }
202
186
  }]);
203
187
  return ImageCropper;
package/dist/types/image-cropper/index.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
3
1
  import React from 'react';
4
2
  import { Component } from 'react';
5
3
  import { type WrappedComponentProps } from 'react-intl-next';
@@ -27,7 +25,7 @@ export declare class ImageCropper extends Component<ImageCropperProp & WrappedCo
27
25
  componentDidMount(): void;
28
26
  onDragStarted: (e: React.MouseEvent<{}>) => void;
29
27
  onImageError: () => void;
30
- render(): jsx.JSX.Element | null;
28
+ render(): JSX.Element | null;
31
29
  }
32
30
  declare const _default: React.FC<ImageCropperProp>;
33
31
  export default _default;
package/dist/types-ts4.5/image-cropper/index.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
3
1
  import React from 'react';
4
2
  import { Component } from 'react';
5
3
  import { type WrappedComponentProps } from 'react-intl-next';
@@ -27,7 +25,7 @@ export declare class ImageCropper extends Component<ImageCropperProp & WrappedCo
27
25
  componentDidMount(): void;
28
26
  onDragStarted: (e: React.MouseEvent<{}>) => void;
29
27
  onImageError: () => void;
30
- render(): jsx.JSX.Element | null;
28
+ render(): JSX.Element | null;
31
29
  }
32
30
  declare const _default: React.FC<ImageCropperProp>;
33
31
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-avatar-picker",
3
- "version": "24.6.6",
3
+ "version": "24.6.8",
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/"
@@ -34,18 +34,18 @@
34
34
  }
35
35
  },
36
36
  "dependencies": {
37
- "@atlaskit/button": "^17.22.0",
37
+ "@atlaskit/button": "^18.0.0",
38
38
  "@atlaskit/flag": "^15.6.0",
39
39
  "@atlaskit/form": "^10.4.0",
40
- "@atlaskit/icon": "^22.4.0",
40
+ "@atlaskit/icon": "^22.5.0",
41
41
  "@atlaskit/media-ui": "^25.10.0",
42
42
  "@atlaskit/modal-dialog": "^12.14.0",
43
- "@atlaskit/primitives": "^8.0.0",
43
+ "@atlaskit/primitives": "^9.0.0",
44
44
  "@atlaskit/range": "^7.3.0",
45
45
  "@atlaskit/spinner": "^16.2.0",
46
46
  "@atlaskit/textfield": "^6.4.0",
47
- "@atlaskit/theme": "^12.10.0",
48
- "@atlaskit/tokens": "^1.51.0",
47
+ "@atlaskit/theme": "^12.11.0",
48
+ "@atlaskit/tokens": "^1.53.0",
49
49
  "@atlaskit/visually-hidden": "^1.4.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "exenv": "^1.2.2"