@atlaskit/react-select 4.0.2 → 4.1.0

package/dist/cjs/select.js

@@ -20,6 +20,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _deviceCheck = require("@atlaskit/ds-lib/device-check");
 var _isSafari = require("@atlaskit/ds-lib/is-safari");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -33,6 +34,7 @@ var _filters = require("./filters");
 var _classnames = require("./internal/classnames");
 var _cleanValue = require("./internal/clean-value");
 var _isDocumentEl = require("./internal/is-document-el");
+var _menuPortalCloseContext = require("./internal/menu-portal-close-context");
 var _multiValueAsValue = require("./internal/multi-value-as-value");
 var _notifyOpenLayerObserver = require("./internal/notify-open-layer-observer");
 var _requiredInput = _interopRequireDefault(require("./internal/required-input"));
@@ -336,7 +338,8 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       prevWasFocused: false,
       inputIsHiddenAfterUpdate: undefined,
       prevProps: undefined,
-      instancePrefix: ''
+      instancePrefix: '',
+      controlElement: null
     });
     // Misc. Instance Properties
     // ------------------------------
@@ -347,11 +350,26 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "initialTouchY", 0);
     (0, _defineProperty2.default)(_this, "openAfterFocus", false);
     (0, _defineProperty2.default)(_this, "scrollToFocusedOptionOnUpdate", false);
+    // Cleanup for a pending document `pointerup` listener registered by
+    // `openMenuAfterPointerUp`. See that method for the full rationale.
+    (0, _defineProperty2.default)(_this, "deferredOpenMenuCleanup", null);
     // Refs
     // ------------------------------
     (0, _defineProperty2.default)(_this, "controlRef", null);
     (0, _defineProperty2.default)(_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 && (0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+        _this.setState({
+          controlElement: ref
+        });
+      }
     });
     (0, _defineProperty2.default)(_this, "focusedOptionRef", null);
     (0, _defineProperty2.default)(_this, "getFocusedOptionRef", function (ref) {
@@ -562,7 +580,7 @@ var Select = exports.default = /*#__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') {
@@ -591,7 +609,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         });
         _this.onMenuClose();
       } else {
-        _this.openMenu('first');
+        _this.openMenuAfterPointerUp('first');
       }
       event.preventDefault();
     });
@@ -709,7 +727,14 @@ var Select = exports.default = /*#__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;
     });
@@ -1000,6 +1025,7 @@ var Select = exports.default = /*#__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);
     }
@@ -1046,10 +1072,72 @@ var Select = exports.default = /*#__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 (0, _platformFeatureFlags.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 = (0, _bindEventListener.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;
@@ -1071,25 +1159,25 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         focusedOption: focusedOption,
         focusedOptionId: this.getFocusedOptionId(focusedOption)
       }, function () {
-        return _this2.onMenuOpen();
+        return _this3.onMenuOpen();
       });
       (0, _isSafari.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);
       }
@@ -1097,14 +1185,14 @@ var Select = exports.default = /*#__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 (0, _typeof2.default)(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;
@@ -1492,7 +1580,7 @@ var Select = exports.default = /*#__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,
@@ -1527,7 +1615,7 @@ var Select = exports.default = /*#__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.default.createElement(MultiValue, (0, _extends2.default)({}, commonProps, {
             components: {
               Container: MultiValueContainer,
@@ -1540,10 +1628,10 @@ var Select = exports.default = /*#__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();
@@ -1551,15 +1639,15 @@ var Select = exports.default = /*#__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) {
@@ -1665,7 +1753,7 @@ var Select = exports.default = /*#__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,
@@ -1708,19 +1796,19 @@ var Select = exports.default = /*#__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
@@ -1737,8 +1825,8 @@ var Select = exports.default = /*#__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()) {
@@ -1748,7 +1836,7 @@ var Select = exports.default = /*#__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.default.createElement(Group, (0, _extends2.default)({}, commonProps, {
               key: groupId,
@@ -1761,7 +1849,7 @@ var Select = exports.default = /*#__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);
             }));
@@ -1808,9 +1896,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({}, 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")
           }),
@@ -1822,47 +1910,62 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this6$inputRef, _this6$inputRef2;
+          var _this7$inputRef, _this7$inputRef2;
           return /*#__PURE__*/_react.default.createElement(MenuList, (0, _extends2.default)({}, 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")
-            }), (0, _isSafari.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')
+            }), (0, _isSafari.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.default.createElement("div", {
+          }), _this7.props['UNSAFE_is_experimental_generic'] ? /*#__PURE__*/_react.default.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.default.createElement(MenuPortal, (0, _extends2.default)({}, 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 = (0, _platformFeatureFlags.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 = (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? this.state.controlElement : this.controlRef;
+      var menuPortal = /*#__PURE__*/_react.default.createElement(MenuPortal, (0, _extends2.default)({}, 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 (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+        return menuPortal;
+      }
+      return /*#__PURE__*/_react.default.createElement(_menuPortalCloseContext.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,
@@ -1882,7 +1985,7 @@ var Select = exports.default = /*#__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.default.createElement("input", {
             name: name,
@@ -1895,7 +1998,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               key: "i-".concat(i),
               name: name,
               type: "hidden",
-              value: _this7.getOptionValue(opt)
+              value: _this8.getOptionValue(opt)
             });
           }) : /*#__PURE__*/_react.default.createElement("input", {
             name: name,
@@ -2010,7 +2113,7 @@ 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(), /*#__PURE__*/_react.default.createElement(_notifyOpenLayerObserver.NotifyOpenLayerObserver, {
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), !(0, _platformFeatureFlags.fg)('platform-dst-top-layer') && /*#__PURE__*/_react.default.createElement(_notifyOpenLayerObserver.NotifyOpenLayerObserver, {
         isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
       })));

package/dist/es2019/components/menu-placer.js

@@ -1,5 +1,6 @@
 import { useContext, useLayoutEffect, useRef, useState } from 'react';
 import __noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PortalPlacementContext } from '../internal/portal-placement-context';
 const noop = __noop;
 function getScrollParent(element) {
@@ -255,6 +256,12 @@ const MenuPlacer = props => {
   // The minimum height of the control
   const controlHeight = 38;
   useLayoutEffect(() => {
+    // When the menu is hosted in the browser top layer, positioning, flipping
+    // and viewport-fit are all handled by `@atlaskit/top-layer`. The placer
+    // becomes a pass-through that only forwards `maxMenuHeight` as a cap.
+    if (fg('platform-dst-top-layer')) {
+      return;
+    }
     const menuEl = ref.current;
     if (!menuEl) {
       return;

package/dist/es2019/components/menu-portal-top-layer.compiled.css

@@ -0,0 +1 @@
+._ofie1496{max-block-size:100dvh}

package/dist/es2019/components/menu-portal-top-layer.js

@@ -0,0 +1,143 @@
+/* menu-portal-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./menu-portal-top-layer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useContext, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
+import { getStyleProps } from '../get-style-props';
+import { MenuPortalCloseContext } from '../internal/menu-portal-close-context';
+// `'auto'` falls through to `'end'`; top-layer's `position-try-fallbacks` flips it if needed.
+function reactSelectEdgeToTopLayerEdge(menuPlacement) {
+  return menuPlacement === 'top' ? 'start' : 'end';
+}
+const menuPortalStyles = {
+  root: "_ofie1496"
+};
+
+/**
+ * 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 function MenuPortalTopLayer(props) {
+  const {
+    children,
+    controlElement,
+    innerProps,
+    menuPlacement,
+    menuPosition,
+    xcss
+  } = props;
+  // Select's "close the menu" callback, distinct from `Popover.onClose`.
+  const closeSelect = useContext(MenuPortalCloseContext);
+  const popoverRef = useRef(null);
+
+  // Top-layer hooks need a RefObject; in-render mutation keeps it in sync
+  // with the prop without an effect. The hooks re-read `.current` from
+  // `isOpen`-keyed layout effects, so a stable ref identity is fine.
+  const anchorRef = useRef(null);
+  anchorRef.current = controlElement;
+
+  // `controlElement` is null on initial mount / SSR until `Select` mirrors
+  // its ref into state. While null, every hook below no-ops to avoid DOM
+  // reads or registering an unpositioned popover.
+  const isAnchored = controlElement !== null;
+
+  // `gap: 0` matches the legacy MenuPortal (no trigger-to-menu gap; the
+  // menu root already declares its own `marginBlockStart`). Without this
+  // override `useAnchorPosition`'s default 8px gap would diverge visually
+  // from the legacy path.
+  useAnchorPosition({
+    anchorRef,
+    popoverRef,
+    placement: {
+      axis: 'block',
+      edge: reactSelectEdgeToTopLayerEdge(menuPlacement),
+      offset: {
+        gap: 0
+      }
+    },
+    isOpen: isAnchored
+  });
+  useWidthFromAnchor({
+    anchorRef,
+    popoverRef,
+    mode: 'match-anchor',
+    isOpen: isAnchored
+  });
+  const handlePopoverClose = useCallback(() => {
+    if (closeSelect) {
+      closeSelect();
+    }
+  }, [closeSelect]);
+
+  // Explicit observer registration: the outer Popover is intentionally
+  // roleless (see Popover comment below), so Popover cannot auto-register
+  // from its role. This lets `closeLayers()` (Modal / Drawer) dismiss us.
+  useNotifyOpenLayerObserver({
+    type: 'popup',
+    isOpen: isAnchored,
+    onClose: handlePopoverClose
+  });
+
+  // Top-layer owns positioning; zero offset/rect preserves the consumer
+  // styles call shape.
+  const {
+    className
+  } = getStyleProps({
+    ...props,
+    offset: 0,
+    position: menuPosition,
+    rect: {
+      left: 0,
+      width: 0
+    }
+  }, 'menuPortal', {
+    'menu-portal': true
+  });
+
+  // Popover stays mounted and is driven by `isOpen` so its layout-effect
+  // teardown (`hidePopover`, observer cleanup, position-hook style reset)
+  // runs against a live element. Conditional render would skip that path.
+  //
+  // `mode="manual"` opts out of native light-dismiss: react-select already
+  // owns outside-click and Escape via its own handlers, and the combobox
+  // trigger lives in a separate DOM subtree that the spec algorithm cannot
+  // see. Matches the pattern in `@atlaskit/datetime-picker`'s MenuTopLayer.
+  //
+  // The Popover host is intentionally roleless: the inner `MenuList`
+  // keeps `role="listbox"` and the id referenced by `aria-controls`.
+  // Putting the role on the outer host caused Playwright `toBeVisible`
+  // and some SR hit-testing to treat it as hidden (zero bounding rect
+  // while `styles.root` opts out of UA `[popover]` positioning).
+  //
+  // TODO: add open / close animation. Select unmounts MenuPortalTopLayer
+  // the moment `menuIsOpen` flips false, so Popover's `animate` exit
+  // transition never gets a frame. Needs keeping the portal mounted
+  // through the exit (`onExitFinish`) on the Select side.
+  return /*#__PURE__*/React.createElement(Popover, {
+    ref: popoverRef,
+    mode: "manual",
+    isOpen: isAnchored,
+    onClose: handlePopoverClose
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    // `className` carries consumer `styles.menuPortal({...})` output,
+    // `xcss` carries caller compiled atomic classes, and `-MenuPortal`
+    // is a legacy selector hook kept for parity with MenuPortalLegacy.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss, @typescript-eslint/no-explicit-any
+    className: ax([menuPortalStyles.root, cx(className, xcss, '-MenuPortal')])
+  }, innerProps), children));
+}

package/dist/es2019/components/menu-portal.js

@@ -7,8 +7,10 @@ import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { cx } from '@compiled/react';
 import { autoUpdate } from '@floating-ui/dom';
 import { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../get-style-props';
 import { PortalPlacementContext } from '../internal/portal-placement-context';
+import { MenuPortalTopLayer } from './menu-portal-top-layer';
 function getBoundingClientObj(element) {
   const rect = element.getBoundingClientRect();
   return {
@@ -25,7 +27,7 @@ const menuPortalStyles = {
   root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const MenuPortal = props => {
+function MenuPortalLegacy(props) {
   const {
     appendTo,
     children,
@@ -78,7 +80,10 @@ export const MenuPortal = props => {
     runAutoUpdate();
   }, [runAutoUpdate]);
 
-  // bail early if required elements aren't present
+  // Legacy quirk: `computedPosition` is null until the layout effect runs,
+  // so the first render returns null even with `defaultMenuIsOpen` set.
+  // Synchronous observers (VR snapshots) see a one-frame "closed" state.
+  // Left as-is; the top-layer path supersedes this and positions declaratively.
   if (!appendTo && menuPosition !== 'fixed' || !computedPosition) {
     return null;
   }
@@ -112,4 +117,19 @@ export const MenuPortal = props => {
   return /*#__PURE__*/React.createElement(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /*#__PURE__*/createPortal(menuWrapper, appendTo) : menuWrapper);
+}
+
+/**
+ * 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.
+ */
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const MenuPortal = props => {
+  if (fg('platform-dst-top-layer')) {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    return /*#__PURE__*/React.createElement(MenuPortalTopLayer, props);
+  }
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/React.createElement(MenuPortalLegacy, props);
 };