@atlaskit/media-avatar-picker 24.5.1 → 24.6.1

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

@@ -283,7 +283,10 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
   }, {
     key: "renderPredefinedAvatarList",
     value: function renderPredefinedAvatarList() {
-      var isLoading = this.props.isLoading;
+      var _this$props3 = this.props,
+        isLoading = _this$props3.isLoading,
+        selectAvatarLabel = _this$props3.selectAvatarLabel,
+        showMoreAvatarsButtonLabel = _this$props3.showMoreAvatarsButtonLabel;
       var _this$state2 = this.state,
         selectedAvatar = _this$state2.selectedAvatar,
         selectedImage = _this$state2.selectedImage,
@@ -296,17 +299,19 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         selectedAvatar: selectedAvatar,
         avatars: avatars,
         onAvatarSelected: this.setSelectedAvatarState,
-        onShowMore: this.onShowMore
+        onShowMore: this.onShowMore,
+        selectAvatarLabel: selectAvatarLabel,
+        showMoreAvatarsButtonLabel: showMoreAvatarsButtonLabel
       });
     }
   }, {
     key: "initialiseAltText",
     value: function initialiseAltText() {
-      var _this$props3 = this.props,
-        requireAltText = _this$props3.requireAltText,
-        errorMessage = _this$props3.errorMessage,
-        imageSource = _this$props3.imageSource,
-        defaultSelectedAvatar = _this$props3.defaultSelectedAvatar;
+      var _this$props4 = this.props,
+        requireAltText = _this$props4.requireAltText,
+        errorMessage = _this$props4.errorMessage,
+        imageSource = _this$props4.imageSource,
+        defaultSelectedAvatar = _this$props4.defaultSelectedAvatar;
       if (requireAltText) {
         if (!errorMessage && imageSource) {
           var _this$props$imageSour;
@@ -371,11 +376,11 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
   }, {
     key: "renderBody",
     value: function renderBody() {
-      var _this$props4 = this.props,
-        avatars = _this$props4.avatars,
-        isLoading = _this$props4.isLoading,
-        predefinedAvatarsText = _this$props4.predefinedAvatarsText,
-        requireAltText = _this$props4.requireAltText;
+      var _this$props5 = this.props,
+        avatars = _this$props5.avatars,
+        isLoading = _this$props5.isLoading,
+        predefinedAvatarsText = _this$props5.predefinedAvatarsText,
+        requireAltText = _this$props5.requireAltText;
       var _this$state3 = this.state,
         mode = _this$state3.mode,
         selectedImageSource = _this$state3.selectedImageSource,

package/dist/cjs/predefined-avatar-list/index.js

@@ -20,7 +20,8 @@ var PredefinedAvatarList = exports.PredefinedAvatarList = function PredefinedAva
     selectedAvatar = _ref.selectedAvatar,
     onShowMore = _ref.onShowMore,
     onAvatarSelected = _ref.onAvatarSelected,
-    selectAvatarLabel = _ref.selectAvatarLabel;
+    selectAvatarLabel = _ref.selectAvatarLabel,
+    showMoreAvatarsButtonLabel = _ref.showMoreAvatarsButtonLabel;
   var intl = (0, _reactIntlNext.useIntl)();
   return (0, _react.jsx)("div", {
     css: _styles.predefinedAvatarsWrapperStyles,
@@ -31,7 +32,7 @@ var PredefinedAvatarList = exports.PredefinedAvatarList = function PredefinedAva
     onItemClick: onAvatarSelected,
     selectAvatarLabel: selectAvatarLabel
   }), (0, _react.jsx)(_standardButton.default, {
-    "aria-label": intl.formatMessage(_mediaUi.messages.show_more_avatars_btn_label),
+    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(_mediaUi.messages.show_more_avatars_btn_label),
     className: "show-more-button",
     appearance: "subtle",
     iconAfter: (0, _react.jsx)(_more.default, {

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

@@ -250,7 +250,9 @@ export class AvatarPickerDialog extends PureComponent {
   }
   renderPredefinedAvatarList() {
     const {
-      isLoading
+      isLoading,
+      selectAvatarLabel,
+      showMoreAvatarsButtonLabel
     } = this.props;
     const {
       selectedAvatar,
@@ -265,7 +267,9 @@ export class AvatarPickerDialog extends PureComponent {
       selectedAvatar: selectedAvatar,
       avatars: avatars,
       onAvatarSelected: this.setSelectedAvatarState,
-      onShowMore: this.onShowMore
+      onShowMore: this.onShowMore,
+      selectAvatarLabel: selectAvatarLabel,
+      showMoreAvatarsButtonLabel: showMoreAvatarsButtonLabel
     });
   }
   initialiseAltText() {

package/dist/es2019/predefined-avatar-list/index.js

@@ -11,7 +11,8 @@ export const PredefinedAvatarList = ({
   selectedAvatar,
   onShowMore,
   onAvatarSelected,
-  selectAvatarLabel
+  selectAvatarLabel,
+  showMoreAvatarsButtonLabel
 }) => {
   const intl = useIntl();
   return jsx("div", {
@@ -23,7 +24,7 @@ export const PredefinedAvatarList = ({
     onItemClick: onAvatarSelected,
     selectAvatarLabel: selectAvatarLabel
   }), jsx(Button, {
-    "aria-label": intl.formatMessage(messages.show_more_avatars_btn_label),
+    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(messages.show_more_avatars_btn_label),
     className: "show-more-button",
     appearance: "subtle",
     iconAfter: jsx(EditorMoreIcon, {

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

@@ -276,7 +276,10 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderPredefinedAvatarList",
     value: function renderPredefinedAvatarList() {
-      var isLoading = this.props.isLoading;
+      var _this$props3 = this.props,
+        isLoading = _this$props3.isLoading,
+        selectAvatarLabel = _this$props3.selectAvatarLabel,
+        showMoreAvatarsButtonLabel = _this$props3.showMoreAvatarsButtonLabel;
       var _this$state2 = this.state,
         selectedAvatar = _this$state2.selectedAvatar,
         selectedImage = _this$state2.selectedImage,
@@ -289,17 +292,19 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         selectedAvatar: selectedAvatar,
         avatars: avatars,
         onAvatarSelected: this.setSelectedAvatarState,
-        onShowMore: this.onShowMore
+        onShowMore: this.onShowMore,
+        selectAvatarLabel: selectAvatarLabel,
+        showMoreAvatarsButtonLabel: showMoreAvatarsButtonLabel
       });
     }
   }, {
     key: "initialiseAltText",
     value: function initialiseAltText() {
-      var _this$props3 = this.props,
-        requireAltText = _this$props3.requireAltText,
-        errorMessage = _this$props3.errorMessage,
-        imageSource = _this$props3.imageSource,
-        defaultSelectedAvatar = _this$props3.defaultSelectedAvatar;
+      var _this$props4 = this.props,
+        requireAltText = _this$props4.requireAltText,
+        errorMessage = _this$props4.errorMessage,
+        imageSource = _this$props4.imageSource,
+        defaultSelectedAvatar = _this$props4.defaultSelectedAvatar;
       if (requireAltText) {
         if (!errorMessage && imageSource) {
           var _this$props$imageSour;
@@ -364,11 +369,11 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderBody",
     value: function renderBody() {
-      var _this$props4 = this.props,
-        avatars = _this$props4.avatars,
-        isLoading = _this$props4.isLoading,
-        predefinedAvatarsText = _this$props4.predefinedAvatarsText,
-        requireAltText = _this$props4.requireAltText;
+      var _this$props5 = this.props,
+        avatars = _this$props5.avatars,
+        isLoading = _this$props5.isLoading,
+        predefinedAvatarsText = _this$props5.predefinedAvatarsText,
+        requireAltText = _this$props5.requireAltText;
       var _this$state3 = this.state,
         mode = _this$state3.mode,
         selectedImageSource = _this$state3.selectedImageSource,

package/dist/esm/predefined-avatar-list/index.js

@@ -12,7 +12,8 @@ export var PredefinedAvatarList = function PredefinedAvatarList(_ref) {
     selectedAvatar = _ref.selectedAvatar,
     onShowMore = _ref.onShowMore,
     onAvatarSelected = _ref.onAvatarSelected,
-    selectAvatarLabel = _ref.selectAvatarLabel;
+    selectAvatarLabel = _ref.selectAvatarLabel,
+    showMoreAvatarsButtonLabel = _ref.showMoreAvatarsButtonLabel;
   var intl = useIntl();
   return jsx("div", {
     css: predefinedAvatarsWrapperStyles,
@@ -23,7 +24,7 @@ export var PredefinedAvatarList = function PredefinedAvatarList(_ref) {
     onItemClick: onAvatarSelected,
     selectAvatarLabel: selectAvatarLabel
   }), jsx(Button, {
-    "aria-label": intl.formatMessage(messages.show_more_avatars_btn_label),
+    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(messages.show_more_avatars_btn_label),
     className: "show-more-button",
     appearance: "subtle",
     iconAfter: jsx(EditorMoreIcon, {

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
-import React, { FormEvent } from 'react';
+import React, { type FormEvent } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { Avatar } from '../avatar-list';
-import { CropProperties } from '../image-navigator';
-import { LoadParameters } from '../image-navigator/index';
-import { AvatarPickerDialogProps, AvatarPickerDialogState } from './types';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type Avatar } from '../avatar-list';
+import { type CropProperties } from '../image-navigator';
+import { type LoadParameters } from '../image-navigator/index';
+import { type AvatarPickerDialogProps, type AvatarPickerDialogState } from './types';
 export declare const MAX_SIZE_MB = 10;
 export declare const ERROR: {
     URL: import("react-intl-next").MessageDescriptor;

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

@@ -1,5 +1,5 @@
-import { Avatar } from '../avatar-list';
-import { CropProperties } from '../image-navigator';
+import { type Avatar } from '../avatar-list';
+import { type CropProperties } from '../image-navigator';
 export declare enum Mode {
     Cropping = 0,
     PredefinedAvatars = 1
@@ -24,12 +24,16 @@ export interface CommonAvatarPickerDialogProps {
     errorMessage?: string;
     /** This optional property is used while the avatar is loaded. */
     isLoading?: boolean;
-    /** This property decribe the text related to the Avatar. */
+    /** This property describes the text related to the Avatar. */
     predefinedAvatarsText?: string;
     /** The target width/height of the resulting (square) avatar. Leave blank for default (200x200) */
     outputSize?: number;
     /** This optional property allows the consumer to define the maximum image size that can be uploaded. */
     maxImageSize?: number;
+    /** This optional property allows the consumer to define a custom label for select default avatar. The default is _Select a default avatar_. */
+    selectAvatarLabel?: string;
+    /** This optional property allows the consumer to define a custom label for the default avatars show more button. The default is _Show more_. */
+    showMoreAvatarsButtonLabel?: string;
 }
 export interface AvatarPickerDialogPropsNoAlt extends CommonAvatarPickerDialogProps {
     /** 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. */

package/dist/types/predefined-avatar-list/index.d.ts

@@ -1,11 +1,12 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { Avatar } from '../avatar-list';
+import { type Avatar } from '../avatar-list';
 export interface PredefinedAvatarListProps {
     avatars: Array<Avatar>;
     selectedAvatar?: Avatar;
     onShowMore?: () => void;
     onAvatarSelected: (avatar: Avatar) => void;
     selectAvatarLabel?: string;
+    showMoreAvatarsButtonLabel?: string;
 }
-export declare const PredefinedAvatarList: ({ avatars, selectedAvatar, onShowMore, onAvatarSelected, selectAvatarLabel, }: PredefinedAvatarListProps) => jsx.JSX.Element;
+export declare const PredefinedAvatarList: ({ avatars, selectedAvatar, onShowMore, onAvatarSelected, selectAvatarLabel, showMoreAvatarsButtonLabel }: PredefinedAvatarListProps) => jsx.JSX.Element;

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
-import React, { FormEvent } from 'react';
+import React, { type FormEvent } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { Avatar } from '../avatar-list';
-import { CropProperties } from '../image-navigator';
-import { LoadParameters } from '../image-navigator/index';
-import { AvatarPickerDialogProps, AvatarPickerDialogState } from './types';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type Avatar } from '../avatar-list';
+import { type CropProperties } from '../image-navigator';
+import { type LoadParameters } from '../image-navigator/index';
+import { type AvatarPickerDialogProps, type AvatarPickerDialogState } from './types';
 export declare const MAX_SIZE_MB = 10;
 export declare const ERROR: {
     URL: import("react-intl-next").MessageDescriptor;

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

@@ -1,5 +1,5 @@
-import { Avatar } from '../avatar-list';
-import { CropProperties } from '../image-navigator';
+import { type Avatar } from '../avatar-list';
+import { type CropProperties } from '../image-navigator';
 export declare enum Mode {
     Cropping = 0,
     PredefinedAvatars = 1
@@ -24,12 +24,16 @@ export interface CommonAvatarPickerDialogProps {
     errorMessage?: string;
     /** This optional property is used while the avatar is loaded. */
     isLoading?: boolean;
-    /** This property decribe the text related to the Avatar. */
+    /** This property describes the text related to the Avatar. */
     predefinedAvatarsText?: string;
     /** The target width/height of the resulting (square) avatar. Leave blank for default (200x200) */
     outputSize?: number;
     /** This optional property allows the consumer to define the maximum image size that can be uploaded. */
     maxImageSize?: number;
+    /** This optional property allows the consumer to define a custom label for select default avatar. The default is _Select a default avatar_. */
+    selectAvatarLabel?: string;
+    /** This optional property allows the consumer to define a custom label for the default avatars show more button. The default is _Show more_. */
+    showMoreAvatarsButtonLabel?: string;
 }
 export interface AvatarPickerDialogPropsNoAlt extends CommonAvatarPickerDialogProps {
     /** 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. */

package/dist/types-ts4.5/predefined-avatar-list/index.d.ts

@@ -1,11 +1,12 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { Avatar } from '../avatar-list';
+import { type Avatar } from '../avatar-list';
 export interface PredefinedAvatarListProps {
     avatars: Array<Avatar>;
     selectedAvatar?: Avatar;
     onShowMore?: () => void;
     onAvatarSelected: (avatar: Avatar) => void;
     selectAvatarLabel?: string;
+    showMoreAvatarsButtonLabel?: string;
 }
-export declare const PredefinedAvatarList: ({ avatars, selectedAvatar, onShowMore, onAvatarSelected, selectAvatarLabel, }: PredefinedAvatarListProps) => jsx.JSX.Element;
+export declare const PredefinedAvatarList: ({ avatars, selectedAvatar, onShowMore, onAvatarSelected, selectAvatarLabel, showMoreAvatarsButtonLabel }: PredefinedAvatarListProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-avatar-picker",
-  "version": "24.5.1",
+  "version": "24.6.1",
   "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/"
@@ -35,18 +35,18 @@
   },
   "dependencies": {
     "@atlaskit/button": "^17.14.0",
-    "@atlaskit/flag": "^15.4.0",
+    "@atlaskit/flag": "^15.5.0",
     "@atlaskit/form": "^9.3.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/media-ui": "^25.9.0",
-    "@atlaskit/modal-dialog": "^12.11.0",
-    "@atlaskit/primitives": "^5.6.0",
-    "@atlaskit/range": "^7.1.0",
-    "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/textfield": "^6.1.0",
+    "@atlaskit/media-ui": "^25.10.0",
+    "@atlaskit/modal-dialog": "^12.13.0",
+    "@atlaskit/primitives": "^6.0.0",
+    "@atlaskit/range": "^7.2.0",
+    "@atlaskit/spinner": "^16.1.0",
+    "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
-    "@atlaskit/visually-hidden": "^1.2.0",
+    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/visually-hidden": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "exenv": "^1.2.2"
   },