@atlaskit/select 17.19.2 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/select
 
+## 18.0.0
+
+### Major Changes
+
+- [#143559](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143559)
+  [`56dfbfe361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56dfbfe361f96) -
+  Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select
+
+### Patch Changes
+
+- [#143559](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143559)
+  [`56dfbfe361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56dfbfe361f96) -
+  Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select
+
+## 17.19.3
+
+### Patch Changes
+
+- [#146891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146891)
+  [`1946e3bf8c6c9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1946e3bf8c6c9) -
+  Internal change only: update feature flag names.
+
 ## 17.19.2
 
 ### Patch Changes

package/dist/cjs/AsyncCreatableSelect.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _asyncCreatable = _interopRequireDefault(require("react-select/async-creatable"));
+var _asyncCreatable = _interopRequireDefault(require("@atlaskit/react-select/async-creatable"));
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var AsyncCreatableSelect = (0, _createSelect.default)(_asyncCreatable.default);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = AsyncCreatableSelect;

package/dist/cjs/AsyncSelect.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _async = _interopRequireDefault(require("react-select/async"));
+var _async = _interopRequireDefault(require("@atlaskit/react-select/async"));
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var AsyncSelect = (0, _createSelect.default)(_async.default);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = AsyncSelect;

package/dist/cjs/CountrySelect.js

@@ -78,17 +78,6 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 };
 
 // put it all together
-// 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.
-/**
- * __Country select__
- *
- * A country select {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
 var CountrySelect = function CountrySelect(props) {
   var ariaLiveMessages = props.ariaLiveMessages,
     options = props.options;
@@ -107,4 +96,6 @@ var CountrySelect = function CountrySelect(props) {
     }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
   }, props));
 };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = CountrySelect;

package/dist/cjs/CreatableSelect.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _creatable = _interopRequireDefault(require("react-select/creatable"));
+var _creatable = _interopRequireDefault(require("@atlaskit/react-select/creatable"));
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var CreatableSelect = (0, _createSelect.default)(_creatable.default);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = CreatableSelect;

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -22,10 +22,10 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactFocusLockNext = _interopRequireDefault(require("react-focus-lock-next"));
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _reactPopper = require("react-popper");
-var _reactSelect = require("react-select");
 var _reactUid = require("react-uid");
 var _shallowEqual = require("shallow-equal");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
 var _Select = _interopRequireDefault(require("../Select"));
 var _styles = _interopRequireDefault(require("../styles"));
@@ -200,7 +200,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       if (onOpen) {
         onOpen();
       }
-      if (onMenuOpen && (0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver')) {
+      if (onMenuOpen && (0, _platformFeatureFlags.fg)('platform_design_system_team_select_node_resolver')) {
         onMenuOpen();
       }
       _this.setState({
@@ -229,6 +229,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
+      //@ts-ignore react-select unsupported props
       var _this$props3 = _this.props,
         onClose = _this$props3.onClose,
         onMenuClose = _this$props3.onMenuClose;
@@ -239,7 +240,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       if (onClose) {
         onClose();
       }
-      if (onMenuClose && (0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver')) {
+      if (onMenuClose && (0, _platformFeatureFlags.fg)('platform_design_system_team_select_node_resolver')) {
         onMenuClose();
       }
       _this.setState({
@@ -338,7 +339,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
         onMenuOpen = _this$props5.onMenuOpen,
         onMenuClose = _this$props5.onMenuClose,
         props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
-      var menuHandlers = !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver') ? {
+      var menuHandlers = !(0, _platformFeatureFlags.fg)('platform_design_system_team_select_node_resolver') ? {
         onMenuOpen: onMenuOpen,
         onMenuClose: onMenuClose
       } : {};
@@ -420,10 +421,10 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           style = _ref2.style;
         return (
           /*#__PURE__*/
-          // When the feature flag 'platform-design-system-dsp-19701-no-node-resolver' is enabled,
+          // When the feature flag 'platform_design_system_team_select_node_resolver' is enabled,
           // we directly pass the ref to MenuDialog instead of wrapping it with NodeResolver.
           _react.default.createElement(ConditionalNodeResolverWrapper, {
-            hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver'),
+            hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_select_node_resolver'),
             innerRef: _this.resolveMenuRef(ref)
           }, /*#__PURE__*/_react.default.createElement(_components.MenuDialog
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -434,7 +435,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
             maxWidth: maxMenuWidth,
             id: _this.popperWrapperId,
             testId: testId,
-            ref: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-19701-no-node-resolver') ? null : _this.resolveMenuRef(ref)
+            ref: !(0, _platformFeatureFlags.fg)('platform_design_system_team_select_node_resolver') ? null : _this.resolveMenuRef(ref)
           }, /*#__PURE__*/_react.default.createElement(FocusLock, {
             disabled: !focusLockEnabled,
             returnFocus: true

package/dist/cjs/PopupSelect/components.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactSelect = require("react-select");
 var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
+var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));

package/dist/cjs/RadioSelect.js

@@ -30,4 +30,6 @@ var RadioSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
     components: mergedComponents
   }));
 });
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = RadioSelect;

package/dist/cjs/Select.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SelectWithoutAnalytics = void 0;
-var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _reactSelect = _interopRequireDefault(require("@atlaskit/react-select"));
 var _createSelect = _interopRequireDefault(require("./createSelect"));
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 var packageName = "@atlaskit/select";
-var packageVersion = "17.19.2";
+var packageVersion = "18.0.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,11 +25,11 @@ Object.defineProperty(exports, "LoadingIndicator", {
 });
 exports.MultiValueRemove = void 0;
 var _react = require("@emotion/react");
-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 _reactSelect = require("@atlaskit/react-select");
 var _indicators = require("./indicators");
 /**
  * @jsxRuntime classic

package/dist/cjs/components/indicators.js

@@ -8,10 +8,10 @@ exports.LoadingIndicator = exports.DropdownIndicator = exports.ClearIndicator =
 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 _reactSelect = require("@atlaskit/react-select");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 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 @repo/internal/react/require-jsdoc */ /**

package/dist/cjs/components/input-aria-describedby.js

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.Input = Input;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _reactSelect = require("react-select");
+var _reactSelect = require("@atlaskit/react-select");
 function Input(props) {
-  var ariaDescribedByAttribute;
-  var passed_describedby = props.selectProps['aria-describedby'];
-  if (props['aria-describedby'] && passed_describedby) {
+  var _ariaDescribedByAttri;
+  var ariaDescribedByAttribute = props['aria-describedby'];
+  var passed_describedby = props.selectProps['aria-describedby'] || props.selectProps.descriptionId;
+  if (passed_describedby && !((_ariaDescribedByAttri = ariaDescribedByAttribute) !== null && _ariaDescribedByAttri !== void 0 && _ariaDescribedByAttri.includes(passed_describedby))) {
     ariaDescribedByAttribute = props['aria-describedby'] + ' ' + passed_describedby;
   } else {
     ariaDescribedByAttribute = props['aria-describedby'] || passed_describedby;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NoOptionsMessage = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactSelect = require("react-select");
 var _primitives = require("@atlaskit/primitives");
+var _reactSelect = require("@atlaskit/react-select");
 /**
  * __No options message__
  */

package/dist/cjs/createSelect.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactSelect = require("react-select");
+var _reactSelect = require("@atlaskit/react-select");
 var _components = require("./components");
 var _inputAriaDescribedby = require("./components/input-aria-describedby");
 var _noOptions = require("./components/no-options");

package/dist/cjs/index.js

@@ -119,9 +119,9 @@ Object.defineProperty(exports, "useCreatable", {
     return _creatable.useCreatable;
   }
 });
-var _reactSelect = require("react-select");
-var _async = require("react-select/async");
-var _creatable = require("react-select/creatable");
+var _reactSelect = require("@atlaskit/react-select");
+var _async = require("@atlaskit/react-select/async");
+var _creatable = require("@atlaskit/react-select/creatable");
 var _inputOptions = require("./components/input-options");
 var _select = _interopRequireWildcard(require("./entry-points/select"));
 var _asyncSelect = _interopRequireDefault(require("./entry-points/async-select"));

package/dist/es2019/AsyncCreatableSelect.js

@@ -1,4 +1,6 @@
-import AsyncCreatableReactSelect from 'react-select/async-creatable';
+import AsyncCreatableReactSelect from '@atlaskit/react-select/async-creatable';
 import createSelect from './createSelect';
 const AsyncCreatableSelect = createSelect(AsyncCreatableReactSelect);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AsyncCreatableSelect;

package/dist/es2019/AsyncSelect.js

@@ -1,4 +1,6 @@
-import AsyncReactSelect from 'react-select/async';
+import AsyncReactSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const AsyncSelect = createSelect(AsyncReactSelect);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AsyncSelect;

package/dist/es2019/CountrySelect.js

@@ -63,17 +63,6 @@ const formatOptionLabel = (opt, {
 }) => context === 'value' ? controlLabel(opt) : optionLabel(opt);
 
 // put it all together
-// 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.
-/**
- * __Country select__
- *
- * A country select {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
 const CountrySelect = props => {
   const {
     ariaLiveMessages,
@@ -95,4 +84,6 @@ const CountrySelect = props => {
     }
   }, props));
 };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default CountrySelect;

package/dist/es2019/CreatableSelect.js

@@ -1,4 +1,6 @@
-import CreatableReactSelect from 'react-select/creatable';
+import CreatableReactSelect from '@atlaskit/react-select/creatable';
 import createSelect from './createSelect';
 const CreatableSelect = createSelect(CreatableReactSelect);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default CreatableSelect;

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -8,10 +8,10 @@ import FocusLockOld from 'react-focus-lock';
 import FocusLockNext from 'react-focus-lock-next';
 import NodeResolver from 'react-node-resolver';
 import { Manager, Popper, Reference } from 'react-popper';
-import { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
 import baseStyles from '../styles';
@@ -172,7 +172,7 @@ export default class PopupSelect extends PureComponent {
       if (onOpen) {
         onOpen();
       }
-      if (onMenuOpen && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+      if (onMenuOpen && fg('platform_design_system_team_select_node_resolver')) {
         onMenuOpen();
       }
       this.setState({
@@ -201,6 +201,7 @@ export default class PopupSelect extends PureComponent {
      */
     _defineProperty(this, "close", options => {
       var _this$unbindWindowKey;
+      //@ts-ignore react-select unsupported props
       const {
         onClose,
         onMenuClose
@@ -212,7 +213,7 @@ export default class PopupSelect extends PureComponent {
       if (onClose) {
         onClose();
       }
-      if (onMenuClose && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+      if (onMenuClose && fg('platform_design_system_team_select_node_resolver')) {
         onMenuClose();
       }
       this.setState({
@@ -311,7 +312,7 @@ export default class PopupSelect extends PureComponent {
         onMenuClose,
         ...props
       } = this.props;
-      const menuHandlers = !fg('platform-design-system-dsp-19701-no-node-resolver') ? {
+      const menuHandlers = !fg('platform_design_system_team_select_node_resolver') ? {
         onMenuOpen,
         onMenuClose
       } : {};
@@ -398,10 +399,10 @@ export default class PopupSelect extends PureComponent {
         style
       }) =>
       /*#__PURE__*/
-      // When the feature flag 'platform-design-system-dsp-19701-no-node-resolver' is enabled,
+      // When the feature flag 'platform_design_system_team_select_node_resolver' is enabled,
       // we directly pass the ref to MenuDialog instead of wrapping it with NodeResolver.
       React.createElement(ConditionalNodeResolverWrapper, {
-        hasNodeResolver: !fg('platform-design-system-dsp-19701-no-node-resolver'),
+        hasNodeResolver: !fg('platform_design_system_team_select_node_resolver'),
         innerRef: this.resolveMenuRef(ref)
       }, /*#__PURE__*/React.createElement(MenuDialog
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -412,7 +413,7 @@ export default class PopupSelect extends PureComponent {
         maxWidth: maxMenuWidth,
         id: this.popperWrapperId,
         testId: testId,
-        ref: !fg('platform-design-system-dsp-19701-no-node-resolver') ? null : this.resolveMenuRef(ref)
+        ref: !fg('platform_design_system_team_select_node_resolver') ? null : this.resolveMenuRef(ref)
       }, /*#__PURE__*/React.createElement(FocusLock, {
         disabled: !focusLockEnabled,
         returnFocus: true

package/dist/es2019/PopupSelect/components.js

@@ -7,8 +7,8 @@ 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/core/migration/search--editor-search';
+import { components } from '@atlaskit/react-select';
 import { N40A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';

package/dist/es2019/RadioSelect.js

@@ -15,4 +15,6 @@ const RadioSelect = /*#__PURE__*/React.memo(({
     components: mergedComponents
   }));
 });
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default RadioSelect;

package/dist/es2019/Select.js

@@ -1,8 +1,9 @@
-import ReactSelect from 'react-select';
-import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
+/* eslint-disable @repo/internal/react/require-jsdoc */
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import ReactSelect from '@atlaskit/react-select';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.19.2";
+const packageVersion = "18.0.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/index.js

@@ -4,11 +4,11 @@
  */
 // 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 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';
+import { components } from '@atlaskit/react-select';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 const disabledStyles = css({
   display: 'none'

package/dist/es2019/components/indicators.js

@@ -6,10 +6,10 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // 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 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 { components } from '@atlaskit/react-select';
 import Spinner from '@atlaskit/spinner';
 const iconContainerStyles = xcss({
   all: 'unset',

package/dist/es2019/components/input-aria-describedby.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { components } from 'react-select';
+import { components } from '@atlaskit/react-select';
 export function Input(props) {
-  let ariaDescribedByAttribute;
-  const passed_describedby = props.selectProps['aria-describedby'];
-  if (props['aria-describedby'] && passed_describedby) {
+  var _ariaDescribedByAttri;
+  let ariaDescribedByAttribute = props['aria-describedby'];
+  const passed_describedby = props.selectProps['aria-describedby'] || props.selectProps.descriptionId;
+  if (passed_describedby && !((_ariaDescribedByAttri = ariaDescribedByAttribute) !== null && _ariaDescribedByAttri !== void 0 && _ariaDescribedByAttri.includes(passed_describedby))) {
     ariaDescribedByAttribute = props['aria-describedby'] + ' ' + passed_describedby;
   } else {
     ariaDescribedByAttribute = props['aria-describedby'] || passed_describedby;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { components } from 'react-select';
 import { Text } from '@atlaskit/primitives';
+import { components } from '@atlaskit/react-select';
 /**
  * __No options message__
  */

package/dist/es2019/createSelect.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { mergeStyles } from 'react-select';
+import { mergeStyles } from '@atlaskit/react-select';
 import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';

package/dist/es2019/index.js

@@ -1,6 +1,6 @@
-export { components, createFilter, mergeStyles } from 'react-select';
-export { useAsync } from 'react-select/async';
-export { useCreatable } from 'react-select/creatable';
+export { components, createFilter, mergeStyles } from '@atlaskit/react-select';
+export { useAsync } from '@atlaskit/react-select/async';
+export { useCreatable } from '@atlaskit/react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
 export { default, SelectWithoutAnalytics } from './entry-points/select';
 export { default as AsyncSelect } from './entry-points/async-select';

package/dist/esm/AsyncCreatableSelect.js

@@ -1,4 +1,6 @@
-import AsyncCreatableReactSelect from 'react-select/async-creatable';
+import AsyncCreatableReactSelect from '@atlaskit/react-select/async-creatable';
 import createSelect from './createSelect';
 var AsyncCreatableSelect = createSelect(AsyncCreatableReactSelect);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AsyncCreatableSelect;

package/dist/esm/AsyncSelect.js

@@ -1,4 +1,6 @@
-import AsyncReactSelect from 'react-select/async';
+import AsyncReactSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 var AsyncSelect = createSelect(AsyncReactSelect);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AsyncSelect;

package/dist/esm/CountrySelect.js

@@ -74,17 +74,6 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 };
 
 // put it all together
-// 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.
-/**
- * __Country select__
- *
- * A country select {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
 var CountrySelect = function CountrySelect(props) {
   var ariaLiveMessages = props.ariaLiveMessages,
     options = props.options;
@@ -103,4 +92,6 @@ var CountrySelect = function CountrySelect(props) {
     }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
   }, props));
 };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default CountrySelect;

package/dist/esm/CreatableSelect.js

@@ -1,4 +1,6 @@
-import CreatableReactSelect from 'react-select/creatable';
+import CreatableReactSelect from '@atlaskit/react-select/creatable';
 import createSelect from './createSelect';
 var CreatableSelect = createSelect(CreatableReactSelect);
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default CreatableSelect;

package/dist/esm/PopupSelect/PopupSelect.js

@@ -20,10 +20,10 @@ import FocusLockOld from 'react-focus-lock';
 import FocusLockNext from 'react-focus-lock-next';
 import NodeResolver from 'react-node-resolver';
 import { Manager, Popper, Reference } from 'react-popper';
-import { mergeStyles } from 'react-select';
 import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
 import baseStyles from '../styles';
@@ -191,7 +191,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       if (onOpen) {
         onOpen();
       }
-      if (onMenuOpen && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+      if (onMenuOpen && fg('platform_design_system_team_select_node_resolver')) {
         onMenuOpen();
       }
       _this.setState({
@@ -220,6 +220,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
      */
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
+      //@ts-ignore react-select unsupported props
       var _this$props3 = _this.props,
         onClose = _this$props3.onClose,
         onMenuClose = _this$props3.onMenuClose;
@@ -230,7 +231,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       if (onClose) {
         onClose();
       }
-      if (onMenuClose && fg('platform-design-system-dsp-19701-no-node-resolver')) {
+      if (onMenuClose && fg('platform_design_system_team_select_node_resolver')) {
         onMenuClose();
       }
       _this.setState({
@@ -329,7 +330,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         onMenuOpen = _this$props5.onMenuOpen,
         onMenuClose = _this$props5.onMenuClose,
         props = _objectWithoutProperties(_this$props5, _excluded);
-      var menuHandlers = !fg('platform-design-system-dsp-19701-no-node-resolver') ? {
+      var menuHandlers = !fg('platform_design_system_team_select_node_resolver') ? {
         onMenuOpen: onMenuOpen,
         onMenuClose: onMenuClose
       } : {};
@@ -411,10 +412,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           style = _ref2.style;
         return (
           /*#__PURE__*/
-          // When the feature flag 'platform-design-system-dsp-19701-no-node-resolver' is enabled,
+          // When the feature flag 'platform_design_system_team_select_node_resolver' is enabled,
           // we directly pass the ref to MenuDialog instead of wrapping it with NodeResolver.
           React.createElement(ConditionalNodeResolverWrapper, {
-            hasNodeResolver: !fg('platform-design-system-dsp-19701-no-node-resolver'),
+            hasNodeResolver: !fg('platform_design_system_team_select_node_resolver'),
             innerRef: _this.resolveMenuRef(ref)
           }, /*#__PURE__*/React.createElement(MenuDialog
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -425,7 +426,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
             maxWidth: maxMenuWidth,
             id: _this.popperWrapperId,
             testId: testId,
-            ref: !fg('platform-design-system-dsp-19701-no-node-resolver') ? null : _this.resolveMenuRef(ref)
+            ref: !fg('platform_design_system_team_select_node_resolver') ? null : _this.resolveMenuRef(ref)
           }, /*#__PURE__*/React.createElement(FocusLock, {
             disabled: !focusLockEnabled,
             returnFocus: true

package/dist/esm/PopupSelect/components.js

@@ -9,8 +9,8 @@ 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/core/migration/search--editor-search';
+import { components } from '@atlaskit/react-select';
 import { N40A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';

package/dist/esm/RadioSelect.js

@@ -20,4 +20,6 @@ var RadioSelect = /*#__PURE__*/React.memo(function (_ref) {
     components: mergedComponents
   }));
 });
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default RadioSelect;

package/dist/esm/Select.js

@@ -1,8 +1,9 @@
-import ReactSelect from 'react-select';
-import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
+/* eslint-disable @repo/internal/react/require-jsdoc */
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import ReactSelect from '@atlaskit/react-select';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.19.2";
+var packageVersion = "18.0.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/index.js

@@ -4,11 +4,11 @@
  */
 // 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 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';
+import { components } from '@atlaskit/react-select';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
 var disabledStyles = css({
   display: 'none'

package/dist/esm/components/indicators.js

@@ -9,10 +9,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 // 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 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 { components } from '@atlaskit/react-select';
 import Spinner from '@atlaskit/spinner';
 var iconContainerStyles = xcss({
   all: 'unset',

package/dist/esm/components/input-aria-describedby.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { components } from 'react-select';
+import { components } from '@atlaskit/react-select';
 export function Input(props) {
-  var ariaDescribedByAttribute;
-  var passed_describedby = props.selectProps['aria-describedby'];
-  if (props['aria-describedby'] && passed_describedby) {
+  var _ariaDescribedByAttri;
+  var ariaDescribedByAttribute = props['aria-describedby'];
+  var passed_describedby = props.selectProps['aria-describedby'] || props.selectProps.descriptionId;
+  if (passed_describedby && !((_ariaDescribedByAttri = ariaDescribedByAttribute) !== null && _ariaDescribedByAttri !== void 0 && _ariaDescribedByAttri.includes(passed_describedby))) {
     ariaDescribedByAttribute = props['aria-describedby'] + ' ' + passed_describedby;
   } else {
     ariaDescribedByAttribute = props['aria-describedby'] || passed_describedby;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { components } from 'react-select';
 import { Text } from '@atlaskit/primitives';
+import { components } from '@atlaskit/react-select';
 /**
  * __No options message__
  */

package/dist/esm/createSelect.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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-next-line @repo/internal/fs/filename-pattern-match
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { mergeStyles } from 'react-select';
+import { mergeStyles } from '@atlaskit/react-select';
 import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-export { components, createFilter, mergeStyles } from 'react-select';
-export { useAsync } from 'react-select/async';
-export { useCreatable } from 'react-select/creatable';
+export { components, createFilter, mergeStyles } from '@atlaskit/react-select';
+export { useAsync } from '@atlaskit/react-select/async';
+export { useCreatable } from '@atlaskit/react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
 export { default, SelectWithoutAnalytics } from './entry-points/select';
 export { default as AsyncSelect } from './entry-points/async-select';

package/dist/types/CountrySelect.d.ts

@@ -6,14 +6,5 @@ import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { type SelectProps } from './types';
 type Country = (typeof groupedCountries)[number]['options'][number];
-/**
- * __Country select__
- *
- * A country select {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
 declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
 export default CountrySelect;

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

@@ -1,7 +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 GroupBase } from '@atlaskit/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'>;
@@ -113,9 +113,9 @@ 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;
+            IndicatorSeparator: (props: import("@atlaskit/react-select").IndicatorSeparatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            ClearIndicator: (props: import("@atlaskit/react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            MultiValueRemove: (props: import("@atlaskit/react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };

package/dist/types/components/input-aria-describedby.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type InputProps } from 'react-select';
+import { type InputProps } from '@atlaskit/react-select';
 import type { OptionType } from '../types';
 export declare function Input<Option = OptionType, IsMulti extends boolean = false>(props: InputProps<Option, IsMulti>): JSX.Element;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
-export { components, createFilter, mergeStyles } from 'react-select';
-export { useAsync } from 'react-select/async';
-export { useCreatable } from 'react-select/creatable';
+export { components, createFilter, mergeStyles } from '@atlaskit/react-select';
+export { useAsync } from '@atlaskit/react-select/async';
+export { useCreatable } from '@atlaskit/react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
 export { default, SelectWithoutAnalytics } from './entry-points/select';
 export { default as AsyncSelect } from './entry-points/async-select';

package/dist/types/types.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from 'react-select';
-import { type AsyncProps } from 'react-select/async';
-import type BaseSelect from 'react-select/base';
-import { type CreatableProps } from 'react-select/creatable';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from '@atlaskit/react-select';
+import { type AsyncProps } from '@atlaskit/react-select/async';
+import type BaseSelect from '@atlaskit/react-select/base';
+import { type CreatableProps } from '@atlaskit/react-select/creatable';
 export type ValidationState = 'default' | 'error' | 'success';
 export interface OptionType {
     [key: string]: any;
@@ -50,12 +50,17 @@ interface CustomSelectProps extends WithAnalyticsEventsProps {
      * @deprecated Use isInvalid instead. The state of validation if used in a form.
      */
     validationState?: ValidationState;
+    descriptionId?: string;
+    onClickPreventDefault?: boolean;
 }
 export interface SelectProps<Option, IsMulti extends boolean = false> extends ReactSelectProps<Option, IsMulti>, CustomSelectProps {
+    [key: string]: any;
 }
 export interface AsyncSelectProps<Option, IsMulti extends boolean = false> extends AsyncProps<Option, IsMulti, GroupType<Option>>, CustomSelectProps {
+    [key: string]: any;
 }
 export interface CreatableSelectProps<Option, IsMulti extends boolean = false> extends CreatableProps<Option, IsMulti, GroupType<Option>>, CustomSelectProps {
+    [key: string]: any;
 }
 export type ActionMeta<Option = OptionType> = RSActionMeta<Option>;
 export type ControlProps<Option, IsMulti extends boolean = false> = RSControlProps<Option, IsMulti>;
@@ -74,8 +79,3 @@ export type AtlaskitSelectRefType = {
     focus: () => void;
 };
 export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, AriaOnFocusProps, };
-declare module 'react-select/base' {
-    interface Props<Option, IsMulti extends boolean, Group extends GroupType<Option>> {
-        [key: string]: any;
-    }
-}

package/dist/types/utils/country-groups-announcement.d.ts

@@ -1,4 +1,4 @@
-import { type AriaOnFocusProps, type OptionsOrGroups } from 'react-select';
+import { type AriaOnFocusProps, type OptionsOrGroups } from '@atlaskit/react-select';
 import { type GroupType } from '../types';
 type Country = {
     icon: string;

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

@@ -1,4 +1,4 @@
-import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from 'react-select';
+import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
 import { type GroupType, type OptionType } from '../types';
 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;

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

@@ -6,14 +6,5 @@ import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { type SelectProps } from './types';
 type Country = (typeof groupedCountries)[number]['options'][number];
-/**
- * __Country select__
- *
- * A country select {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
 declare const CountrySelect: (props: SelectProps<Country>) => jsx.JSX.Element;
 export default CountrySelect;

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

@@ -1,7 +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 GroupBase } from '@atlaskit/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'>;
@@ -113,9 +113,9 @@ 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;
+            IndicatorSeparator: (props: import("@atlaskit/react-select").IndicatorSeparatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            ClearIndicator: (props: import("@atlaskit/react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
+            MultiValueRemove: (props: import("@atlaskit/react-select").MultiValueRemoveProps<unknown, boolean, GroupBase<unknown>>) => import("@emotion/react").jsx.JSX.Element;
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type InputProps } from 'react-select';
+import { type InputProps } from '@atlaskit/react-select';
 import type { OptionType } from '../types';
 export declare function Input<Option = OptionType, IsMulti extends boolean = false>(props: InputProps<Option, IsMulti>): JSX.Element;

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

@@ -1,6 +1,6 @@
-export { components, createFilter, mergeStyles } from 'react-select';
-export { useAsync } from 'react-select/async';
-export { useCreatable } from 'react-select/creatable';
+export { components, createFilter, mergeStyles } from '@atlaskit/react-select';
+export { useAsync } from '@atlaskit/react-select/async';
+export { useCreatable } from '@atlaskit/react-select/creatable';
 export { CheckboxOption, RadioOption } from './components/input-options';
 export { default, SelectWithoutAnalytics } from './entry-points/select';
 export { default as AsyncSelect } from './entry-points/async-select';

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from 'react-select';
-import { type AsyncProps } from 'react-select/async';
-import type BaseSelect from 'react-select/base';
-import { type CreatableProps } from 'react-select/creatable';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from '@atlaskit/react-select';
+import { type AsyncProps } from '@atlaskit/react-select/async';
+import type BaseSelect from '@atlaskit/react-select/base';
+import { type CreatableProps } from '@atlaskit/react-select/creatable';
 export type ValidationState = 'default' | 'error' | 'success';
 export interface OptionType {
     [key: string]: any;
@@ -50,12 +50,17 @@ interface CustomSelectProps extends WithAnalyticsEventsProps {
      * @deprecated Use isInvalid instead. The state of validation if used in a form.
      */
     validationState?: ValidationState;
+    descriptionId?: string;
+    onClickPreventDefault?: boolean;
 }
 export interface SelectProps<Option, IsMulti extends boolean = false> extends ReactSelectProps<Option, IsMulti>, CustomSelectProps {
+    [key: string]: any;
 }
 export interface AsyncSelectProps<Option, IsMulti extends boolean = false> extends AsyncProps<Option, IsMulti, GroupType<Option>>, CustomSelectProps {
+    [key: string]: any;
 }
 export interface CreatableSelectProps<Option, IsMulti extends boolean = false> extends CreatableProps<Option, IsMulti, GroupType<Option>>, CustomSelectProps {
+    [key: string]: any;
 }
 export type ActionMeta<Option = OptionType> = RSActionMeta<Option>;
 export type ControlProps<Option, IsMulti extends boolean = false> = RSControlProps<Option, IsMulti>;
@@ -74,8 +79,3 @@ export type AtlaskitSelectRefType = {
     focus: () => void;
 };
 export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, AriaOnFocusProps, };
-declare module 'react-select/base' {
-    interface Props<Option, IsMulti extends boolean, Group extends GroupType<Option>> {
-        [key: string]: any;
-    }
-}

package/dist/types-ts4.5/utils/country-groups-announcement.d.ts

@@ -1,4 +1,4 @@
-import { type AriaOnFocusProps, type OptionsOrGroups } from 'react-select';
+import { type AriaOnFocusProps, type OptionsOrGroups } from '@atlaskit/react-select';
 import { type GroupType } from '../types';
 type Country = {
     icon: string;

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

@@ -1,4 +1,4 @@
-import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from 'react-select';
+import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
 import { type GroupType, type OptionType } from '../types';
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.19.2",
+	"version": "18.0.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,9 +39,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.19.0",
+		"@atlaskit/icon": "^22.20.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
+		"@atlaskit/react-select": "^1.0.1",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^2.0.0",
@@ -54,7 +55,6 @@
 		"react-focus-lock-next": "npm:react-focus-lock@^2.13.2",
 		"react-node-resolver": "^1.0.1",
 		"react-popper": "^2.3.0",
-		"react-select": "^5.4.0",
 		"react-uid": "^2.2.0",
 		"shallow-equal": "^3.1.0"
 	},
@@ -67,7 +67,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/ds-lib": "^2.6.0",
+		"@atlaskit/ds-lib": "^3.0.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/ssr": "*",
@@ -100,7 +100,7 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform-design-system-dsp-19701-no-node-resolver": {
+		"platform_design_system_team_select_node_resolver": {
 			"type": "boolean"
 		},
 		"platform-component-visual-refresh": {