@atlaskit/media-avatar-picker 27.1.2 → 28.0.0

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 (52) hide show
  1. package/AGENTS.md +27 -0
  2. package/CHANGELOG.md +32 -0
  3. package/avatar-list/package.json +1 -8
  4. package/avatar-picker-dialog-loader/package.json +1 -8
  5. package/dist/cjs/avatar-picker-dialog/index.js +11 -11
  6. package/dist/cjs/image-navigator/index.js +4 -4
  7. package/dist/cjs/image-placer/imageProcessor.js +13 -13
  8. package/dist/cjs/image-placer/index.js +35 -35
  9. package/dist/esm/avatar-picker-dialog/index.js +10 -10
  10. package/dist/esm/image-navigator/index.js +4 -4
  11. package/dist/esm/image-placer/imageProcessor.js +13 -13
  12. package/dist/esm/image-placer/index.js +35 -35
  13. package/exportCroppedImage/package.json +1 -8
  14. package/image-cropper/package.json +1 -8
  15. package/image-navigator/package.json +1 -8
  16. package/images/package.json +1 -8
  17. package/package.json +19 -28
  18. package/slider/package.json +1 -8
  19. package/viewport/package.json +1 -8
  20. package/dist/types-ts4.5/avatar-list/index.d.ts +0 -11
  21. package/dist/types-ts4.5/avatar-picker-dialog/SRLiveTitle.d.ts +0 -7
  22. package/dist/types-ts4.5/avatar-picker-dialog/SubmitErrorDialog.d.ts +0 -1
  23. package/dist/types-ts4.5/avatar-picker-dialog/avatar-picker-dialog-error-boundary.d.ts +0 -7
  24. package/dist/types-ts4.5/avatar-picker-dialog/avatar-picker-dialog-loader.d.ts +0 -4
  25. package/dist/types-ts4.5/avatar-picker-dialog/custom-spinner.d.ts +0 -2
  26. package/dist/types-ts4.5/avatar-picker-dialog/index.d.ts +0 -57
  27. package/dist/types-ts4.5/avatar-picker-dialog/layout-const.d.ts +0 -11
  28. package/dist/types-ts4.5/avatar-picker-dialog/types.d.ts +0 -76
  29. package/dist/types-ts4.5/image-cropper/crop-to-data-uri.d.ts +0 -7
  30. package/dist/types-ts4.5/image-cropper/index.d.ts +0 -36
  31. package/dist/types-ts4.5/image-cropper/isImageRemote.d.ts +0 -1
  32. package/dist/types-ts4.5/image-navigator/dragZone.d.ts +0 -1
  33. package/dist/types-ts4.5/image-navigator/exportCroppedImage.d.ts +0 -2
  34. package/dist/types-ts4.5/image-navigator/images.d.ts +0 -3
  35. package/dist/types-ts4.5/image-navigator/index.d.ts +0 -84
  36. package/dist/types-ts4.5/image-navigator/slider.d.ts +0 -19
  37. package/dist/types-ts4.5/image-placer/constraints.d.ts +0 -6
  38. package/dist/types-ts4.5/image-placer/container.d.ts +0 -29
  39. package/dist/types-ts4.5/image-placer/containerWrapper.d.ts +0 -6
  40. package/dist/types-ts4.5/image-placer/image.d.ts +0 -20
  41. package/dist/types-ts4.5/image-placer/imagePlacerErrorWrapper.d.ts +0 -1
  42. package/dist/types-ts4.5/image-placer/imageProcessor.d.ts +0 -16
  43. package/dist/types-ts4.5/image-placer/imageWrapper.d.ts +0 -1
  44. package/dist/types-ts4.5/image-placer/index.d.ts +0 -104
  45. package/dist/types-ts4.5/image-placer/margin.d.ts +0 -12
  46. package/dist/types-ts4.5/index.d.ts +0 -10
  47. package/dist/types-ts4.5/predefined-avatar-list/index.d.ts +0 -11
  48. package/dist/types-ts4.5/predefined-avatar-view/index.d.ts +0 -11
  49. package/dist/types-ts4.5/util.d.ts +0 -6
  50. package/dist/types-ts4.5/viewport/index.d.ts +0 -2
  51. package/dist/types-ts4.5/viewport/viewport-render.d.ts +0 -3
  52. package/dist/types-ts4.5/viewport/viewport.d.ts +0 -57
@@ -258,15 +258,15 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
258
258
  value: (function () {
259
259
  var _UNSAFE_componentWillReceiveProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nextProps) {
260
260
  var imageSourceRect, state, props, zoom, currentUseConstraints, currentContainerWidth, currentContainerHeight, currentMargin, currentSrc, nextZoom, nextUseConstraints, nextContainerWidth, nextContainerHeight, nextMargin, nextSrc, nextOnImageActions, isZoomChange, isUseConstraintsChange, isContainerWidthChange, isContainerHeightChange, isMarginChange, isImageAction, zoomReset, fileInfo;
261
- return _regeneratorRuntime.wrap(function _callee$(_context) {
261
+ return _regeneratorRuntime.wrap(function (_context) {
262
262
  while (1) switch (_context.prev = _context.next) {
263
263
  case 0:
264
264
  if (!fg('platform_media_package_react19_lifecycle_fix')) {
265
- _context.next = 2;
265
+ _context.next = 1;
266
266
  break;
267
267
  }
268
268
  return _context.abrupt("return");
269
- case 2:
269
+ case 1:
270
270
  imageSourceRect = this.imageSourceRect, state = this.state, props = this.props;
271
271
  zoom = state.zoom;
272
272
  currentUseConstraints = props.useConstraints, currentContainerWidth = props.containerWidth, currentContainerHeight = props.containerHeight, currentMargin = props.margin, currentSrc = props.src;
@@ -295,34 +295,34 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
295
295
  this.updateZoomProp();
296
296
  }
297
297
  if (!(nextSrc instanceof File && nextSrc !== currentSrc)) {
298
- _context.next = 20;
298
+ _context.next = 3;
299
299
  break;
300
300
  }
301
- _context.next = 19;
301
+ _context.next = 2;
302
302
  return getFileInfo(nextSrc);
303
- case 19:
303
+ case 2:
304
304
  fileInfo = _context.sent;
305
- case 20:
305
+ case 3:
306
306
  if (!(typeof nextSrc === 'string' && nextSrc !== currentSrc)) {
307
- _context.next = 24;
307
+ _context.next = 5;
308
308
  break;
309
309
  }
310
- _context.next = 23;
310
+ _context.next = 4;
311
311
  return getFileInfoFromSrc(nextSrc);
312
- case 23:
312
+ case 4:
313
313
  fileInfo = _context.sent;
314
- case 24:
314
+ case 5:
315
315
  if (!fileInfo) {
316
- _context.next = 27;
316
+ _context.next = 6;
317
317
  break;
318
318
  }
319
- _context.next = 27;
319
+ _context.next = 6;
320
320
  return this.preprocessFile(fileInfo);
321
- case 27:
321
+ case 6:
322
322
  if (isImageAction) {
323
323
  this.provideImageActions();
324
324
  }
325
- case 28:
325
+ case 7:
326
326
  case "end":
327
327
  return _context.stop();
328
328
  }
@@ -338,15 +338,15 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
338
338
  value: function () {
339
339
  var _componentDidUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(prevProps) {
340
340
  var imageSourceRect, props, nextZoom, nextUseConstraints, nextContainerWidth, nextContainerHeight, nextMargin, nextSrc, nextOnImageActions, prevZoom, prevUseConstraints, prevContainerWidth, prevContainerHeight, prevMargin, prevSrc, prevOnImageActions, isZoomChange, isUseConstraintsChange, isContainerWidthChange, isContainerHeightChange, isMarginChange, isImageActionChange, zoomReset, fileInfo;
341
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
341
+ return _regeneratorRuntime.wrap(function (_context2) {
342
342
  while (1) switch (_context2.prev = _context2.next) {
343
343
  case 0:
344
344
  if (fg('platform_media_package_react19_lifecycle_fix')) {
345
- _context2.next = 2;
345
+ _context2.next = 1;
346
346
  break;
347
347
  }
348
348
  return _context2.abrupt("return");
349
- case 2:
349
+ case 1:
350
350
  imageSourceRect = this.imageSourceRect, props = this.props;
351
351
  nextZoom = props.zoom, nextUseConstraints = props.useConstraints, nextContainerWidth = props.containerWidth, nextContainerHeight = props.containerHeight, nextMargin = props.margin, nextSrc = props.src, nextOnImageActions = props.onImageActions;
352
352
  prevZoom = prevProps.zoom, prevUseConstraints = prevProps.useConstraints, prevContainerWidth = prevProps.containerWidth, prevContainerHeight = prevProps.containerHeight, prevMargin = prevProps.margin, prevSrc = prevProps.src, prevOnImageActions = prevProps.onImageActions;
@@ -374,38 +374,38 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
374
374
  this.updateZoomProp();
375
375
  }
376
376
  if (!(nextSrc !== prevSrc)) {
377
- _context2.next = 27;
377
+ _context2.next = 6;
378
378
  break;
379
379
  }
380
380
  if (!(nextSrc instanceof File)) {
381
- _context2.next = 20;
381
+ _context2.next = 3;
382
382
  break;
383
383
  }
384
- _context2.next = 19;
384
+ _context2.next = 2;
385
385
  return getFileInfo(nextSrc);
386
- case 19:
386
+ case 2:
387
387
  fileInfo = _context2.sent;
388
- case 20:
388
+ case 3:
389
389
  if (!(typeof nextSrc === 'string')) {
390
- _context2.next = 24;
390
+ _context2.next = 5;
391
391
  break;
392
392
  }
393
- _context2.next = 23;
393
+ _context2.next = 4;
394
394
  return getFileInfoFromSrc(nextSrc);
395
- case 23:
395
+ case 4:
396
396
  fileInfo = _context2.sent;
397
- case 24:
397
+ case 5:
398
398
  if (!fileInfo) {
399
- _context2.next = 27;
399
+ _context2.next = 6;
400
400
  break;
401
401
  }
402
- _context2.next = 27;
402
+ _context2.next = 6;
403
403
  return this.preprocessFile(fileInfo);
404
- case 27:
404
+ case 6:
405
405
  if (isImageActionChange) {
406
406
  this.provideImageActions();
407
407
  }
408
- case 28:
408
+ case 7:
409
409
  case "end":
410
410
  return _context2.stop();
411
411
  }
@@ -421,13 +421,13 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
421
421
  value: function () {
422
422
  var _preprocessFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(fileInfo) {
423
423
  var maxZoom, previewInfo, width, height;
424
- return _regeneratorRuntime.wrap(function _callee3$(_context3) {
424
+ return _regeneratorRuntime.wrap(function (_context3) {
425
425
  while (1) switch (_context3.prev = _context3.next) {
426
426
  case 0:
427
427
  maxZoom = this.props.maxZoom;
428
- _context3.next = 3;
428
+ _context3.next = 1;
429
429
  return initialiseImagePreview(fileInfo, this.containerRect, maxZoom);
430
- case 3:
430
+ case 1:
431
431
  previewInfo = _context3.sent;
432
432
  if (previewInfo) {
433
433
  width = previewInfo.width, height = previewInfo.height;
@@ -439,7 +439,7 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
439
439
  errorMessage: 'Cannot load image'
440
440
  });
441
441
  }
442
- case 5:
442
+ case 2:
443
443
  case "end":
444
444
  return _context3.stop();
445
445
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/image-navigator/exportCroppedImage.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/image-navigator/exportCroppedImage.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/image-navigator/exportCroppedImage.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/image-cropper/index.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/image-cropper/index.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/image-cropper/index.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/image-navigator/index.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/image-navigator/index.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/image-navigator/index.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/image-navigator/images.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/image-navigator/images.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/image-navigator/images.d.ts"
17
10
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-avatar-picker",
3
- "version": "27.1.2",
3
+ "version": "28.0.0",
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/"
@@ -12,14 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.5 <4.9": {
17
- "*": [
18
- "dist/types-ts4.5/*",
19
- "dist/types-ts4.5/index.d.ts"
20
- ]
21
- }
22
- },
23
15
  "sideEffects": [
24
16
  "**/*.compiled.css"
25
17
  ],
@@ -38,20 +30,20 @@
38
30
  }
39
31
  },
40
32
  "dependencies": {
41
- "@atlaskit/button": "^23.11.0",
42
- "@atlaskit/css": "^0.19.0",
43
- "@atlaskit/flag": "^17.11.0",
44
- "@atlaskit/form": "^15.5.0",
45
- "@atlaskit/icon": "^34.5.0",
46
- "@atlaskit/media-ui": "^29.2.0",
47
- "@atlaskit/modal-dialog": "^15.0.0",
48
- "@atlaskit/platform-feature-flags": "^1.1.0",
49
- "@atlaskit/primitives": "^19.0.0",
50
- "@atlaskit/range": "^10.1.0",
51
- "@atlaskit/spinner": "^19.1.0",
52
- "@atlaskit/textfield": "^8.3.0",
53
- "@atlaskit/tokens": "^13.0.0",
54
- "@atlaskit/visually-hidden": "^3.1.0",
33
+ "@atlaskit/button": "^24.0.0",
34
+ "@atlaskit/css": "^1.0.0",
35
+ "@atlaskit/flag": "^18.0.0",
36
+ "@atlaskit/form": "^16.0.0",
37
+ "@atlaskit/icon": "^36.0.0",
38
+ "@atlaskit/media-ui": "^30.0.0",
39
+ "@atlaskit/modal-dialog": "^16.0.0",
40
+ "@atlaskit/platform-feature-flags": "^2.0.0",
41
+ "@atlaskit/primitives": "^20.0.0",
42
+ "@atlaskit/range": "^11.0.0",
43
+ "@atlaskit/spinner": "^20.0.0",
44
+ "@atlaskit/textfield": "^9.0.0",
45
+ "@atlaskit/tokens": "^14.0.0",
46
+ "@atlaskit/visually-hidden": "^4.0.0",
55
47
  "@babel/runtime": "^7.0.0",
56
48
  "@compiled/react": "^0.20.0",
57
49
  "exenv": "^1.2.2",
@@ -63,15 +55,14 @@
63
55
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
64
56
  },
65
57
  "devDependencies": {
66
- "@atlaskit/media-core": "^37.0.0",
67
- "@atlaskit/media-test-helpers": "^41.0.0",
68
- "@atlassian/a11y-jest-testing": "^0.11.0",
58
+ "@atlaskit/media-core": "^38.0.0",
59
+ "@atlaskit/media-test-helpers": "^42.0.0",
60
+ "@atlassian/a11y-jest-testing": "^0.12.0",
69
61
  "@atlassian/react-compiler-gating": "workspace:^",
62
+ "@atlassian/testing-library": "^0.6.0",
70
63
  "@testing-library/react": "^16.3.0",
71
64
  "@testing-library/user-event": "^14.4.3",
72
- "@types/enzyme": "3.1.15",
73
65
  "@types/exenv": "^1.2.0",
74
- "enzyme": "^3.10.0",
75
66
  "react": "^18.2.0",
76
67
  "react-dom": "^18.2.0",
77
68
  "react-intl": "^6.6.2"
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/image-navigator/slider.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/image-navigator/slider.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/image-navigator/slider.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/viewport/viewport.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/viewport/viewport.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/viewport/viewport.d.ts"
17
10
  }
@@ -1,11 +0,0 @@
1
- export interface Avatar {
2
- dataURI: string;
3
- name?: string;
4
- }
5
- export interface AvatarListProps {
6
- avatars: Array<Avatar>;
7
- onItemClick?: (avatar: Avatar) => void;
8
- selectedAvatar?: Avatar;
9
- selectAvatarLabel?: string;
10
- }
11
- export declare const AvatarList: ({ avatars, selectedAvatar, onItemClick, selectAvatarLabel, }: AvatarListProps) => JSX.Element;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { Mode } from './types';
3
- type SRLiveTitleProps = {
4
- mode: Mode;
5
- };
6
- export declare const SRLiveTitle: ({ mode }: SRLiveTitleProps) => React.JSX.Element;
7
- export {};
@@ -1 +0,0 @@
1
- export declare const SubmitErrorDialog: () => JSX.Element;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { type ReactNode } from 'react';
3
- import { type AvatarPickerDialogProps } from './types';
4
- export type AvatarPickerDialogErrorBoundaryProps = AvatarPickerDialogProps & {
5
- placeholder?: ReactNode;
6
- };
7
- export default function AvatarPickerDialogErrorBoundary(props: AvatarPickerDialogErrorBoundaryProps): React.JSX.Element;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { type AvatarPickerDialogErrorBoundaryProps } from './avatar-picker-dialog-error-boundary';
3
- export type AsyncAvatarPickerDialogProps = AvatarPickerDialogErrorBoundaryProps;
4
- export default function AsyncAvatarPickerDialog(props: AsyncAvatarPickerDialogProps): React.JSX.Element;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const CustomSpinner: () => React.JSX.Element;
@@ -1,57 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { PureComponent } from 'react';
7
- import { type MessageDescriptor, type WrappedComponentProps } from 'react-intl';
8
- import { type Avatar } from '../avatar-list';
9
- import { type CropProperties } from '../image-navigator';
10
- import { type LoadParameters } from '../image-navigator/index';
11
- import { type AvatarPickerDialogProps, type AvatarPickerDialogState } from './types';
12
- export declare const MAX_SIZE_MB = 10;
13
- export declare const ERROR: {
14
- URL: MessageDescriptor;
15
- FORMAT: MessageDescriptor;
16
- SIZE: MessageDescriptor;
17
- };
18
- export declare const ACCEPT: string[];
19
- export declare const fixedCrop: CropProperties;
20
- export type AvatarPickerDialogWithIntlProps = AvatarPickerDialogProps & Partial<WrappedComponentProps>;
21
- export declare class AvatarPickerDialog extends PureComponent<AvatarPickerDialogWithIntlProps, AvatarPickerDialogState> {
22
- static defaultProps: {
23
- avatars: never[];
24
- };
25
- moreRef: React.RefObject<HTMLButtonElement>;
26
- goBackRef: React.RefObject<HTMLButtonElement>;
27
- state: AvatarPickerDialogState;
28
- setSelectedImageState: (selectedImage: File) => Promise<void>;
29
- setSelectedAvatarState: (avatar: Avatar) => void;
30
- onImageNavigatorLoad: (loadParams: LoadParameters) => void;
31
- /**
32
- * Initialised with no-op function. Is assigned cropped image exporting
33
- * function when internal ImageCropper mounts via this.onImageNavigatorLoad
34
- */
35
- exportCroppedImage: (_outputSize?: number) => string;
36
- onSave: (event: React.FormEvent<HTMLFormElement>) => void;
37
- onShowMore: () => void;
38
- onGoBack: () => void;
39
- onRemoveImage: () => void;
40
- clearErrorState: () => void;
41
- setErrorState: (errorMessage: string) => void;
42
- onImageUploaded: () => void;
43
- onImageError: (errorMessage: string) => void;
44
- render(): JSX.Element;
45
- footerContent: () => JSX.Element;
46
- getPredefinedAvatars(): Avatar[];
47
- renderPredefinedAvatarList(): JSX.Element | null;
48
- initialiseAltText(): string;
49
- updateAltText(altText: string): void;
50
- clearAltText(): void;
51
- updatePrevAltText(prevAltText: string): void;
52
- clearPrevAltText(): void;
53
- renderAltTextField(): JSX.Element;
54
- renderBody(): JSX.Element;
55
- }
56
- declare const _default: React.FC<AvatarPickerDialogProps>;
57
- export default _default;
@@ -1,11 +0,0 @@
1
- import { Rectangle } from '@atlaskit/media-ui';
2
- export declare const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
3
- export declare const AVATAR_DIALOG_WIDTH = 375;
4
- export declare const AVATAR_DIALOG_HEIGHT = 470;
5
- export declare const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
6
- export declare const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
7
- export declare const CONTAINER_SIZE: number;
8
- export declare const CONTAINER_INNER_SIZE: number;
9
- export declare const CONTAINER_PADDING: number;
10
- export declare const CONTAINER_RECT: Rectangle;
11
- export declare const IMAGE_MOVE_UNIT = 5;
@@ -1,76 +0,0 @@
1
- import { type Avatar } from '../avatar-list';
2
- import { type CropProperties } from '../image-navigator';
3
- export declare enum Mode {
4
- Cropping = 0,
5
- PredefinedAvatars = 1
6
- }
7
- export interface CommonAvatarPickerDialogProps {
8
- /** This property is used to provide an array of pre-defined avatars. The **Avatar** object is a simple type with a single **dataURI: string** property. For convenience, this type is exported from the **@atlassian/media-avatar-picker** module along with the **AvatarPickerDialog** component. */
9
- avatars: Array<Avatar>;
10
- /** This property is used along with the **avatar** property. It allows you to set the currently selected pre-defined avatar. By default, there is no pre-defined avatar selected, even if the **avatars** property is set. */
11
- defaultSelectedAvatar?: Avatar;
12
- /** This optional property is used to set the selected image so that the component opens up with it visible already. The value should be a valid dataURI string. If an invalid dataURI is given, the bad format error state will be triggered and a message shown. */
13
- imageSource?: string;
14
- /** This property is raised when the user clicks **Cancel** button.
15
- * **Note** this does not close the dialog.
16
- * It is up to the consumer to re-render and remove the dialog from the UI.
17
- */
18
- onCancel: () => void;
19
- /** The title text for the dialog. The default is _Upload an avatar_. */
20
- title?: string;
21
- /** The primary button text. The default is _Save_. */
22
- primaryButtonText?: string;
23
- /** This optional property allows the consumer to display an error message. This may occur from a call to a service. The string is clipped if greater than 125 charaters (approximately 3 lines within the dialog). */
24
- errorMessage?: string;
25
- /** This optional property is used while the avatar is loaded. */
26
- isLoading?: boolean;
27
- /** This property describes the text related to the Avatar. */
28
- predefinedAvatarsText?: string;
29
- /** The target width/height of the resulting (square) avatar. Leave blank for default (200x200) */
30
- outputSize?: number;
31
- /** This optional property allows the consumer to define the maximum image size that can be uploaded. */
32
- maxImageSize?: number;
33
- /** This optional property allows the consumer to define a custom label for select default avatar. The default is _Select a default avatar_. */
34
- selectAvatarLabel?: string;
35
- /** This optional property allows the consumer to define a custom label for the default avatars show more button. The default is _Show more_. */
36
- showMoreAvatarsButtonLabel?: string;
37
- }
38
- export interface AvatarPickerDialogPropsNoAlt extends CommonAvatarPickerDialogProps {
39
- /** This property is raised when the user clicks the **Save** button and there is a pre-defined avatar selected, and no image selected. An **Avatar** object with a **dataURI** property is passed. */
40
- onAvatarPicked: (avatar: Avatar) => void;
41
- /** This property is raised when the user clicks the **Save** button and there is a selected image.
42
- * Two arguments are passed, the **file:File** which is a blob, and the crop settings which is an object containing **x:number**,**y:number**, and **size:number** values, which are all relative to the coordinates of the selected image. **Note** due to limitations on Safari <= 10.0 and IE11, a **Blob** object will be returned instead of a **File**.
43
- * This still allows access to the image byte data to facilitate uploads, essentially minus the filename and date attributes.
44
- */
45
- onImagePicked?: (file: File, crop: CropProperties) => void;
46
- /** This property is raised when the user clicks the **Save** button and there is a selected image. The selected image is provided as a dataURI string. */
47
- onImagePickedDataURI?: (dataUri: string) => void;
48
- /** This property allows the consumer to specify whether or not the user should be required to enter alt text. */
49
- requireAltText?: false | undefined;
50
- }
51
- export interface AvatarPickerDialogPropsAlt extends CommonAvatarPickerDialogProps {
52
- /** This property is raised when the user clicks the **Save** button and there is a pre-defined avatar selected, and no image selected. Two arguments are passed, an **Avatar** object with a **dataURI** property, and an **altText** string. */
53
- onAvatarPicked: (avatar: Avatar, altText: string) => void;
54
- /** This optional property is used to set the alt text of the selected image so that the component opens up with it visible already. */
55
- imageSourceAltText?: string;
56
- /** This property is raised when the user clicks the **Save** button and there is a selected image.
57
- * Three arguments are passed, the **file:File** which is a blob, the crop settings which is an object containing **x:number**,**y:number**, and **size:number** values, which are all relative to the coordinates of the selected image, and **altText:string**. **Note** due to limitations on Safari <= 10.0 and IE11, a **Blob** object will be returned instead of a **File**.
58
- * This still allows access to the image byte data to facilitate uploads, essentially minus the filename and date attributes.
59
- */
60
- onImagePicked?: (file: File, crop: CropProperties, altText: string) => void;
61
- /** This property is raised when the user clicks the **Save** button and there is a selected image. The selected image is provided as a dataURI string, and the user-specified alt text is provided as an altText string. */
62
- onImagePickedDataURI?: (dataUri: string, altText: string) => void;
63
- /** This property allows the consumer to specify whether or not the user should be required to enter alt text. */
64
- requireAltText: true;
65
- }
66
- export type AvatarPickerDialogProps = AvatarPickerDialogPropsNoAlt | AvatarPickerDialogPropsAlt;
67
- export interface AvatarPickerDialogState {
68
- mode: Mode;
69
- selectedAvatar?: Avatar;
70
- selectedImage?: File;
71
- selectedImageSource?: string;
72
- errorMessage?: string;
73
- isSubmitted: boolean;
74
- altText: string;
75
- prevAltText: string;
76
- }
@@ -1,7 +0,0 @@
1
- export interface Rect {
2
- top: number;
3
- left: number;
4
- width: number;
5
- height: number;
6
- }
7
- export declare const cropToDataURI: (imageElement: HTMLImageElement, imageRect: Rect, cropRect: Rect, scale: number, imageOrientation: number) => string;
@@ -1,36 +0,0 @@
1
- import React from 'react';
2
- import { Component } from 'react';
3
- import { type WrappedComponentProps } from 'react-intl';
4
- export interface ImageCropperProp {
5
- imageSource: string;
6
- containerSize?: number;
7
- isCircularMask?: boolean;
8
- top: number;
9
- left: number;
10
- imageWidth?: number;
11
- imageHeight?: number;
12
- imageOrientation: number;
13
- onDragStarted?: (x: number, y: number) => void;
14
- onImageLoaded: (image: HTMLImageElement) => void;
15
- onRemoveImage: () => void;
16
- onImageError: (errorMessage: string) => void;
17
- moveImage?: (key: string) => void;
18
- }
19
- export declare class ImageCropper extends Component<ImageCropperProp & WrappedComponentProps, {}> {
20
- static defaultProps: {
21
- containerSize: number;
22
- isCircleMask: boolean;
23
- onDragStarted: () => void;
24
- onImageSize: () => void;
25
- };
26
- state: {
27
- liveMsg: string;
28
- };
29
- componentDidMount(): void;
30
- onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
31
- onDragStarted: (e: React.MouseEvent<{}>) => void;
32
- onImageError: () => void;
33
- render(): React.JSX.Element | null;
34
- }
35
- declare const _default: React.FC<ImageCropperProp>;
36
- export default _default;
@@ -1 +0,0 @@
1
- export declare const isImageRemote: (imageUrl: string, windowOrigin?: string) => boolean;
@@ -1 +0,0 @@
1
- export declare const DragZone: ({ showBorder, isDroppingFile, children, ...props }: any) => JSX.Element;
@@ -1,2 +0,0 @@
1
- import { type Viewport } from '../viewport';
2
- export declare const exportCroppedImage: (viewport: Viewport, imageElement?: HTMLImageElement, outputSize?: number) => string;