@atlaskit/user-picker 10.20.0 → 10.20.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/user-picker
 
+## 10.20.2
+
+### Patch Changes
+
+-   [#101781](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101781)
+    [`ea3386009a3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea3386009a3f) -
+    A bug has been fixed where aria-activedescendant on the input elemnt would be try to set to a
+    menu list item before the menu was rendered.
+-   Updated dependencies
+
+## 10.20.1
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 10.20.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.20.0";
+var packageVersion = "10.20.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

@@ -315,7 +315,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
           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);
+              var _this$selectRef$selec;
+              (_this$selectRef$selec = _this.selectRef.select.inputRef) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.setAttribute('aria-activedescendant', target.id);
               break;
             }
           }
@@ -326,9 +327,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         _iterator2.f();
       }
     });
-    // for SSR, MutationObserver not existed in node, need to check its existence first
-    // using typeof MutationObserver to check if MutationObserver is function, it is undefined in node
-    // if it is node environment, focusedOptionObserver will be falsy value.
+    // Create a MutationObserver which will observe the menu list for changes. In
+    // node environments such as SSR, MutationObserver doesn't exist and this
+    // variable will be falsy.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(_this.focusedOptionObserverCallback));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
       if (!_this.isMenuOpenOnClickForSingleSelect) {
@@ -457,16 +458,36 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         resolving = _this$state2.resolving,
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
-      if (menuIsOpen && !prevState.menuIsOpen) {
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+
+      // Create a new session when the menu is opened and there is no session
+      if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
+        this.startSession();
+      }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+        var _this$selectRef, _this$selectRef2, _this$selectRef3;
+        // When the menu is opened, set aria-activedescendant attribute on the
+        // input and instrument a mutation observer. On the first opening of the
+        // menu, menuIsOpen is true but the menu isn't actually in the DOM yet.
+        // For this reason, we the use the existence of the attribute.
+        var inputHasAriaActiveDecendant = (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.select) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.inputRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.getAttribute('aria-activedescendant');
+        var inputRef = (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select) === null || _this$selectRef2 === void 0 ? void 0 : _this$selectRef2.inputRef;
+        var menuRef = (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.menuListRef;
+        if (menuIsOpen && menuRef && !inputHasAriaActiveDecendant) {
           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);
+          // Set the aria-activedescendant attribute on the input element
+          // to the first menu item
+          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && inputRef && inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+
+          // Setup MutationObserver so when the selected option changes, update
+          // the aria-activedescendant attribute on the input element
           this.focusedOptionObserver && this.focusedOptionObserver.observe(menuRef, observerOptions);
         }
-        if (!this.session) {
-          // session should have been created onFocus
-          this.startSession();
+
+        // Rewmoe the aria-active-descendant attribute and disconnect the observer
+        // when the menu is closed
+        if (!menuIsOpen && prevState.menuIsOpen) {
+          inputRef && inputRef.removeAttribute('aria-activedescendant');
+          this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
         }
       }
 
@@ -477,10 +498,6 @@ 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 && this.focusedOptionObserver.disconnect();
-        }
       }
       if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
         this.fireEvent(_analytics.searchedEvent);

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.20.0";
+const packageVersion = "10.20.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

@@ -300,15 +300,16 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         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);
+            var _this$selectRef$selec;
+            (_this$selectRef$selec = this.selectRef.select.inputRef) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.setAttribute('aria-activedescendant', target.id);
             break;
           }
         }
       }
     });
-    // for SSR, MutationObserver not existed in node, need to check its existence first
-    // using typeof MutationObserver to check if MutationObserver is function, it is undefined in node
-    // if it is node environment, focusedOptionObserver will be falsy value.
+    // Create a MutationObserver which will observe the menu list for changes. In
+    // node environments such as SSR, MutationObserver doesn't exist and this
+    // variable will be falsy.
     _defineProperty(this, "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(this.focusedOptionObserverCallback));
     _defineProperty(this, "handleKeyDown", event => {
       if (!this.isMenuOpenOnClickForSingleSelect) {
@@ -427,16 +428,36 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       count,
       inputValue
     } = this.state;
-    if (menuIsOpen && !prevState.menuIsOpen) {
-      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+
+    // Create a new session when the menu is opened and there is no session
+    if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
+      this.startSession();
+    }
+    if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+      var _this$selectRef, _this$selectRef$selec2, _this$selectRef$selec3, _this$selectRef2, _this$selectRef2$sele, _this$selectRef3, _this$selectRef3$sele;
+      // When the menu is opened, set aria-activedescendant attribute on the
+      // input and instrument a mutation observer. On the first opening of the
+      // menu, menuIsOpen is true but the menu isn't actually in the DOM yet.
+      // For this reason, we the use the existence of the attribute.
+      const inputHasAriaActiveDecendant = (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 ? void 0 : (_this$selectRef$selec2 = _this$selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : (_this$selectRef$selec3 = _this$selectRef$selec2.inputRef) === null || _this$selectRef$selec3 === void 0 ? void 0 : _this$selectRef$selec3.getAttribute('aria-activedescendant');
+      const inputRef = (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 ? void 0 : (_this$selectRef2$sele = _this$selectRef2.select) === null || _this$selectRef2$sele === void 0 ? void 0 : _this$selectRef2$sele.inputRef;
+      const menuRef = (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 ? void 0 : (_this$selectRef3$sele = _this$selectRef3.select) === null || _this$selectRef3$sele === void 0 ? void 0 : _this$selectRef3$sele.menuListRef;
+      if (menuIsOpen && menuRef && !inputHasAriaActiveDecendant) {
         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);
+        // Set the aria-activedescendant attribute on the input element
+        // to the first menu item
+        ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && inputRef && inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+
+        // Setup MutationObserver so when the selected option changes, update
+        // the aria-activedescendant attribute on the input element
         this.focusedOptionObserver && this.focusedOptionObserver.observe(menuRef, observerOptions);
       }
-      if (!this.session) {
-        // session should have been created onFocus
-        this.startSession();
+
+      // Rewmoe the aria-active-descendant attribute and disconnect the observer
+      // when the menu is closed
+      if (!menuIsOpen && prevState.menuIsOpen) {
+        inputRef && inputRef.removeAttribute('aria-activedescendant');
+        this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
       }
     }
 
@@ -447,10 +468,6 @@ 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 && this.focusedOptionObserver.disconnect();
-      }
     }
     if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
       this.fireEvent(searchedEvent);

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.20.0";
+var packageVersion = "10.20.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

@@ -308,7 +308,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           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);
+              var _this$selectRef$selec;
+              (_this$selectRef$selec = _this.selectRef.select.inputRef) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.setAttribute('aria-activedescendant', target.id);
               break;
             }
           }
@@ -319,9 +320,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         _iterator2.f();
       }
     });
-    // for SSR, MutationObserver not existed in node, need to check its existence first
-    // using typeof MutationObserver to check if MutationObserver is function, it is undefined in node
-    // if it is node environment, focusedOptionObserver will be falsy value.
+    // Create a MutationObserver which will observe the menu list for changes. In
+    // node environments such as SSR, MutationObserver doesn't exist and this
+    // variable will be falsy.
     _defineProperty(_assertThisInitialized(_this), "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(_this.focusedOptionObserverCallback));
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       if (!_this.isMenuOpenOnClickForSingleSelect) {
@@ -450,16 +451,36 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         resolving = _this$state2.resolving,
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
-      if (menuIsOpen && !prevState.menuIsOpen) {
-        if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+
+      // Create a new session when the menu is opened and there is no session
+      if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
+        this.startSession();
+      }
+      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+        var _this$selectRef, _this$selectRef2, _this$selectRef3;
+        // When the menu is opened, set aria-activedescendant attribute on the
+        // input and instrument a mutation observer. On the first opening of the
+        // menu, menuIsOpen is true but the menu isn't actually in the DOM yet.
+        // For this reason, we the use the existence of the attribute.
+        var inputHasAriaActiveDecendant = (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.select) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.inputRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.getAttribute('aria-activedescendant');
+        var inputRef = (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select) === null || _this$selectRef2 === void 0 ? void 0 : _this$selectRef2.inputRef;
+        var menuRef = (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.menuListRef;
+        if (menuIsOpen && menuRef && !inputHasAriaActiveDecendant) {
           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);
+          // Set the aria-activedescendant attribute on the input element
+          // to the first menu item
+          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && inputRef && inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+
+          // Setup MutationObserver so when the selected option changes, update
+          // the aria-activedescendant attribute on the input element
           this.focusedOptionObserver && this.focusedOptionObserver.observe(menuRef, observerOptions);
         }
-        if (!this.session) {
-          // session should have been created onFocus
-          this.startSession();
+
+        // Rewmoe the aria-active-descendant attribute and disconnect the observer
+        // when the menu is closed
+        if (!menuIsOpen && prevState.menuIsOpen) {
+          inputRef && inputRef.removeAttribute('aria-activedescendant');
+          this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
         }
       }
 
@@ -470,10 +491,6 @@ 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 && this.focusedOptionObserver.disconnect();
-        }
       }
       if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
         this.fireEvent(searchedEvent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.20.0",
+  "version": "10.20.2",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,19 +43,19 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/avatar": "^21.6.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/logo": "^13.15.0",
+    "@atlaskit/avatar": "^21.9.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/logo": "^13.17.0",
     "@atlaskit/lozenge": "^11.7.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/primitives": "^5.7.0",
-    "@atlaskit/select": "^17.8.0",
+    "@atlaskit/primitives": "^6.3.0",
+    "@atlaskit/select": "^17.9.0",
     "@atlaskit/spinner": "^16.1.0",
     "@atlaskit/teams-avatar": "^1.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.5.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/heading": "^2.2.0",
+    "@atlaskit/heading": "^2.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",