@atlaskit/user-picker 11.25.2 → 11.25.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/user-picker
 
+## 11.25.3
+
+### Patch Changes
+
+- [`16328bcd2e7f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/16328bcd2e7f8) -
+  Accessibility fix to prevent auto menu open on focus
+
 ## 11.25.2
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -541,6 +541,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
   }, {
     key: "render",
     value: function render() {
+      var _this$props$openMenuO;
       var _this$props5 = this.props,
         isMulti = _this$props5.isMulti,
         isLoading = _this$props5.isLoading,
@@ -589,7 +590,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       var menuOpenDeciderProps = _objectSpread({}, !this.isMenuOpenOnClickForSingleSelect && {
         menuIsOpen: menuIsOpen,
         blurInputOnSelect: !isMulti,
-        openMenuOnFocus: true
+        openMenuOnFocus: (_this$props$openMenuO = this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true
       });
       var _this$ariaProps = this.ariaProps,
         ariaLabelledByStandard = _this$ariaProps['aria-labelledby'],

package/dist/es2019/components/BaseUserPicker.js

@@ -514,6 +514,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     }), {});
   }
   render() {
+    var _this$props$openMenuO;
     const {
       isMulti,
       isLoading,
@@ -565,7 +566,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       ...(!this.isMenuOpenOnClickForSingleSelect && {
         menuIsOpen,
         blurInputOnSelect: !isMulti,
-        openMenuOnFocus: true
+        openMenuOnFocus: (_this$props$openMenuO = this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true
       })
     };
     const {

package/dist/esm/components/BaseUserPicker.js

@@ -535,6 +535,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
   }, {
     key: "render",
     value: function render() {
+      var _this$props$openMenuO;
       var _this$props5 = this.props,
         isMulti = _this$props5.isMulti,
         isLoading = _this$props5.isLoading,
@@ -583,7 +584,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       var menuOpenDeciderProps = _objectSpread({}, !this.isMenuOpenOnClickForSingleSelect && {
         menuIsOpen: menuIsOpen,
         blurInputOnSelect: !isMulti,
-        openMenuOnFocus: true
+        openMenuOnFocus: (_this$props$openMenuO = this.props.openMenuOnFocus) !== null && _this$props$openMenuO !== void 0 ? _this$props$openMenuO : true
       });
       var _this$ariaProps = this.ariaProps,
         ariaLabelledByStandard = _this$ariaProps['aria-labelledby'],

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

@@ -133,6 +133,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     onSelection?: OnOption;
     open?: boolean;
     openMenuOnClick?: boolean;
+    openMenuOnFocus?: boolean;
     options?: OptionData[];
     placeholder?: React.ReactNode;
     placeholderAvatar?: 'person' | 'team';
@@ -163,7 +164,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' | 'customGroupLabels' | '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' | 'customGroupLabels' | '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' | 'openMenuOnFocus' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {
@@ -171,6 +172,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     }) => React.ReactNode) | undefined;
     noBorder?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
+    openMenuOnFocus?: boolean | undefined;
     subtle?: boolean | undefined;
     textFieldBackgroundColor?: boolean | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -73,6 +73,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     onSelection?: import("..").OnOption;
     open?: boolean;
     openMenuOnClick?: boolean;
+    openMenuOnFocus?: boolean;
     options?: import("..").OptionData[];
     placeholder?: React.ReactNode;
     placeholderAvatar?: "person" | "team";
@@ -90,7 +91,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" | "customGroupLabels" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "minHeight" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "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" | "openMenuOnFocus" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "customGroupLabels" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "minHeight" | "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/types.d.ts

@@ -162,6 +162,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     open?: boolean;
     /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
     openMenuOnClick?: boolean;
+    /** Whether to open the menu when the input receives focus. Defaults to true for multi-select. */
+    openMenuOnFocus?: boolean;
     /** List of users or teams to be used as options by the user picker. */
     options?: OptionData[];
     /** Placeholder text to be shown when there is no value in the field. */

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

@@ -133,6 +133,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     onSelection?: OnOption;
     open?: boolean;
     openMenuOnClick?: boolean;
+    openMenuOnFocus?: boolean;
     options?: OptionData[];
     placeholder?: React.ReactNode;
     placeholderAvatar?: 'person' | 'team';
@@ -163,7 +164,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' | 'customGroupLabels' | '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' | 'customGroupLabels' | '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' | 'openMenuOnFocus' | 'placeholderAvatar' | 'popupSelectProps' | 'required' | 'search' | 'setIsFooterFocused' | 'showClearIndicator' | 'strategy' | 'styles' | 'suggestEmailsForDomain' | 'UNSAFE_hasDraggableParentComponent' | 'value' | 'width' | 'pickerProps' | 'SelectComponent'> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {
@@ -171,6 +172,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     }) => React.ReactNode) | undefined;
     noBorder?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
+    openMenuOnFocus?: boolean | undefined;
     subtle?: boolean | undefined;
     textFieldBackgroundColor?: boolean | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -73,6 +73,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     onSelection?: import("..").OnOption;
     open?: boolean;
     openMenuOnClick?: boolean;
+    openMenuOnFocus?: boolean;
     options?: import("..").OptionData[];
     placeholder?: React.ReactNode;
     placeholderAvatar?: "person" | "team";
@@ -90,7 +91,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" | "customGroupLabels" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "minHeight" | "noBorder" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "setIsFooterFocused" | "setIsHeaderFocused" | "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" | "openMenuOnFocus" | "openMenuOnClick" | "options" | "styles" | "required" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "footer" | "forwardedRef" | "groupByTypeOrder" | "customGroupLabels" | "header" | "height" | "includeTeamsUpdates" | "isFooterFocused" | "isHeaderFocused" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "minHeight" | "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/types.d.ts

@@ -162,6 +162,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     open?: boolean;
     /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
     openMenuOnClick?: boolean;
+    /** Whether to open the menu when the input receives focus. Defaults to true for multi-select. */
+    openMenuOnFocus?: boolean;
     /** List of users or teams to be used as options by the user picker. */
     options?: OptionData[];
     /** Placeholder text to be shown when there is no value in the field. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.25.2",
+	"version": "11.25.3",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"