@atlaskit/react-select 4.0.2 → 4.1.0

package/dist/es2019/internal/menu-portal-close-context.js

@@ -0,0 +1,8 @@
+import { createContext } 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 const MenuPortalCloseContext = /*#__PURE__*/createContext(undefined);

package/dist/es2019/select.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./select.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
@@ -17,6 +18,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';
@@ -303,7 +305,8 @@ export default class Select extends Component {
       prevWasFocused: false,
       inputIsHiddenAfterUpdate: undefined,
       prevProps: undefined,
-      instancePrefix: ''
+      instancePrefix: '',
+      controlElement: null
     });
     // Misc. Instance Properties
     // ------------------------------
@@ -314,11 +317,26 @@ export default class Select extends 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", 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", ref => {
@@ -528,7 +546,7 @@ export default class Select extends 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') {
@@ -558,7 +576,7 @@ export default class Select extends Component {
         });
         this.onMenuClose();
       } else {
-        this.openMenu('first');
+        this.openMenuAfterPointerUp('first');
       }
       event.preventDefault();
     });
@@ -678,7 +696,14 @@ export default class Select extends 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;
     });
@@ -1033,6 +1058,7 @@ export default class Select extends Component {
   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);
   }
@@ -1071,6 +1097,60 @@ export default class Select extends Component {
     }
     this.inputRef.blur();
   }
+  /**
+   * 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.
+   */
+  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.
+   */
+  openMenuAfterPointerUp(focusOption) {
+    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();
+    const handlePointerUp = () => {
+      this.deferredOpenMenuCleanup = null;
+      this.openMenu(focusOption);
+    };
+    this.deferredOpenMenuCleanup = bind(document, {
+      type: 'pointerup',
+      listener: handlePointerUp,
+      options: {
+        capture: true,
+        once: true
+      }
+    });
+  }
+  cancelDeferredOpenMenu() {
+    if (this.deferredOpenMenuCleanup) {
+      this.deferredOpenMenuCleanup();
+      this.deferredOpenMenuCleanup = null;
+    }
+  }
   openMenu(focusOption) {
     const {
       selectValue,
@@ -1877,15 +1957,30 @@ export default class Select extends Component {
       }, 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.
+    const 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.
+    const controlElementForPortal = fg('platform-dst-top-layer') ? this.state.controlElement : this.controlRef;
+    const 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);
   }
   renderFormField() {
     const {
@@ -2040,7 +2135,7 @@ export default class Select extends Component {
           'data-testid': `${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/esm/components/menu-placer.js

@@ -4,6 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
 var noop = __noop;
 function getScrollParent(element) {
@@ -262,6 +263,12 @@ var MenuPlacer = function MenuPlacer(props) {
   // The minimum height of the control
   var controlHeight = 38;
   useLayoutEffect(function () {
+    // 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;
+    }
     var menuEl = ref.current;
     if (!menuEl) {
       return;

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

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

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

@@ -0,0 +1,142 @@
+/* menu-portal-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./menu-portal-top-layer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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';
+}
+var 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) {
+  var children = props.children,
+    controlElement = props.controlElement,
+    innerProps = props.innerProps,
+    menuPlacement = props.menuPlacement,
+    menuPosition = props.menuPosition,
+    xcss = props.xcss;
+  // Select's "close the menu" callback, distinct from `Popover.onClose`.
+  var closeSelect = useContext(MenuPortalCloseContext);
+  var 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.
+  var 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.
+  var 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: anchorRef,
+    popoverRef: popoverRef,
+    placement: {
+      axis: 'block',
+      edge: reactSelectEdgeToTopLayerEdge(menuPlacement),
+      offset: {
+        gap: 0
+      }
+    },
+    isOpen: isAnchored
+  });
+  useWidthFromAnchor({
+    anchorRef: anchorRef,
+    popoverRef: popoverRef,
+    mode: 'match-anchor',
+    isOpen: isAnchored
+  });
+  var handlePopoverClose = useCallback(function () {
+    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.
+  var _getStyleProps = getStyleProps(_objectSpread(_objectSpread({}, props), {}, {
+      offset: 0,
+      position: menuPosition,
+      rect: {
+        left: 0,
+        width: 0
+      }
+    }), 'menuPortal', {
+      'menu-portal': true
+    }),
+    className = _getStyleProps.className;
+
+  // 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/esm/components/menu-portal.js

@@ -11,8 +11,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) {
   var rect = element.getBoundingClientRect();
   return {
@@ -31,7 +33,7 @@ var menuPortalStyles = {
   root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var MenuPortal = function MenuPortal(props) {
+function MenuPortalLegacy(props) {
   var appendTo = props.appendTo,
     children = props.children,
     controlElement = props.controlElement,
@@ -90,7 +92,10 @@ export var MenuPortal = function 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;
   }
@@ -120,4 +125,19 @@ export var MenuPortal = function 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 var MenuPortal = function 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);
 };

package/dist/esm/internal/menu-portal-close-context.js

@@ -0,0 +1,8 @@
+import { createContext } 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 var MenuPortalCloseContext = /*#__PURE__*/createContext(undefined);