@atlaskit/select 17.15.0 → 17.15.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/select
 
+## 17.15.2
+
+### Patch Changes
+
+- [#137619](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137619)
+  [`a91489985e535`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a91489985e535) -
+  [ux] Tab and Shift+Tab now dismisses the list of opened popup select options and allows users to
+  navigate to next or previous elements accordingly.
+
+## 17.15.1
+
+### Patch Changes
+
+- [#131911](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131911)
+  [`2f9601a8a634b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f9601a8a634b) -
+  This version removes `platform.design-system-team.use-default-select-in-popup-select_46rmj`
+  feature flag. The `PopupSelect` component now uses the internal `Select` component ensure the
+  accessibility of options with group labels for assistive technologies.
+
 ## 17.15.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -21,7 +21,7 @@ var _reactDom = require("react-dom");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _reactPopper = require("react-popper");
-var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _reactSelect = require("react-select");
 var _reactUid = require("react-uid");
 var _shallowEqual = require("shallow-equal");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -86,6 +86,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
@@ -118,6 +119,13 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      //We shouldn't close PopupSelect on tab event if there are custom interactive element.
+      if ((0, _platformFeatureFlags.fg)('tab-event-should-close-popupSelect')) {
+        var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
+        if (_this.props.shouldCloseMenuOnTab && tabEvent) {
+          _this.close();
+        }
+      }
       switch (event.key) {
         case 'Escape':
         case 'Esc':
@@ -196,7 +204,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       });
       if (_this.selectRef) {
         var _this$selectRef$selec;
-        (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
+        (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -299,7 +307,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
 
       // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-      var controlRef = (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
+      var controlRef = (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -349,29 +357,28 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      var InternalSelect = (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? _Select.default : _reactSelect.default;
       var providedAriaLabel = getLabel();
       var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
-        var _this$selectRef, _this$selectRef2;
+        var _this$selectRef;
         // Update aria-label to get first announcement when popup opened.
-        if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef || (_this$selectRef2 = _this.selectRef) !== null && _this$selectRef2 !== void 0 && _this$selectRef2.inputRef) {
-          var _this$selectRef3, _this$selectRef4;
+        if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
+          var _this$selectRef2;
           if (providedAriaLabel) {
             ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
           }
-          (0, _platformFeatureFlags.fg)('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef3 = _this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select.inputRef) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.setAttribute('aria-label', ariaLabelText) : (_this$selectRef4 = _this.selectRef) === null || _this$selectRef4 === void 0 || (_this$selectRef4 = _this$selectRef4.inputRef) === null || _this$selectRef4 === void 0 ? void 0 : _this$selectRef4.setAttribute('aria-label', ariaLabelText);
+          (_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
         }
       };
       var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
         var _options$findIndex;
         var focused = onFocusProps.focused;
         var options = (props === null || props === void 0 ? void 0 : props.options) || [];
-        var totalLength = (options === null || options === void 0 ? void 0 : options.length) + 1;
+        var totalLength = options === null || options === void 0 ? void 0 : options.length;
         var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
           return option === focused;
         })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
         var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
-        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
+        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
         // Option LABEL focused, 1 of 8. 8 results available.
         // Use Up and Down to choose options, press Enter to select the currently focused option,
         // press Escape to exit the menu.
@@ -385,7 +392,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
           if ((0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options)) {
             var totalLength = (0, _groupedOptionsAnnouncement.countAllOptions)(props.options);
-            ariaLiveMessage = (0, _groupedOptionsAnnouncement.onFocus)(onFocusProps);
+            ariaLiveMessage = (0, _groupedOptionsAnnouncement.onFocus)(onFocusProps, props.options);
             ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
           } else {
             ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
@@ -394,6 +401,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           updateInputAriaLabel(ariaLabelText);
           return ariaLiveMessage;
         }
+        return ariaLiveMessage;
       };
       var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
@@ -425,7 +433,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
             disabled: !focusLockEnabled,
             returnFocus: true
-          }, /*#__PURE__*/_react.default.createElement(InternalSelect, (0, _extends2.default)({
+          }, /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
             "aria-label": providedAriaLabel,
             backspaceRemovesValue: false,
             controlShouldRenderValue: false,
@@ -539,6 +547,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 (0, _defineProperty2.default)(PopupSelect, "defaultProps", {
   closeMenuOnSelect: true,
+  shouldCloseMenuOnTab: true,
   components: {},
   maxMenuHeight: 300,
   maxMenuWidth: 440,

package/dist/cjs/PopupSelect/components.js

@@ -92,16 +92,9 @@ var Control = function Control(_ref2) {
   })));
 };
 
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Dummy control__
- *
- * A dummy control {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * Overrides the default DummyControl component in Select.
  */
 var DummyControl = exports.DummyControl = function DummyControl(props) {
   return (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(_reactSelect.components.Control, props));
@@ -113,8 +106,20 @@ var Menu = function Menu(_ref3) {
     innerProps = _ref3.innerProps;
   return (0, _react2.jsx)("div", innerProps, children);
 };
+var IndicatorSeparator = function IndicatorSeparator(props) {
+  return (0, _react2.jsx)(_reactSelect.components.IndicatorSeparator, props);
+};
+var ClearIndicator = function ClearIndicator(props) {
+  return (0, _react2.jsx)(_reactSelect.components.ClearIndicator, props);
+};
+var MultiValueRemove = function MultiValueRemove(props) {
+  return (0, _react2.jsx)(_reactSelect.components.MultiValueRemove, props);
+};
 var defaultComponents = exports.defaultComponents = {
   Control: Control,
   DropdownIndicator: DropdownIndicator,
-  Menu: Menu
+  Menu: Menu,
+  IndicatorSeparator: IndicatorSeparator,
+  ClearIndicator: ClearIndicator,
+  MultiValueRemove: MultiValueRemove
 };

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "17.15.0";
+var packageVersion = "17.15.2";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/index.js

@@ -25,8 +25,10 @@ Object.defineProperty(exports, "LoadingIndicator", {
 });
 exports.MultiValueRemove = void 0;
 var _react = require("@emotion/react");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _reactSelect = require("react-select");
+var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _indicators = require("./indicators");
 /**
  * @jsxRuntime classic
@@ -45,7 +47,11 @@ var MultiValueRemove = exports.MultiValueRemove = function MultiValueRemove(prop
   return (0, _react.jsx)(_reactSelect.components.MultiValueRemove, props, (0, _react.jsx)("div", {
     css: isDisabled ? disabledStyles : enabledStyles,
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
-  }, (0, _react.jsx)(_selectClear.default, {
+  }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-icon-color
+  (0, _react.jsx)(_cross.default, {
+    label: "Clear"
+  }) : (0, _react.jsx)(_selectClear.default, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",

package/dist/cjs/createSelect.js

@@ -90,7 +90,9 @@ function createSelect(WrappedComponent) {
       ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
-        onFocus: _groupedOptionsAnnouncement.onFocus
+        onFocus: function onFocus(data) {
+          return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
+        }
       }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
       tabSelectsValue: tabSelectsValue,
       onClickPreventDefault: onClickPreventDefault

package/dist/cjs/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = baseStyles;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 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; }
@@ -224,7 +225,7 @@ function baseStyles(validationState) {
         backgroundColor = "var(--ds-background-selected, ".concat(_colors.N40, ")");
         color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
       } else {
-        backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
+        backgroundColor = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, ".concat(_colors.N40, ")");
         color = "var(--ds-text, hsl(0, 0%, 20%))";
       }
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -236,6 +237,13 @@ function baseStyles(validationState) {
           border: isFocused ? '1px solid transparent' : 'none'
         },
         color: color
+      }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
+        borderRadius: "var(--ds-border-radius-100, 4px)",
+        // Hardcode this color for visual refresh as there is no token color yet
+        borderColor: '#B7B9BE',
+        borderWidth: "var(--ds-border-width, 1px)",
+        borderStyle: 'solid',
+        backgroundColor: "var(--ds-background-input, #FFFFFF)"
       });
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
@@ -245,6 +253,11 @@ function baseStyles(validationState) {
         padding: "var(--ds-space-025, 2px)",
         color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : 'inherit',
         paddingRight: "var(--ds-space-025, 2px)"
+      }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: "var(--ds-space-050, 4px)"
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
@@ -264,6 +277,26 @@ function baseStyles(validationState) {
           backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
+      }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
+        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+        border: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        appearance: 'none',
+        borderRadius: "var(--ds-border-radius, 4px)",
+        color: "var(--ds-text, #172B4D)",
+        padding: "var(--ds-space-025, 2px)",
+        marginRight: "var(--ds-space-025, 2px)",
+        ':focus-visible': {
+          outlineOffset: "var(--ds-space-negative-025, -2px)"
+        },
+        ':hover': {
+          backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+        },
+        ':active': {
+          backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+        }
       });
     },
     groupHeading: function groupHeading(css) {

package/dist/cjs/utils/grouped-options-announcement.js

@@ -7,14 +7,13 @@ exports.isOptionsGrouped = exports.countAllOptions = void 0;
 exports.onFocus = onFocus;
 // Used for overwriting ariaLiveMessages builtin onFocus method.
 // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
-function onFocus(props) {
+function onFocus(onFocusProps, defaultOptions) {
   var _groupData$options$fi;
-  var focused = props.focused,
-    options = props.options;
+  var focused = onFocusProps.focused;
   var isOptionFocused = function isOptionFocused(option) {
-    return option === focused;
+    return option.label === focused.label;
   };
-  var groupData = options === null || options === void 0 ? void 0 : options.find(function (option) {
+  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
     var _option$options;
     return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
   });

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -6,12 +6,12 @@ import { createPortal } from 'react-dom';
 import FocusLock from 'react-focus-lock';
 import NodeResolver from 'react-node-resolver';
 import { Manager, Popper, Reference } from 'react-popper';
-import Select, { mergeStyles } from 'react-select';
+import { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N80 } from '@atlaskit/theme/colors';
-import DefaultSelect from '../Select';
+import Select from '../Select';
 import baseStyles from '../styles';
 import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
@@ -53,6 +53,7 @@ export default class PopupSelect extends PureComponent {
     var _this$defaultOpenStat;
     super(...args);
     _defineProperty(this, "menuRef", null);
+    _defineProperty(this, "selectRef", null);
     _defineProperty(this, "targetRef", null);
     _defineProperty(this, "unbindWindowClick", null);
     _defineProperty(this, "unbindWindowKeydown", null);
@@ -84,6 +85,13 @@ export default class PopupSelect extends PureComponent {
       }
     });
     _defineProperty(this, "handleKeyDown", event => {
+      //We shouldn't close PopupSelect on tab event if there are custom interactive element.
+      if (fg('tab-event-should-close-popupSelect')) {
+        const tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
+        if (this.props.shouldCloseMenuOnTab && tabEvent) {
+          this.close();
+        }
+      }
       switch (event.key) {
         case 'Escape':
         case 'Esc':
@@ -167,7 +175,7 @@ export default class PopupSelect extends PureComponent {
       });
       if (this.selectRef) {
         var _this$selectRef$selec;
-        fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : this.selectRef.openMenu('first');
+        (_this$selectRef$selec = this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -269,7 +277,7 @@ export default class PopupSelect extends PureComponent {
 
       // subtract the control height to maintain consistency
       const showSearchControl = this.showSearchControl();
-      let controlRef = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : this.selectRef.controlRef;
+      const controlRef = (_this$selectRef$selec2 = this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef;
       const offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       const maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -323,17 +331,16 @@ export default class PopupSelect extends PureComponent {
           return placeholder;
         }
       };
-      const InternalSelect = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
       const providedAriaLabel = getLabel();
       const updateInputAriaLabel = ariaLabelText => {
-        var _this$selectRef, _this$selectRef$selec3, _this$selectRef2;
+        var _this$selectRef, _this$selectRef$selec3;
         // Update aria-label to get first announcement when popup opened.
-        if ((_this$selectRef = this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef$selec3 = _this$selectRef.select) !== null && _this$selectRef$selec3 !== void 0 && _this$selectRef$selec3.inputRef || (_this$selectRef2 = this.selectRef) !== null && _this$selectRef2 !== void 0 && _this$selectRef2.inputRef) {
-          var _this$selectRef3, _this$selectRef3$sele, _this$selectRef4, _this$selectRef4$inpu;
+        if ((_this$selectRef = this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef$selec3 = _this$selectRef.select) !== null && _this$selectRef$selec3 !== void 0 && _this$selectRef$selec3.inputRef) {
+          var _this$selectRef2, _this$selectRef2$sele;
           if (providedAriaLabel) {
             ariaLabelText = `${providedAriaLabel}. ${ariaLabelText}`;
           }
-          fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 ? void 0 : (_this$selectRef3$sele = _this$selectRef3.select.inputRef) === null || _this$selectRef3$sele === void 0 ? void 0 : _this$selectRef3$sele.setAttribute('aria-label', ariaLabelText) : (_this$selectRef4 = this.selectRef) === null || _this$selectRef4 === void 0 ? void 0 : (_this$selectRef4$inpu = _this$selectRef4.inputRef) === null || _this$selectRef4$inpu === void 0 ? void 0 : _this$selectRef4$inpu.setAttribute('aria-label', ariaLabelText);
+          (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 ? void 0 : (_this$selectRef2$sele = _this$selectRef2.select.inputRef) === null || _this$selectRef2$sele === void 0 ? void 0 : _this$selectRef2$sele.setAttribute('aria-label', ariaLabelText);
         }
       };
       const generateNoGroupsAriaText = (onFocusProps, ariaLabelSuffix) => {
@@ -342,10 +349,10 @@ export default class PopupSelect extends PureComponent {
           focused
         } = onFocusProps;
         const options = (props === null || props === void 0 ? void 0 : props.options) || [];
-        const totalLength = (options === null || options === void 0 ? void 0 : options.length) + 1;
+        const totalLength = options === null || options === void 0 ? void 0 : options.length;
         const optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(option => option === focused)) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
         const optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
-        const ariaLabelText = `Option ${optionName} focused, ${optionIndex} of ${totalLength}.
+        const ariaLabelText = `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
 			${totalLength} results available.
 			${ariaLabelSuffix}
 			`;
@@ -362,7 +369,7 @@ export default class PopupSelect extends PureComponent {
         if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
           if (isOptionsGrouped(props.options)) {
             const totalLength = countAllOptions(props.options);
-            ariaLiveMessage = onFocus(onFocusProps);
+            ariaLiveMessage = onFocus(onFocusProps, props.options);
             ariaLabelText = `${ariaLiveMessage} ${totalLength} results available. ${ariaLabelSuffix}`;
           } else {
             ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
@@ -371,6 +378,7 @@ export default class PopupSelect extends PureComponent {
           updateInputAriaLabel(ariaLabelText);
           return ariaLiveMessage;
         }
+        return ariaLiveMessage;
       };
       const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: state => {
@@ -402,7 +410,7 @@ export default class PopupSelect extends PureComponent {
       }, /*#__PURE__*/React.createElement(FocusLock, {
         disabled: !focusLockEnabled,
         returnFocus: true
-      }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
+      }, /*#__PURE__*/React.createElement(Select, _extends({
         "aria-label": providedAriaLabel,
         backspaceRemovesValue: false,
         controlShouldRenderValue: false,
@@ -512,6 +520,7 @@ export default class PopupSelect extends PureComponent {
 }
 _defineProperty(PopupSelect, "defaultProps", {
   closeMenuOnSelect: true,
+  shouldCloseMenuOnTab: true,
   components: {},
   maxMenuHeight: 300,
   maxMenuWidth: 440,

package/dist/es2019/PopupSelect/components.js

@@ -81,16 +81,9 @@ const Control = ({
   innerProps: innerProps
 })));
 
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Dummy control__
- *
- * A dummy control {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * Overrides the default DummyControl component in Select.
  */
 export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props));
 
@@ -99,8 +92,14 @@ const Menu = ({
   children,
   innerProps
 }) => jsx("div", innerProps, children);
+const IndicatorSeparator = props => jsx(components.IndicatorSeparator, props);
+const ClearIndicator = props => jsx(components.ClearIndicator, props);
+const MultiValueRemove = props => jsx(components.MultiValueRemove, props);
 export const defaultComponents = {
   Control,
   DropdownIndicator,
-  Menu
+  Menu,
+  IndicatorSeparator,
+  ClearIndicator,
+  MultiValueRemove
 };

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.15.0";
+const packageVersion = "17.15.2";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/index.js

@@ -3,9 +3,11 @@
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import { css, jsx } from '@emotion/react';
 import { components } from 'react-select';
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import CrossIcon from '@atlaskit/icon/utility/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 const disabledStyles = css({
   display: 'none'
@@ -20,7 +22,11 @@ export const MultiValueRemove = props => {
   return jsx(components.MultiValueRemove, props, jsx("div", {
     css: isDisabled ? disabledStyles : enabledStyles,
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
-  }, jsx(SelectClearIcon, {
+  }, fg('platform-component-visual-refresh') ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-icon-color
+  jsx(CrossIcon, {
+    label: "Clear"
+  }) : jsx(SelectClearIcon, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",

package/dist/es2019/createSelect.js

@@ -70,7 +70,7 @@ export default function createSelect(WrappedComponent) {
       ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: isOptionsGrouped(props.options) ? {
-        onFocus,
+        onFocus: data => onFocus(data, props.options),
         ...ariaLiveMessages
       } : {
         ...ariaLiveMessages

package/dist/es2019/styles.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
 export default function baseStyles(validationState, isCompact = false, appearance) {
   return {
@@ -213,7 +214,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         backgroundColor = `var(--ds-background-selected, ${N40})`;
         color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
       } else {
-        backgroundColor = `var(--ds-background-neutral, ${N40})`;
+        backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : `var(--ds-background-neutral, ${N40})`;
         color = "var(--ds-text, hsl(0, 0%, 20%))";
       }
       return {
@@ -225,7 +226,15 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'
         },
-        color
+        color,
+        ...(fg('platform-component-visual-refresh') && {
+          borderRadius: "var(--ds-border-radius-100, 4px)",
+          // Hardcode this color for visual refresh as there is no token color yet
+          borderColor: '#B7B9BE',
+          borderWidth: "var(--ds-border-width, 1px)",
+          borderStyle: 'solid',
+          backgroundColor: "var(--ds-background-input, #FFFFFF)"
+        })
       };
     },
     multiValueLabel: (css, {
@@ -235,7 +244,13 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       padding: "var(--ds-space-025, 2px)",
       color: isDisabled ? `var(--ds-text-disabled, ${N70})` : 'inherit',
-      paddingRight: "var(--ds-space-025, 2px)"
+      paddingRight: "var(--ds-space-025, 2px)",
+      ...(fg('platform-component-visual-refresh') && {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: "var(--ds-space-050, 4px)"
+      })
     }),
     multiValueRemove: (css, {
       isFocused
@@ -254,7 +269,28 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       ':active': {
         backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
         fill: "var(--ds-text-danger, #000)"
-      }
+      },
+      ...(fg('platform-component-visual-refresh') && {
+        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+        border: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        appearance: 'none',
+        borderRadius: "var(--ds-border-radius, 4px)",
+        color: "var(--ds-text, #172B4D)",
+        padding: "var(--ds-space-025, 2px)",
+        marginRight: "var(--ds-space-025, 2px)",
+        ':focus-visible': {
+          outlineOffset: "var(--ds-space-negative-025, -2px)"
+        },
+        ':hover': {
+          backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+        },
+        ':active': {
+          backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+        }
+      })
     }),
     groupHeading: css => ({
       ...css,

package/dist/es2019/utils/grouped-options-announcement.js

@@ -1,15 +1,14 @@
 // Used for overwriting ariaLiveMessages builtin onFocus method.
 // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
-export function onFocus(props) {
+export function onFocus(onFocusProps, defaultOptions) {
   var _groupData$options$fi;
   const {
-    focused,
-    options
-  } = props;
+    focused
+  } = onFocusProps;
   const isOptionFocused = option => {
-    return option === focused;
+    return option.label === focused.label;
   };
-  const groupData = options === null || options === void 0 ? void 0 : options.find(option => {
+  const groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(option => {
     var _option$options;
     return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
   });

package/dist/esm/PopupSelect/PopupSelect.js

@@ -18,12 +18,12 @@ import { createPortal } from 'react-dom';
 import FocusLock from 'react-focus-lock';
 import NodeResolver from 'react-node-resolver';
 import { Manager, Popper, Reference } from 'react-popper';
-import Select, { mergeStyles } from 'react-select';
+import { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N80 } from '@atlaskit/theme/colors';
-import DefaultSelect from '../Select';
+import Select from '../Select';
 import baseStyles from '../styles';
 import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
@@ -76,6 +76,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "menuRef", null);
+    _defineProperty(_assertThisInitialized(_this), "selectRef", null);
     _defineProperty(_assertThisInitialized(_this), "targetRef", null);
     _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
@@ -108,6 +109,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      //We shouldn't close PopupSelect on tab event if there are custom interactive element.
+      if (fg('tab-event-should-close-popupSelect')) {
+        var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
+        if (_this.props.shouldCloseMenuOnTab && tabEvent) {
+          _this.close();
+        }
+      }
       switch (event.key) {
         case 'Escape':
         case 'Esc':
@@ -186,7 +194,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
       if (_this.selectRef) {
         var _this$selectRef$selec;
-        fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.openMenu('first') : _this.selectRef.openMenu('first');
+        (_this$selectRef$selec = _this.selectRef.select) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.openMenu('first');
       }
       if (typeof window === 'undefined') {
         return;
@@ -289,7 +297,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
       // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-      var controlRef = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef : _this.selectRef.controlRef;
+      var controlRef = (_this$selectRef$selec2 = _this.selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : _this$selectRef$selec2.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
       return maxHeight;
@@ -339,29 +347,28 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           return placeholder;
         }
       };
-      var InternalSelect = fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? DefaultSelect : Select;
       var providedAriaLabel = getLabel();
       var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
-        var _this$selectRef, _this$selectRef2;
+        var _this$selectRef;
         // Update aria-label to get first announcement when popup opened.
-        if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef || (_this$selectRef2 = _this.selectRef) !== null && _this$selectRef2 !== void 0 && _this$selectRef2.inputRef) {
-          var _this$selectRef3, _this$selectRef4;
+        if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
+          var _this$selectRef2;
           if (providedAriaLabel) {
             ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
           }
-          fg('platform.design-system-team.use-default-select-in-popup-select_46rmj') ? (_this$selectRef3 = _this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select.inputRef) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.setAttribute('aria-label', ariaLabelText) : (_this$selectRef4 = _this.selectRef) === null || _this$selectRef4 === void 0 || (_this$selectRef4 = _this$selectRef4.inputRef) === null || _this$selectRef4 === void 0 ? void 0 : _this$selectRef4.setAttribute('aria-label', ariaLabelText);
+          (_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
         }
       };
       var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
         var _options$findIndex;
         var focused = onFocusProps.focused;
         var options = (props === null || props === void 0 ? void 0 : props.options) || [];
-        var totalLength = (options === null || options === void 0 ? void 0 : options.length) + 1;
+        var totalLength = options === null || options === void 0 ? void 0 : options.length;
         var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
           return option === focused;
         })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
         var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
-        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
+        var ariaLabelText = "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
         // Option LABEL focused, 1 of 8. 8 results available.
         // Use Up and Down to choose options, press Enter to select the currently focused option,
         // press Escape to exit the menu.
@@ -375,7 +382,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
           if (isOptionsGrouped(props.options)) {
             var totalLength = countAllOptions(props.options);
-            ariaLiveMessage = onFocus(onFocusProps);
+            ariaLiveMessage = onFocus(onFocusProps, props.options);
             ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
           } else {
             ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
@@ -384,6 +391,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           updateInputAriaLabel(ariaLabelText);
           return ariaLiveMessage;
         }
+        return ariaLiveMessage;
       };
       var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
@@ -415,7 +423,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           }, /*#__PURE__*/React.createElement(FocusLock, {
             disabled: !focusLockEnabled,
             returnFocus: true
-          }, /*#__PURE__*/React.createElement(InternalSelect, _extends({
+          }, /*#__PURE__*/React.createElement(Select, _extends({
             "aria-label": providedAriaLabel,
             backspaceRemovesValue: false,
             controlShouldRenderValue: false,
@@ -529,6 +537,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 }(PureComponent);
 _defineProperty(PopupSelect, "defaultProps", {
   closeMenuOnSelect: true,
+  shouldCloseMenuOnTab: true,
   components: {},
   maxMenuHeight: 300,
   maxMenuWidth: 440,

package/dist/esm/PopupSelect/components.js

@@ -87,16 +87,9 @@ var Control = function Control(_ref2) {
   })));
 };
 
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Dummy control__
- *
- * A dummy control {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * Overrides the default DummyControl component in Select.
  */
 export var DummyControl = function DummyControl(props) {
   return jsx(VisuallyHidden, null, jsx(components.Control, props));
@@ -108,8 +101,20 @@ var Menu = function Menu(_ref3) {
     innerProps = _ref3.innerProps;
   return jsx("div", innerProps, children);
 };
+var IndicatorSeparator = function IndicatorSeparator(props) {
+  return jsx(components.IndicatorSeparator, props);
+};
+var ClearIndicator = function ClearIndicator(props) {
+  return jsx(components.ClearIndicator, props);
+};
+var MultiValueRemove = function MultiValueRemove(props) {
+  return jsx(components.MultiValueRemove, props);
+};
 export var defaultComponents = {
   Control: Control,
   DropdownIndicator: DropdownIndicator,
-  Menu: Menu
+  Menu: Menu,
+  IndicatorSeparator: IndicatorSeparator,
+  ClearIndicator: ClearIndicator,
+  MultiValueRemove: MultiValueRemove
 };

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.15.0";
+var packageVersion = "17.15.2";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/index.js

@@ -3,9 +3,11 @@
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import { css, jsx } from '@emotion/react';
 import { components } from 'react-select';
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import CrossIcon from '@atlaskit/icon/utility/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 var disabledStyles = css({
   display: 'none'
@@ -18,7 +20,11 @@ export var MultiValueRemove = function MultiValueRemove(props) {
   return jsx(components.MultiValueRemove, props, jsx("div", {
     css: isDisabled ? disabledStyles : enabledStyles,
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
-  }, jsx(SelectClearIcon, {
+  }, fg('platform-component-visual-refresh') ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-icon-color
+  jsx(CrossIcon, {
+    label: "Clear"
+  }) : jsx(SelectClearIcon, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",

package/dist/esm/createSelect.js

@@ -10,7 +10,7 @@ import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
 import baseStyles from './styles';
-import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
+import { isOptionsGrouped, onFocus as _onFocus } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
     var appearance = props.appearance,
@@ -80,7 +80,9 @@ export default function createSelect(WrappedComponent) {
       ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: isOptionsGrouped(props.options) ? _objectSpread({
-        onFocus: onFocus
+        onFocus: function onFocus(data) {
+          return _onFocus(data, props.options);
+        }
       }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
       tabSelectsValue: tabSelectsValue,
       onClickPreventDefault: onClickPreventDefault

package/dist/esm/styles.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
 export default function baseStyles(validationState) {
   var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -217,7 +218,7 @@ export default function baseStyles(validationState) {
         backgroundColor = "var(--ds-background-selected, ".concat(N40, ")");
         color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
       } else {
-        backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
+        backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, ".concat(N40, ")");
         color = "var(--ds-text, hsl(0, 0%, 20%))";
       }
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -229,6 +230,13 @@ export default function baseStyles(validationState) {
           border: isFocused ? '1px solid transparent' : 'none'
         },
         color: color
+      }, fg('platform-component-visual-refresh') && {
+        borderRadius: "var(--ds-border-radius-100, 4px)",
+        // Hardcode this color for visual refresh as there is no token color yet
+        borderColor: '#B7B9BE',
+        borderWidth: "var(--ds-border-width, 1px)",
+        borderStyle: 'solid',
+        backgroundColor: "var(--ds-background-input, #FFFFFF)"
       });
     },
     multiValueLabel: function multiValueLabel(css, _ref8) {
@@ -238,6 +246,11 @@ export default function baseStyles(validationState) {
         padding: "var(--ds-space-025, 2px)",
         color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : 'inherit',
         paddingRight: "var(--ds-space-025, 2px)"
+      }, fg('platform-component-visual-refresh') && {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: "var(--ds-space-050, 4px)"
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
@@ -257,6 +270,26 @@ export default function baseStyles(validationState) {
           backgroundColor: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
           fill: "var(--ds-text-danger, #000)"
         }
+      }, fg('platform-component-visual-refresh') && {
+        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+        border: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        appearance: 'none',
+        borderRadius: "var(--ds-border-radius, 4px)",
+        color: "var(--ds-text, #172B4D)",
+        padding: "var(--ds-space-025, 2px)",
+        marginRight: "var(--ds-space-025, 2px)",
+        ':focus-visible': {
+          outlineOffset: "var(--ds-space-negative-025, -2px)"
+        },
+        ':hover': {
+          backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+        },
+        ':active': {
+          backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+        }
       });
     },
     groupHeading: function groupHeading(css) {

package/dist/esm/utils/grouped-options-announcement.js

@@ -1,13 +1,12 @@
 // Used for overwriting ariaLiveMessages builtin onFocus method.
 // Returns custom built string while focusing each group option. This string is used for screen reader announcement.
-export function onFocus(props) {
+export function onFocus(onFocusProps, defaultOptions) {
   var _groupData$options$fi;
-  var focused = props.focused,
-    options = props.options;
+  var focused = onFocusProps.focused;
   var isOptionFocused = function isOptionFocused(option) {
-    return option === focused;
+    return option.label === focused.label;
   };
-  var groupData = options === null || options === void 0 ? void 0 : options.find(function (option) {
+  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
     var _option$options;
     return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
   });

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -1,6 +1,7 @@
 import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
 import { type UnbindFn } from 'bind-event-listener';
 import { type PopperProps } from 'react-popper';
+import { type GroupBase } from 'react-select';
 import { type ActionMeta, type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type StylesConfig, type ValidationState, type ValueType } from '../types';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
@@ -17,6 +18,10 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      * Defines whether the menu should close when selected. The default is `true`.
      */
     closeMenuOnSelect?: boolean;
+    /**
+     * Defines whether the menu should be closed by pressing the Tab key. The default is `true`.
+     */
+    shouldCloseMenuOnTab?: boolean;
     /**
      * The footer content shown at the bottom of the popup, underneath the select options.
      */
@@ -94,7 +99,7 @@ interface State<Modifiers = string> {
 }
 export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends PureComponent<PopupSelectProps<Option, IsMulti, Modifiers>, State> {
     menuRef: HTMLElement | null;
-    selectRef: any;
+    selectRef: AtlaskitSelectRefType | null;
     targetRef: HTMLElement | null;
     unbindWindowClick: UnbindFn | null;
     unbindWindowKeydown: UnbindFn | null;
@@ -108,12 +113,16 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
             Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+            IndicatorSeparator: (props: import("react-select").IndicatorSeparatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            ClearIndicator: (props: import("react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            MultiValueRemove: (props: import("react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };
     popperWrapperId: string;
     static defaultProps: {
         closeMenuOnSelect: boolean;
+        shouldCloseMenuOnTab: boolean;
         components: {};
         maxMenuHeight: number;
         maxMenuWidth: number;

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

@@ -4,7 +4,7 @@
  */
 import { type CSSProperties, type FC, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { type ControlProps, type MenuProps, type OptionType } from '../types';
+import { type ClearIndicatorProps, type ControlProps, type IndicatorSeparatorProps, type MenuProps, type MultiValueRemoveProps, type OptionType } from '../types';
 interface MenuDialogProps {
     maxWidth?: number | string;
     minWidth?: number | string;
@@ -21,17 +21,15 @@ interface MenuDialogProps {
 export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuDialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * __Dummy control__
- *
- * A dummy control {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * Overrides the default DummyControl component in Select.
  */
 export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;
 export declare const defaultComponents: {
     Control: FC<ControlProps<OptionType, boolean>>;
     DropdownIndicator: () => jsx.JSX.Element;
     Menu: ({ children, innerProps }: MenuProps<OptionType, boolean>) => jsx.JSX.Element;
+    IndicatorSeparator: (props: IndicatorSeparatorProps) => jsx.JSX.Element;
+    ClearIndicator: (props: ClearIndicatorProps) => jsx.JSX.Element;
+    MultiValueRemove: (props: MultiValueRemoveProps) => jsx.JSX.Element;
 };
 export {};

package/dist/types/utils/grouped-options-announcement.d.ts

@@ -1,5 +1,5 @@
 import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from 'react-select';
 import { type GroupType, type OptionType } from '../types';
-export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
+export declare function onFocus(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
 export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
 export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;

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

@@ -1,6 +1,7 @@
 import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
 import { type UnbindFn } from 'bind-event-listener';
 import { type PopperProps } from 'react-popper';
+import { type GroupBase } from 'react-select';
 import { type ActionMeta, type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type StylesConfig, type ValidationState, type ValueType } from '../types';
 type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
@@ -17,6 +18,10 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
      * Defines whether the menu should close when selected. The default is `true`.
      */
     closeMenuOnSelect?: boolean;
+    /**
+     * Defines whether the menu should be closed by pressing the Tab key. The default is `true`.
+     */
+    shouldCloseMenuOnTab?: boolean;
     /**
      * The footer content shown at the bottom of the popup, underneath the select options.
      */
@@ -94,7 +99,7 @@ interface State<Modifiers = string> {
 }
 export default class PopupSelect<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends PureComponent<PopupSelectProps<Option, IsMulti, Modifiers>, State> {
     menuRef: HTMLElement | null;
-    selectRef: any;
+    selectRef: AtlaskitSelectRefType | null;
     targetRef: HTMLElement | null;
     unbindWindowClick: UnbindFn | null;
     unbindWindowKeydown: UnbindFn | null;
@@ -108,12 +113,16 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
             Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+            IndicatorSeparator: (props: import("react-select").IndicatorSeparatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            ClearIndicator: (props: import("react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            MultiValueRemove: (props: import("react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };
     popperWrapperId: string;
     static defaultProps: {
         closeMenuOnSelect: boolean;
+        shouldCloseMenuOnTab: boolean;
         components: {};
         maxMenuHeight: number;
         maxMenuWidth: number;

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

@@ -4,7 +4,7 @@
  */
 import { type CSSProperties, type FC, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { type ControlProps, type MenuProps, type OptionType } from '../types';
+import { type ClearIndicatorProps, type ControlProps, type IndicatorSeparatorProps, type MenuProps, type MultiValueRemoveProps, type OptionType } from '../types';
 interface MenuDialogProps {
     maxWidth?: number | string;
     minWidth?: number | string;
@@ -21,17 +21,15 @@ interface MenuDialogProps {
 export declare const MenuDialog: import("react").ForwardRefExoticComponent<MenuDialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * __Dummy control__
- *
- * A dummy control {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * Overrides the default DummyControl component in Select.
  */
 export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;
 export declare const defaultComponents: {
     Control: FC<ControlProps<OptionType, boolean>>;
     DropdownIndicator: () => jsx.JSX.Element;
     Menu: ({ children, innerProps }: MenuProps<OptionType, boolean>) => jsx.JSX.Element;
+    IndicatorSeparator: (props: IndicatorSeparatorProps) => jsx.JSX.Element;
+    ClearIndicator: (props: ClearIndicatorProps) => jsx.JSX.Element;
+    MultiValueRemove: (props: MultiValueRemoveProps) => jsx.JSX.Element;
 };
 export {};

package/dist/types-ts4.5/utils/grouped-options-announcement.d.ts

@@ -1,5 +1,5 @@
 import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from 'react-select';
 import { type GroupType, type OptionType } from '../types';
-export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
+export declare function onFocus(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
 export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
 export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.15.0",
+	"version": "17.15.2",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,10 +24,6 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Select",
 			"category": "Components"
@@ -43,12 +39,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.13.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -70,7 +66,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/checkbox": "^13.7.0",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/ssr": "*",
@@ -84,7 +80,6 @@
 		"jscodeshift": "^0.13.0",
 		"react-dom": "^16.8.0",
 		"react-select-event": "^5.5.0",
-		"react-test-renderer": "^16.8.0",
 		"react-value": "^0.2.0",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
@@ -104,10 +99,13 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.design-system-team.use-default-select-in-popup-select_46rmj": {
+		"platform-design-system-dsp-19701-no-node-resolver": {
 			"type": "boolean"
 		},
-		"platform-design-system-dsp-19701-no-node-resolver": {
+		"platform-component-visual-refresh": {
+			"type": "boolean"
+		},
+		"tab-event-should-close-popupSelect": {
 			"type": "boolean"
 		}
 	},