@atlaskit/user-picker 13.8.5 → 13.8.7

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/user-picker
 
+## 13.8.7
+
+### Patch Changes
+
+- [`e0edc05cd52d7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0edc05cd52d7) -
+  Migrates internal 16px Avatar usage from `xsmall` to `xxsmall` as a 1:1 size rename with no visual
+  change.
+- Updated dependencies
+
+## 13.8.6
+
+### Patch Changes
+
+- [`e9153fd2bb41f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9153fd2bb41f) -
+  Migrate user picker feature gate unit tests to the supported mock-gates test utilities.
+- [`1457e7f84155e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1457e7f84155e) -
+  Cleanup feature gate platform_user_picker_fix_redundant_labelledby. Stop promoting
+  aria-describedby to aria-labelledby when aria-label is present (A11Y-37267).
+- Updated dependencies
+
 ## 13.8.5
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -15,7 +15,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "13.8.4";
+var packageVersion = "13.8.6";
 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/AvatarOrIcon.js

@@ -21,6 +21,10 @@ var iconStyle = (0, _react.css)({
   flexShrink: 0
 });
 var iconSizes = {
+  xxsmall: (0, _react.css)({
+    width: '20px',
+    height: '20px'
+  }),
   xsmall: (0, _react.css)({
     width: '20px',
     height: '20px'

package/dist/cjs/components/Input.js

@@ -16,7 +16,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -60,23 +59,19 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
      * This reassignment should only apply when the input has no other accessible name.
      */
     function get() {
-      var _this$props$ariaLabe;
-      if ((0, _platformFeatureFlags.fg)('platform_user_picker_fix_redundant_labelledby')) {
-        // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
-        // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
-        // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
-        // react-select's placeholder linkage bug, but skip that promotion when the input already
-        // has an accessible name via aria-label so the description is announced via
-        // aria-describedby instead.
-        if (this.props['aria-labelledby']) {
-          return this.props['aria-labelledby'];
-        }
-        if (this.props['aria-label']) {
-          return undefined;
-        }
-        return this.props['aria-describedby'];
+      // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
+      // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
+      // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
+      // react-select's placeholder linkage bug, but skip that promotion when the input already
+      // has an accessible name via aria-label so the description is announced via
+      // aria-describedby instead.
+      if (this.props['aria-labelledby']) {
+        return this.props['aria-labelledby'];
       }
-      return (_this$props$ariaLabe = this.props['aria-labelledby']) !== null && _this$props$ariaLabe !== void 0 ? _this$props$ariaLabe : this.props['aria-describedby'];
+      if (this.props['aria-label']) {
+        return undefined;
+      }
+      return this.props['aria-describedby'];
     }
   }, {
     key: "ariaDescribedBy",

package/dist/cjs/components/MultiValue.js

@@ -262,7 +262,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           onAfterRemoveAction: onAfterRemoveAction,
           avatar: function avatar(props) {
             return (
-              // AvatarTag always supplies size="xsmall", which is a valid
+              // AvatarTag always supplies size="xxsmall", which is a valid
               // TeamAvatarSize; TeamAvatar does not support UNSAFE_xsmall.
               (0, _react2.jsx)(_teamsAvatar.default, (0, _extends2.default)({}, props, avatarProps))
             );

package/dist/cjs/components/SizeableAvatar.js

@@ -35,10 +35,6 @@ var SizeableAvatar = exports.SizeableAvatar = /*#__PURE__*/function (_React$Pure
         _this$props$type = _this$props.type,
         type = _this$props$type === void 0 ? 'person' : _this$props$type,
         avatarAppearanceShape = _this$props.avatarAppearanceShape;
-
-      // `getAvatarSize` only ever returns 'xsmall' | 'small' | 'medium', none of
-      // which is the team-avatar-unsupported `UNSAFE_xsmall` (20px) size. Keeping
-      // `size` narrowed here lets the object satisfy both Avatar and TeamAvatar.
       var size = (0, _utils.getAvatarSize)(appearance);
       var props = _objectSpread({
         size: size,

package/dist/cjs/components/utils.js

@@ -83,7 +83,7 @@ var optionToSelectableOptions = exports.optionToSelectableOptions = (0, _memoize
   return optionToSelectableOption(defaultValue);
 });
 var getAvatarSize = exports.getAvatarSize = function getAvatarSize(appearance) {
-  return appearance === 'big' ? 'medium' : appearance === 'multi' ? 'xsmall' : 'small';
+  return appearance === 'big' ? 'medium' : appearance === 'multi' ? 'xxsmall' : 'small';
 };
 var isChildInput = exports.isChildInput = function isChildInput(child) {
   return child && (0, _typeof2.default)(child) === 'object' && child.props && child.props.type === 'text';

package/dist/es2019/analytics.js

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "13.8.4";
+const packageVersion = "13.8.6";
 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/AvatarOrIcon.js

@@ -14,6 +14,10 @@ const iconStyle = css({
   flexShrink: 0
 });
 const iconSizes = {
+  xxsmall: css({
+    width: '20px',
+    height: '20px'
+  }),
   xsmall: css({
     width: '20px',
     height: '20px'

package/dist/es2019/components/Input.js

@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./Input.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 const inputStyles = {
   root: "_5ce61rpy _1ir3kb7n _h5gq1rpy"
@@ -36,23 +35,19 @@ export class Input extends React.Component {
    * This reassignment should only apply when the input has no other accessible name.
    */
   get ariaLabelledBy() {
-    var _this$props$ariaLabe;
-    if (fg('platform_user_picker_fix_redundant_labelledby')) {
-      // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
-      // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
-      // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
-      // react-select's placeholder linkage bug, but skip that promotion when the input already
-      // has an accessible name via aria-label so the description is announced via
-      // aria-describedby instead.
-      if (this.props['aria-labelledby']) {
-        return this.props['aria-labelledby'];
-      }
-      if (this.props['aria-label']) {
-        return undefined;
-      }
-      return this.props['aria-describedby'];
+    // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
+    // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
+    // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
+    // react-select's placeholder linkage bug, but skip that promotion when the input already
+    // has an accessible name via aria-label so the description is announced via
+    // aria-describedby instead.
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+    if (this.props['aria-label']) {
+      return undefined;
     }
-    return (_this$props$ariaLabe = this.props['aria-labelledby']) !== null && _this$props$ariaLabe !== void 0 ? _this$props$ariaLabe : this.props['aria-describedby'];
+    return this.props['aria-describedby'];
   }
   get ariaDescribedBy() {
     var _this$props$selectPro2, _this$props$selectPro3;

package/dist/es2019/components/MultiValue.js

@@ -257,7 +257,7 @@ export class MultiValue extends React.Component {
         isRemovable: !isDisabled,
         onAfterRemoveAction: onAfterRemoveAction,
         avatar: props =>
-        // AvatarTag always supplies size="xsmall", which is a valid
+        // AvatarTag always supplies size="xxsmall", which is a valid
         // TeamAvatarSize; TeamAvatar does not support UNSAFE_xsmall.
         jsx(TeamAvatar, _extends({}, props, avatarProps)),
         hasMargin: false

package/dist/es2019/components/SizeableAvatar.js

@@ -11,10 +11,6 @@ export class SizeableAvatar extends React.PureComponent {
       type = 'person',
       avatarAppearanceShape
     } = this.props;
-
-    // `getAvatarSize` only ever returns 'xsmall' | 'small' | 'medium', none of
-    // which is the team-avatar-unsupported `UNSAFE_xsmall` (20px) size. Keeping
-    // `size` narrowed here lets the object satisfy both Avatar and TeamAvatar.
     const size = getAvatarSize(appearance);
     const props = {
       size,

package/dist/es2019/components/utils.js

@@ -51,7 +51,7 @@ export const optionToSelectableOptions = memoizeOne(defaultValue => {
   }
   return optionToSelectableOption(defaultValue);
 });
-export const getAvatarSize = appearance => appearance === 'big' ? 'medium' : appearance === 'multi' ? 'xsmall' : 'small';
+export const getAvatarSize = appearance => appearance === 'big' ? 'medium' : appearance === 'multi' ? 'xxsmall' : 'small';
 export const isChildInput = child => child && typeof child === 'object' && child.props && child.props.type === 'text';
 export const isSingleValue = value => !!value && !Array.isArray(value);
 export const hasValue = value => !!value && value.trim().length > 0;

package/dist/esm/analytics.js

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "13.8.4";
+var packageVersion = "13.8.6";
 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/AvatarOrIcon.js

@@ -14,6 +14,10 @@ var iconStyle = css({
   flexShrink: 0
 });
 var iconSizes = {
+  xxsmall: css({
+    width: '20px',
+    height: '20px'
+  }),
   xsmall: css({
     width: '20px',
     height: '20px'

package/dist/esm/components/Input.js

@@ -11,7 +11,6 @@ import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 var inputStyles = {
   root: "_5ce61rpy _1ir3kb7n _h5gq1rpy"
@@ -53,23 +52,19 @@ export var Input = /*#__PURE__*/function (_React$Component) {
      * This reassignment should only apply when the input has no other accessible name.
      */
     function get() {
-      var _this$props$ariaLabe;
-      if (fg('platform_user_picker_fix_redundant_labelledby')) {
-        // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
-        // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
-        // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
-        // react-select's placeholder linkage bug, but skip that promotion when the input already
-        // has an accessible name via aria-label so the description is announced via
-        // aria-describedby instead.
-        if (this.props['aria-labelledby']) {
-          return this.props['aria-labelledby'];
-        }
-        if (this.props['aria-label']) {
-          return undefined;
-        }
-        return this.props['aria-describedby'];
+      // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
+      // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
+      // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
+      // react-select's placeholder linkage bug, but skip that promotion when the input already
+      // has an accessible name via aria-label so the description is announced via
+      // aria-describedby instead.
+      if (this.props['aria-labelledby']) {
+        return this.props['aria-labelledby'];
       }
-      return (_this$props$ariaLabe = this.props['aria-labelledby']) !== null && _this$props$ariaLabe !== void 0 ? _this$props$ariaLabe : this.props['aria-describedby'];
+      if (this.props['aria-label']) {
+        return undefined;
+      }
+      return this.props['aria-describedby'];
     }
   }, {
     key: "ariaDescribedBy",

package/dist/esm/components/MultiValue.js

@@ -255,7 +255,7 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           onAfterRemoveAction: onAfterRemoveAction,
           avatar: function avatar(props) {
             return (
-              // AvatarTag always supplies size="xsmall", which is a valid
+              // AvatarTag always supplies size="xxsmall", which is a valid
               // TeamAvatarSize; TeamAvatar does not support UNSAFE_xsmall.
               jsx(TeamAvatar, _extends({}, props, avatarProps))
             );

package/dist/esm/components/SizeableAvatar.js

@@ -28,10 +28,6 @@ export var SizeableAvatar = /*#__PURE__*/function (_React$PureComponent) {
         _this$props$type = _this$props.type,
         type = _this$props$type === void 0 ? 'person' : _this$props$type,
         avatarAppearanceShape = _this$props.avatarAppearanceShape;
-
-      // `getAvatarSize` only ever returns 'xsmall' | 'small' | 'medium', none of
-      // which is the team-avatar-unsupported `UNSAFE_xsmall` (20px) size. Keeping
-      // `size` narrowed here lets the object satisfy both Avatar and TeamAvatar.
       var size = getAvatarSize(appearance);
       var props = _objectSpread({
         size: size,

package/dist/esm/components/utils.js

@@ -76,7 +76,7 @@ export var optionToSelectableOptions = memoizeOne(function (defaultValue) {
   return optionToSelectableOption(defaultValue);
 });
 export var getAvatarSize = function getAvatarSize(appearance) {
-  return appearance === 'big' ? 'medium' : appearance === 'multi' ? 'xsmall' : 'small';
+  return appearance === 'big' ? 'medium' : appearance === 'multi' ? 'xxsmall' : 'small';
 };
 export var isChildInput = function isChildInput(child) {
   return child && _typeof(child) === 'object' && child.props && child.props.type === 'text';

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

@@ -19,7 +19,7 @@ export interface OptionToSelectableOptions {
     (defaultValue?: DefaultValue): Option | Option[] | null | undefined;
 }
 export declare const optionToSelectableOptions: OptionToSelectableOptions;
-export declare const getAvatarSize: (appearance: string) => 'xsmall' | 'small' | 'medium';
+export declare const getAvatarSize: (appearance: string) => 'xxsmall' | 'small' | 'medium';
 export declare const isChildInput: (child: ReactChild) => child is ReactElement<any>;
 export declare const isSingleValue: (value?: AtlaskitSelectValue) => value is Option;
 export declare const hasValue: (value?: string) => value is string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "13.8.5",
+	"version": "13.8.7",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -17,7 +17,8 @@
 		"@af/search-test-utils": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/heading": "^7.0.0",
-		"@atlassian/a11y-jest-testing": "^0.14.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^3.2.0",
+		"@atlassian/a11y-jest-testing": "^0.15.0",
 		"@atlassian/a11y-playwright-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@emotion/styled": "^11.0.0",
@@ -29,7 +30,6 @@
 		"enzyme": "^3.10.0",
 		"mock-apollo-client": "^0.1.0",
 		"react": "^18.2.0",
-		"react-beautiful-dnd": "^12.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^7.0.0",
 		"react-select-event": "^5.5.0"
@@ -67,10 +67,10 @@
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/avatar": "^26.4.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/lozenge": "^15.0.0",
-		"@atlaskit/people-teams-ui-public": "^5.1.0",
+		"@atlaskit/people-teams-ui-public": "^5.2.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/popper": "^9.0.0",
 		"@atlaskit/primitives": "^22.2.0",
@@ -78,8 +78,8 @@
 		"@atlaskit/select": "^22.6.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tag": "^15.4.0",
-		"@atlaskit/teams-avatar": "^4.0.0",
-		"@atlaskit/tokens": "^16.3.0",
+		"@atlaskit/teams-avatar": "^4.1.0",
+		"@atlaskit/tokens": "^16.4.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -120,9 +120,6 @@
 		},
 		"jsm-wfo-assignee-recommendation-on-queues": {
 			"type": "boolean"
-		},
-		"platform_user_picker_fix_redundant_labelledby": {
-			"type": "boolean"
 		}
 	}
 }

package/tsconfig.json

@@ -1,19 +1,7 @@
 {
-  "extends": "../../../tsconfig.json",
-  "include": [
-    "./*.docs.tsx",
-    "./package.json",
-    "./src/**/*.ts",
-    "./src/**/*.tsx",
-    "./docs/**/*.ts",
-    "./docs/**/*.tsx",
-    "./examples/**/*.ts",
-    "./examples/**/*.tsx",
-    "**/stories.ts",
-    "**/stories.tsx",
-    "**/stories/*.ts",
-    "**/stories/*.tsx",
-    "**/stories/**/*.ts",
-    "**/stories/**/*.tsx"
-  ]
+	"extends": "./tsconfig.dev.json",
+	"compilerOptions": {
+		"disableReferencedProjectLoad": true,
+		"disableSolutionSearching": true
+	}
 }