@atlaskit/react-select 2.0.7 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/react-select
 
+## 2.2.0
+
+### Minor Changes
+
+- [#137501](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137501)
+  [`fb85ce5c05391`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb85ce5c05391) -
+  Testing unsafe experimental options, to be removed at a later time.
+
+## 2.1.0
+
+### Minor Changes
+
+- [#135853](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135853)
+  [`37d9e41733fc5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/37d9e41733fc5) -
+  Select components now sync with the experimental open layer observer, using the
+  useNotifyOpenLayerObserver hook.
+
+  This is used to close any open select menus when page layout slots are resized.
+
+  These changes are behind feature flags.
+
 ## 2.0.7
 
 ### Patch Changes

package/dist/cjs/components/internal/notify-open-layer-observer.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotifyOpenLayerObserver = NotifyOpenLayerObserver;
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+function NotifyOpenLayerObserver(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    isOpen: isOpen,
+    onClose: onClose
+  });
+  return null;
+}

package/dist/cjs/select.js

@@ -21,6 +21,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _builtins = require("./builtins");
 var _components = require("./components");
 var _internal = require("./components/internal");
+var _notifyOpenLayerObserver = require("./components/internal/notify-open-layer-observer");
 var _liveRegion = _interopRequireDefault(require("./components/live-region"));
 var _menu = require("./components/menu");
 var _filters = require("./filters");
@@ -79,7 +80,8 @@ var defaultProps = exports.defaultProps = {
   },
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true
+  tabSelectsValue: true,
+  UNSAFE_is_experimental_generic: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -826,6 +828,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }
       event.preventDefault();
     });
+    (0, _defineProperty2.default)(_this, "handleOpenLayerObserverCloseSignal", function () {
+      if (!(0, _platformFeatureFlags.fg)('platform_dst_layer_observer_select')) {
+        return;
+      }
+      _this.onMenuClose();
+    });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = (0, _utils.cleanValue)(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
@@ -1262,14 +1270,14 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
-        'aria-haspopup': 'listbox',
+        'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
         'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
+        'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1536,8 +1544,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          role: 'option',
-          'aria-selected': isSelected,
+          role: _this4.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+          'aria-selected': _this4.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
           // We don't want aria-disabled if it's false. It's just noisy.
           'aria-disabled': !isDisabled && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? headingId : undefined
@@ -1662,8 +1670,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               scrollTargetRef(instance);
             },
             innerProps: _objectSpread(_objectSpread({
-              role: 'listbox',
-              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+              role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
@@ -1671,7 +1679,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
-          }), menuUI);
+          }), _this4.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/_react.default.createElement("div", {
+            role: "list"
+          }, menuUI) : menuUI);
         }));
       });
 
@@ -1831,7 +1841,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         innerProps: _objectSpread({}, testId && {
           'data-testid': "".concat(testId, "-select--indicators-container")
         })
-      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/_react.default.createElement(_notifyOpenLayerObserver.NotifyOpenLayerObserver, {
+        isOpen: (0, _platformFeatureFlags.fg)('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+        onClose: this.handleOpenLayerObserverCloseSignal
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/es2019/components/internal/notify-open-layer-observer.js

@@ -0,0 +1,16 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export function NotifyOpenLayerObserver({
+  isOpen,
+  onClose
+}) {
+  useNotifyOpenLayerObserver({
+    isOpen,
+    onClose
+  });
+  return null;
+}

package/dist/es2019/select.js

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
 import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
+import { NotifyOpenLayerObserver } from './components/internal/notify-open-layer-observer';
 import LiveRegion from './components/live-region';
 import { MenuPlacer } from './components/menu';
 import { createFilter } from './filters';
@@ -54,7 +55,8 @@ export const defaultProps = {
   }) => `${count} result${count !== 1 ? 's' : ''} available`,
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true
+  tabSelectsValue: true,
+  UNSAFE_is_experimental_generic: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   const isDisabled = isOptionDisabled(props, option, selectValue);
@@ -802,6 +804,12 @@ export default class Select extends Component {
       }
       event.preventDefault();
     });
+    _defineProperty(this, "handleOpenLayerObserverCloseSignal", () => {
+      if (!fg('platform_dst_layer_observer_select')) {
+        return;
+      }
+      this.onMenuClose();
+    });
     this.state.instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
@@ -1272,14 +1280,14 @@ export default class Select extends Component {
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
       // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
-      'aria-haspopup': 'listbox',
+      'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
       'aria-describedby': this.props['aria-describedby'] || descriptionId,
       'aria-invalid': this.props['aria-invalid'] || isInvalid,
       'aria-label': this.props['aria-label'] || label,
       'aria-labelledby': this.props['aria-labelledby'] || labelId,
       'aria-required': required || isRequired,
       role: 'combobox',
-      'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined,
+      'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined,
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }),
@@ -1565,8 +1573,8 @@ export default class Select extends Component {
         onClick: onSelect,
         onMouseMove: onHover,
         onMouseOver: onHover,
-        role: 'option',
-        'aria-selected': isSelected,
+        role: this.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+        'aria-selected': this.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
         // We don't want aria-disabled if it's false. It's just noisy.
         'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
         'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined,
@@ -1696,8 +1704,8 @@ export default class Select extends Component {
         scrollTargetRef(instance);
       },
       innerProps: {
-        role: 'listbox',
-        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+        role: this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || this.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
         id: this.getElementId('listbox'),
         ...(testId && {
           'data-testid': `${testId}-select--listbox`
@@ -1708,7 +1716,9 @@ export default class Select extends Component {
       isLoading: isLoading,
       maxHeight: maxHeight,
       focusedOption: focusedOption
-    }), menuUI))));
+    }), this.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/React.createElement("div", {
+      role: "list"
+    }, menuUI) : menuUI))));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked
@@ -1867,7 +1877,10 @@ export default class Select extends Component {
           'data-testid': `${testId}-select--indicators-container`
         })
       }
-    }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+    }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
+      isOpen: fg('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+      onClose: this.handleOpenLayerObserverCloseSignal
+    }));
   }
 }
 _defineProperty(Select, "defaultProps", defaultProps);

package/dist/esm/components/internal/notify-open-layer-observer.js

@@ -0,0 +1,15 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export function NotifyOpenLayerObserver(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  useNotifyOpenLayerObserver({
+    isOpen: isOpen,
+    onClose: onClose
+  });
+  return null;
+}

package/dist/esm/select.js

@@ -18,6 +18,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
 import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
+import { NotifyOpenLayerObserver } from './components/internal/notify-open-layer-observer';
 import LiveRegion from './components/live-region';
 import { MenuPlacer } from './components/menu';
 import { createFilter } from './filters';
@@ -70,7 +71,8 @@ export var defaultProps = {
   },
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true
+  tabSelectsValue: true,
+  UNSAFE_is_experimental_generic: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -817,6 +819,12 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       event.preventDefault();
     });
+    _defineProperty(_this, "handleOpenLayerObserverCloseSignal", function () {
+      if (!fg('platform_dst_layer_observer_select')) {
+        return;
+      }
+      _this.onMenuClose();
+    });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
@@ -1253,14 +1261,14 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat
-        'aria-haspopup': 'listbox',
+        'aria-haspopup': this.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
         'aria-describedby': this.props['aria-describedby'] || descriptionId,
         'aria-invalid': this.props['aria-invalid'] || isInvalid,
         'aria-label': this.props['aria-label'] || label,
         'aria-labelledby': this.props['aria-labelledby'] || labelId,
         'aria-required': required || isRequired,
         role: 'combobox',
-        'aria-activedescendant': this.state.focusedOptionId || this.state.focusedValueId || undefined
+        'aria-activedescendant': this.props['UNSAFE_is_experimental_generic'] ? undefined : this.state.focusedOptionId || this.state.focusedValueId || undefined
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -1527,8 +1535,8 @@ var Select = /*#__PURE__*/function (_Component) {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          role: 'option',
-          'aria-selected': isSelected,
+          role: _this4.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+          'aria-selected': _this4.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
           // We don't want aria-disabled if it's false. It's just noisy.
           'aria-disabled': !isDisabled && fg('design_system_select-a11y-improvement') ? undefined : isDisabled,
           'aria-describedby': fg('design_system_select-a11y-improvement') ? headingId : undefined
@@ -1653,8 +1661,8 @@ var Select = /*#__PURE__*/function (_Component) {
               scrollTargetRef(instance);
             },
             innerProps: _objectSpread(_objectSpread({
-              role: 'listbox',
-              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+              role: _this4.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox',
+              'aria-multiselectable': (_this4.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') || _this4.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
@@ -1662,7 +1670,9 @@ var Select = /*#__PURE__*/function (_Component) {
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
-          }), menuUI);
+          }), _this4.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/React.createElement("div", {
+            role: "list"
+          }, menuUI) : menuUI);
         }));
       });
 
@@ -1822,7 +1832,10 @@ var Select = /*#__PURE__*/function (_Component) {
         innerProps: _objectSpread({}, testId && {
           'data-testid': "".concat(testId, "-select--indicators-container")
         })
-      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
+        isOpen: fg('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+        onClose: this.handleOpenLayerObserverCloseSignal
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/types/components/internal/notify-open-layer-observer.d.ts

@@ -0,0 +1,11 @@
+type NotifyOpenLayerObserverProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export declare function NotifyOpenLayerObserver({ isOpen, onClose }: NotifyOpenLayerObserverProps): null;
+export {};

package/dist/types/select.d.ts

@@ -155,7 +155,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Formats group labels in the menu as React components
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     formatGroupLabel: (group: Group) => ReactNode;
     /**
@@ -212,7 +212,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Override the built-in logic to detect whether an option is disabled
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     isOptionDisabled: (option: Option, selectValue: Options<Option>) => boolean;
     /**
@@ -275,7 +275,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Whether the menu should use a portal, and where it should attach
      *
-     * An example can be found in the [Portaling](/advanced#portaling) documentation
+     * An example can be found in the [Portaling](https://react-select.com/advanced#portaling) documentation
      */
     menuPortalTarget?: HTMLElement | null;
     /**
@@ -369,7 +369,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Style modifier methods
      *
-     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * A basic example can be found at the bottom of the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     styles: StylesConfig<Option, IsMulti, Group>;
     /**
@@ -424,6 +424,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     spacing?: 'compact' | 'default';
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
+    UNSAFE_is_experimental_generic?: boolean;
 }
 export declare const defaultProps: {
     'aria-live': string | undefined;
@@ -466,6 +467,7 @@ export declare const defaultProps: {
     styles: {};
     tabIndex: number;
     tabSelectsValue: boolean;
+    UNSAFE_is_experimental_generic: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -545,6 +547,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         styles: {};
         tabIndex: number;
         tabSelectsValue: boolean;
+        UNSAFE_is_experimental_generic: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;
@@ -694,6 +697,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderFormField(): React.JSX.Element | undefined;
     renderLiveRegion(): React.JSX.Element;
     renderMultiselectMessage(): React.JSX.Element;
+    handleOpenLayerObserverCloseSignal: () => void;
     render(): React.JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/dist/types-ts4.5/components/internal/notify-open-layer-observer.d.ts

@@ -0,0 +1,11 @@
+type NotifyOpenLayerObserverProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export declare function NotifyOpenLayerObserver({ isOpen, onClose }: NotifyOpenLayerObserverProps): null;
+export {};

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

@@ -155,7 +155,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Formats group labels in the menu as React components
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     formatGroupLabel: (group: Group) => ReactNode;
     /**
@@ -212,7 +212,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Override the built-in logic to detect whether an option is disabled
      *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     isOptionDisabled: (option: Option, selectValue: Options<Option>) => boolean;
     /**
@@ -275,7 +275,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Whether the menu should use a portal, and where it should attach
      *
-     * An example can be found in the [Portaling](/advanced#portaling) documentation
+     * An example can be found in the [Portaling](https://react-select.com/advanced#portaling) documentation
      */
     menuPortalTarget?: HTMLElement | null;
     /**
@@ -369,7 +369,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * Style modifier methods
      *
-     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     * A basic example can be found at the bottom of the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
      */
     styles: StylesConfig<Option, IsMulti, Group>;
     /**
@@ -424,6 +424,7 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     spacing?: 'compact' | 'default';
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
+    UNSAFE_is_experimental_generic?: boolean;
 }
 export declare const defaultProps: {
     'aria-live': string | undefined;
@@ -466,6 +467,7 @@ export declare const defaultProps: {
     styles: {};
     tabIndex: number;
     tabSelectsValue: boolean;
+    UNSAFE_is_experimental_generic: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -545,6 +547,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         styles: {};
         tabIndex: number;
         tabSelectsValue: boolean;
+        UNSAFE_is_experimental_generic: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;
@@ -694,6 +697,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderFormField(): React.JSX.Element | undefined;
     renderLiveRegion(): React.JSX.Element;
     renderMultiselectMessage(): React.JSX.Element;
+    handleOpenLayerObserverCloseSignal: () => void;
     render(): React.JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.0.7",
+	"version": "2.2.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,11 +30,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.1.0",
+		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",
@@ -69,6 +70,9 @@
 		},
 		"platform-visual-refresh-icons-legacy-facade": {
 			"type": "boolean"
+		},
+		"platform_dst_layer_observer_select": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {