@atlaskit/react-select 3.4.5 → 3.5.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/react-select
 
+## 3.5.1
+
+### Patch Changes
+
+- [`d281a835c4897`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d281a835c4897) -
+  [ux]
+
+  - `TeamCreateDialog`
+    - Fixed incorrect ariaDescribedBy identifier so that VoiceOver can read out the error message.
+    - Programmatically focus the input on submit when there is an error.
+
+- Updated dependencies
+
+## 3.5.0
+
+### Minor Changes
+
+- [`782e1924230d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/782e1924230d5) -
+  Introduced new optional "shouldPreventEscapePropagation" prop to prevent Escape keydown event
+  propagation
+
 ## 3.4.5
 
 ### Patch Changes

package/dist/cjs/select.js

@@ -68,6 +68,7 @@ var defaultProps = exports.defaultProps = {
   },
   openMenuOnFocus: false,
   openMenuOnClick: true,
+  shouldPreventEscapePropagation: false,
   options: [],
   pageSize: 5,
   placeholder: 'Select...',
@@ -690,7 +691,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props5.menuIsOpen,
         onKeyDown = _this$props5.onKeyDown,
         tabSelectsValue = _this$props5.tabSelectsValue,
-        openMenuOnFocus = _this$props5.openMenuOnFocus;
+        openMenuOnFocus = _this$props5.openMenuOnFocus,
+        shouldPreventEscapePropagation = _this$props5.shouldPreventEscapePropagation;
       var _this$state = _this.state,
         focusedOption = _this$state.focusedOption,
         focusedValue = _this$state.focusedValue,
@@ -780,6 +782,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               prevInputValue: inputValue
             });
             _this.onMenuClose();
+            if (shouldPreventEscapePropagation && event.target instanceof HTMLElement) {
+              event.stopPropagation();
+            }
           } else if (isClearable && escapeClearsValue) {
             _this.clearValue();
           }
@@ -1368,6 +1373,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           "data-testid": testId && "".concat(testId, "-select--input")
         }, ariaAttributes));
       }
+
+      // NOTE: Don't add the `name` prop to this Input, `name` is already a prop on the hidden input element that has the value of the select.
+      // Adding `name` to this Input will cause unexpected behavior.
       return /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",

package/dist/es2019/select.js

@@ -43,6 +43,7 @@ export const defaultProps = {
   noOptionsMessage: () => 'No options',
   openMenuOnFocus: false,
   openMenuOnClick: true,
+  shouldPreventEscapePropagation: false,
   options: [],
   pageSize: 5,
   placeholder: 'Select...',
@@ -663,7 +664,8 @@ export default class Select extends Component {
         menuIsOpen,
         onKeyDown,
         tabSelectsValue,
-        openMenuOnFocus
+        openMenuOnFocus,
+        shouldPreventEscapePropagation
       } = this.props;
       const {
         focusedOption,
@@ -755,6 +757,9 @@ export default class Select extends Component {
               prevInputValue: inputValue
             });
             this.onMenuClose();
+            if (shouldPreventEscapePropagation && event.target instanceof HTMLElement) {
+              event.stopPropagation();
+            }
           } else if (isClearable && escapeClearsValue) {
             this.clearValue();
           }
@@ -1374,6 +1379,9 @@ export default class Select extends Component {
         "data-testid": testId && `${testId}-select--input`
       }, ariaAttributes));
     }
+
+    // NOTE: Don't add the `name` prop to this Input, `name` is already a prop on the hidden input element that has the value of the select.
+    // Adding `name` to this Input will cause unexpected behavior.
     return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
       autoCapitalize: "none",
       autoComplete: "off",

package/dist/esm/select.js

@@ -59,6 +59,7 @@ export var defaultProps = {
   },
   openMenuOnFocus: false,
   openMenuOnClick: true,
+  shouldPreventEscapePropagation: false,
   options: [],
   pageSize: 5,
   placeholder: 'Select...',
@@ -681,7 +682,8 @@ var Select = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props5.menuIsOpen,
         onKeyDown = _this$props5.onKeyDown,
         tabSelectsValue = _this$props5.tabSelectsValue,
-        openMenuOnFocus = _this$props5.openMenuOnFocus;
+        openMenuOnFocus = _this$props5.openMenuOnFocus,
+        shouldPreventEscapePropagation = _this$props5.shouldPreventEscapePropagation;
       var _this$state = _this.state,
         focusedOption = _this$state.focusedOption,
         focusedValue = _this$state.focusedValue,
@@ -771,6 +773,9 @@ var Select = /*#__PURE__*/function (_Component) {
               prevInputValue: inputValue
             });
             _this.onMenuClose();
+            if (shouldPreventEscapePropagation && event.target instanceof HTMLElement) {
+              event.stopPropagation();
+            }
           } else if (isClearable && escapeClearsValue) {
             _this.clearValue();
           }
@@ -1359,6 +1364,9 @@ var Select = /*#__PURE__*/function (_Component) {
           "data-testid": testId && "".concat(testId, "-select--input")
         }, ariaAttributes));
       }
+
+      // NOTE: Don't add the `name` prop to this Input, `name` is already a prop on the hidden input element that has the value of the select.
+      // Adding `name` to this Input will cause unexpected behavior.
       return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",

package/dist/types/select.d.ts

@@ -349,6 +349,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
      */
     openMenuOnClick: boolean;
+    /**
+     * Prevents "Escape" keydown event propagation
+     */
+    shouldPreventEscapePropagation?: boolean;
     /**
      * Array of options that populate the select menu
      */
@@ -461,6 +465,7 @@ export declare const defaultProps: {
     noOptionsMessage: () => string;
     openMenuOnFocus: boolean;
     openMenuOnClick: boolean;
+    shouldPreventEscapePropagation: boolean;
     options: never[];
     pageSize: number;
     placeholder: string;
@@ -540,6 +545,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         noOptionsMessage: () => string;
         openMenuOnFocus: boolean;
         openMenuOnClick: boolean;
+        shouldPreventEscapePropagation: boolean;
         options: never[];
         pageSize: number;
         placeholder: string;

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

@@ -349,6 +349,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
      */
     openMenuOnClick: boolean;
+    /**
+     * Prevents "Escape" keydown event propagation
+     */
+    shouldPreventEscapePropagation?: boolean;
     /**
      * Array of options that populate the select menu
      */
@@ -461,6 +465,7 @@ export declare const defaultProps: {
     noOptionsMessage: () => string;
     openMenuOnFocus: boolean;
     openMenuOnClick: boolean;
+    shouldPreventEscapePropagation: boolean;
     options: never[];
     pageSize: number;
     placeholder: string;
@@ -540,6 +545,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         noOptionsMessage: () => string;
         openMenuOnFocus: boolean;
         openMenuOnClick: boolean;
+        shouldPreventEscapePropagation: boolean;
         options: never[];
         pageSize: number;
         placeholder: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.4.5",
+	"version": "3.5.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,12 +29,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.11.0",
+		"@atlaskit/primitives": "^14.12.0",
 		"@atlaskit/spinner": "^19.0.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@floating-ui/dom": "^1.0.1",
@@ -47,7 +47,7 @@
 	},
 	"devDependencies": {
 		"@atlaskit/checkbox": "^17.1.0",
-		"@atlaskit/form": "^12.1.0",
+		"@atlaskit/form": "^12.2.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",