@atlaskit/react-select 1.7.2 → 1.7.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 1.7.4
+
+### Patch Changes
+
+- [#114436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114436)
+  [`bbcb49e3d0f31`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bbcb49e3d0f31) -
+  Clean up extra testId
+
+## 1.7.3
+
+### Patch Changes
+
+- [#106179](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106179)
+  [`84a6c5a582438`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/84a6c5a582438) -
+  Add support for testId to Select
+
 ## 1.7.2
 
 ### Patch Changes

package/dist/cjs/components/input.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _utils = require("../utils");
-var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
+var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];
 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; } /**
  * @jsxRuntime classic
@@ -68,11 +68,14 @@ var Input = function Input(props) {
     isDisabled = _cleanCommonProps.isDisabled,
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
+    testId = _cleanCommonProps.testId,
     innerProps = (0, _objectWithoutProperties2.default)(_cleanCommonProps, _excluded);
+  var dataId = testId ? "".concat(testId, "-select--input") : null;
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'input', {
     'input-container': true
   }), {
-    "data-value": value || ''
+    "data-value": value || '',
+    "data-testid": dataId && "".concat(dataId, "-container")
   }), (0, _react.jsx)("input", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: cx({
@@ -82,7 +85,8 @@ var Input = function Input(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: inputStyle(isHidden),
-    disabled: isDisabled
+    disabled: isDisabled,
+    "data-testid": dataId
   }, innerProps)));
 };
 

package/dist/cjs/select.js

@@ -1238,7 +1238,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props8.menuIsOpen,
         required = _this$props8.required,
         _this$props8$tabIndex = _this$props8.tabIndex,
-        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex;
+        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex,
+        testId = _this$props8.testId;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1280,7 +1281,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           tabIndex: tabIndex,
           inputMode: "none",
           form: form,
-          value: ""
+          value: "",
+          "data-testid": testId && "".concat(testId, "-select--input")
         }, ariaAttributes));
       }
       return /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({}, commonProps, {
@@ -1288,6 +1290,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         autoComplete: "off",
         autoCorrect: "off",
         id: id,
+        testId: testId,
         innerRef: this.getInputRef,
         isDisabled: isDisabled,
         isHidden: inputIsHidden,
@@ -1318,7 +1321,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         isDisabled = _this$props9.isDisabled,
         isMulti = _this$props9.isMulti,
         inputValue = _this$props9.inputValue,
-        placeholder = _this$props9.placeholder;
+        placeholder = _this$props9.placeholder,
+        testId = _this$props9.testId;
       var _this$state5 = this.state,
         selectValue = _this$state5.selectValue,
         focusedValue = _this$state5.focusedValue,
@@ -1328,9 +1332,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
-          innerProps: {
+          innerProps: _objectSpread({
             id: this.getElementId('placeholder')
-          }
+          }, testId && {
+            'data-testid': "".concat(testId, "-select--placeholder")
+          })
         }), placeholder);
       }
       if (isMulti) {
@@ -1358,7 +1364,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
                 e.preventDefault();
               }
             },
-            data: opt
+            data: opt,
+            innerProps: _objectSpread({}, testId && {
+              'data-testid': "".concat(testId, "-select--multivalue")
+            })
           }), _this3.formatOptionLabel(opt, 'value'));
         });
       }
@@ -1381,15 +1390,18 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         clearControlLabel = _this$props10.clearControlLabel,
         isDisabled = _this$props10.isDisabled,
         isLoading = _this$props10.isLoading,
-        spacing = _this$props10.spacing;
+        spacing = _this$props10.spacing,
+        testId = _this$props10.testId;
       var isFocused = this.state.isFocused;
       if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
         return null;
       }
-      var innerProps = {
+      var innerProps = _objectSpread({
         onMouseDown: this.onClearIndicatorMouseDown,
         onTouchEnd: this.onClearIndicatorTouchEnd
-      };
+      }, testId && {
+        'data-testid': "".concat(testId, "-select--clear-indicator")
+      });
       var isCompact = spacing === 'compact';
       return /*#__PURE__*/_react.default.createElement(ClearIndicator, (0, _extends2.default)({
         clearControlLabel: clearControlLabel
@@ -1408,7 +1420,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props11 = this.props,
         isDisabled = _this$props11.isDisabled,
         isLoading = _this$props11.isLoading,
-        spacing = _this$props11.spacing;
+        spacing = _this$props11.spacing,
+        testId = _this$props11.testId;
       var isFocused = this.state.isFocused;
       if (!LoadingIndicator || !isLoading) {
         return null;
@@ -1417,7 +1430,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/_react.default.createElement(LoadingIndicator, (0, _extends2.default)({}, commonProps, {
+      return /*#__PURE__*/_react.default.createElement(LoadingIndicator, (0, _extends2.default)({
+        "data-testid": testId && "".concat(testId, "-select--loading-indicator")
+      }, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused,
@@ -1435,14 +1450,17 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var _this$props12 = this.props,
         isDisabled = _this$props12.isDisabled,
-        spacing = _this$props12.spacing;
+        spacing = _this$props12.spacing,
+        testId = _this$props12.testId;
       var isFocused = this.state.isFocused;
       var isCompact = spacing === 'compact';
-      var innerProps = {
+      var innerProps = _objectSpread({
         onMouseDown: this.onDropdownIndicatorMouseDown,
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
-      };
+      }, testId && {
+        'data-testid': "".concat(testId, "-select--dropdown-indicator")
+      });
       return /*#__PURE__*/_react.default.createElement(DropdownIndicator, (0, _extends2.default)({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
@@ -1482,7 +1500,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         onMenuScrollToTop = _this$props13.onMenuScrollToTop,
         onMenuScrollToBottom = _this$props13.onMenuScrollToBottom,
         labelId = _this$props13.labelId,
-        label = _this$props13.label;
+        label = _this$props13.label,
+        testId = _this$props13.testId;
       if (!menuIsOpen) {
         return null;
       }
@@ -1503,7 +1522,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           return _this4.selectOption(data);
         };
         var optionId = "".concat(_this4.getElementId('option'), "-").concat(id);
-        var innerProps = {
+        var innerProps = _objectSpread({
           id: optionId,
           onClick: onSelect,
           onMouseMove: onHover,
@@ -1514,7 +1533,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
           'aria-disabled': ((0, _deviceCheck.isAppleDevice)() || !isDisabled) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
-        };
+        }, testId && {
+          'data-testid': "".concat(testId, "-select--option-").concat(id)
+        });
         return /*#__PURE__*/_react.default.createElement(Option, (0, _extends2.default)({}, commonProps, {
           innerProps: innerProps,
           data: data,
@@ -1543,10 +1564,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               data: data,
               options: options,
               Heading: GroupHeading,
-              headingProps: {
+              headingProps: _objectSpread({
                 id: headingId,
                 data: item.data
-              },
+              }, testId && {
+                'data-testid': "".concat(testId, "-select--group-").concat(groupIndex, "-heading")
+              }),
               label: _this4.formatGroupLabel(item.data)
             }), item.options.map(function (option) {
               return render(option, "".concat(groupIndex, "-").concat(option.index), headingId);
@@ -1570,7 +1593,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         if (_message === null) {
           return null;
         }
-        menuUI = /*#__PURE__*/_react.default.createElement(NoOptionsMessage, commonProps, _message);
+        menuUI = /*#__PURE__*/_react.default.createElement(NoOptionsMessage, (0, _extends2.default)({}, commonProps, {
+          innerProps: _objectSpread({}, testId && {
+            'data-testid': "".concat(testId, "-select--no-options")
+          })
+        }), _message);
       }
       var menuPlacementProps = {
         minMenuHeight: minMenuHeight,
@@ -1586,11 +1613,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           maxHeight = _ref4$placerProps.maxHeight;
         return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({}, commonProps, menuPlacementProps, {
           innerRef: ref,
-          innerProps: {
+          innerProps: _objectSpread({
             onMouseDown: _this4.onMenuMouseDown,
             onMouseMove: _this4.onMenuMouseMove,
             id: _this4.props.components.Menu ? _this4.getElementId('listbox') : undefined
-          },
+          }, testId && {
+            'data-testid': "".concat(testId, "-select--listbox-container")
+          }),
           isLoading: isLoading,
           placement: placement
         }), /*#__PURE__*/_react.default.createElement(_internal.ScrollManager, {
@@ -1605,11 +1634,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
-            innerProps: _objectSpread({
+            innerProps: _objectSpread(_objectSpread({
               role: 'listbox',
               'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
-            }, (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
+            }, testId && {
+              'data-testid': "".concat(testId, "-select--listbox")
+            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
               'aria-label': label,
               'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _deviceCheck.isSafari)() ? _this4.getElementId('multi-message') : '')
             }),
@@ -1732,6 +1763,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         isDisabled = _this$props15.isDisabled,
         menuIsOpen = _this$props15.menuIsOpen,
         isInvalid = _this$props15.isInvalid,
+        testId = _this$props15.testId,
         _this$props15$appeara = _this$props15.appearance,
         appearance = _this$props15$appeara === void 0 ? 'default' : _this$props15$appeara,
         _this$props15$spacing = _this$props15.spacing,
@@ -1742,18 +1774,22 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(SelectContainer, (0, _extends2.default)({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
-        innerProps: {
+        innerProps: _objectSpread({
           id: id,
           onKeyDown: this.onKeyDown
-        },
+        }, testId && {
+          'data-testid': testId && "".concat(testId, "-select--container")
+        }),
         isDisabled: isDisabled,
         isFocused: isFocused
       }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/_react.default.createElement(Control, (0, _extends2.default)({}, commonProps, {
         innerRef: this.getControlRef,
-        innerProps: {
+        innerProps: _objectSpread({
           onMouseDown: this.onControlMouseDown,
           onTouchEnd: this.onControlTouchEnd
-        },
+        }, testId && {
+          'data-testid': "".concat(testId, "-select--control")
+        }),
         appearance: appearance,
         isInvalid: isInvalid,
         isDisabled: isDisabled,
@@ -1762,9 +1798,15 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         isCompact: isCompact
       }), /*#__PURE__*/_react.default.createElement(ValueContainer, (0, _extends2.default)({}, commonProps, {
         isDisabled: isDisabled,
-        isCompact: isCompact
+        isCompact: isCompact,
+        innerProps: _objectSpread({}, testId && {
+          'data-testid': "".concat(testId, "-select--value-container")
+        })
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/_react.default.createElement(IndicatorsContainer, (0, _extends2.default)({}, commonProps, {
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        innerProps: _objectSpread({}, testId && {
+          'data-testid': "".concat(testId, "-select--indicators-container")
+        })
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
   }], [{

package/dist/es2019/components/input.js

@@ -59,12 +59,15 @@ const Input = props => {
     isDisabled,
     isHidden,
     inputClassName,
+    testId,
     ...innerProps
   } = cleanCommonProps(props);
+  const dataId = testId ? `${testId}-select--input` : null;
   return jsx("div", _extends({}, getStyleProps(props, 'input', {
     'input-container': true
   }), {
-    "data-value": value || ''
+    "data-value": value || '',
+    "data-testid": dataId && `${dataId}-container`
   }), jsx("input", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: cx({
@@ -74,7 +77,8 @@ const Input = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: inputStyle(isHidden),
-    disabled: isDisabled
+    disabled: isDisabled,
+    "data-testid": dataId
   }, innerProps)));
 };
 

package/dist/es2019/select.js

@@ -1243,7 +1243,8 @@ export default class Select extends Component {
       labelId,
       menuIsOpen,
       required,
-      tabIndex = 0
+      tabIndex = 0,
+      testId
     } = this.props;
     const {
       Input
@@ -1294,7 +1295,8 @@ export default class Select extends Component {
         tabIndex: tabIndex,
         inputMode: "none",
         form: form,
-        value: ""
+        value: "",
+        "data-testid": testId && `${testId}-select--input`
       }, ariaAttributes));
     }
     return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
@@ -1302,6 +1304,7 @@ export default class Select extends Component {
       autoComplete: "off",
       autoCorrect: "off",
       id: id,
+      testId: testId,
       innerRef: this.getInputRef,
       isDisabled: isDisabled,
       isHidden: inputIsHidden,
@@ -1332,7 +1335,8 @@ export default class Select extends Component {
       isDisabled,
       isMulti,
       inputValue,
-      placeholder
+      placeholder,
+      testId
     } = this.props;
     const {
       selectValue,
@@ -1345,7 +1349,10 @@ export default class Select extends Component {
         isDisabled: isDisabled,
         isFocused: isFocused,
         innerProps: {
-          id: this.getElementId('placeholder')
+          id: this.getElementId('placeholder'),
+          ...(testId && {
+            'data-testid': `${testId}-select--placeholder`
+          })
         }
       }), placeholder);
     }
@@ -1370,7 +1377,12 @@ export default class Select extends Component {
               e.preventDefault();
             }
           },
-          data: opt
+          data: opt,
+          innerProps: {
+            ...(testId && {
+              'data-testid': `${testId}-select--multivalue`
+            })
+          }
         }), this.formatOptionLabel(opt, 'value'));
       });
     }
@@ -1394,7 +1406,8 @@ export default class Select extends Component {
       clearControlLabel,
       isDisabled,
       isLoading,
-      spacing
+      spacing,
+      testId
     } = this.props;
     const {
       isFocused
@@ -1404,7 +1417,10 @@ export default class Select extends Component {
     }
     const innerProps = {
       onMouseDown: this.onClearIndicatorMouseDown,
-      onTouchEnd: this.onClearIndicatorTouchEnd
+      onTouchEnd: this.onClearIndicatorTouchEnd,
+      ...(testId && {
+        'data-testid': `${testId}-select--clear-indicator`
+      })
     };
     const isCompact = spacing === 'compact';
     return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
@@ -1425,7 +1441,8 @@ export default class Select extends Component {
     const {
       isDisabled,
       isLoading,
-      spacing
+      spacing,
+      testId
     } = this.props;
     const {
       isFocused
@@ -1437,7 +1454,9 @@ export default class Select extends Component {
     const innerProps = {
       'aria-hidden': 'true'
     };
-    return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
+    return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
+      "data-testid": testId && `${testId}-select--loading-indicator`
+    }, commonProps, {
       innerProps: innerProps,
       isDisabled: isDisabled,
       isFocused: isFocused,
@@ -1456,7 +1475,8 @@ export default class Select extends Component {
     } = this;
     const {
       isDisabled,
-      spacing
+      spacing,
+      testId
     } = this.props;
     const {
       isFocused
@@ -1465,7 +1485,10 @@ export default class Select extends Component {
     const innerProps = {
       onMouseDown: this.onDropdownIndicatorMouseDown,
       onTouchEnd: this.onDropdownIndicatorTouchEnd,
-      'aria-hidden': 'true'
+      'aria-hidden': 'true',
+      ...(testId && {
+        'data-testid': `${testId}-select--dropdown-indicator`
+      })
     };
     return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
       innerProps: innerProps,
@@ -1508,7 +1531,8 @@ export default class Select extends Component {
       onMenuScrollToTop,
       onMenuScrollToBottom,
       labelId,
-      label
+      label,
+      testId
     } = this.props;
     if (!menuIsOpen) {
       return null;
@@ -1538,7 +1562,10 @@ export default class Select extends Component {
         'aria-selected': (!commonProps.isMulti || this.isVoiceOver || !isSelected) && fg('design_system_select-a11y-improvement') ? undefined : isSelected,
         // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
         'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
-        'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
+        'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined,
+        ...(testId && {
+          'data-testid': `${testId}-select--option-${id}`
+        })
       };
       return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
         innerProps: innerProps,
@@ -1572,7 +1599,10 @@ export default class Select extends Component {
             Heading: GroupHeading,
             headingProps: {
               id: headingId,
-              data: item.data
+              data: item.data,
+              ...(testId && {
+                'data-testid': `${testId}-select--group-${groupIndex}-heading`
+              })
             },
             label: this.formatGroupLabel(item.data)
           }), item.options.map(option => render(option, `${groupIndex}-${option.index}`, headingId)));
@@ -1595,7 +1625,13 @@ export default class Select extends Component {
       if (message === null) {
         return null;
       }
-      menuUI = /*#__PURE__*/React.createElement(NoOptionsMessage, commonProps, message);
+      menuUI = /*#__PURE__*/React.createElement(NoOptionsMessage, _extends({}, commonProps, {
+        innerProps: {
+          ...(testId && {
+            'data-testid': `${testId}-select--no-options`
+          })
+        }
+      }), message);
     }
     const menuPlacementProps = {
       minMenuHeight,
@@ -1615,7 +1651,10 @@ export default class Select extends Component {
       innerProps: {
         onMouseDown: this.onMenuMouseDown,
         onMouseMove: this.onMenuMouseMove,
-        id: this.props.components.Menu ? this.getElementId('listbox') : undefined
+        id: this.props.components.Menu ? this.getElementId('listbox') : undefined,
+        ...(testId && {
+          'data-testid': `${testId}-select--listbox-container`
+        })
       },
       isLoading: isLoading,
       placement: placement
@@ -1635,6 +1674,9 @@ export default class Select extends Component {
           role: 'listbox',
           'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
           id: this.getElementId('listbox'),
+          ...(testId && {
+            'data-testid': `${testId}-select--listbox`
+          }),
           // add aditional label on listbox when ff is on
           ...(fg('design_system_select-a11y-improvement') && {
             'aria-label': label,
@@ -1753,6 +1795,7 @@ export default class Select extends Component {
       isDisabled,
       menuIsOpen,
       isInvalid,
+      testId,
       appearance = 'default',
       spacing = 'default'
     } = this.props;
@@ -1766,7 +1809,10 @@ export default class Select extends Component {
       className: className,
       innerProps: {
         id: id,
-        onKeyDown: this.onKeyDown
+        onKeyDown: this.onKeyDown,
+        ...(testId && {
+          'data-testid': testId && `${testId}-select--container`
+        })
       },
       isDisabled: isDisabled,
       isFocused: isFocused
@@ -1774,7 +1820,10 @@ export default class Select extends Component {
       innerRef: this.getControlRef,
       innerProps: {
         onMouseDown: this.onControlMouseDown,
-        onTouchEnd: this.onControlTouchEnd
+        onTouchEnd: this.onControlTouchEnd,
+        ...(testId && {
+          'data-testid': `${testId}-select--control`
+        })
       },
       appearance: appearance,
       isInvalid: isInvalid,
@@ -1784,9 +1833,19 @@ export default class Select extends Component {
       isCompact: isCompact
     }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
       isDisabled: isDisabled,
-      isCompact: isCompact
+      isCompact: isCompact,
+      innerProps: {
+        ...(testId && {
+          'data-testid': `${testId}-select--value-container`
+        })
+      }
     }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      innerProps: {
+        ...(testId && {
+          'data-testid': `${testId}-select--indicators-container`
+        })
+      }
     }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
   }
 }

package/dist/esm/components/input.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
+var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];
 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) { _defineProperty(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; }
 /**
@@ -63,11 +63,14 @@ var Input = function Input(props) {
     isDisabled = _cleanCommonProps.isDisabled,
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
+    testId = _cleanCommonProps.testId,
     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
+  var dataId = testId ? "".concat(testId, "-select--input") : null;
   return jsx("div", _extends({}, getStyleProps(props, 'input', {
     'input-container': true
   }), {
-    "data-value": value || ''
+    "data-value": value || '',
+    "data-testid": dataId && "".concat(dataId, "-container")
   }), jsx("input", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: cx({
@@ -77,7 +80,8 @@ var Input = function Input(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: inputStyle(isHidden),
-    disabled: isDisabled
+    disabled: isDisabled,
+    "data-testid": dataId
   }, innerProps)));
 };
 

package/dist/esm/select.js

@@ -1229,7 +1229,8 @@ var Select = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props8.menuIsOpen,
         required = _this$props8.required,
         _this$props8$tabIndex = _this$props8.tabIndex,
-        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex;
+        tabIndex = _this$props8$tabIndex === void 0 ? 0 : _this$props8$tabIndex,
+        testId = _this$props8.testId;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
       var _this$state4 = this.state,
@@ -1271,7 +1272,8 @@ var Select = /*#__PURE__*/function (_Component) {
           tabIndex: tabIndex,
           inputMode: "none",
           form: form,
-          value: ""
+          value: "",
+          "data-testid": testId && "".concat(testId, "-select--input")
         }, ariaAttributes));
       }
       return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
@@ -1279,6 +1281,7 @@ var Select = /*#__PURE__*/function (_Component) {
         autoComplete: "off",
         autoCorrect: "off",
         id: id,
+        testId: testId,
         innerRef: this.getInputRef,
         isDisabled: isDisabled,
         isHidden: inputIsHidden,
@@ -1309,7 +1312,8 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled = _this$props9.isDisabled,
         isMulti = _this$props9.isMulti,
         inputValue = _this$props9.inputValue,
-        placeholder = _this$props9.placeholder;
+        placeholder = _this$props9.placeholder,
+        testId = _this$props9.testId;
       var _this$state5 = this.state,
         selectValue = _this$state5.selectValue,
         focusedValue = _this$state5.focusedValue,
@@ -1319,9 +1323,11 @@ var Select = /*#__PURE__*/function (_Component) {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
-          innerProps: {
+          innerProps: _objectSpread({
             id: this.getElementId('placeholder')
-          }
+          }, testId && {
+            'data-testid': "".concat(testId, "-select--placeholder")
+          })
         }), placeholder);
       }
       if (isMulti) {
@@ -1349,7 +1355,10 @@ var Select = /*#__PURE__*/function (_Component) {
                 e.preventDefault();
               }
             },
-            data: opt
+            data: opt,
+            innerProps: _objectSpread({}, testId && {
+              'data-testid': "".concat(testId, "-select--multivalue")
+            })
           }), _this3.formatOptionLabel(opt, 'value'));
         });
       }
@@ -1372,15 +1381,18 @@ var Select = /*#__PURE__*/function (_Component) {
         clearControlLabel = _this$props10.clearControlLabel,
         isDisabled = _this$props10.isDisabled,
         isLoading = _this$props10.isLoading,
-        spacing = _this$props10.spacing;
+        spacing = _this$props10.spacing,
+        testId = _this$props10.testId;
       var isFocused = this.state.isFocused;
       if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
         return null;
       }
-      var innerProps = {
+      var innerProps = _objectSpread({
         onMouseDown: this.onClearIndicatorMouseDown,
         onTouchEnd: this.onClearIndicatorTouchEnd
-      };
+      }, testId && {
+        'data-testid': "".concat(testId, "-select--clear-indicator")
+      });
       var isCompact = spacing === 'compact';
       return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
         clearControlLabel: clearControlLabel
@@ -1399,7 +1411,8 @@ var Select = /*#__PURE__*/function (_Component) {
       var _this$props11 = this.props,
         isDisabled = _this$props11.isDisabled,
         isLoading = _this$props11.isLoading,
-        spacing = _this$props11.spacing;
+        spacing = _this$props11.spacing,
+        testId = _this$props11.testId;
       var isFocused = this.state.isFocused;
       if (!LoadingIndicator || !isLoading) {
         return null;
@@ -1408,7 +1421,9 @@ var Select = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
+        "data-testid": testId && "".concat(testId, "-select--loading-indicator")
+      }, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused,
@@ -1426,14 +1441,17 @@ var Select = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var _this$props12 = this.props,
         isDisabled = _this$props12.isDisabled,
-        spacing = _this$props12.spacing;
+        spacing = _this$props12.spacing,
+        testId = _this$props12.testId;
       var isFocused = this.state.isFocused;
       var isCompact = spacing === 'compact';
-      var innerProps = {
+      var innerProps = _objectSpread({
         onMouseDown: this.onDropdownIndicatorMouseDown,
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
-      };
+      }, testId && {
+        'data-testid': "".concat(testId, "-select--dropdown-indicator")
+      });
       return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
@@ -1473,7 +1491,8 @@ var Select = /*#__PURE__*/function (_Component) {
         onMenuScrollToTop = _this$props13.onMenuScrollToTop,
         onMenuScrollToBottom = _this$props13.onMenuScrollToBottom,
         labelId = _this$props13.labelId,
-        label = _this$props13.label;
+        label = _this$props13.label,
+        testId = _this$props13.testId;
       if (!menuIsOpen) {
         return null;
       }
@@ -1494,7 +1513,7 @@ var Select = /*#__PURE__*/function (_Component) {
           return _this4.selectOption(data);
         };
         var optionId = "".concat(_this4.getElementId('option'), "-").concat(id);
-        var innerProps = {
+        var innerProps = _objectSpread({
           id: optionId,
           onClick: onSelect,
           onMouseMove: onHover,
@@ -1505,7 +1524,9 @@ var Select = /*#__PURE__*/function (_Component) {
           // We don't want aria-disabled on Apple devices or if it's false. It's just noisy.
           'aria-disabled': (isAppleDevice() || !isDisabled) && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
-        };
+        }, testId && {
+          'data-testid': "".concat(testId, "-select--option-").concat(id)
+        });
         return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
           innerProps: innerProps,
           data: data,
@@ -1534,10 +1555,12 @@ var Select = /*#__PURE__*/function (_Component) {
               data: data,
               options: options,
               Heading: GroupHeading,
-              headingProps: {
+              headingProps: _objectSpread({
                 id: headingId,
                 data: item.data
-              },
+              }, testId && {
+                'data-testid': "".concat(testId, "-select--group-").concat(groupIndex, "-heading")
+              }),
               label: _this4.formatGroupLabel(item.data)
             }), item.options.map(function (option) {
               return render(option, "".concat(groupIndex, "-").concat(option.index), headingId);
@@ -1561,7 +1584,11 @@ var Select = /*#__PURE__*/function (_Component) {
         if (_message === null) {
           return null;
         }
-        menuUI = /*#__PURE__*/React.createElement(NoOptionsMessage, commonProps, _message);
+        menuUI = /*#__PURE__*/React.createElement(NoOptionsMessage, _extends({}, commonProps, {
+          innerProps: _objectSpread({}, testId && {
+            'data-testid': "".concat(testId, "-select--no-options")
+          })
+        }), _message);
       }
       var menuPlacementProps = {
         minMenuHeight: minMenuHeight,
@@ -1577,11 +1604,13 @@ var Select = /*#__PURE__*/function (_Component) {
           maxHeight = _ref4$placerProps.maxHeight;
         return /*#__PURE__*/React.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
           innerRef: ref,
-          innerProps: {
+          innerProps: _objectSpread({
             onMouseDown: _this4.onMenuMouseDown,
             onMouseMove: _this4.onMenuMouseMove,
             id: _this4.props.components.Menu ? _this4.getElementId('listbox') : undefined
-          },
+          }, testId && {
+            'data-testid': "".concat(testId, "-select--listbox-container")
+          }),
           isLoading: isLoading,
           placement: placement
         }), /*#__PURE__*/React.createElement(ScrollManager, {
@@ -1596,11 +1625,13 @@ var Select = /*#__PURE__*/function (_Component) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
-            innerProps: _objectSpread({
+            innerProps: _objectSpread(_objectSpread({
               role: 'listbox',
               'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
-            }, fg('design_system_select-a11y-improvement') && {
+            }, testId && {
+              'data-testid': "".concat(testId, "-select--listbox")
+            }), fg('design_system_select-a11y-improvement') && {
               'aria-label': label,
               'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
             }),
@@ -1723,6 +1754,7 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled = _this$props15.isDisabled,
         menuIsOpen = _this$props15.menuIsOpen,
         isInvalid = _this$props15.isInvalid,
+        testId = _this$props15.testId,
         _this$props15$appeara = _this$props15.appearance,
         appearance = _this$props15$appeara === void 0 ? 'default' : _this$props15$appeara,
         _this$props15$spacing = _this$props15.spacing,
@@ -1733,18 +1765,22 @@ var Select = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
-        innerProps: {
+        innerProps: _objectSpread({
           id: id,
           onKeyDown: this.onKeyDown
-        },
+        }, testId && {
+          'data-testid': testId && "".concat(testId, "-select--container")
+        }),
         isDisabled: isDisabled,
         isFocused: isFocused
       }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
         innerRef: this.getControlRef,
-        innerProps: {
+        innerProps: _objectSpread({
           onMouseDown: this.onControlMouseDown,
           onTouchEnd: this.onControlTouchEnd
-        },
+        }, testId && {
+          'data-testid': "".concat(testId, "-select--control")
+        }),
         appearance: appearance,
         isInvalid: isInvalid,
         isDisabled: isDisabled,
@@ -1753,9 +1789,15 @@ var Select = /*#__PURE__*/function (_Component) {
         isCompact: isCompact
       }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
         isDisabled: isDisabled,
-        isCompact: isCompact
+        isCompact: isCompact,
+        innerProps: _objectSpread({}, testId && {
+          'data-testid': "".concat(testId, "-select--value-container")
+        })
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        innerProps: _objectSpread({}, testId && {
+          'data-testid': "".concat(testId, "-select--indicators-container")
+        })
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
   }], [{

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

@@ -18,7 +18,7 @@ export interface ContainerProps<Option = unknown, IsMulti extends boolean = bool
     /**
      * Inner props to be passed down to the container.
      */
-    innerProps: JSX.IntrinsicElements['div'];
+    innerProps: {};
 }
 export declare const containerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isRtl, }: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
@@ -26,7 +26,7 @@ export interface ValueContainerProps<Option = unknown, IsMulti extends boolean =
     /**
      * Props to be passed to the value container element.
      */
-    innerProps?: JSX.IntrinsicElements['div'];
+    innerProps?: {};
     /**
      * The children to be rendered.
      */

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

@@ -14,7 +14,7 @@ export interface ControlProps<Option = unknown, IsMulti extends boolean = boolea
     /**
      * The mouse down event and the innerRef to pass down to the controller element.
      */
-    innerProps: JSX.IntrinsicElements['div'];
+    innerProps: {};
     /**
      * Whether the select is disabled.
      */

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

@@ -26,6 +26,10 @@ export interface InputSpecificProps<Option = unknown, IsMulti extends boolean =
      * Set className for the input element
      */
     inputClassName?: string;
+    /**
+     * A testId prop is provided for specific elements. This is a unique string that appears as a data attribute data-testid in the rendered code and serves as a hook for automated tests.
+     */
+    testId?: string;
 }
 export type InputProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = InputSpecificProps<Option, IsMulti, Group>;
 export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, }: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel;

package/dist/types/select.d.ts

@@ -383,6 +383,26 @@ 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 handled automatically to support expected keyboard accessibility.
      */
     tabSelectsValue: boolean;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     * Use this instead of using ARIA properties as locators.
+     *
+     * - Container: `${testId}-select--container`
+     * - Control : `${testId}-select--control`
+     * - Value container: `${testId}-select--value-container`
+     * - Placeholder: `${testId}-select--placeholder`
+     * - Input container: `${testId}-select--input-container`
+     * - Input: `${testId}-select--input`
+     * - Indicators container: `${testId}-select--indicators-container`
+     * - Dropdown indicator: `${testId}-select--dropdown-indicator`
+     * - Clear indicator: `${testId}-select--clear-indicator`
+     * - Loading indicator: `${testId}-select--loading-indicator`
+     * - Listbox container: `${testId}-select--listbox-container`
+     * - Listbox: `${testId}-select--listbox`
+     * - Option group heading: `${testId}-select--group-${groupIndex}-heading`
+     * - Option: `${testId}-select--option-${id}`
+     */
+    testId?: string;
     /**
      * The value of the select; reflected by the selected option
      */
@@ -664,16 +684,16 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     shouldHideSelectedOptions: () => boolean;
     onValueInputFocus: FocusEventHandler;
     onKeyDown: KeyboardEventHandler<HTMLDivElement>;
-    renderInput(): JSX.Element;
-    renderPlaceholderOrValue(): JSX.Element | JSX.Element[] | null;
-    renderClearIndicator(): JSX.Element | null;
-    renderLoadingIndicator(): JSX.Element | null;
-    renderDropdownIndicator(): JSX.Element | null;
-    renderMenu(): JSX.Element | null;
-    renderFormField(): JSX.Element | undefined;
-    renderLiveRegion(): JSX.Element;
-    renderMultiselectMessage(): JSX.Element;
-    render(): JSX.Element;
+    renderInput(): React.JSX.Element;
+    renderPlaceholderOrValue(): React.JSX.Element | React.JSX.Element[] | null;
+    renderClearIndicator(): React.JSX.Element | null;
+    renderLoadingIndicator(): React.JSX.Element | null;
+    renderDropdownIndicator(): React.JSX.Element | null;
+    renderMenu(): React.JSX.Element | null;
+    renderFormField(): React.JSX.Element | undefined;
+    renderLiveRegion(): React.JSX.Element;
+    renderMultiselectMessage(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;
 export {};

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

@@ -18,7 +18,7 @@ export interface ContainerProps<Option = unknown, IsMulti extends boolean = bool
     /**
      * Inner props to be passed down to the container.
      */
-    innerProps: JSX.IntrinsicElements['div'];
+    innerProps: {};
 }
 export declare const containerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isRtl, }: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
@@ -26,7 +26,7 @@ export interface ValueContainerProps<Option = unknown, IsMulti extends boolean =
     /**
      * Props to be passed to the value container element.
      */
-    innerProps?: JSX.IntrinsicElements['div'];
+    innerProps?: {};
     /**
      * The children to be rendered.
      */

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

@@ -14,7 +14,7 @@ export interface ControlProps<Option = unknown, IsMulti extends boolean = boolea
     /**
      * The mouse down event and the innerRef to pass down to the controller element.
      */
-    innerProps: JSX.IntrinsicElements['div'];
+    innerProps: {};
     /**
      * Whether the select is disabled.
      */

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

@@ -26,6 +26,10 @@ export interface InputSpecificProps<Option = unknown, IsMulti extends boolean =
      * Set className for the input element
      */
     inputClassName?: string;
+    /**
+     * A testId prop is provided for specific elements. This is a unique string that appears as a data attribute data-testid in the rendered code and serves as a hook for automated tests.
+     */
+    testId?: string;
 }
 export type InputProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = InputSpecificProps<Option, IsMulti, Group>;
 export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, }: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel;

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

@@ -383,6 +383,26 @@ 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 handled automatically to support expected keyboard accessibility.
      */
     tabSelectsValue: boolean;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     * Use this instead of using ARIA properties as locators.
+     *
+     * - Container: `${testId}-select--container`
+     * - Control : `${testId}-select--control`
+     * - Value container: `${testId}-select--value-container`
+     * - Placeholder: `${testId}-select--placeholder`
+     * - Input container: `${testId}-select--input-container`
+     * - Input: `${testId}-select--input`
+     * - Indicators container: `${testId}-select--indicators-container`
+     * - Dropdown indicator: `${testId}-select--dropdown-indicator`
+     * - Clear indicator: `${testId}-select--clear-indicator`
+     * - Loading indicator: `${testId}-select--loading-indicator`
+     * - Listbox container: `${testId}-select--listbox-container`
+     * - Listbox: `${testId}-select--listbox`
+     * - Option group heading: `${testId}-select--group-${groupIndex}-heading`
+     * - Option: `${testId}-select--option-${id}`
+     */
+    testId?: string;
     /**
      * The value of the select; reflected by the selected option
      */
@@ -664,16 +684,16 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     shouldHideSelectedOptions: () => boolean;
     onValueInputFocus: FocusEventHandler;
     onKeyDown: KeyboardEventHandler<HTMLDivElement>;
-    renderInput(): JSX.Element;
-    renderPlaceholderOrValue(): JSX.Element | JSX.Element[] | null;
-    renderClearIndicator(): JSX.Element | null;
-    renderLoadingIndicator(): JSX.Element | null;
-    renderDropdownIndicator(): JSX.Element | null;
-    renderMenu(): JSX.Element | null;
-    renderFormField(): JSX.Element | undefined;
-    renderLiveRegion(): JSX.Element;
-    renderMultiselectMessage(): JSX.Element;
-    render(): JSX.Element;
+    renderInput(): React.JSX.Element;
+    renderPlaceholderOrValue(): React.JSX.Element | React.JSX.Element[] | null;
+    renderClearIndicator(): React.JSX.Element | null;
+    renderLoadingIndicator(): React.JSX.Element | null;
+    renderDropdownIndicator(): React.JSX.Element | null;
+    renderMenu(): React.JSX.Element | null;
+    renderFormField(): React.JSX.Element | undefined;
+    renderLiveRegion(): React.JSX.Element;
+    renderMultiselectMessage(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.7.2",
+	"version": "1.7.4",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,9 +30,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.5.0",
-		"@atlaskit/icon": "^23.6.0",
+		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/spinner": "^17.1.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -50,6 +50,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"jest-in-case": "^1.0.2",