@atlaskit/select 17.15.1 → 17.16.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/select
 
+## 17.16.0
+
+### Minor Changes
+
+- [#139165](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139165)
+  [`c140497da3215`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c140497da3215) -
+  [ux] Enable new icons behind a feature flag.
+
+## 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

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -119,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':
@@ -540,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

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactSelect = require("react-select");
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -73,7 +73,9 @@ var dropdownStyles = (0, _react2.css)({
 var DropdownIndicator = function DropdownIndicator() {
   return (0, _react2.jsx)("div", {
     css: dropdownStyles
-  }, (0, _react2.jsx)(_search.default, {
+  }, (0, _react2.jsx)(_searchEditorSearch.default, {
+    color: "currentColor",
+    spacing: "spacious",
     label: "open"
   }));
 };

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.1";
+var packageVersion = "17.16.0";
 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,11 @@ 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 _primitives = require("@atlaskit/primitives");
 var _indicators = require("./indicators");
 /**
  * @jsxRuntime classic
@@ -40,16 +43,35 @@ var disabledStyles = (0, _react.css)({
 var enabledStyles = (0, _react.css)({
   display: 'inherit'
 });
+var iconWrapperStyles = (0, _primitives.xcss)({
+  padding: 'space.025'
+});
+
+/**
+ * __Multi value remove__
+ *
+ * The icon used to remove individual selections from a multi-select.
+ *
+ */
 var MultiValueRemove = exports.MultiValueRemove = function MultiValueRemove(props) {
   var isDisabled = props.selectProps.isDisabled;
   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)(_primitives.Inline, {
+    xcss: iconWrapperStyles
+  }, (0, _react.jsx)(_cross.default, {
     label: "Clear",
-    size: "small",
-    primaryColor: "transparent",
-    secondaryColor: "inherit"
-  })));
+    color: "currentColor",
+    LEGACY_fallbackIcon: _selectClear.default,
+    LEGACY_size: "small",
+    LEGACY_primaryColor: "transparent",
+    LEGACY_secondaryColor: "inherit",
+    LEGACY_margin: "var(--ds-space-negative-025, -2px)"
+  }))));
 };
 var IndicatorSeparator = exports.IndicatorSeparator = null;

package/dist/cjs/components/indicators.js

@@ -9,20 +9,26 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _reactSelect = require("react-select");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 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 _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; } /* eslint-disable @repo/internal/react/require-jsdoc */ /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// import LegacyDownIcon from '@atlaskit/icon/glyph/chevron-down';
 var iconContainerStyles = (0, _primitives.xcss)({
   all: 'unset',
   outline: 'revert',
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'space.025'
+});
+var dropdownWrapperStyles = (0, _primitives.xcss)({
+  padding: 'space.075'
 });
 var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
   return (0, _react.jsx)(_reactSelect.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
@@ -32,15 +38,22 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
   }), (0, _react.jsx)(_primitives.Pressable, {
     xcss: iconContainerStyles,
     tabIndex: -1
-  }, (0, _react.jsx)(_selectClear.default, {
-    size: "small",
-    label: "clear"
+  }, (0, _react.jsx)(_crossCircleSelectClear.default, {
+    label: "clear",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
   })));
 };
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(props) {
-  return (0, _react.jsx)(_reactSelect.components.DropdownIndicator, props, (0, _react.jsx)(_chevronDown.default, {
-    label: "open"
-  }));
+  return (0, _react.jsx)(_reactSelect.components.DropdownIndicator, props, (0, _react.jsx)(_primitives.Inline, {
+    as: "span",
+    xcss: dropdownWrapperStyles
+  }, (0, _react.jsx)(_chevronDown.default, {
+    color: "currentColor",
+    label: "open",
+    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
+  })));
 };
 var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(props) {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/cjs/components/input-options.js

@@ -15,10 +15,10 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
+var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -53,7 +53,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  var augmentedStyles = (0, _react.css)(_objectSpread(_objectSpread({}, getStyles('option', props)), baseStyles));
+  var augmentedStyles = (0, _react2.css)(_objectSpread(_objectSpread({}, getStyles('option', props)), baseStyles));
   var bemClasses = {
     option: true,
     'option--is-disabled': isDisabled,
@@ -129,26 +129,24 @@ var getBorderColor = function getBorderColor(_ref3) {
   }
   return "var(--ds-border-input, ".concat(_colors.N100, ")");
 };
-var baseIconStyles = (0, _react.css)({
-  alignItems: 'center',
+var baseIconStyles = (0, _react2.css)({
   display: 'flex ',
+  alignItems: 'center',
   flexShrink: 0,
   paddingInlineEnd: "var(--ds-space-050, 4px)",
-  // Here we are adding a border to the Checkbox and Radio SVG icons
-  // This is an a11y fix for Select only for now but it may be rolled
-  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: "var(--ds-border-width, 1px)",
-    strokeLinejoin: 'round'
+    strokeLinejoin: 'round',
+    strokeWidth: "var(--ds-border-width, 1px)"
   }
 });
-var baseOptionStyles = (0, _react.css)({
-  textOverflow: 'ellipsis',
-  overflowX: 'hidden',
+var baseOptionStyles = (0, _react2.css)({
   flexGrow: 1,
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var ControlOption = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ControlOption, _Component);
   var _super = _createSuper(ControlOption);
@@ -206,11 +204,11 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        (0, _react.jsx)("div", (0, _extends2.default)({
+        (0, _react2.jsx)("div", (0, _extends2.default)({
           css: styles,
           className: classes,
           ref: innerRef
-        }, props), (0, _react.jsx)("div", {
+        }, props), (0, _react2.jsx)("div", {
           css: [baseIconStyles,
           // Here we are adding a border to the Checkbox and Radio SVG icons
           // This is an a11y fix for Select only for now but it may be rolled
@@ -227,25 +225,39 @@ var ControlOption = /*#__PURE__*/function (_Component) {
               stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
             }
           }]
-        }, !!Icon ? (0, _react.jsx)(Icon, {
+        }, !!Icon ? (0, _react2.jsx)(Icon, {
           label: "",
           primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
           secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
-        }) : null), (0, _react.jsx)("div", {
+        }) : null), (0, _react2.jsx)("div", {
           css: baseOptionStyles
         }, children))
       );
     }
   }]);
   return ControlOption;
-}(_react2.Component);
-var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props) {
-  return (0, _react.jsx)(ControlOption, (0, _extends2.default)({
+}(_react.Component);
+/**
+ * __Checkbox option__
+ */
+var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props
+// TODO https://product-fabric.atlassian.net/browse/DSP-20768
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+) {
+  return (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
     Icon: _checkbox.default
   }, props));
 };
+
+/**
+ * __Radio option__
+ */
 var RadioOption = exports.RadioOption = function RadioOption(props) {
-  return (0, _react.jsx)(ControlOption, (0, _extends2.default)({
-    Icon: _radio.default
-  }, props));
+  return (
+    // TODO https://product-fabric.atlassian.net/browse/DSP-20769
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
+      Icon: _radio.default
+    }, props))
+  );
 };

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/es2019/PopupSelect/PopupSelect.js

@@ -85,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':
@@ -513,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

@@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { components } from 'react-select';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import { N40A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -65,6 +65,8 @@ const dropdownStyles = css({
 const DropdownIndicator = () => jsx("div", {
   css: dropdownStyles
 }, jsx(SearchIcon, {
+  color: "currentColor",
+  spacing: "spacious",
   label: "open"
 }));
 const controlStyles = css({

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.1";
+const packageVersion = "17.16.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/index.js

@@ -3,9 +3,12 @@
  * @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 LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import CrossIcon from '@atlaskit/icon/utility/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline, xcss } from '@atlaskit/primitives';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 const disabledStyles = css({
   display: 'none'
@@ -13,6 +16,16 @@ const disabledStyles = css({
 const enabledStyles = css({
   display: 'inherit'
 });
+const iconWrapperStyles = xcss({
+  padding: 'space.025'
+});
+
+/**
+ * __Multi value remove__
+ *
+ * The icon used to remove individual selections from a multi-select.
+ *
+ */
 export const MultiValueRemove = props => {
   const {
     isDisabled
@@ -20,11 +33,20 @@ 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(Inline, {
+    xcss: iconWrapperStyles
+  }, jsx(CrossIcon, {
     label: "Clear",
-    size: "small",
-    primaryColor: "transparent",
-    secondaryColor: "inherit"
-  })));
+    color: "currentColor",
+    LEGACY_fallbackIcon: LegacySelectClearIcon,
+    LEGACY_size: "small",
+    LEGACY_primaryColor: "transparent",
+    LEGACY_secondaryColor: "inherit",
+    LEGACY_margin: "var(--ds-space-negative-025, -2px)"
+  }))));
 };
 export const IndicatorSeparator = null;

package/dist/es2019/components/indicators.js

@@ -1,20 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @repo/internal/react/require-jsdoc */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { components } from 'react-select';
-import { Pressable, xcss } from '@atlaskit/primitives';
+
+// import LegacyDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import DownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import CrossIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import { Inline, Pressable, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
-import DownIcon from '@atlaskit/icon/glyph/chevron-down';
 const iconContainerStyles = xcss({
   all: 'unset',
   outline: 'revert',
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'space.025'
+});
+const dropdownWrapperStyles = xcss({
+  padding: 'space.075'
 });
 export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({}, props, {
   innerProps: {
@@ -24,13 +32,20 @@ export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({
 }), jsx(Pressable, {
   xcss: iconContainerStyles,
   tabIndex: -1
-}, jsx(SelectClearIcon, {
-  size: "small",
-  label: "clear"
+}, jsx(CrossIcon, {
+  label: "clear",
+  color: "currentColor",
+  LEGACY_size: "small",
+  LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
+})));
+export const DropdownIndicator = props => jsx(components.DropdownIndicator, props, jsx(Inline, {
+  as: "span",
+  xcss: dropdownWrapperStyles
+}, jsx(DownIcon, {
+  color: "currentColor",
+  label: "open",
+  LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
 })));
-export const DropdownIndicator = props => jsx(components.DropdownIndicator, props, jsx(DownIcon, {
-  label: "open"
-}));
 export const LoadingIndicator = props => {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   const loadingStyles = css(props.getStyles('loadingIndicator', props));

package/dist/es2019/components/input-options.js

@@ -5,11 +5,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import RadioIcon from '@atlaskit/icon/glyph/radio';
+import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
-import { B300, B400, B75, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
+import RadioIcon from '@atlaskit/icon/glyph/radio';
+import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
 const getPrimitiveStyles = props => {
   const {
     cx,
@@ -122,25 +122,23 @@ const getBorderColor = ({
   return `var(--ds-border-input, ${N100})`;
 };
 const baseIconStyles = css({
-  alignItems: 'center',
   display: 'flex ',
+  alignItems: 'center',
   flexShrink: 0,
   paddingInlineEnd: "var(--ds-space-050, 4px)",
-  // Here we are adding a border to the Checkbox and Radio SVG icons
-  // This is an a11y fix for Select only for now but it may be rolled
-  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: "var(--ds-border-width, 1px)",
-    strokeLinejoin: 'round'
+    strokeLinejoin: 'round',
+    strokeWidth: "var(--ds-border-width, 1px)"
   }
 });
 const baseOptionStyles = css({
-  textOverflow: 'ellipsis',
-  overflowX: 'hidden',
   flexGrow: 1,
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+// eslint-disable-next-line @repo/internal/react/no-class-components
 class ControlOption extends Component {
   constructor(...args) {
     super(...args);
@@ -222,9 +220,23 @@ class ControlOption extends Component {
     );
   }
 }
-export const CheckboxOption = props => jsx(ControlOption, _extends({
+
+/**
+ * __Checkbox option__
+ */
+export const CheckboxOption = (props
+// TODO https://product-fabric.atlassian.net/browse/DSP-20768
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+) => jsx(ControlOption, _extends({
   Icon: CheckboxIcon
 }, props));
-export const RadioOption = props => jsx(ControlOption, _extends({
+
+/**
+ * __Radio option__
+ */
+export const RadioOption = props =>
+// TODO https://product-fabric.atlassian.net/browse/DSP-20769
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+jsx(ControlOption, _extends({
   Icon: RadioIcon
 }, props));

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/esm/PopupSelect/PopupSelect.js

@@ -109,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':
@@ -530,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

@@ -10,7 +10,7 @@ import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { components } from 'react-select';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import { N40A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -69,6 +69,8 @@ var DropdownIndicator = function DropdownIndicator() {
   return jsx("div", {
     css: dropdownStyles
   }, jsx(SearchIcon, {
+    color: "currentColor",
+    spacing: "spacious",
     label: "open"
   }));
 };

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.1";
+var packageVersion = "17.16.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/index.js

@@ -3,9 +3,12 @@
  * @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 LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import CrossIcon from '@atlaskit/icon/utility/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline, xcss } from '@atlaskit/primitives';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 var disabledStyles = css({
   display: 'none'
@@ -13,16 +16,35 @@ var disabledStyles = css({
 var enabledStyles = css({
   display: 'inherit'
 });
+var iconWrapperStyles = xcss({
+  padding: 'space.025'
+});
+
+/**
+ * __Multi value remove__
+ *
+ * The icon used to remove individual selections from a multi-select.
+ *
+ */
 export var MultiValueRemove = function MultiValueRemove(props) {
   var isDisabled = props.selectProps.isDisabled;
   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(Inline, {
+    xcss: iconWrapperStyles
+  }, jsx(CrossIcon, {
     label: "Clear",
-    size: "small",
-    primaryColor: "transparent",
-    secondaryColor: "inherit"
-  })));
+    color: "currentColor",
+    LEGACY_fallbackIcon: LegacySelectClearIcon,
+    LEGACY_size: "small",
+    LEGACY_primaryColor: "transparent",
+    LEGACY_secondaryColor: "inherit",
+    LEGACY_margin: "var(--ds-space-negative-025, -2px)"
+  }))));
 };
 export var IndicatorSeparator = null;

package/dist/esm/components/indicators.js

@@ -2,22 +2,30 @@ import _extends from "@babel/runtime/helpers/extends";
 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; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { components } from 'react-select';
-import { Pressable, xcss } from '@atlaskit/primitives';
+
+// import LegacyDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import DownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import CrossIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import { Inline, Pressable, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
-import DownIcon from '@atlaskit/icon/glyph/chevron-down';
 var iconContainerStyles = xcss({
   all: 'unset',
   outline: 'revert',
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'space.025'
+});
+var dropdownWrapperStyles = xcss({
+  padding: 'space.075'
 });
 export var ClearIndicator = function ClearIndicator(props) {
   return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
@@ -27,15 +35,22 @@ export var ClearIndicator = function ClearIndicator(props) {
   }), jsx(Pressable, {
     xcss: iconContainerStyles,
     tabIndex: -1
-  }, jsx(SelectClearIcon, {
-    size: "small",
-    label: "clear"
+  }, jsx(CrossIcon, {
+    label: "clear",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
   })));
 };
 export var DropdownIndicator = function DropdownIndicator(props) {
-  return jsx(components.DropdownIndicator, props, jsx(DownIcon, {
-    label: "open"
-  }));
+  return jsx(components.DropdownIndicator, props, jsx(Inline, {
+    as: "span",
+    xcss: dropdownWrapperStyles
+  }, jsx(DownIcon, {
+    color: "currentColor",
+    label: "open",
+    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
+  })));
 };
 export var LoadingIndicator = function LoadingIndicator(props) {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/esm/components/input-options.js

@@ -18,11 +18,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import RadioIcon from '@atlaskit/icon/glyph/radio';
+import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
-import { B300, B400, B75, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
+import RadioIcon from '@atlaskit/icon/glyph/radio';
+import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,
@@ -125,25 +125,23 @@ var getBorderColor = function getBorderColor(_ref3) {
   return "var(--ds-border-input, ".concat(N100, ")");
 };
 var baseIconStyles = css({
-  alignItems: 'center',
   display: 'flex ',
+  alignItems: 'center',
   flexShrink: 0,
   paddingInlineEnd: "var(--ds-space-050, 4px)",
-  // Here we are adding a border to the Checkbox and Radio SVG icons
-  // This is an a11y fix for Select only for now but it may be rolled
-  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: "var(--ds-border-width, 1px)",
-    strokeLinejoin: 'round'
+    strokeLinejoin: 'round',
+    strokeWidth: "var(--ds-border-width, 1px)"
   }
 });
 var baseOptionStyles = css({
-  textOverflow: 'ellipsis',
-  overflowX: 'hidden',
   flexGrow: 1,
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var ControlOption = /*#__PURE__*/function (_Component) {
   _inherits(ControlOption, _Component);
   var _super = _createSuper(ControlOption);
@@ -234,13 +232,27 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   }]);
   return ControlOption;
 }(Component);
-export var CheckboxOption = function CheckboxOption(props) {
+/**
+ * __Checkbox option__
+ */
+export var CheckboxOption = function CheckboxOption(props
+// TODO https://product-fabric.atlassian.net/browse/DSP-20768
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+) {
   return jsx(ControlOption, _extends({
     Icon: CheckboxIcon
   }, props));
 };
+
+/**
+ * __Radio option__
+ */
 export var RadioOption = function RadioOption(props) {
-  return jsx(ControlOption, _extends({
-    Icon: RadioIcon
-  }, props));
+  return (
+    // TODO https://product-fabric.atlassian.net/browse/DSP-20769
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    jsx(ControlOption, _extends({
+      Icon: RadioIcon
+    }, props))
+  );
 };

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/types/PopupSelect/PopupSelect.d.ts

@@ -18,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.
      */
@@ -118,6 +122,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     popperWrapperId: string;
     static defaultProps: {
         closeMenuOnSelect: boolean;
+        shouldCloseMenuOnTab: boolean;
         components: {};
         maxMenuHeight: number;
         maxMenuWidth: number;

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

@@ -5,5 +5,11 @@
 import { jsx } from '@emotion/react';
 import { type MultiValueRemoveProps } from '../types';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
+/**
+ * __Multi value remove__
+ *
+ * The icon used to remove individual selections from a multi-select.
+ *
+ */
 export declare const MultiValueRemove: (props: MultiValueRemoveProps<any>) => jsx.JSX.Element;
 export declare const IndicatorSeparator: null;

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
 import { type OptionProps, type OptionType } from '../types';
+/**
+ * __Checkbox option__
+ */
 export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionProps<OptionT, true>) => JSX.Element;
+/**
+ * __Radio option__
+ */
 export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => jsx.JSX.Element;

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

@@ -18,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.
      */
@@ -118,6 +122,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     popperWrapperId: string;
     static defaultProps: {
         closeMenuOnSelect: boolean;
+        shouldCloseMenuOnTab: boolean;
         components: {};
         maxMenuHeight: number;
         maxMenuWidth: number;

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

@@ -5,5 +5,11 @@
 import { jsx } from '@emotion/react';
 import { type MultiValueRemoveProps } from '../types';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
+/**
+ * __Multi value remove__
+ *
+ * The icon used to remove individual selections from a multi-select.
+ *
+ */
 export declare const MultiValueRemove: (props: MultiValueRemoveProps<any>) => jsx.JSX.Element;
 export declare const IndicatorSeparator: null;

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
 import { type OptionProps, type OptionType } from '../types';
+/**
+ * __Checkbox option__
+ */
 export declare const CheckboxOption: <OptionT extends OptionType>(props: OptionProps<OptionT, true>) => JSX.Element;
+/**
+ * __Radio option__
+ */
 export declare const RadioOption: <OptionT extends OptionType>(props: OptionProps<OptionT, false>) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.15.1",
+	"version": "17.16.0",
 	"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,9 +39,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.14.0",
+		"@atlaskit/icon": "^22.16.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.59.0",
@@ -69,7 +65,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/checkbox": "^13.7.0",
+		"@atlaskit/checkbox": "^14.0.0",
 		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/radio": "^6.5.0",
@@ -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"
@@ -106,6 +101,12 @@
 	"platform-feature-flags": {
 		"platform-design-system-dsp-19701-no-node-resolver": {
 			"type": "boolean"
+		},
+		"platform-component-visual-refresh": {
+			"type": "boolean"
+		},
+		"tab-event-should-close-popupSelect": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/select/"