@atlaskit/user-picker 10.26.2 → 10.26.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/user-picker
 
+## 10.26.3
+
+### Patch Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`eef99f4bf497c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eef99f4bf497c) -
+  A11Y-7739 Add aria-hidden true to decorative images
+
 ## 10.26.2
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.26.2";
+var packageVersion = "10.26.3";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/AddOptionAvatar.js

@@ -36,7 +36,8 @@ var AddOptionAvatar = exports.AddOptionAvatar = function AddOptionAvatar(_ref) {
     (0, _react.jsx)("div", {
       css: getEmailAvatarWrapperStyle(isLozenge)
     }, (0, _react.jsx)(_email.default, {
-      label: label,
+      testId: "add-option-avatar-email-icon",
+      label: label || "",
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
       color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")

package/dist/cjs/components/MultiValue.js

@@ -15,13 +15,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
 var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
 var _react2 = require("@emotion/react");
 var _AddOptionAvatar = require("./AddOptionAvatar");
 var _SizeableAvatar = require("./SizeableAvatar");
-var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _peopleGroupPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group--people"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
@@ -61,18 +59,11 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2.default)(this, MultiValue);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getElemBefore", function () {
-      var _this$props = _this.props,
-        data = _this$props.data.data,
-        selectProps = _this$props.selectProps;
+      var data = _this.props.data.data;
       if ((0, _utils.isEmail)(data)) {
-        return selectProps.emailLabel ? (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
-          isLozenge: true,
-          label: selectProps.emailLabel
-        }) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addEmail, function (label) {
-          return (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
-            isLozenge: true,
-            label: label
-          });
+        // This element is a decorative icon and does not require a label
+        return (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
+          isLozenge: true
         });
       }
       if ((0, _utils.isGroup)(data)) {
@@ -81,7 +72,8 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
         }, (0, _react2.jsx)(_peopleGroupPeople.default, {
           LEGACY_margin: "-2px 0 0 0",
           color: "currentColor",
-          label: "group-icon",
+          label: "" // This element is a decorative icon and does not require a label
+          ,
           LEGACY_size: "small"
         }));
       }
@@ -114,12 +106,12 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
-      var _this$props2 = this.props,
-        _this$props2$data = _this$props2.data,
-        label = _this$props2$data.label,
-        data = _this$props2$data.data,
-        innerProps = _this$props2.innerProps,
-        isFocused = _this$props2.isFocused;
+      var _this$props = this.props,
+        _this$props$data = _this$props.data,
+        label = _this$props$data.label,
+        data = _this$props$data.data,
+        innerProps = _this$props.innerProps,
+        isFocused = _this$props.isFocused;
       var _nextProps$data = nextProps.data,
         nextLabel = _nextProps$data.label,
         nextData = _nextProps$data.data,
@@ -133,10 +125,10 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        children = _this$props3.children,
-        innerProps = _this$props3.innerProps,
-        rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        innerProps = _this$props2.innerProps,
+        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       return (0, _react2.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
         innerProps: {
           ref: this.containerRef

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.26.2";
+const packageVersion = "10.26.3";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/AddOptionAvatar.js

@@ -28,7 +28,8 @@ export const AddOptionAvatar = ({
     jsx("div", {
       css: getEmailAvatarWrapperStyle(isLozenge)
     }, jsx(EmailIcon, {
-      label: label,
+      testId: "add-option-avatar-email-icon",
+      label: label || "",
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
       color: `var(--ds-text-subtle, ${N500})`

package/dist/es2019/components/MultiValue.js

@@ -5,14 +5,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsx jsx
  */
 import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
-import { messages } from './i18n';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
@@ -47,17 +45,13 @@ export class MultiValue extends React.Component {
       const {
         data: {
           data
-        },
-        selectProps
+        }
       } = this.props;
       if (isEmail(data)) {
-        return selectProps.emailLabel ? jsx(AddOptionAvatar, {
-          isLozenge: true,
-          label: selectProps.emailLabel
-        }) : jsx(FormattedMessage, messages.addEmail, label => jsx(AddOptionAvatar, {
-          isLozenge: true,
-          label: label
-        }));
+        // This element is a decorative icon and does not require a label
+        return jsx(AddOptionAvatar, {
+          isLozenge: true
+        });
       }
       if (isGroup(data)) {
         return jsx(Box, {
@@ -65,7 +59,8 @@ export class MultiValue extends React.Component {
         }, jsx(PeopleIcon, {
           LEGACY_margin: "-2px 0 0 0",
           color: "currentColor",
-          label: "group-icon",
+          label: "" // This element is a decorative icon and does not require a label
+          ,
           LEGACY_size: "small"
         }));
       }

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.26.2";
+var packageVersion = "10.26.3";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/AddOptionAvatar.js

@@ -27,7 +27,8 @@ export var AddOptionAvatar = function AddOptionAvatar(_ref) {
     jsx("div", {
       css: getEmailAvatarWrapperStyle(isLozenge)
     }, jsx(EmailIcon, {
-      label: label,
+      testId: "add-option-avatar-email-icon",
+      label: label || "",
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
       color: "var(--ds-text-subtle, ".concat(N500, ")")

package/dist/esm/components/MultiValue.js

@@ -15,14 +15,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */
 import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { SizeableAvatar } from './SizeableAvatar';
-import { messages } from './i18n';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
@@ -56,18 +54,11 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MultiValue);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "getElemBefore", function () {
-      var _this$props = _this.props,
-        data = _this$props.data.data,
-        selectProps = _this$props.selectProps;
+      var data = _this.props.data.data;
       if (isEmail(data)) {
-        return selectProps.emailLabel ? jsx(AddOptionAvatar, {
-          isLozenge: true,
-          label: selectProps.emailLabel
-        }) : jsx(FormattedMessage, messages.addEmail, function (label) {
-          return jsx(AddOptionAvatar, {
-            isLozenge: true,
-            label: label
-          });
+        // This element is a decorative icon and does not require a label
+        return jsx(AddOptionAvatar, {
+          isLozenge: true
         });
       }
       if (isGroup(data)) {
@@ -76,7 +67,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
         }, jsx(PeopleIcon, {
           LEGACY_margin: "-2px 0 0 0",
           color: "currentColor",
-          label: "group-icon",
+          label: "" // This element is a decorative icon and does not require a label
+          ,
           LEGACY_size: "small"
         }));
       }
@@ -109,12 +101,12 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
-      var _this$props2 = this.props,
-        _this$props2$data = _this$props2.data,
-        label = _this$props2$data.label,
-        data = _this$props2$data.data,
-        innerProps = _this$props2.innerProps,
-        isFocused = _this$props2.isFocused;
+      var _this$props = this.props,
+        _this$props$data = _this$props.data,
+        label = _this$props$data.label,
+        data = _this$props$data.data,
+        innerProps = _this$props.innerProps,
+        isFocused = _this$props.isFocused;
       var _nextProps$data = nextProps.data,
         nextLabel = _nextProps$data.label,
         nextData = _nextProps$data.data,
@@ -128,10 +120,10 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        children = _this$props3.children,
-        innerProps = _this$props3.innerProps,
-        rest = _objectWithoutProperties(_this$props3, _excluded);
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        innerProps = _this$props2.innerProps,
+        rest = _objectWithoutProperties(_this$props2, _excluded);
       return jsx(components.MultiValue, _extends({}, rest, {
         innerProps: {
           ref: this.containerRef

package/dist/types/components/AddOptionAvatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type AddOptionAvatarProps = {
-    label: string;
+    label?: string;
     isLozenge?: boolean;
 };
 export declare const AddOptionAvatar: React.FunctionComponent<AddOptionAvatarProps>;

package/dist/types-ts4.5/components/AddOptionAvatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type AddOptionAvatarProps = {
-    label: string;
+    label?: string;
     isLozenge?: boolean;
 };
 export declare const AddOptionAvatar: React.FunctionComponent<AddOptionAvatarProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.26.2",
+	"version": "10.26.3",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/logo": "^14.3.0",
 		"@atlaskit/lozenge": "^11.12.0",
-		"@atlaskit/people-teams-ui-public": "^1.2.0",
+		"@atlaskit/people-teams-ui-public": "^1.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^12.2.0",