@atlaskit/react-select 1.4.0 → 1.4.2

package/dist/cjs/components/option.js

@@ -7,7 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.optionCSS = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _helpers = require("../accessibility/helpers");
 var _utils = require("../utils");
+var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -16,24 +19,45 @@ var _utils = require("../utils");
 var optionCSS = exports.optionCSS = function optionCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    isSelected = _ref.isSelected,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
+    isSelected = _ref.isSelected;
+  var color = "var(--ds-text, #172B4D)";
+  if (isDisabled) {
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isSelected) {
+    color = "var(--ds-text-selected, #0C66E4)";
+  }
+  var boxShadow;
+  var backgroundColor;
+  if (isDisabled) {
+    backgroundColor = undefined;
+  } else if (isSelected && isFocused) {
+    backgroundColor = "var(--ds-background-selected-hovered, #CCE0FF)";
+  } else if (isSelected) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-neutral-subtle-hovered, #091E420F)";
+  }
+  if (!isDisabled && (isFocused || isSelected)) {
+    boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, #0C66E4)");
+  }
+  var cursor = isDisabled ? 'not-allowed' : 'default';
   return {
     label: 'option',
-    cursor: 'default',
     display: 'block',
     fontSize: 'inherit',
     width: '100%',
     userSelect: 'none',
     WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-    backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
-    color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
-    padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
-    // provide some affordance on touch devices
+    padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
+    backgroundColor: backgroundColor,
+    color: color,
+    cursor: cursor,
+    boxShadow: boxShadow,
     ':active': {
-      backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
+      backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, #85B8FF)" : "var(--ds-background-neutral-subtle-pressed, #091E4224)" : undefined
+    },
+    '@media screen and (-ms-high-contrast: active)': {
+      borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
     }
   };
 };
@@ -44,17 +68,18 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var isVoiceOver = (0, _helpers.isAppleDevice)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement');
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
     'option--is-selected': isSelected
   }), {
-    ref: innerRef,
-    "aria-disabled": isDisabled
+    ref: innerRef
   }, innerProps, {
     tabIndex: -1
-  }), children);
+  }), children, isVoiceOver && (isSelected || isDisabled) && (0, _react.jsx)(_a11yText.default, null, "".concat(isSelected ? ',selected' : '').concat(isDisabled ? ',dimmed' : '')));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/placeholder.js

@@ -14,15 +14,12 @@ var _utils = require("../utils");
  */
 
 var placeholderCSS = exports.placeholderCSS = function placeholderCSS(_ref) {
-  var _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
+  var isDisabled = _ref.isDisabled;
   return {
     label: 'placeholder',
     gridArea: '1 / 1 / 2 / 3',
-    color: colors.neutral50,
-    marginLeft: spacing.baseUnit / 2,
-    marginRight: spacing.baseUnit / 2
+    margin: "0 ".concat("var(--ds-space-025, 2px)"),
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtlest, #626F86)"
   };
 };
 var Placeholder = function Placeholder(props) {

package/dist/cjs/components/single-value.js

@@ -15,9 +15,7 @@ var _utils = require("../utils");
 
 var css = exports.css = function css(_ref) {
   var isDisabled = _ref.isDisabled,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
+    spacing = _ref.theme.spacing;
   return {
     label: 'singleValue',
     gridArea: '1 / 1 / 2 / 3',
@@ -25,9 +23,8 @@ var css = exports.css = function css(_ref) {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    color: isDisabled ? colors.neutral40 : colors.neutral80,
-    marginLeft: spacing.baseUnit / 2,
-    marginRight: spacing.baseUnit / 2
+    margin: "0 ".concat("var(--ds-space-025, 2px)"),
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text, #172B4D)"
   };
 };
 var SingleValue = function SingleValue(props) {

package/dist/cjs/select.js

@@ -32,9 +32,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 var defaultProps = exports.defaultProps = {
-  'aria-live': 'polite',
+  // aria-live is by default with the live region so we don't need it
+  'aria-live': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: (0, _utils.isTouchCapable)(),
   captureMenuScroll: !(0, _utils.isTouchCapable)(),
@@ -258,7 +259,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialTouchY", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openAfterFocus", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollToFocusedOptionOnUpdate", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isAppleDevice", (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? (0, _helpers.isSafari)() : (0, _helpers.isAppleDevice)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isVoiceOver", (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _helpers.isAppleDevice)());
     // Refs
     // ------------------------------
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "controlRef", null);
@@ -759,6 +760,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               prevInputValue: inputValue
             });
             _this.onMenuClose();
+            (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && event.stopPropagation(); // keep ESC on select from dismissing parent layers
           } else if (isClearable && escapeClearsValue) {
             _this.clearValue();
           }
@@ -1162,6 +1164,27 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     value: function formatGroupLabel(data) {
       return this.props.formatGroupLabel(data);
     }
+  }, {
+    key: "calculateDescription",
+    value: function calculateDescription(action) {
+      var descriptionProp = this.props['aria-describedby'] || this.props['descriptionId'];
+      var isMulti = this.props.isMulti;
+      var selectValue = this.state.selectValue;
+      var defaultDescription = selectValue.length ? this.getElementId('live-region') : this.getElementId('placeholder');
+      if (selectValue.length && action !== 'initial-input-focus') {
+        return;
+      }
+      if (isMulti && (0, _helpers.isAppleDevice)() && !(0, _helpers.isSafari)()) {
+        // chrome only friends
+        return {
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription, this.getElementId('multi-message')].join(' ') : [defaultDescription, this.getElementId('multi-message')].join(' ')
+        };
+      } else {
+        return {
+          'aria-describedby': descriptionProp ? [descriptionProp, defaultDescription].join(' ') : defaultDescription
+        };
+      }
+    }
   }, {
     key: "startListeningComposition",
     value:
@@ -1245,30 +1268,28 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
-      var description = this.props['aria-describedby'] || descriptionId;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'both',
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
+        // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
         'aria-haspopup': 'listbox',
-        'aria-describedby': description,
+        'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || undefined,
+        // Safari needs aria-owns in order for aria-activedescendant to work properly
+        'aria-owns': (0, _helpers.isSafari)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? this.getElementId('listbox') : undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
         'aria-readonly': true
-      }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
-      } : {
-        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
-      });
+      }), this.calculateDescription(ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action));
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
         return /*#__PURE__*/_react.default.createElement(_internal.DummyInput, (0, _extends2.default)({
@@ -1381,7 +1402,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props10 = this.props,
         clearControlLabel = _this$props10.clearControlLabel,
         isDisabled = _this$props10.isDisabled,
-        isLoading = _this$props10.isLoading;
+        isLoading = _this$props10.isLoading,
+        spacing = _this$props10.spacing;
       var isFocused = this.state.isFocused;
       if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
         return null;
@@ -1391,11 +1413,13 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
+      var isCompact = spacing === 'compact';
       return /*#__PURE__*/_react.default.createElement(ClearIndicator, (0, _extends2.default)({
         clearControlLabel: clearControlLabel
       }, commonProps, {
         innerProps: innerProps,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1406,18 +1430,21 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var _this$props11 = this.props,
         isDisabled = _this$props11.isDisabled,
-        isLoading = _this$props11.isLoading;
+        isLoading = _this$props11.isLoading,
+        spacing = _this$props11.spacing;
       var isFocused = this.state.isFocused;
       if (!LoadingIndicator || !isLoading) {
         return null;
       }
+      var isCompact = spacing === 'compact';
       var innerProps = {
         'aria-hidden': 'true'
       };
       return /*#__PURE__*/_react.default.createElement(LoadingIndicator, (0, _extends2.default)({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1448,8 +1475,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         return null;
       }
       var commonProps = this.commonProps;
-      var isDisabled = this.props.isDisabled;
+      var _this$props12 = this.props,
+        isDisabled = _this$props12.isDisabled,
+        spacing = _this$props12.spacing;
       var isFocused = this.state.isFocused;
+      var isCompact = spacing === 'compact';
       var innerProps = {
         onMouseDown: this.onDropdownIndicatorMouseDown,
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
@@ -1458,7 +1488,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(DropdownIndicator, (0, _extends2.default)({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
-        isFocused: isFocused
+        isFocused: isFocused,
+        isCompact: isCompact
       }));
     }
   }, {
@@ -1476,24 +1507,24 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         Option = _this$getComponents7.Option;
       var commonProps = this.commonProps;
       var focusedOption = this.state.focusedOption;
-      var _this$props12 = this.props,
-        captureMenuScroll = _this$props12.captureMenuScroll,
-        inputValue = _this$props12.inputValue,
-        isLoading = _this$props12.isLoading,
-        loadingMessage = _this$props12.loadingMessage,
-        minMenuHeight = _this$props12.minMenuHeight,
-        maxMenuHeight = _this$props12.maxMenuHeight,
-        menuIsOpen = _this$props12.menuIsOpen,
-        menuPlacement = _this$props12.menuPlacement,
-        menuPosition = _this$props12.menuPosition,
-        menuPortalTarget = _this$props12.menuPortalTarget,
-        menuShouldBlockScroll = _this$props12.menuShouldBlockScroll,
-        menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView,
-        noOptionsMessage = _this$props12.noOptionsMessage,
-        onMenuScrollToTop = _this$props12.onMenuScrollToTop,
-        onMenuScrollToBottom = _this$props12.onMenuScrollToBottom,
-        labelId = _this$props12.labelId,
-        label = _this$props12.label;
+      var _this$props13 = this.props,
+        captureMenuScroll = _this$props13.captureMenuScroll,
+        inputValue = _this$props13.inputValue,
+        isLoading = _this$props13.isLoading,
+        loadingMessage = _this$props13.loadingMessage,
+        minMenuHeight = _this$props13.minMenuHeight,
+        maxMenuHeight = _this$props13.maxMenuHeight,
+        menuIsOpen = _this$props13.menuIsOpen,
+        menuPlacement = _this$props13.menuPlacement,
+        menuPosition = _this$props13.menuPosition,
+        menuPortalTarget = _this$props13.menuPortalTarget,
+        menuShouldBlockScroll = _this$props13.menuShouldBlockScroll,
+        menuShouldScrollIntoView = _this$props13.menuShouldScrollIntoView,
+        noOptionsMessage = _this$props13.noOptionsMessage,
+        onMenuScrollToTop = _this$props13.onMenuScrollToTop,
+        onMenuScrollToBottom = _this$props13.onMenuScrollToBottom,
+        labelId = _this$props13.labelId,
+        label = _this$props13.label;
       if (!menuIsOpen) {
         return null;
       }
@@ -1520,7 +1551,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onMouseMove: onHover,
           onMouseOver: onHover,
           role: 'option',
-          'aria-selected': !commonProps.isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? isSelected || undefined : isSelected,
+          // We don't want aria-selected on Apple devices or if it's false. It does nasty things.
+          'aria-selected': (!commonProps.isMulti || _this4.isVoiceOver || !isSelected) && (0, _platformFeatureFlags.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': ((0, _helpers.isAppleDevice)() || !isDisabled) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
         };
         return /*#__PURE__*/_react.default.createElement(Option, (0, _extends2.default)({}, commonProps, {
@@ -1614,12 +1648,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             },
             innerProps: _objectSpread({
               role: 'listbox',
-              // don't add aria-multiselectable when ff is on and the value is false
-              'aria-multiselectable': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? commonProps.isMulti || undefined : commonProps.isMulti,
+              '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') && {
               'aria-label': label,
-              'aria-labelledby': labelId
+              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _helpers.isSafari)() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,
@@ -1642,12 +1675,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     key: "renderFormField",
     value: function renderFormField() {
       var _this5 = this;
-      var _this$props13 = this.props,
-        delimiter = _this$props13.delimiter,
-        isDisabled = _this$props13.isDisabled,
-        isMulti = _this$props13.isMulti,
-        required = _this$props13.required,
-        name = _this$props13.name;
+      var _this$props14 = this.props,
+        delimiter = _this$props14.delimiter,
+        isDisabled = _this$props14.isDisabled,
+        isMulti = _this$props14.isMulti,
+        required = _this$props14.required,
+        name = _this$props14.name;
       var selectValue = this.state.selectValue;
       if (required && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/_react.default.createElement(_internal.RequiredInput, {
@@ -1711,9 +1744,17 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         isFocused: isFocused,
         selectValue: selectValue,
         focusableOptions: focusableOptions,
-        isAppleDevice: this.isAppleDevice
+        isAppleDevice: this.isVoiceOver
       }));
     }
+  }, {
+    key: "renderMultiselectMessage",
+    value: function renderMultiselectMessage() {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        id: this.getElementId('multi-message'),
+        hidden: true
+      }, ", multiple selections available,");
+    }
   }, {
     key: "render",
     value: function render() {
@@ -1722,13 +1763,19 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         IndicatorsContainer = _this$getComponents8.IndicatorsContainer,
         SelectContainer = _this$getComponents8.SelectContainer,
         ValueContainer = _this$getComponents8.ValueContainer;
-      var _this$props14 = this.props,
-        className = _this$props14.className,
-        id = _this$props14.id,
-        isDisabled = _this$props14.isDisabled,
-        menuIsOpen = _this$props14.menuIsOpen;
+      var _this$props15 = this.props,
+        className = _this$props15.className,
+        id = _this$props15.id,
+        isDisabled = _this$props15.isDisabled,
+        menuIsOpen = _this$props15.menuIsOpen,
+        isInvalid = _this$props15.isInvalid,
+        _this$props15$appeara = _this$props15.appearance,
+        appearance = _this$props15$appeara === void 0 ? 'default' : _this$props15$appeara,
+        _this$props15$spacing = _this$props15.spacing,
+        spacing = _this$props15$spacing === void 0 ? 'default' : _this$props15$spacing;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
+      var isCompact = spacing === 'compact';
       return /*#__PURE__*/_react.default.createElement(SelectContainer, (0, _extends2.default)({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
@@ -1738,17 +1785,21 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/_react.default.createElement(Control, (0, _extends2.default)({}, commonProps, {
+      }), this.renderLiveRegion(), commonProps.isMulti && this.isVoiceOver && this.renderMultiselectMessage(), /*#__PURE__*/_react.default.createElement(Control, (0, _extends2.default)({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
           onTouchEnd: this.onControlTouchEnd
         },
+        appearance: appearance,
+        isInvalid: isInvalid,
         isDisabled: isDisabled,
         isFocused: isFocused,
-        menuIsOpen: menuIsOpen
+        menuIsOpen: menuIsOpen,
+        isCompact: isCompact
       }), /*#__PURE__*/_react.default.createElement(ValueContainer, (0, _extends2.default)({}, commonProps, {
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isCompact: isCompact
       }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/_react.default.createElement(IndicatorsContainer, (0, _extends2.default)({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());

package/dist/es2019/accessibility/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 import { fg } from '@atlaskit/platform-feature-flags';
 export const defaultAriaLiveMessages = {
   guidance: props => {
@@ -30,11 +32,12 @@ export const defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-        return `option ${label}, deselected.`;
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? `option ${label}, deselected` : '';
+      // TODO: this should be handled on backspace|delete if no value, but doing it here first
       case 'clear':
         return 'All selected options have been cleared.';
       case 'initial-input-focus':
-        return `option${labels.length > 1 ? 's' : ''} ${labels.join(',')}, selected.`;
+        return label.length && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement') ? `option${labels.length > 1 ? 's' : ''} ${labels.join(',')}, selected.` : '';
       case 'select-option':
         return isDisabled ? `option ${label} is disabled. Select another option.` : `option ${label}, selected.`;
       default:
@@ -48,7 +51,6 @@ export const defaultAriaLiveMessages = {
       options,
       label = '',
       selectValue,
-      isMulti,
       isDisabled,
       isSelected
     } = props;
@@ -56,11 +58,11 @@ export const defaultAriaLiveMessages = {
     if (context === 'value' && selectValue) {
       return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
     }
-    if (context === 'menu') {
+
+    // No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
+    if (context === 'menu' && !fg('design_system_select-a11y-improvement')) {
       const disabled = isDisabled ? ' disabled' : '';
-      // don't announce not selected for single selection
-      const notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';
-      const status = `${isSelected ? ' selected' : notSelectedStatus}${disabled}`;
+      const status = `${isSelected ? ' selected' : ' not selected'}${disabled}`;
       return `${label}${status}, ${getArrayIndex(options, focused)}, completion selected`;
     }
     return '';

package/dist/es2019/components/containers.js

@@ -17,9 +17,10 @@ export const containerCSS = ({
 }) => ({
   label: 'container',
   direction: isRtl ? 'rtl' : undefined,
-  pointerEvents: isDisabled ? 'none' : undefined,
-  // cancel mouse events when disabled
-  position: 'relative'
+  position: 'relative',
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  pointerEvents: 'all',
+  cursor: isDisabled ? 'not-allowed' : undefined
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -41,11 +42,9 @@ export const SelectContainer = props => {
 // ==============================
 
 export const valueContainerCSS = ({
-  theme: {
-    spacing
-  },
   isMulti,
   hasValue,
+  isCompact,
   selectProps: {
     controlShouldRenderValue
   }
@@ -57,7 +56,7 @@ export const valueContainerCSS = ({
   WebkitOverflowScrolling: 'touch',
   position: 'relative',
   overflow: 'hidden',
-  padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`
+  padding: `${isCompact ? 0 : "var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -89,7 +88,8 @@ export const indicatorsContainerCSS = () => ({
   alignItems: 'center',
   alignSelf: 'stretch',
   display: 'flex',
-  flexShrink: 0
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/control.js

@@ -9,32 +9,79 @@ import { getStyleProps } from '../utils';
 export const css = ({
   isDisabled,
   isFocused,
-  theme: {
-    colors,
-    borderRadius,
-    spacing
+  isInvalid,
+  isCompact,
+  appearance
+}) => {
+  let borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  let backgroundColor = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)";
+  let backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  let borderColorHover = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  if (isDisabled) {
+    backgroundColor = "var(--ds-background-disabled, #091E4208)";
+    borderColor = "var(--ds-background-disabled, #091E4208)";
   }
-}) => ({
-  label: 'control',
-  alignItems: 'center',
-  cursor: 'default',
-  display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'space-between',
-  minHeight: spacing.controlHeight,
-  outline: '0 !important',
-  position: 'relative',
-  transition: 'all 100ms',
-  backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-  borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
-  borderRadius: borderRadius,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
-  '&:hover': {
-    borderColor: isFocused ? colors.primary : colors.neutral30
+  if (isInvalid) {
+    borderColor = "var(--ds-border-danger, #E2483D)";
+    borderColorHover = "var(--ds-border-danger, #E2483D)";
   }
-});
+  const transitionDuration = '200ms';
+  if (appearance === 'subtle') {
+    borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : 'transparent';
+    backgroundColor = isFocused ? "var(--ds-surface, #FFFFFF)" : 'transparent';
+    backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  }
+  if (appearance === 'none') {
+    borderColor = 'transparent';
+    backgroundColor = 'transparent';
+    backgroundColorHover = 'transparent';
+    borderColorHover = 'transparent';
+  }
+  return {
+    label: 'control',
+    alignItems: 'center',
+    cursor: 'default',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    outline: '0 !important',
+    position: 'relative',
+    // Turn pointer events off when disabled - this makes it so hover etc don't work.
+    pointerEvents: isDisabled ? 'none' : undefined,
+    backgroundColor,
+    borderColor,
+    borderStyle: 'solid',
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    borderWidth: "var(--ds-border-width, 1px)",
+    boxShadow: isInvalid ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}` : 'none',
+    '&:focus-within': {
+      boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}`
+    },
+    minHeight: isCompact ? 32 : 40,
+    padding: 0,
+    transition: `background-color ${transitionDuration} ease-in-out,
+border-color ${transitionDuration} ease-in-out`,
+    '::-webkit-scrollbar': {
+      height: 8,
+      width: 8
+    },
+    '::-webkit-scrollbar-corner': {
+      display: 'none'
+    },
+    ':hover': {
+      '::-webkit-scrollbar-thumb': {
+        // scrollbars occur only if the user passes in a custom component with overflow: scroll
+        backgroundColor: 'rgba(0,0,0,0.2)'
+      },
+      cursor: 'pointer',
+      backgroundColor: backgroundColorHover,
+      borderColor: borderColorHover
+    },
+    '::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: 'rgba(0,0,0,0.4)'
+    }
+  };
+};
 const Control = props => {
   const {
     children,