@atlaskit/user-picker 10.11.0 → 10.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 10.11.2
+
+### Patch Changes
+
+- [#41424](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41424) [`3a85e7b6eb1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a85e7b6eb1) - [ux] Added z-index of 400 to menu for user picker as per design system popup guidelines
+
+## 10.11.1
+
+### Patch Changes
+
+- [#41252](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41252) [`8aa48820027`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8aa48820027) - Support aria-activedescendant on select input
+
 ## 10.11.0
 
 ### Minor 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.11.0";
+var packageVersion = "10.11.2";
 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/BaseUserPicker.js

@@ -24,6 +24,7 @@ var _batch = require("./batch");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _ufoExperiences = require("../util/ufoExperiences");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -34,6 +35,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var loadingMessage = function loadingMessage() {
   return null;
 };
+var observerOptions = {
+  subtree: true,
+  attributes: true,
+  attributeFilter: ['class']
+};
+var classNamePrefix = 'fabric-user-picker';
+var optionFocusedClass = "".concat(classNamePrefix, "__option--is-focused");
 var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(BaseUserPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(BaseUserPickerWithoutAnalytics);
@@ -295,6 +303,27 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       _this.journeyId = _this.getSessionId();
       _this.fireEvent(_analytics.focusEvent);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusedOptionObserverCallback", function (mutationList) {
+      var _iterator2 = _createForOfIteratorHelper(mutationList),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var mutation = _step2.value;
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            var target = mutation.target;
+            if (target.classList.contains(optionFocusedClass)) {
+              _this.selectRef.select.inputRef.setAttribute('aria-activedescendant', target.id);
+              break;
+            }
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusedOptionObserver", new MutationObserver(_this.focusedOptionObserverCallback));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
       // Escape
       if (event.keyCode === 27) {
@@ -393,6 +422,12 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
       if (menuIsOpen && !prevState.menuIsOpen) {
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+          var _menuRef$children$;
+          var menuRef = this.selectRef.select.menuListRef;
+          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && this.selectRef.select.inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+          this.focusedOptionObserver.observe(menuRef, observerOptions);
+        }
         if (!this.session) {
           // session should have been created onFocus
           this.startSession();
@@ -406,6 +441,10 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       if (!menuIsOpen && prevState.menuIsOpen && this.session) {
         this.fireEvent(_analytics.cancelEvent, prevState);
         this.session = undefined;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+          this.selectRef.select.inputRef.removeAttribute('aria-activedescendant');
+          this.focusedOptionObserver.disconnect();
+        }
       }
       if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
         this.fireEvent(_analytics.searchedEvent);
@@ -490,7 +529,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         menuPlacement: "auto",
         placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.placeholder),
         addMoreMessage: addMoreMessage,
-        classNamePrefix: "fabric-user-picker",
+        classNamePrefix: classNamePrefix,
         hoveringClearIndicator: hoveringClearIndicator,
         appearance: appearance,
         isClearable: isClearable,

package/dist/cjs/components/styles.js

@@ -22,7 +22,8 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        minWidth: state.selectProps.menuMinWidth
+        minWidth: state.selectProps.menuMinWidth,
+        zIndex: '400'
       });
     },
     menuList: function menuList(css) {

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.11.0";
+const packageVersion = "10.11.2";
 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/BaseUserPicker.js

@@ -11,7 +11,15 @@ import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const loadingMessage = () => null;
+const observerOptions = {
+  subtree: true,
+  attributes: true,
+  attributeFilter: ['class']
+};
+const classNamePrefix = 'fabric-user-picker';
+const optionFocusedClass = `${classNamePrefix}__option--is-focused`;
 export class BaseUserPickerWithoutAnalytics extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const derivedState = {};
@@ -284,6 +292,18 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       this.journeyId = this.getSessionId();
       this.fireEvent(focusEvent);
     });
+    _defineProperty(this, "focusedOptionObserverCallback", mutationList => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const target = mutation.target;
+          if (target.classList.contains(optionFocusedClass)) {
+            this.selectRef.select.inputRef.setAttribute('aria-activedescendant', target.id);
+            break;
+          }
+        }
+      }
+    });
+    _defineProperty(this, "focusedOptionObserver", new MutationObserver(this.focusedOptionObserverCallback));
     _defineProperty(this, "handleKeyDown", event => {
       // Escape
       if (event.keyCode === 27) {
@@ -376,6 +396,12 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       inputValue
     } = this.state;
     if (menuIsOpen && !prevState.menuIsOpen) {
+      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+        var _menuRef$children$;
+        const menuRef = this.selectRef.select.menuListRef;
+        ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && this.selectRef.select.inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+        this.focusedOptionObserver.observe(menuRef, observerOptions);
+      }
       if (!this.session) {
         // session should have been created onFocus
         this.startSession();
@@ -389,6 +415,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     if (!menuIsOpen && prevState.menuIsOpen && this.session) {
       this.fireEvent(cancelEvent, prevState);
       this.session = undefined;
+      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+        this.selectRef.select.inputRef.removeAttribute('aria-activedescendant');
+        this.focusedOptionObserver.disconnect();
+      }
     }
     if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
       this.fireEvent(searchedEvent);
@@ -472,7 +502,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       menuPlacement: "auto",
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/React.createElement(FormattedMessage, messages.placeholder),
       addMoreMessage: addMoreMessage,
-      classNamePrefix: "fabric-user-picker",
+      classNamePrefix: classNamePrefix,
       hoveringClearIndicator: hoveringClearIndicator,
       appearance: appearance,
       isClearable: isClearable,

package/dist/es2019/components/styles.js

@@ -9,7 +9,8 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
     menu: (css, state) => ({
       ...css,
       width,
-      minWidth: state.selectProps.menuMinWidth
+      minWidth: state.selectProps.menuMinWidth,
+      zIndex: '400'
     }),
     menuList: css => ({
       ...css,

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.11.0";
+var packageVersion = "10.11.2";
 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/BaseUserPicker.js

@@ -24,9 +24,17 @@ import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var loadingMessage = function loadingMessage() {
   return null;
 };
+var observerOptions = {
+  subtree: true,
+  attributes: true,
+  attributeFilter: ['class']
+};
+var classNamePrefix = 'fabric-user-picker';
+var optionFocusedClass = "".concat(classNamePrefix, "__option--is-focused");
 export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(BaseUserPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(BaseUserPickerWithoutAnalytics);
@@ -288,6 +296,27 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       _this.journeyId = _this.getSessionId();
       _this.fireEvent(focusEvent);
     });
+    _defineProperty(_assertThisInitialized(_this), "focusedOptionObserverCallback", function (mutationList) {
+      var _iterator2 = _createForOfIteratorHelper(mutationList),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var mutation = _step2.value;
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            var target = mutation.target;
+            if (target.classList.contains(optionFocusedClass)) {
+              _this.selectRef.select.inputRef.setAttribute('aria-activedescendant', target.id);
+              break;
+            }
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "focusedOptionObserver", new MutationObserver(_this.focusedOptionObserverCallback));
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       // Escape
       if (event.keyCode === 27) {
@@ -386,6 +415,12 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
       if (menuIsOpen && !prevState.menuIsOpen) {
+        if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+          var _menuRef$children$;
+          var menuRef = this.selectRef.select.menuListRef;
+          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && this.selectRef.select.inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+          this.focusedOptionObserver.observe(menuRef, observerOptions);
+        }
         if (!this.session) {
           // session should have been created onFocus
           this.startSession();
@@ -399,6 +434,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       if (!menuIsOpen && prevState.menuIsOpen && this.session) {
         this.fireEvent(cancelEvent, prevState);
         this.session = undefined;
+        if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+          this.selectRef.select.inputRef.removeAttribute('aria-activedescendant');
+          this.focusedOptionObserver.disconnect();
+        }
       }
       if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
         this.fireEvent(searchedEvent);
@@ -483,7 +522,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         menuPlacement: "auto",
         placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/React.createElement(FormattedMessage, messages.placeholder),
         addMoreMessage: addMoreMessage,
-        classNamePrefix: "fabric-user-picker",
+        classNamePrefix: classNamePrefix,
         hoveringClearIndicator: hoveringClearIndicator,
         appearance: appearance,
         isClearable: isClearable,

package/dist/esm/components/styles.js

@@ -15,7 +15,8 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
     menu: function menu(css, state) {
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        minWidth: state.selectProps.menuMinWidth
+        minWidth: state.selectProps.menuMinWidth,
+        zIndex: '400'
       });
     },
     menuList: function menuList(css) {

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

@@ -47,6 +47,8 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private fireEvent;
     private startSession;
     componentDidMount(): void;
+    private focusedOptionObserverCallback;
+    private focusedOptionObserver;
     componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;

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

@@ -47,6 +47,8 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private fireEvent;
     private startSession;
     componentDidMount(): void;
+    private focusedOptionObserverCallback;
+    private focusedOptionObserver;
     componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.11.0",
+  "version": "10.11.2",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,15 +35,16 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/avatar": "^21.3.0",
+    "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/select": "^16.7.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.26.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -87,5 +88,10 @@
     "fabric",
     "ui"
   ],
+  "platform-feature-flags": {
+    "platform.design-system-team.select-aria-activedescendant_psxzq": {
+      "type": "boolean"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }