@atlaskit/react-select 2.0.5 → 2.0.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/react-select
 
+## 2.0.6
+
+### Patch Changes
+
+- [#123298](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123298)
+  [`8a9b860d5da36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a9b860d5da36) -
+  [ux] Improved accessibility for selected values
+
 ## 2.0.5
 
 ### Patch Changes

package/dist/cjs/components/live-region.js

@@ -1,20 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _accessibility = require("../accessibility");
 var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */ /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 // ==============================
 // Root Container
@@ -160,13 +164,13 @@ var LiveRegion = function LiveRegion(props) {
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-selection"
-  }, ariaSelected), (0, _react2.jsx)("span", {
+  }, ariaSelected), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+    id: "aria-results"
+  }, ariaResults), (0, _react2.jsx)("span", {
     id: "aria-focused"
   }, ariaFocused), (0, _react2.jsx)("span", {
-    id: "aria-results"
-  }, ariaResults), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)("span", {
     id: "aria-guidance"
-  }, ariaGuidance));
+  }, ariaGuidance)));
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MultiValueLabel = exports.MultiValueContainer = void 0;
 exports.MultiValueRemove = MultiValueRemove;
 exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
@@ -147,7 +146,7 @@ var renderIcon = function renderIcon() {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
     return (0, _react.jsx)(_cross.default, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     });
   }
@@ -157,14 +156,14 @@ var renderIcon = function renderIcon() {
     return (0, _react.jsx)(_primitives.Inline, {
       xcss: iconWrapperStyles
     }, (0, _react.jsx)(_cross.default, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     }));
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
     (0, _react.jsx)(_selectClear.default, {
-      label: "Clear",
+      label: "",
       primaryColor: "transparent",
       size: "small",
       secondaryColor: "inherit"
@@ -176,9 +175,7 @@ function MultiValueRemove(_ref5) {
     innerProps = _ref5.innerProps;
   return (
     // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      role: "button"
-    }, innerProps), (0, _react.jsx)("div", {
+    (0, _react.jsx)("div", innerProps, (0, _react.jsx)("div", {
       css: isDisabled ? disabledStyles : enabledStyles,
       "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
     }, renderIcon()))
@@ -214,7 +211,9 @@ var MultiValue = function MultiValue(props) {
     innerProps: _objectSpread(_objectSpread({}, (0, _utils.getStyleProps)(props, 'multiValueRemove', {
       'multi-value__remove': true
     })), {}, {
-      'aria-label': "Remove ".concat(ariaLabel || 'option')
+      role: 'button',
+      tabIndex: -1,
+      'aria-label': "".concat(ariaLabel || 'option', ", remove")
     }, removeProps),
     isDisabled: isDisabled,
     selectProps: selectProps

package/dist/cjs/select.js

@@ -239,6 +239,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       focusedOptionId: null,
       focusableOptionsWithIds: [],
       focusedValue: null,
+      focusedValueId: null,
       inputIsHidden: false,
       isFocused: false,
       selectValue: [],
@@ -740,6 +741,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             break;
           }
+          if (focusedValue) {
+            _this.removeValue(focusedValue);
+          }
           if (menuIsOpen) {
             if (!focusedOption) {
               return;
@@ -1010,7 +1014,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }
       this.setState({
         inputIsHidden: nextFocus !== -1,
-        focusedValue: selectValue[nextFocus]
+        focusedValue: selectValue[nextFocus],
+        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus),
+        focusedOption: null,
+        focusedOptionId: null
       });
     }
   }, {
@@ -1049,6 +1056,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       this.setState({
         focusedOption: options[nextFocus],
         focusedValue: null,
+        focusedValueId: null,
         focusedOptionId: this.getFocusedOptionId(options[nextFocus])
       });
     }
@@ -1261,7 +1269,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1360,11 +1368,14 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
-              }
+              },
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
             },
             data: opt,
-            innerProps: _objectSpread({}, testId && {
-              'data-testid': "".concat(testId, "-select--multivalue")
+            innerProps: _objectSpread(_objectSpread({}, testId && {
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
+            }), {}, {
+              id: "".concat(_this3.getElementId('selected-value'), "-").concat(index)
             })
           }), _this3.formatOptionLabel(opt, 'value'));
         });

package/dist/es2019/components/live-region.js

@@ -2,8 +2,9 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
-import { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../accessibility';
@@ -159,13 +160,13 @@ const LiveRegion = props => {
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   const ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx("span", {
+  }, ariaSelected), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
+    id: "aria-results"
+  }, ariaResults), jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
-    id: "aria-results"
-  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx("span", {
     id: "aria-guidance"
-  }, ariaGuidance));
+  }, ariaGuidance)));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {

package/dist/es2019/components/multi-value.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -138,7 +137,7 @@ const renderIcon = () => {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-component-visual-refresh')) {
     return jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     });
   }
@@ -148,14 +147,14 @@ const renderIcon = () => {
     return jsx(Inline, {
       xcss: iconWrapperStyles
     }, jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     }));
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
     jsx(LegacySelectClearIcon, {
-      label: "Clear",
+      label: "",
       primaryColor: "transparent",
       size: "small",
       secondaryColor: "inherit"
@@ -168,9 +167,7 @@ export function MultiValueRemove({
 }) {
   return (
     // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    jsx("div", _extends({
-      role: "button"
-    }, innerProps), jsx("div", {
+    jsx("div", innerProps, jsx("div", {
       css: isDisabled ? disabledStyles : enabledStyles,
       "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
     }, renderIcon()))
@@ -216,7 +213,9 @@ const MultiValue = props => {
       ...getStyleProps(props, 'multiValueRemove', {
         'multi-value__remove': true
       }),
-      'aria-label': `Remove ${ariaLabel || 'option'}`,
+      role: 'button',
+      tabIndex: -1,
+      'aria-label': `${ariaLabel || 'option'}, remove`,
       ...removeProps
     },
     isDisabled: isDisabled,

package/dist/es2019/select.js

@@ -209,6 +209,7 @@ export default class Select extends Component {
       focusedOptionId: null,
       focusableOptionsWithIds: [],
       focusedValue: null,
+      focusedValueId: null,
       inputIsHidden: false,
       isFocused: false,
       selectValue: [],
@@ -716,6 +717,9 @@ export default class Select extends Component {
             // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             break;
           }
+          if (focusedValue) {
+            this.removeValue(focusedValue);
+          }
           if (menuIsOpen) {
             if (!focusedOption) {
               return;
@@ -1033,7 +1037,10 @@ export default class Select extends Component {
     }
     this.setState({
       inputIsHidden: nextFocus !== -1,
-      focusedValue: selectValue[nextFocus]
+      focusedValue: selectValue[nextFocus],
+      focusedValueId: `${this.getElementId('selected-value')}-${nextFocus}`,
+      focusedOption: null,
+      focusedOptionId: null
     });
   }
   focusOption(direction = 'first') {
@@ -1073,6 +1080,7 @@ export default class Select extends Component {
     this.setState({
       focusedOption: options[nextFocus],
       focusedValue: null,
+      focusedValueId: null,
       focusedOptionId: this.getFocusedOptionId(options[nextFocus])
     });
   }
@@ -1271,7 +1279,7 @@ export default class Select extends Component {
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
-      'aria-activedescendant': this.state.focusedOptionId || undefined,
+      'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
@@ -1373,13 +1381,15 @@ export default class Select extends Component {
             onTouchEnd: () => this.removeValue(opt),
             onMouseDown: e => {
               e.preventDefault();
-            }
+            },
+            'data-testid': `${testId}-select--multivalue-${index}-remove`
           },
           data: opt,
           innerProps: {
             ...(testId && {
-              'data-testid': `${testId}-select--multivalue`
-            })
+              'data-testid': `${testId}-select--multivalue-${index}`
+            }),
+            id: `${this.getElementId('selected-value')}-${index}`
           }
         }), this.formatOptionLabel(opt, 'value'));
       });

package/dist/esm/components/live-region.js

@@ -5,8 +5,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
-import { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultAriaLiveMessages } from '../accessibility';
@@ -156,13 +157,13 @@ var LiveRegion = function LiveRegion(props) {
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx("span", {
+  }, ariaSelected), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
+    id: "aria-results"
+  }, ariaResults), jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
-    id: "aria-results"
-  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx("span", {
     id: "aria-guidance"
-  }, ariaGuidance));
+  }, ariaGuidance)));
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {

package/dist/esm/components/multi-value.js

@@ -1,4 +1,3 @@
-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; }
@@ -140,7 +139,7 @@ var renderIcon = function renderIcon() {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if (fg('platform-component-visual-refresh')) {
     return jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     });
   }
@@ -150,14 +149,14 @@ var renderIcon = function renderIcon() {
     return jsx(Inline, {
       xcss: iconWrapperStyles
     }, jsx(CrossIcon, {
-      label: "Clear",
+      label: "",
       color: "currentColor"
     }));
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
     jsx(LegacySelectClearIcon, {
-      label: "Clear",
+      label: "",
       primaryColor: "transparent",
       size: "small",
       secondaryColor: "inherit"
@@ -169,9 +168,7 @@ export function MultiValueRemove(_ref5) {
     innerProps = _ref5.innerProps;
   return (
     // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
-    jsx("div", _extends({
-      role: "button"
-    }, innerProps), jsx("div", {
+    jsx("div", innerProps, jsx("div", {
       css: isDisabled ? disabledStyles : enabledStyles,
       "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
     }, renderIcon()))
@@ -207,7 +204,9 @@ var MultiValue = function MultiValue(props) {
     innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValueRemove', {
       'multi-value__remove': true
     })), {}, {
-      'aria-label': "Remove ".concat(ariaLabel || 'option')
+      role: 'button',
+      tabIndex: -1,
+      'aria-label': "".concat(ariaLabel || 'option', ", remove")
     }, removeProps),
     isDisabled: isDisabled,
     selectProps: selectProps

package/dist/esm/select.js

@@ -230,6 +230,7 @@ var Select = /*#__PURE__*/function (_Component) {
       focusedOptionId: null,
       focusableOptionsWithIds: [],
       focusedValue: null,
+      focusedValueId: null,
       inputIsHidden: false,
       isFocused: false,
       selectValue: [],
@@ -731,6 +732,9 @@ var Select = /*#__PURE__*/function (_Component) {
             // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             break;
           }
+          if (focusedValue) {
+            _this.removeValue(focusedValue);
+          }
           if (menuIsOpen) {
             if (!focusedOption) {
               return;
@@ -1001,7 +1005,10 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       this.setState({
         inputIsHidden: nextFocus !== -1,
-        focusedValue: selectValue[nextFocus]
+        focusedValue: selectValue[nextFocus],
+        focusedValueId: "".concat(this.getElementId('selected-value'), "-").concat(nextFocus),
+        focusedOption: null,
+        focusedOptionId: null
       });
     }
   }, {
@@ -1040,6 +1047,7 @@ var Select = /*#__PURE__*/function (_Component) {
       this.setState({
         focusedOption: options[nextFocus],
         focusedValue: null,
+        focusedValueId: null,
         focusedOptionId: this.getFocusedOptionId(options[nextFocus])
       });
     }
@@ -1252,7 +1260,7 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || undefined
+        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1351,11 +1359,14 @@ var Select = /*#__PURE__*/function (_Component) {
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
-              }
+              },
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
             },
             data: opt,
-            innerProps: _objectSpread({}, testId && {
-              'data-testid': "".concat(testId, "-select--multivalue")
+            innerProps: _objectSpread(_objectSpread({}, testId && {
+              'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
+            }), {}, {
+              id: "".concat(_this3.getElementId('selected-value'), "-").concat(index)
             })
           }), _this3.formatOptionLabel(opt, 'value'));
         });

package/dist/types/components/live-region.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/select.d.ts

@@ -475,6 +475,7 @@ interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>
     focusedOptionId: string | null;
     focusableOptionsWithIds: FocusableOptionWithId<Option>[];
     focusedValue: Option | null;
+    focusedValueId: string | null;
     selectValue: Options<Option>;
     clearFocusValueOnUpdate: boolean;
     prevWasFocused: boolean;
@@ -618,7 +619,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     getOptionValue: (data: Option) => string;
     getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
     getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
-    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message' | 'selected-value') => string;
     getComponents: () => {
         ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
         Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;

package/dist/types-ts4.5/components/live-region.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

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

@@ -475,6 +475,7 @@ interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>
     focusedOptionId: string | null;
     focusableOptionsWithIds: FocusableOptionWithId<Option>[];
     focusedValue: Option | null;
+    focusedValueId: string | null;
     selectValue: Options<Option>;
     clearFocusValueOnUpdate: boolean;
     prevWasFocused: boolean;
@@ -618,7 +619,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     getOptionValue: (data: Option) => string;
     getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
     getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
-    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message' | 'selected-value') => string;
     getComponents: () => {
         ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
         Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",