@atlaskit/user-picker 11.21.2 → 11.23.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/user-picker
 
+## 11.23.0
+
+### Minor Changes
+
+- [`4222fa748c46e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4222fa748c46e) -
+  [ux] Feature flag clean up to enable keyboard interactions in with header prop plugin in
+  Confluence
+
+## 11.22.0
+
+### Minor Changes
+
+- [`c474c86e4ed4d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c474c86e4ed4d) -
+  Add isHeaderFocused prop to enable tabbing through header plugin in user picker.
+
 ## 11.21.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"declaration": true,
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__user-picker",
 		"rootDir": "../",

package/afm-jira/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"declaration": true,
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__user-picker/app",
 		"rootDir": "../",

package/afm-products/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"declaration": true,
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__user-picker/app",
 		"rootDir": "../",

package/dist/cjs/components/BaseUserPicker.js

@@ -25,7 +25,6 @@ var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _groupOptionsByType = require("../util/group-options-by-type");
 var _ufoExperiences = require("../util/ufoExperiences");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["aria-labelledby", "aria-describedby"];
 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; }
@@ -253,7 +252,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       });
     });
     (0, _defineProperty2.default)(_this, "handleBlur", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.props.isFooterFocused || _this.props.isHeaderFocused) {
         return;
       }
       (0, _utils.callCallback)(_this.props.onBlur, _this.getSessionId());
@@ -269,7 +268,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       });
     });
     (0, _defineProperty2.default)(_this, "handleClose", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.props.isFooterFocused || _this.props.isHeaderFocused) {
         return;
       }
       _this.resetInputState();
@@ -332,17 +331,19 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         }
       }
       _this.props.onKeyDown && _this.props.onKeyDown(event);
-      if (_this.isCreateTeamA11yEnabled) {
-        if (event.key === 'Escape') {
-          _this.setState({
-            menuIsOpen: false,
-            options: []
-          });
-          _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
-        }
-        if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
-          _this.props.setIsFooterFocused(true);
-        }
+      if (event.key === 'Escape') {
+        _this.setState({
+          menuIsOpen: false,
+          options: []
+        });
+        _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+        _this.props.setIsHeaderFocused && _this.props.setIsHeaderFocused(false);
+      }
+      if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
+        _this.props.setIsFooterFocused(true);
+      }
+      if (event.key === 'Tab' && _this.props.setIsHeaderFocused && _this.props.header) {
+        _this.props.setIsHeaderFocused(true);
       }
     });
     (0, _defineProperty2.default)(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
@@ -401,7 +402,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       }
     });
     (0, _defineProperty2.default)(_this, "shouldKeepMenuOpen", function () {
-      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused) || Boolean(!!_this.props.header) && Boolean(_this.props.isHeaderFocused);
     });
     _this.state = {
       options: [],
@@ -437,11 +438,6 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     get: function get() {
       return this.props.openMenuOnClick && !this.props.isMulti;
     }
-  }, {
-    key: "isCreateTeamA11yEnabled",
-    get: function get() {
-      return (0, _platformFeatureFlags.fg)('a11y-create-team-is-not-focusable-and-has-no-btn');
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -466,8 +462,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
 
-      // Close menu when isFooterFocused changes from true to false
-      if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+      // Close menu when isFooterFocused or isHeaderFocused changes from true to false
+      if (menuIsOpen && (prevProps.isFooterFocused === true && this.props.isFooterFocused === false || prevProps.isHeaderFocused === true && this.props.isHeaderFocused === false) && !this.shouldKeepMenuOpen()) {
         this.resetInputState();
         (0, _utils.callCallback)(this.props.onClose, this.getSessionId());
         this.setState({

package/dist/es2019/components/BaseUserPicker.js

@@ -13,7 +13,6 @@ import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { groupOptionsByType } from '../util/group-options-by-type';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
-import { fg } from '@atlaskit/platform-feature-flags';
 const loadingMessage = () => null;
 const classNamePrefix = 'fabric-user-picker';
 export class BaseUserPickerWithoutAnalytics extends React.Component {
@@ -243,7 +242,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
     });
     _defineProperty(this, "handleBlur", () => {
-      if (this.isCreateTeamA11yEnabled && this.props.isFooterFocused) {
+      if (this.props.isFooterFocused || this.props.isHeaderFocused) {
         return;
       }
       callCallback(this.props.onBlur, this.getSessionId());
@@ -259,7 +258,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       });
     });
     _defineProperty(this, "handleClose", () => {
-      if (this.isCreateTeamA11yEnabled && this.props.isFooterFocused) {
+      if (this.props.isFooterFocused || this.props.isHeaderFocused) {
         return;
       }
       this.resetInputState();
@@ -322,17 +321,19 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         }
       }
       this.props.onKeyDown && this.props.onKeyDown(event);
-      if (this.isCreateTeamA11yEnabled) {
-        if (event.key === 'Escape') {
-          this.setState({
-            menuIsOpen: false,
-            options: []
-          });
-          this.props.setIsFooterFocused && this.props.setIsFooterFocused(false);
-        }
-        if (event.key === 'Tab' && this.props.setIsFooterFocused && this.props.footer) {
-          this.props.setIsFooterFocused(true);
-        }
+      if (event.key === 'Escape') {
+        this.setState({
+          menuIsOpen: false,
+          options: []
+        });
+        this.props.setIsFooterFocused && this.props.setIsFooterFocused(false);
+        this.props.setIsHeaderFocused && this.props.setIsHeaderFocused(false);
+      }
+      if (event.key === 'Tab' && this.props.setIsFooterFocused && this.props.footer) {
+        this.props.setIsFooterFocused(true);
+      }
+      if (event.key === 'Tab' && this.props.setIsHeaderFocused && this.props.header) {
+        this.props.setIsHeaderFocused(true);
       }
     });
     _defineProperty(this, "handleClearIndicatorHover", hoveringClearIndicator => {
@@ -385,7 +386,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         }));
       }
     });
-    _defineProperty(this, "shouldKeepMenuOpen", () => Boolean(!!this.props.footer) && Boolean(this.props.isFooterFocused));
+    _defineProperty(this, "shouldKeepMenuOpen", () => Boolean(!!this.props.footer) && Boolean(this.props.isFooterFocused) || Boolean(!!this.props.header) && Boolean(this.props.isHeaderFocused));
     this.state = {
       options: [],
       isDefaultSet: false,
@@ -416,9 +417,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   get isMenuOpenOnClickForSingleSelect() {
     return this.props.openMenuOnClick && !this.props.isMulti;
   }
-  get isCreateTeamA11yEnabled() {
-    return fg('a11y-create-team-is-not-focusable-and-has-no-btn');
-  }
   componentDidMount() {
     const {
       open,
@@ -441,8 +439,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       inputValue
     } = this.state;
 
-    // Close menu when isFooterFocused changes from true to false
-    if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+    // Close menu when isFooterFocused or isHeaderFocused changes from true to false
+    if (menuIsOpen && (prevProps.isFooterFocused === true && this.props.isFooterFocused === false || prevProps.isHeaderFocused === true && this.props.isHeaderFocused === false) && !this.shouldKeepMenuOpen()) {
       this.resetInputState();
       callCallback(this.props.onClose, this.getSessionId());
       this.setState({

package/dist/esm/components/BaseUserPicker.js

@@ -27,7 +27,6 @@ import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { groupOptionsByType } from '../util/group-options-by-type';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
-import { fg } from '@atlaskit/platform-feature-flags';
 var loadingMessage = function loadingMessage() {
   return null;
 };
@@ -247,7 +246,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       });
     });
     _defineProperty(_this, "handleBlur", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.props.isFooterFocused || _this.props.isHeaderFocused) {
         return;
       }
       callCallback(_this.props.onBlur, _this.getSessionId());
@@ -263,7 +262,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       });
     });
     _defineProperty(_this, "handleClose", function () {
-      if (_this.isCreateTeamA11yEnabled && _this.props.isFooterFocused) {
+      if (_this.props.isFooterFocused || _this.props.isHeaderFocused) {
         return;
       }
       _this.resetInputState();
@@ -326,17 +325,19 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         }
       }
       _this.props.onKeyDown && _this.props.onKeyDown(event);
-      if (_this.isCreateTeamA11yEnabled) {
-        if (event.key === 'Escape') {
-          _this.setState({
-            menuIsOpen: false,
-            options: []
-          });
-          _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
-        }
-        if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
-          _this.props.setIsFooterFocused(true);
-        }
+      if (event.key === 'Escape') {
+        _this.setState({
+          menuIsOpen: false,
+          options: []
+        });
+        _this.props.setIsFooterFocused && _this.props.setIsFooterFocused(false);
+        _this.props.setIsHeaderFocused && _this.props.setIsHeaderFocused(false);
+      }
+      if (event.key === 'Tab' && _this.props.setIsFooterFocused && _this.props.footer) {
+        _this.props.setIsFooterFocused(true);
+      }
+      if (event.key === 'Tab' && _this.props.setIsHeaderFocused && _this.props.header) {
+        _this.props.setIsHeaderFocused(true);
       }
     });
     _defineProperty(_this, "handleClearIndicatorHover", function (hoveringClearIndicator) {
@@ -395,7 +396,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
     });
     _defineProperty(_this, "shouldKeepMenuOpen", function () {
-      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused);
+      return Boolean(!!_this.props.footer) && Boolean(_this.props.isFooterFocused) || Boolean(!!_this.props.header) && Boolean(_this.props.isHeaderFocused);
     });
     _this.state = {
       options: [],
@@ -431,11 +432,6 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     get: function get() {
       return this.props.openMenuOnClick && !this.props.isMulti;
     }
-  }, {
-    key: "isCreateTeamA11yEnabled",
-    get: function get() {
-      return fg('a11y-create-team-is-not-focusable-and-has-no-btn');
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -460,8 +456,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
 
-      // Close menu when isFooterFocused changes from true to false
-      if (this.isCreateTeamA11yEnabled && menuIsOpen && prevProps.isFooterFocused === true && this.props.isFooterFocused === false && !this.shouldKeepMenuOpen()) {
+      // Close menu when isFooterFocused or isHeaderFocused changes from true to false
+      if (menuIsOpen && (prevProps.isFooterFocused === true && this.props.isFooterFocused === false || prevProps.isHeaderFocused === true && this.props.isHeaderFocused === false) && !this.shouldKeepMenuOpen()) {
         this.resetInputState();
         callCallback(this.props.onClose, this.getSessionId());
         this.setState({

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

@@ -49,7 +49,6 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private get isMenuOpenOnClickForSingleSelect();
     abortOptionsShownUfoExperience: () => void;
     startOptionsShownUfoExperience: () => void;
-    private get isCreateTeamA11yEnabled();
     private executeLoadOptions;
     private handleFocus;
     private resetInputState;
@@ -78,7 +77,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-    ariaLive?: "polite" | "off" | "assertive";
+    ariaLive?: 'polite' | 'off' | 'assertive';
     autoFocus?: boolean;
     captureMenuScroll?: boolean;
     clearValueLabel?: string;
@@ -90,7 +89,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
     footer?: React.ReactNode;
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
-    groupByTypeOrder?: NonNullable<OptionData["type"]>[];
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
     header?: React.ReactNode;
     height?: number | string;
     includeTeamsUpdates?: boolean;
@@ -98,6 +97,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -112,7 +112,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuIsOpen?: boolean;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
-    menuPosition?: "absolute" | "fixed";
+    menuPosition?: 'absolute' | 'fixed';
     menuShouldBlockScroll?: boolean;
     name?: string;
     noBorder?: boolean;
@@ -132,13 +132,14 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnClick?: boolean;
     options?: OptionData[];
     placeholder?: React.ReactNode;
-    placeholderAvatar?: "person" | "team";
+    placeholderAvatar?: 'person' | 'team';
     popupSelectProps?: PopupSelectProps<OptionData>;
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
-    strategy?: "fixed" | "absolute";
+    strategy?: 'fixed' | 'absolute';
     styles?: StylesConfig;
     subtle?: boolean;
     suggestEmailsForDomain?: string;
@@ -159,7 +160,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof WithAnalyticsEventsProps>, "options" | "noOptionsMessage" | "placeholder" | "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "components" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "inputId" | "isDisabled" | "isFooterFocused" | "isInvalid" | "isLoading" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuIsOpen" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onKeyDown" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "required" | "search" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "styles" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "value" | "width" | "pickerProps" | "SelectComponent"> & {
+}, keyof WithAnalyticsEventsProps>, 'options' | 'noOptionsMessage' | 'placeholder' | 'addMoreMessage' | 'allowEmail' | 'anchor' | 'appearance' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'autoFocus' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'defaultValue' | 'disableInput' | 'emailLabel' | 'fieldId' | 'footer' | 'forwardedRef' | 'groupByTypeOrder' | 'header' | 'height' | 'includeTeamsUpdates' | 'inputId' | 'isDisabled' | 'isFooterFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'name' | 'onBlur' | 'onChange' | 'onClear' | 'onClose' | 'onFocus' | 'onInputChange' | 'onKeyDown' | 'onOpen' | 'onSelection' | 'open' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {

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

@@ -47,6 +47,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -86,6 +87,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -155,6 +157,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     height?: number | string | undefined;
     includeTeamsUpdates?: boolean | undefined;
     isFooterFocused?: boolean | undefined;
+    isHeaderFocused?: boolean | undefined;
     isValidEmail?: import("./emailValidation").EmailValidator | undefined;
     loadOptions?: import("..").LoadOptions | undefined;
     loadOptionsErrorMessage?: ((value: {
@@ -173,6 +176,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     placeholderAvatar?: "person" | "team" | undefined;
     popupSelectProps?: import("@atlaskit/select").PopupSelectProps<import("..").OptionData> | undefined;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     showClearIndicator?: boolean | undefined;
     strategy?: "fixed" | "absolute" | undefined;
     subtle?: boolean | undefined;

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

@@ -38,6 +38,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -77,6 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -86,7 +88,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("..").Value;
     width?: number | string;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -1,7 +1,7 @@
 import { type MemoizedFn } from 'memoize-one';
 import { type Placement } from '@atlaskit/popper';
 import { type Target, type BoundariesElement, type RootBoundary } from '../types';
-export declare const getPopupProps: MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: "fixed" | "absolute") => {
+export declare const getPopupProps: MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: 'fixed' | 'absolute') => {
     autoFocus: boolean;
     controlShouldRenderValue: boolean;
     maxMenuWidth: string | number;
@@ -41,7 +41,7 @@ export declare const getPopupProps: MemoizedFn<(width: string | number, target:
             order?: undefined;
         })[];
         placement: Placement;
-        strategy: "fixed" | "absolute";
+        strategy: 'fixed' | 'absolute';
     };
     popupTitle: string | undefined;
     searchThreshold: number;

package/dist/types/types.d.ts

@@ -80,6 +80,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     isDisabled?: boolean;
     /** Checks if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     isFooterFocused?: boolean;
+    /** Checks if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    isHeaderFocused?: boolean;
     /** Display the  picker with a style to show the value is invalid */
     isInvalid?: boolean;
     /** Show the loading indicator. */
@@ -170,6 +172,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     search?: string;
     /** Sets if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Sets if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     /** Override default behavior and show the clear indicator. */
     showClearIndicator?: boolean;
     /** Positioning strategy for the popper element */

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

@@ -49,7 +49,6 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private get isMenuOpenOnClickForSingleSelect();
     abortOptionsShownUfoExperience: () => void;
     startOptionsShownUfoExperience: () => void;
-    private get isCreateTeamA11yEnabled();
     private executeLoadOptions;
     private handleFocus;
     private resetInputState;
@@ -78,7 +77,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-    ariaLive?: "polite" | "off" | "assertive";
+    ariaLive?: 'polite' | 'off' | 'assertive';
     autoFocus?: boolean;
     captureMenuScroll?: boolean;
     clearValueLabel?: string;
@@ -90,7 +89,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
     footer?: React.ReactNode;
     forwardedRef?: React.ForwardedRef<UserPickerRef>;
-    groupByTypeOrder?: NonNullable<OptionData["type"]>[];
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
     header?: React.ReactNode;
     height?: number | string;
     includeTeamsUpdates?: boolean;
@@ -98,6 +97,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -112,7 +112,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuIsOpen?: boolean;
     menuMinWidth?: number;
     menuPortalTarget?: HTMLElement;
-    menuPosition?: "absolute" | "fixed";
+    menuPosition?: 'absolute' | 'fixed';
     menuShouldBlockScroll?: boolean;
     name?: string;
     noBorder?: boolean;
@@ -132,13 +132,14 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnClick?: boolean;
     options?: OptionData[];
     placeholder?: React.ReactNode;
-    placeholderAvatar?: "person" | "team";
+    placeholderAvatar?: 'person' | 'team';
     popupSelectProps?: PopupSelectProps<OptionData>;
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
-    strategy?: "fixed" | "absolute";
+    strategy?: 'fixed' | 'absolute';
     styles?: StylesConfig;
     subtle?: boolean;
     suggestEmailsForDomain?: string;
@@ -159,7 +160,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof WithAnalyticsEventsProps>, "options" | "noOptionsMessage" | "placeholder" | "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "components" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "inputId" | "isDisabled" | "isFooterFocused" | "isInvalid" | "isLoading" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuIsOpen" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "name" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onKeyDown" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "required" | "search" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "styles" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "value" | "width" | "pickerProps" | "SelectComponent"> & {
+}, keyof WithAnalyticsEventsProps>, 'options' | 'noOptionsMessage' | 'placeholder' | 'addMoreMessage' | 'allowEmail' | 'anchor' | 'appearance' | 'ariaDescribedBy' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaLive' | 'autoFocus' | 'captureMenuScroll' | 'clearValueLabel' | 'closeMenuOnScroll' | 'components' | 'defaultValue' | 'disableInput' | 'emailLabel' | 'fieldId' | 'footer' | 'forwardedRef' | 'groupByTypeOrder' | 'header' | 'height' | 'includeTeamsUpdates' | 'inputId' | 'isDisabled' | 'isFooterFocused' | 'isInvalid' | 'isLoading' | 'isValidEmail' | 'loadOptions' | 'loadUserSource' | 'maxOptions' | 'maxPickerHeight' | 'menuIsOpen' | 'menuMinWidth' | 'menuPortalTarget' | 'menuPosition' | 'menuShouldBlockScroll' | 'name' | 'onBlur' | 'onChange' | 'onClear' | 'onClose' | 'onFocus' | 'onInputChange' | 'onKeyDown' | 'onOpen' | 'onSelection' | 'open' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {

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

@@ -47,6 +47,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -86,6 +87,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -161,6 +163,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     height?: number | string | undefined;
     includeTeamsUpdates?: boolean | undefined;
     isFooterFocused?: boolean | undefined;
+    isHeaderFocused?: boolean | undefined;
     isValidEmail?: import("./emailValidation").EmailValidator | undefined;
     loadOptions?: import("..").LoadOptions | undefined;
     loadOptionsErrorMessage?: ((value: {
@@ -179,6 +182,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     placeholderAvatar?: "person" | "team" | undefined;
     popupSelectProps?: import("@atlaskit/select").PopupSelectProps<import("..").OptionData> | undefined;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     showClearIndicator?: boolean | undefined;
     strategy?: "fixed" | "absolute" | undefined;
     subtle?: boolean | undefined;

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

@@ -38,6 +38,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     isClearable?: boolean;
     isDisabled?: boolean;
     isFooterFocused?: boolean;
+    isHeaderFocused?: boolean;
     isInvalid?: boolean;
     isLoading?: boolean;
     isMulti?: boolean;
@@ -77,6 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     required?: boolean;
     search?: string;
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     showClearIndicator?: boolean;
     strategy?: "fixed" | "absolute";
     styles?: import("@atlaskit/select").StylesConfig;
@@ -86,7 +88,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     UNSAFE_hasDraggableParentComponent?: boolean;
     value?: import("..").Value;
     width?: number | string;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuIsOpen" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "showClearIndicator" | "strategy" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "UNSAFE_hasDraggableParentComponent"> & {
     isMulti?: boolean | undefined;
     width?: number | string | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -1,7 +1,7 @@
 import { type MemoizedFn } from 'memoize-one';
 import { type Placement } from '@atlaskit/popper';
 import { type Target, type BoundariesElement, type RootBoundary } from '../types';
-export declare const getPopupProps: MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: "fixed" | "absolute") => {
+export declare const getPopupProps: MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string, strategy?: 'fixed' | 'absolute') => {
     autoFocus: boolean;
     controlShouldRenderValue: boolean;
     maxMenuWidth: string | number;
@@ -41,7 +41,7 @@ export declare const getPopupProps: MemoizedFn<(width: string | number, target:
             order?: undefined;
         })[];
         placement: Placement;
-        strategy: "fixed" | "absolute";
+        strategy: 'fixed' | 'absolute';
     };
     popupTitle: string | undefined;
     searchThreshold: number;

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

@@ -80,6 +80,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     isDisabled?: boolean;
     /** Checks if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     isFooterFocused?: boolean;
+    /** Checks if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    isHeaderFocused?: boolean;
     /** Display the  picker with a style to show the value is invalid */
     isInvalid?: boolean;
     /** Show the loading indicator. */
@@ -170,6 +172,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     search?: string;
     /** Sets if the footer is focused or not. This is needed to keep the menu open when the footer is focused */
     setIsFooterFocused?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Sets if the header is focused or not. This is needed to keep the menu open when the header is focused */
+    setIsHeaderFocused?: React.Dispatch<React.SetStateAction<boolean>>;
     /** Override default behavior and show the clear indicator. */
     showClearIndicator?: boolean;
     /** Positioning strategy for the popper element */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.21.2",
+	"version": "11.23.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-elements-user-picker": "2.7.0",
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/logo": "^19.10.0",
@@ -118,9 +118,6 @@
 		},
 		"jira_ai_agent_avatar_user_picker_user_option": {
 			"type": "boolean"
-		},
-		"a11y-create-team-is-not-focusable-and-has-no-btn": {
-			"type": "boolean"
 		}
 	}
 }

package/tsconfig.json

@@ -13,6 +13,5 @@
     "**/stories/*.tsx",
     "**/stories/**/*.ts",
     "**/stories/**/*.tsx"
-  ],
-  "compilerOptions": {}
+  ]
 }