@atlaskit/react-select 4.0.2 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/react-select
 
+## 4.1.0
+
+### Minor Changes
+
+- [`642a4ddbce9f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/642a4ddbce9f4) -
+  [ux] The Select menu is being migrated to the browser top layer. The new behaviour is gated behind
+  the `platform-dst-top-layer` feature flag and ships dark; there are no public API changes for
+  `@atlaskit/react-select` or `@atlaskit/select`.
+
+  Internal-only improvements to support consumer migrations:
+  - Polyfilled the `:popover-open` CSS pseudo-class in the jsdom test polyfill so consumers can
+    assert on popover open state in unit tests without a browser.
+  - Removed a defensive `try/catch` around `element.matches()` in `Popover` that was only needed to
+    work around the missing pseudo-class.
+  - Clarified, via an inline comment in `use-initial-focus`, why the combobox carve-out is kept
+    role-specific (menu / listbox) rather than hoisted above all role checks.
+  - Fixed a unit test for `PopupSelect` top-layer trigger click that incorrectly called `failGate`
+    in `afterEach`, which conflicted with the auto-reset behaviour of
+    `@atlassian/feature-flags-test-utils/mock-gates` and caused the suite to fail.
+
+  No public API or runtime behaviour changes for existing consumers.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.0.2
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portalPlacementContext = require("../internal/portal-placement-context");
 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) { (0, _defineProperty2.default)(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; }
@@ -269,6 +270,12 @@ var MenuPlacer = function MenuPlacer(props) {
   // The minimum height of the control
   var controlHeight = 38;
   (0, _react.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 ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+      return;
+    }
     var menuEl = ref.current;
     if (!menuEl) {
       return;

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

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

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

@@ -0,0 +1,151 @@
+/* menu-portal-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuPortalTopLayer = MenuPortalTopLayer;
+require("./menu-portal-top-layer.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react2 = require("@compiled/react");
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _popover = require("@atlaskit/top-layer/popover");
+var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
+var _useWidthFromAnchor = require("@atlaskit/top-layer/use-width-from-anchor");
+var _getStyleProps2 = require("../get-style-props");
+var _menuPortalCloseContext = require("../internal/menu-portal-close-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
+// `'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>
+ * ```
+ */
+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 = (0, _react.useContext)(_menuPortalCloseContext.MenuPortalCloseContext);
+  var popoverRef = (0, _react.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 = (0, _react.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.
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: anchorRef,
+    popoverRef: popoverRef,
+    placement: {
+      axis: 'block',
+      edge: reactSelectEdgeToTopLayerEdge(menuPlacement),
+      offset: {
+        gap: 0
+      }
+    },
+    isOpen: isAnchored
+  });
+  (0, _useWidthFromAnchor.useWidthFromAnchor)({
+    anchorRef: anchorRef,
+    popoverRef: popoverRef,
+    mode: 'match-anchor',
+    isOpen: isAnchored
+  });
+  var handlePopoverClose = (0, _react.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.
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    type: 'popup',
+    isOpen: isAnchored,
+    onClose: handlePopoverClose
+  });
+
+  // Top-layer owns positioning; zero offset/rect preserves the consumer
+  // styles call shape.
+  var _getStyleProps = (0, _getStyleProps2.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.Popover, {
+    ref: popoverRef,
+    mode: "manual",
+    isOpen: isAnchored,
+    onClose: handlePopoverClose
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // `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: (0, _runtime.ax)([menuPortalStyles.root, (0, _react2.cx)(className, xcss, '-MenuPortal')])
+  }, innerProps), children));
+}

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

@@ -17,8 +17,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react2 = require("@compiled/react");
 var _dom = require("@floating-ui/dom");
 var _reactDom = require("react-dom");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getStyleProps2 = require("../get-style-props");
 var _portalPlacementContext = require("../internal/portal-placement-context");
+var _menuPortalTopLayer = require("./menu-portal-top-layer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; }
@@ -40,7 +42,7 @@ var menuPortalStyles = {
   root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
+function MenuPortalLegacy(props) {
   var appendTo = props.appendTo,
     children = props.children,
     controlElement = props.controlElement,
@@ -99,7 +101,10 @@ var MenuPortal = exports.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;
   }
@@ -129,4 +134,19 @@ var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   return /*#__PURE__*/React.createElement(_portalPlacementContext.PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /*#__PURE__*/(0, _reactDom.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
+var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    return /*#__PURE__*/React.createElement(_menuPortalTopLayer.MenuPortalTopLayer, props);
+  }
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/React.createElement(MenuPortalLegacy, props);
 };

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuPortalCloseContext = void 0;
+var _react = require("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`.
+ */
+var MenuPortalCloseContext = exports.MenuPortalCloseContext = /*#__PURE__*/(0, _react.createContext)(undefined);