@atlaskit/react-select 2.0.6 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/react-select
 
+## 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
+
+- [#131835](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131835)
+  [`11b3a9f6a407e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11b3a9f6a407e) -
+  [Popup Select] Improve assistive technology support by reducing reliance on live regions.
+
 ## 2.0.6
 
 ### 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/components/live-region.js

@@ -127,17 +127,13 @@ var LiveRegion = function LiveRegion(props) {
   var ariaResults = (0, _react.useMemo)(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      var shouldAnnounceAvailableResults = !focusableOptions.length;
-      if (shouldAnnounceAvailableResults && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
-        // only announce no option results when ff is on
-        var resultsMessage = screenReaderStatus({
-          count: focusableOptions.length
-        });
-        resultsMsg = messages.onFilter({
-          inputValue: inputValue,
-          resultsMessage: resultsMessage
-        });
-      }
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -164,9 +160,9 @@ 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, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+  }, ariaSelected), (0, _react2.jsx)("span", {
     id: "aria-results"
-  }, ariaResults), (0, _react2.jsx)("span", {
+  }, ariaResults), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-focused"
   }, ariaFocused), (0, _react2.jsx)("span", {
     id: "aria-guidance"

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");
@@ -826,10 +827,16 @@ 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)
-    if (_props.menuIsOpen && _this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
@@ -1614,6 +1621,26 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
+      var calculateListboxLabel = function calculateListboxLabel() {
+        var _this4$inputRef;
+        // First in name calculation, overwrites aria-label
+        if (labelId) {
+          return {
+            'aria-labelledby': labelId
+          };
+        }
+        // Second in name calcuation, overwrites everything else except aria-labelledby
+        if (label) {
+          return {
+            'aria-label': label
+          };
+        }
+        // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+        // will most likely not have an accessible name
+        return {
+          'aria-labelledby': ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input')
+        };
+      };
       var menuElement = /*#__PURE__*/_react.default.createElement(_menu.MenuPlacer, (0, _extends2.default)({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
@@ -1636,7 +1663,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this4$inputRef;
           return /*#__PURE__*/_react.default.createElement(MenuList, (0, _extends2.default)({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1648,10 +1674,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
-              'aria-label': label,
-              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
-            }),
+            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && calculateListboxLabel()),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
@@ -1815,7 +1838,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/components/live-region.js

@@ -123,17 +123,13 @@ const LiveRegion = props => {
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      const shouldAnnounceAvailableResults = !focusableOptions.length;
-      if (shouldAnnounceAvailableResults && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement')) {
-        // only announce no option results when ff is on
-        const resultsMessage = screenReaderStatus({
-          count: focusableOptions.length
-        });
-        resultsMsg = messages.onFilter({
-          inputValue,
-          resultsMessage
-        });
-      }
+      const resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue,
+        resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -160,9 +156,9 @@ 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), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
+  }, ariaSelected), jsx("span", {
     id: "aria-results"
-  }, ariaResults), jsx("span", {
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
     id: "aria-guidance"

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';
@@ -802,10 +803,16 @@ 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)
-    if (_props.menuIsOpen && this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       const focusableOptionsWithIds = this.getFocusableOptionsWithIds();
       const focusableOptions = this.buildFocusableOptions();
       const optionIndex = focusableOptions.indexOf(this.state.selectValue[0]);
@@ -1647,6 +1654,26 @@ export default class Select extends Component {
       menuPosition,
       menuShouldScrollIntoView
     };
+    const calculateListboxLabel = () => {
+      var _this$inputRef;
+      // First in name calculation, overwrites aria-label
+      if (labelId) {
+        return {
+          'aria-labelledby': labelId
+        };
+      }
+      // Second in name calcuation, overwrites everything else except aria-labelledby
+      if (label) {
+        return {
+          'aria-label': label
+        };
+      }
+      // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+      // will most likely not have an accessible name
+      return {
+        'aria-labelledby': ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')
+      };
+    };
     const menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), ({
       ref,
       placerProps: {
@@ -1670,31 +1697,25 @@ export default class Select extends Component {
       onTopArrive: onMenuScrollToTop,
       onBottomArrive: onMenuScrollToBottom,
       lockEnabled: menuShouldBlockScroll
-    }, scrollTargetRef => {
-      var _this$inputRef;
-      return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
-        innerRef: instance => {
-          this.getMenuListRef(instance);
-          scrollTargetRef(instance);
-        },
-        innerProps: {
-          role: 'listbox',
-          'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
-          id: this.getElementId('listbox'),
-          ...(testId && {
-            'data-testid': `${testId}-select--listbox`
-          }),
-          // add aditional label on listbox when ff is on
-          ...(fg('design_system_select-a11y-improvement') && {
-            'aria-label': label,
-            'aria-labelledby': `${labelId || ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')}`
-          })
-        },
-        isLoading: isLoading,
-        maxHeight: maxHeight,
-        focusedOption: focusedOption
-      }), menuUI);
-    })));
+    }, scrollTargetRef => /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+      innerRef: instance => {
+        this.getMenuListRef(instance);
+        scrollTargetRef(instance);
+      },
+      innerProps: {
+        role: 'listbox',
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+        id: this.getElementId('listbox'),
+        ...(testId && {
+          'data-testid': `${testId}-select--listbox`
+        }),
+        // add aditional label on listbox when ff is on
+        ...(fg('design_system_select-a11y-improvement') && calculateListboxLabel())
+      },
+      isLoading: isLoading,
+      maxHeight: maxHeight,
+      focusedOption: focusedOption
+    }), menuUI))));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked
@@ -1853,7 +1874,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/components/live-region.js

@@ -120,17 +120,13 @@ var LiveRegion = function LiveRegion(props) {
   var ariaResults = useMemo(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      var shouldAnnounceAvailableResults = !focusableOptions.length;
-      if (shouldAnnounceAvailableResults && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement')) {
-        // only announce no option results when ff is on
-        var resultsMessage = screenReaderStatus({
-          count: focusableOptions.length
-        });
-        resultsMsg = messages.onFilter({
-          inputValue: inputValue,
-          resultsMessage: resultsMessage
-        });
-      }
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -157,9 +153,9 @@ 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), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
+  }, ariaSelected), jsx("span", {
     id: "aria-results"
-  }, ariaResults), jsx("span", {
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
     id: "aria-guidance"

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';
@@ -817,10 +818,16 @@ 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)
-    if (_props.menuIsOpen && _this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
@@ -1605,6 +1612,26 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
+      var calculateListboxLabel = function calculateListboxLabel() {
+        var _this4$inputRef;
+        // First in name calculation, overwrites aria-label
+        if (labelId) {
+          return {
+            'aria-labelledby': labelId
+          };
+        }
+        // Second in name calcuation, overwrites everything else except aria-labelledby
+        if (label) {
+          return {
+            'aria-label': label
+          };
+        }
+        // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+        // will most likely not have an accessible name
+        return {
+          'aria-labelledby': ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input')
+        };
+      };
       var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
@@ -1627,7 +1654,6 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this4$inputRef;
           return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1639,10 +1665,7 @@ var Select = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), fg('design_system_select-a11y-improvement') && {
-              'aria-label': label,
-              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
-            }),
+            }), fg('design_system_select-a11y-improvement') && calculateListboxLabel()),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
@@ -1806,7 +1829,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,9 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
+/**
+ * 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

@@ -694,6 +694,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,9 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
+/**
+ * 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

@@ -694,6 +694,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.6",
+	"version": "2.1.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.0.0",
+		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.6.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": {