@atlaskit/react-select 4.0.2 → 4.1.0

package/dist/esm/select.js

@@ -16,6 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
+import { bind } from 'bind-event-listener';
 import { isAppleDevice } from '@atlaskit/ds-lib/device-check';
 import { isSafari } from '@atlaskit/ds-lib/is-safari';
 import __noop from '@atlaskit/ds-lib/noop';
@@ -29,6 +30,7 @@ import { createFilter } from './filters';
 import { classNames } from './internal/classnames';
 import { cleanValue } from './internal/clean-value';
 import { isDocumentElement } from './internal/is-document-el';
+import { MenuPortalCloseContext } from './internal/menu-portal-close-context';
 import { multiValueAsValue } from './internal/multi-value-as-value';
 import { NotifyOpenLayerObserver } from './internal/notify-open-layer-observer';
 import RequiredInput from './internal/required-input';
@@ -327,7 +329,8 @@ var Select = /*#__PURE__*/function (_Component) {
       prevWasFocused: false,
       inputIsHiddenAfterUpdate: undefined,
       prevProps: undefined,
-      instancePrefix: ''
+      instancePrefix: '',
+      controlElement: null
     });
     // Misc. Instance Properties
     // ------------------------------
@@ -338,11 +341,26 @@ var Select = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "initialTouchY", 0);
     _defineProperty(_this, "openAfterFocus", false);
     _defineProperty(_this, "scrollToFocusedOptionOnUpdate", false);
+    // Cleanup for a pending document `pointerup` listener registered by
+    // `openMenuAfterPointerUp`. See that method for the full rationale.
+    _defineProperty(_this, "deferredOpenMenuCleanup", null);
     // Refs
     // ------------------------------
     _defineProperty(_this, "controlRef", null);
     _defineProperty(_this, "getControlRef", function (ref) {
       _this.controlRef = ref;
+      // Mirror the ref into state on the top-layer path so
+      // `MenuPortalTopLayer`'s layout effects react to the anchor attaching.
+      // Skip the null-ref (unmount) case: setState during unmount is unsafe
+      // and the state is dropped with the instance anyway.
+      if (ref === null) {
+        return;
+      }
+      if (_this.state.controlElement !== ref && fg('platform-dst-top-layer')) {
+        _this.setState({
+          controlElement: ref
+        });
+      }
     });
     _defineProperty(_this, "focusedOptionRef", null);
     _defineProperty(_this, "getFocusedOptionRef", function (ref) {
@@ -553,7 +571,7 @@ var Select = /*#__PURE__*/function (_Component) {
         _this.focusInput();
       } else if (!_this.props.menuIsOpen) {
         if (openMenuOnClick) {
-          _this.openMenu('first');
+          _this.openMenuAfterPointerUp('first');
         }
       } else {
         if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
@@ -582,7 +600,7 @@ var Select = /*#__PURE__*/function (_Component) {
         });
         _this.onMenuClose();
       } else {
-        _this.openMenu('first');
+        _this.openMenuAfterPointerUp('first');
       }
       event.preventDefault();
     });
@@ -700,7 +718,14 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused: true
       });
       if (_this.openAfterFocus || _this.props.openMenuOnFocus) {
-        _this.openMenu('first');
+        // `openAfterFocus` always follows a pointer gesture, so defer past
+        // pointerup. `openMenuOnFocus` alone can come from a keyboard tab
+        // with no pointer gesture in flight, so open synchronously.
+        if (_this.openAfterFocus) {
+          _this.openMenuAfterPointerUp('first');
+        } else {
+          _this.openMenu('first');
+        }
       }
       _this.openAfterFocus = false;
     });
@@ -991,6 +1016,7 @@ var Select = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       this.stopListeningComposition();
       this.stopListeningToTouch();
+      this.cancelDeferredOpenMenu();
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       document.removeEventListener('scroll', this.onScroll, true);
     }
@@ -1037,10 +1063,72 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       this.inputRef.blur();
     }
+  }, {
+    key: "shouldDeferOpenPastPointerUp",
+    value:
+    /**
+     * Whether to defer the menu open past the in-flight pointer gesture.
+     * Any renderer that drives a `popover="auto"` element must, otherwise
+     * the browser's light-dismiss runs on the matching `pointerup` and
+     * closes the menu immediately. Today only the top-layer path needs it.
+     */
+    function shouldDeferOpenPastPointerUp() {
+      return fg('platform-dst-top-layer');
+    }
+
+    /**
+     * Open the menu after the current pointer gesture, instead of
+     * synchronously inside `mousedown`.
+     *
+     * On the top-layer path the menu is a `popover="auto"` element. The
+     * browser captures the pointerdown target before the popover exists, so
+     * opening synchronously gets immediately light-dismissed on pointerup
+     * (and the matching `beforetoggle: closed` is not cancellable). Deferring
+     * to the next `pointerup` avoids that.
+     *
+     * We listen for `pointerup` rather than `click` because `pointerup` is
+     * the exact event the browser uses for light-dismiss (earliest safe
+     * moment), always fires (`click` requires same down/up target), is hard
+     * to lose to upstream `stopPropagation`, and is uniform across input
+     * types. Off the top-layer path we open synchronously as before.
+     */
+  }, {
+    key: "openMenuAfterPointerUp",
+    value: function openMenuAfterPointerUp(focusOption) {
+      var _this2 = this;
+      if (!this.shouldDeferOpenPastPointerUp()) {
+        this.openMenu(focusOption);
+        return;
+      }
+      // A second pointerdown can land before the queued pointerup if the
+      // user releases and re-clicks very quickly. Replace any pending
+      // deferred open with the latest one so we never stack listeners.
+      this.cancelDeferredOpenMenu();
+      var handlePointerUp = function handlePointerUp() {
+        _this2.deferredOpenMenuCleanup = null;
+        _this2.openMenu(focusOption);
+      };
+      this.deferredOpenMenuCleanup = bind(document, {
+        type: 'pointerup',
+        listener: handlePointerUp,
+        options: {
+          capture: true,
+          once: true
+        }
+      });
+    }
+  }, {
+    key: "cancelDeferredOpenMenu",
+    value: function cancelDeferredOpenMenu() {
+      if (this.deferredOpenMenuCleanup) {
+        this.deferredOpenMenuCleanup();
+        this.deferredOpenMenuCleanup = null;
+      }
+    }
   }, {
     key: "openMenu",
     value: function openMenu(focusOption) {
-      var _this2 = this;
+      var _this3 = this;
       var _this$state2 = this.state,
         selectValue = _this$state2.selectValue,
         isFocused = _this$state2.isFocused;
@@ -1062,25 +1150,25 @@ var Select = /*#__PURE__*/function (_Component) {
         focusedOption: focusedOption,
         focusedOptionId: this.getFocusedOptionId(focusedOption)
       }, function () {
-        return _this2.onMenuOpen();
+        return _this3.onMenuOpen();
       });
       isSafari() && focusedOption && this.updateInputLabel(this.calculateInputLabel(focusedOption, openAtIndex));
     }
   }, {
     key: "updateInputLabel",
     value: function updateInputLabel(inputLabel) {
-      var _this3 = this;
+      var _this4 = this;
       if (inputLabel) {
         var _this$inputRef;
         (_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.setAttribute('aria-label', inputLabel);
         setTimeout(function () {
-          var normalizedLabel = _this3.props['aria-label'] || _this3.props.label;
+          var normalizedLabel = _this4.props['aria-label'] || _this4.props.label;
           if (normalizedLabel) {
-            var _this3$inputRef;
-            (_this3$inputRef = _this3.inputRef) === null || _this3$inputRef === void 0 || _this3$inputRef.setAttribute('aria-label', normalizedLabel);
+            var _this4$inputRef;
+            (_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 || _this4$inputRef.setAttribute('aria-label', normalizedLabel);
           } else {
-            var _this3$inputRef2;
-            (_this3$inputRef2 = _this3.inputRef) === null || _this3$inputRef2 === void 0 || _this3$inputRef2.removeAttribute('aria-label');
+            var _this4$inputRef2;
+            (_this4$inputRef2 = _this4.inputRef) === null || _this4$inputRef2 === void 0 || _this4$inputRef2.removeAttribute('aria-label');
           }
         }, 500);
       }
@@ -1088,14 +1176,14 @@ var Select = /*#__PURE__*/function (_Component) {
   }, {
     key: "calculateInputLabel",
     value: function calculateInputLabel(focusedOption, optionIndex) {
-      var _this4 = this;
+      var _this5 = this;
       var options = this.props.options;
       var isOptionsGrouped = options === null || options === void 0 ? void 0 : options.every(function (obj) {
         return _typeof(obj) === 'object' && obj !== null && 'options' in obj;
       });
       var inputLabel = this.getOptionLabel(focusedOption);
       var isOptionFocused = function isOptionFocused(option) {
-        return _this4.getOptionLabel(option) === inputLabel;
+        return _this5.getOptionLabel(option) === inputLabel;
       };
       var groupData = options === null || options === void 0 ? void 0 : options.find(function (option) {
         var _groupCandidate$optio, _groupCandidate$optio2;
@@ -1483,7 +1571,7 @@ var Select = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderPlaceholderOrValue",
     value: function renderPlaceholderOrValue() {
-      var _this5 = this;
+      var _this6 = this;
       var _this$getComponents2 = this.getComponents(),
         MultiValue = _this$getComponents2.MultiValue,
         MultiValueContainer = _this$getComponents2.MultiValueContainer,
@@ -1518,7 +1606,7 @@ var Select = /*#__PURE__*/function (_Component) {
       if (isMulti) {
         return selectValue.map(function (opt, index) {
           var isOptionFocused = opt === focusedValue;
-          var key = "".concat(_this5.getOptionLabel(opt), "-").concat(_this5.getOptionValue(opt));
+          var key = "".concat(_this6.getOptionLabel(opt), "-").concat(_this6.getOptionValue(opt));
           return /*#__PURE__*/React.createElement(MultiValue, _extends({}, commonProps, {
             components: {
               Container: MultiValueContainer,
@@ -1531,10 +1619,10 @@ var Select = /*#__PURE__*/function (_Component) {
             index: index,
             removeProps: _objectSpread(_objectSpread({
               onClick: function onClick() {
-                return _this5.removeValue(opt);
+                return _this6.removeValue(opt);
               },
               onTouchEnd: function onTouchEnd() {
-                return _this5.removeValue(opt);
+                return _this6.removeValue(opt);
               },
               onMouseDown: function onMouseDown(e) {
                 e.preventDefault();
@@ -1542,15 +1630,15 @@ var Select = /*#__PURE__*/function (_Component) {
             }, testId && {
               'data-testid': "".concat(testId, "-select--multivalue-").concat(index, "-remove")
             }), {}, {
-              id: "".concat(_this5.getElementId('selected-value'), "-").concat(index, "-remove")
+              id: "".concat(_this6.getElementId('selected-value'), "-").concat(index, "-remove")
             }),
             data: opt,
             innerProps: _objectSpread(_objectSpread({}, testId && {
               'data-testid': "".concat(testId, "-select--multivalue-").concat(index)
             }), {}, {
-              id: "".concat(_this5.getElementId('selected-value'), "-").concat(index)
+              id: "".concat(_this6.getElementId('selected-value'), "-").concat(index)
             })
-          }), _this5.formatOptionLabel(opt, 'value'));
+          }), _this6.formatOptionLabel(opt, 'value'));
         });
       }
       if (inputValue) {
@@ -1656,7 +1744,7 @@ var Select = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMenu",
     value: function renderMenu() {
-      var _this6 = this;
+      var _this7 = this;
       var _this$getComponents6 = this.getComponents(),
         Group = _this$getComponents6.Group,
         GroupHeading = _this$getComponents6.GroupHeading,
@@ -1699,19 +1787,19 @@ var Select = /*#__PURE__*/function (_Component) {
           value = props.value;
         var isFocused = focusedOption === data;
         var onHover = isDisabled ? undefined : function () {
-          return _this6.onOptionHover(data);
+          return _this7.onOptionHover(data);
         };
         var onSelect = isDisabled ? undefined : function () {
-          return _this6.selectOption(data);
+          return _this7.selectOption(data);
         };
-        var optionId = "".concat(_this6.getElementId('option'), "-").concat(id);
+        var optionId = "".concat(_this7.getElementId('option'), "-").concat(id);
         var innerProps = _objectSpread({
           id: optionId,
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          role: _this6.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
-          'aria-selected': _this6.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
+          role: _this7.props['UNSAFE_is_experimental_generic'] ? 'listitem' : 'option',
+          'aria-selected': _this7.props['UNSAFE_is_experimental_generic'] ? undefined : isSelected,
           // We don't want aria-disabled if it's false. It's just noisy.
           'aria-disabled': !isDisabled ? undefined : isDisabled,
           'aria-describedby': headingId
@@ -1728,8 +1816,8 @@ var Select = /*#__PURE__*/function (_Component) {
           type: type,
           value: value,
           isFocused: isFocused,
-          innerRef: isFocused ? _this6.getFocusedOptionRef : undefined
-        }), _this6.formatOptionLabel(props.data, 'menu'));
+          innerRef: isFocused ? _this7.getFocusedOptionRef : undefined
+        }), _this7.formatOptionLabel(props.data, 'menu'));
       };
       var menuUI;
       if (this.hasOptions()) {
@@ -1739,7 +1827,7 @@ var Select = /*#__PURE__*/function (_Component) {
             var data = item.data,
               options = item.options,
               groupIndex = item.index;
-            var groupId = "".concat(_this6.getElementId('group'), "-").concat(groupIndex);
+            var groupId = "".concat(_this7.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
             return /*#__PURE__*/React.createElement(Group, _extends({}, commonProps, {
               key: groupId,
@@ -1752,7 +1840,7 @@ var Select = /*#__PURE__*/function (_Component) {
               }, testId && {
                 'data-testid': "".concat(testId, "-select--group-").concat(groupIndex, "-heading")
               }),
-              label: _this6.formatGroupLabel(item.data)
+              label: _this7.formatGroupLabel(item.data)
             }), item.options.map(function (option) {
               return render(option, "".concat(groupIndex, "-").concat(option.index), headingId);
             }));
@@ -1799,9 +1887,9 @@ var Select = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/React.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: _objectSpread({
-            onMouseDown: _this6.onMenuMouseDown,
-            onMouseMove: _this6.onMenuMouseMove,
-            id: _this6.props.components.Menu ? _this6.getElementId('listbox') : undefined
+            onMouseDown: _this7.onMenuMouseDown,
+            onMouseMove: _this7.onMenuMouseMove,
+            id: _this7.props.components.Menu ? _this7.getElementId('listbox') : undefined
           }, testId && {
             'data-testid': "".concat(testId, "-select--listbox-container")
           }),
@@ -1813,47 +1901,62 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this6$inputRef, _this6$inputRef2;
+          var _this7$inputRef, _this7$inputRef2;
           return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
-              _this6.getMenuListRef(instance);
+              _this7.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
             innerProps: _objectSpread(_objectSpread(_objectSpread({
-              role: _this6.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox'
-            }, _this6.props['UNSAFE_is_experimental_generic'] && {
-              'aria-labelledby': ((_this6$inputRef = _this6.inputRef) === null || _this6$inputRef === void 0 ? void 0 : _this6$inputRef.id) || _this6.getElementId('input')
+              role: _this7.props['UNSAFE_is_experimental_generic'] ? 'dialog' : 'listbox'
+            }, _this7.props['UNSAFE_is_experimental_generic'] && {
+              'aria-labelledby': ((_this7$inputRef = _this7.inputRef) === null || _this7$inputRef === void 0 ? void 0 : _this7$inputRef.id) || _this7.getElementId('input')
             }), {}, {
-              'aria-multiselectable': !commonProps.isMulti || _this6.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
-              id: _this6.getElementId('listbox')
+              'aria-multiselectable': !commonProps.isMulti || _this7.props['UNSAFE_is_experimental_generic'] ? undefined : commonProps.isMulti,
+              id: _this7.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), isSafari() && !_this6.props['UNSAFE_is_experimental_generic'] && {
-              'aria-describedby': ((_this6$inputRef2 = _this6.inputRef) === null || _this6$inputRef2 === void 0 ? void 0 : _this6$inputRef2.id) || _this6.getElementId('input')
+            }), isSafari() && !_this7.props['UNSAFE_is_experimental_generic'] && {
+              'aria-describedby': ((_this7$inputRef2 = _this7.inputRef) === null || _this7$inputRef2 === void 0 ? void 0 : _this7$inputRef2.id) || _this7.getElementId('input')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
-          }), _this6.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/React.createElement("div", {
+          }), _this7.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
-      // within the component based on `menuPosition`
-      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends({}, commonProps, {
+      // On the top-layer path the menu always portals (into the top layer)
+      // regardless of consumer `menuPortalTarget` / `menuPosition`. Off the
+      // flag we keep the legacy "portal only when needed" behaviour.
+      var shouldPortal = fg('platform-dst-top-layer') || menuPortalTarget || menuPosition === 'fixed';
+      if (!shouldPortal) {
+        return menuElement;
+      }
+      // Top-layer path needs the state mirror so MenuPortalTopLayer re-renders
+      // when the anchor attaches; legacy path keeps the direct ref read.
+      var controlElementForPortal = fg('platform-dst-top-layer') ? this.state.controlElement : this.controlRef;
+      var menuPortal = /*#__PURE__*/React.createElement(MenuPortal, _extends({}, commonProps, {
         appendTo: menuPortalTarget,
-        controlElement: this.controlRef,
+        controlElement: controlElementForPortal,
         menuPlacement: menuPlacement,
         menuPosition: menuPosition
-      }), menuElement) : menuElement;
+      }), menuElement);
+      // The Provider plumbs the close signal to MenuPortalTopLayer; not
+      // needed on the legacy path.
+      if (!fg('platform-dst-top-layer')) {
+        return menuPortal;
+      }
+      return /*#__PURE__*/React.createElement(MenuPortalCloseContext.Provider, {
+        value: this.handleOpenLayerObserverCloseSignal
+      }, menuPortal);
     }
   }, {
     key: "renderFormField",
     value: function renderFormField() {
-      var _this7 = this;
+      var _this8 = this;
       var _this$props12 = this.props,
         delimiter = _this$props12.delimiter,
         isDisabled = _this$props12.isDisabled,
@@ -1873,7 +1976,7 @@ var Select = /*#__PURE__*/function (_Component) {
       if (isMulti) {
         if (delimiter) {
           var value = selectValue.map(function (opt) {
-            return _this7.getOptionValue(opt);
+            return _this8.getOptionValue(opt);
           }).join(delimiter);
           return /*#__PURE__*/React.createElement("input", {
             name: name,
@@ -1886,7 +1989,7 @@ var Select = /*#__PURE__*/function (_Component) {
               key: "i-".concat(i),
               name: name,
               type: "hidden",
-              value: _this7.getOptionValue(opt)
+              value: _this8.getOptionValue(opt)
             });
           }) : /*#__PURE__*/React.createElement("input", {
             name: name,
@@ -2001,7 +2104,7 @@ 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(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), !fg('platform-dst-top-layer') && /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
         isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
       })));

package/dist/types/components/menu-portal-top-layer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import type { GroupBase } from '../types';
+import type { MenuPortalProps } from './menu-portal';
+/**
+ * Top-layer host for react-select's menu. Hands positioning, flip, and width
+ * to `@atlaskit/top-layer`; ignores `appendTo` / `menuPortalTarget` /
+ * `menuPosition`. The browser-dismiss handler is supplied internally by
+ * `Select` via `MenuPortalCloseContext`.
+ *
+ * @example
+ * ```tsx
+ * <MenuPortalTopLayer controlElement={el} menuPlacement="bottom">
+ *   <Menu />
+ * </MenuPortalTopLayer>
+ * ```
+ */
+export declare function MenuPortalTopLayer<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPortalProps<Option, IsMulti, Group>): ReactNode;

package/dist/types/components/menu-portal.d.ts

@@ -20,4 +20,9 @@ export interface PortalStyleArgs {
         width: number;
     };
 }
-export declare const MenuPortal: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPortalProps<Option, IsMulti, Group>) => JSX.Element | null;
+/**
+ * Public-facing `MenuPortal` component. Routes between the legacy
+ * `createPortal`-based implementation and the top-layer-based
+ * `MenuPortalTopLayer` based on the `platform-dst-top-layer` feature flag.
+ */
+export declare const MenuPortal: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPortalProps<Option, IsMulti, Group>) => ReactNode;

package/dist/types/internal/menu-portal-close-context.d.ts

@@ -0,0 +1,7 @@
+import { type Context } from 'react';
+/**
+ * Internal handoff from `Select` to `MenuPortalTopLayer` for the top-layer
+ * dismiss signal. Kept off `MenuPortalProps` to avoid widening the public
+ * subpath export at `@atlaskit/react-select/menu-portal`.
+ */
+export declare const MenuPortalCloseContext: Context<(() => void) | undefined>;

package/dist/types/select.d.ts

@@ -454,6 +454,14 @@ interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>
     inputIsHiddenAfterUpdate: boolean | null | undefined;
     prevProps: SelectProps<Option, IsMulti, Group> | void;
     instancePrefix: string;
+    /**
+     * State mirror of `controlRef`, used only on the top-layer path so
+     * `MenuPortalTopLayer` re-renders when the anchor attaches (its layout
+     * effects depend on this prop). Legacy `MenuPortalLegacy` measures during
+     * render and keeps reading `controlRef` directly. Stays `null` when the
+     * `platform-dst-top-layer` flag is off.
+     */
+    controlElement: HTMLDivElement | null;
 }
 interface CategorizedOption<Option> {
     type: 'option';
@@ -485,6 +493,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     initialTouchY: number;
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
+    deferredOpenMenuCleanup: (() => void) | null;
     userIsDragging?: boolean;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
@@ -518,6 +527,31 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     blurInput(): void;
     focus: () => void;
     blur: () => void;
+    /**
+     * Whether to defer the menu open past the in-flight pointer gesture.
+     * Any renderer that drives a `popover="auto"` element must, otherwise
+     * the browser's light-dismiss runs on the matching `pointerup` and
+     * closes the menu immediately. Today only the top-layer path needs it.
+     */
+    private shouldDeferOpenPastPointerUp;
+    /**
+     * Open the menu after the current pointer gesture, instead of
+     * synchronously inside `mousedown`.
+     *
+     * On the top-layer path the menu is a `popover="auto"` element. The
+     * browser captures the pointerdown target before the popover exists, so
+     * opening synchronously gets immediately light-dismissed on pointerup
+     * (and the matching `beforetoggle: closed` is not cancellable). Deferring
+     * to the next `pointerup` avoids that.
+     *
+     * We listen for `pointerup` rather than `click` because `pointerup` is
+     * the exact event the browser uses for light-dismiss (earliest safe
+     * moment), always fires (`click` requires same down/up target), is hard
+     * to lose to upstream `stopPropagation`, and is uniform across input
+     * types. Off the top-layer path we open synchronously as before.
+     */
+    private openMenuAfterPointerUp;
+    cancelDeferredOpenMenu(): void;
     openMenu(focusOption: 'first' | 'last'): void;
     updateInputLabel(inputLabel?: string): void;
     calculateInputLabel(focusedOption: Option, optionIndex: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "4.0.2",
+	"version": "4.1.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,6 +20,7 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
+		"@atlaskit/browser-apis": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^36.0.0",
 		"@atlaskit/layering": "^4.0.0",
@@ -28,9 +29,11 @@
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/tag": "^15.0.0",
 		"@atlaskit/tokens": "^14.0.0",
+		"@atlaskit/top-layer": "^1.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"@floating-ui/dom": "^1.0.1",
+		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0",
 		"use-isomorphic-layout-effect": "^1.1.2"
 	},
@@ -40,14 +43,19 @@
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^24.1.0",
 		"@atlaskit/checkbox": "^18.0.0",
 		"@atlaskit/form": "^16.0.0",
+		"@atlaskit/modal-dialog": "^16.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"jest-in-case": "^1.0.2",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"tiny-invariant": "^1.2.0"
 	},
 	"platform-feature-flags": {
 		"custom-interactive-elements-not-keyboard-focusable": {
@@ -70,6 +78,9 @@
 		},
 		"platform-dst-lozenge-tag-badge-visual-uplifts": {
 			"type": "boolean"
+		},
+		"platform-dst-top-layer": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {