@atlaskit/popup 4.25.0 → 4.26.0

package/dist/es2019/compositional/popup-content-top-layer.js

@@ -2,9 +2,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-content-top-layer.compiled.css";
 import * as React from 'react';
-import { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { popupMotion } from '@atlaskit/top-layer/animations';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
@@ -76,9 +77,26 @@ export function PopupContentTopLayer({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   shouldDisableGpuAcceleration: _shouldDisableGpuAcceleration
 }) {
-  const [, setInitialFocusRef] = useState(null);
+  /**
+   * Escape hatch for consumer-chosen initial focus target.
+   *
+   * The legacy compositional `PopupContent` surfaced
+   * `setInitialFocusRef` on the content children render prop with a
+   * `Dispatch<SetStateAction<HTMLElement | null>>` signature so it
+   * could be passed as a React `ref` callback. We keep the same shape
+   * for API compatibility, but store the value in a ref rather than
+   * component state. Flipping state on every open caused a needless
+   * re-render and, more importantly, raced the initial-focus effect
+   * below. The ref is read in the open-side effect to override the
+   * role-based default focus chosen by `useInitialFocus` inside the
+   * underlying `Popover`.
+   */
+  const consumerInitialFocusRef = useRef(null);
+  const setInitialFocusRef = useCallback(value => {
+    consumerInitialFocusRef.current = typeof value === 'function' ? value(consumerInitialFocusRef.current) : value;
+  }, []);
 
-  // ── Placement conversion ──
+  // Placement conversion
   // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
   // folds it into the new `placement.offset` shape.
   const topLayerPlacement = useMemo(() => fromLegacyPlacement({
@@ -104,7 +122,7 @@ export function PopupContentTopLayer({
     update: noop,
     onClose,
     setInitialFocusRef
-  }), [isOpen, onClose]);
+  }), [isOpen, onClose, setInitialFocusRef]);
 
   // ── Role mapping ──
   const roleProps = useRoleProps({
@@ -115,6 +133,49 @@ export function PopupContentTopLayer({
   const popoverRef = useRef(null);
   const anchorRef = useContext(TriggerRefObjectContext);
 
+  /**
+   * Override the role-based initial focus chosen by the underlying
+   * `Popover` (its internal `useInitialFocus`).
+   *
+   * React flushes child effects before parent effects, so by the time
+   * this effect runs the role-based default focus has already moved.
+   * We then apply the legacy `Popup` contract:
+   *
+   * 1. If the consumer wired `setInitialFocusRef`, focus that element
+   *    (escape hatch wins).
+   * 2. Otherwise, if `autoFocus={false}`, return focus to the trigger.
+   *    The `autoFocus` prop on `Popup` opts out of any initial-focus
+   *    movement, even for roles like `dialog`.
+   *
+   * When neither applies the role-based default from the underlying
+   * `Popover` stays in place.
+   */
+  useEffect(() => {
+    if (!isOpen) {
+      /**
+       * Clear the consumer-supplied focus target on close so a
+       * subsequent open does not silently inherit a stale ref from
+       * the previous open cycle. The next open will re-collect a
+       * target only if the content render prop re-wires
+       * `setInitialFocusRef`.
+       */
+      consumerInitialFocusRef.current = null;
+      return;
+    }
+    const consumerTarget = consumerInitialFocusRef.current;
+    if (consumerTarget && consumerTarget.isConnected) {
+      consumerTarget.focus();
+      return;
+    }
+    if (!autoFocus) {
+      var _anchorRef$current;
+      const trigger = (_anchorRef$current = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _anchorRef$current !== void 0 ? _anchorRef$current : null;
+      if (trigger && trigger.isConnected) {
+        trigger.focus();
+      }
+    }
+  }, [isOpen, autoFocus, anchorRef]);
+
   // `isOpen` is included so the anchor positioning effect re-runs when
   // the Popover host element is unmounted/remounted across open cycles.
   useAnchorPosition({
@@ -130,6 +191,33 @@ export function PopupContentTopLayer({
     isOpen
   });
 
+  /**
+   * Register with the open-layer observer as a `popup` while open.
+   *
+   * The legacy compositional `PopupContent` registered every open
+   * popup with the observer regardless of role, and product surfaces
+   * such as the side-nav panel splitter rely on this signal to detect
+   * open popups via `getCount({ type: 'popup' }) > 0`. The underlying
+   * top-layer `Popover` only self-registers when its role is one of
+   * `menu | listbox | dialog | alertdialog | tree | grid`, which would
+   * miss role-less popups and silently regress the splitter.
+   *
+   * Registering here unconditionally preserves the legacy contract.
+   * When the role does opt the `Popover` into observer registration
+   * the count is incremented twice, which is safe because every known
+   * consumer treats the count as a boolean (`> 0` / `=== 0`).
+   */
+  const handleObserverClose = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose(createPopoverCloseEvent({
+      reason: 'programmatic'
+    }));
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    type: 'popup',
+    isOpen,
+    onClose: handleObserverClose
+  });
+
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   const Container = PopupContainer;

package/dist/es2019/internal/top-layer-bridge.js

@@ -2,6 +2,13 @@ import { useMemo } from 'react';
 
 /**
  * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ *
+ * The `{ role: undefined }` variant covers the legacy contract where a
+ * consumer omits `role` to opt out of any popup semantics (and the
+ * associated role-based initial-focus movement). Legacy `Popup` left the
+ * popup element role-less in that case; we preserve that behaviour here
+ * rather than defaulting to `'dialog'`, which would move focus into the
+ * popup on open.
  */
 
 /**
@@ -11,6 +18,10 @@ import { useMemo } from 'react';
  * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
  * roles must have `label` or `labelledBy`. This hook bridges the legacy
  * flat-prop API (`role`, `label`, `titleId`) to that shape.
+ *
+ * When `role` is omitted entirely, the result carries `role: undefined`
+ * (no implicit default). This matches the legacy `Popup` contract and
+ * keeps the underlying `Popover` from running role-based initial focus.
  */
 export function useRoleProps({
   role,
@@ -36,16 +47,10 @@ export function useRoleProps({
         label
       };
     }
-    // Default: dialog role with label or labelledBy
-    if (titleId) {
-      return {
-        role: 'dialog',
-        labelledBy: titleId
-      };
-    }
+    // No role supplied: preserve the legacy "no popup semantics" contract.
     return {
-      role: 'dialog',
-      label: label !== null && label !== void 0 ? label : 'Popup'
+      role: undefined,
+      label
     };
   }, [role, label, titleId]);
 }

package/dist/es2019/popup-top-layer.js

@@ -3,8 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { popupMotion } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
@@ -92,7 +93,66 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   const triggerRef = useRef(null);
   const popoverRef = useRef(null);
   const popupContainerRef = useRef(null);
-  const [, setInitialFocusRef] = useState(null);
+
+  /**
+   * Escape hatch for consumer-chosen initial focus target.
+   *
+   * The legacy `Popup` surfaced `setInitialFocusRef` on the content
+   * render prop with a `Dispatch<SetStateAction<HTMLElement | null>>`
+   * signature so it could be passed as a React `ref` callback. We
+   * keep the same shape for API compatibility, but store the value in
+   * a ref rather than component state. Flipping state on every open
+   * caused a needless re-render and, more importantly, raced the
+   * initial-focus effect below. The ref is read in the open-side
+   * effect to override the role-based default focus chosen by
+   * `useInitialFocus` inside the underlying `Popover`.
+   */
+  const consumerInitialFocusRef = useRef(null);
+  const setInitialFocusRef = useCallback(value => {
+    consumerInitialFocusRef.current = typeof value === 'function' ? value(consumerInitialFocusRef.current) : value;
+  }, []);
+
+  /**
+   * Override the role-based initial focus chosen by the underlying
+   * `Popover` (its internal `useInitialFocus`).
+   *
+   * React flushes child effects before parent effects, so by the time
+   * this effect runs the role-based default focus has already moved.
+   * We then apply the legacy `Popup` contract:
+   *
+   * 1. If the consumer wired `setInitialFocusRef`, focus that element
+   *    (escape hatch wins).
+   * 2. Otherwise, if `autoFocus={false}`, return focus to the trigger.
+   *    The `autoFocus` prop on `Popup` opts out of any initial-focus
+   *    movement, even for roles like `dialog`.
+   *
+   * When neither applies the role-based default from the underlying
+   * `Popover` stays in place.
+   */
+  useEffect(() => {
+    if (!isOpen) {
+      /**
+       * Clear the consumer-supplied focus target on close so a
+       * subsequent open does not silently inherit a stale ref from
+       * the previous open cycle. The next open will re-collect a
+       * target only if the content render prop re-wires
+       * `setInitialFocusRef`.
+       */
+      consumerInitialFocusRef.current = null;
+      return;
+    }
+    const consumerTarget = consumerInitialFocusRef.current;
+    if (consumerTarget && consumerTarget.isConnected) {
+      consumerTarget.focus();
+      return;
+    }
+    if (!autoFocus) {
+      const trigger = triggerRef.current;
+      if (trigger && trigger.isConnected) {
+        trigger.focus();
+      }
+    }
+  }, [isOpen, autoFocus]);
   const popoverId = usePopoverId();
 
   // Placement conversion.
@@ -115,6 +175,33 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     isOpen
   });
 
+  /**
+   * Register with the open-layer observer as a `popup` while open.
+   *
+   * The legacy `Popup` registered every open popup with the observer
+   * regardless of role, and product surfaces such as the side-nav
+   * panel splitter rely on this signal to detect open popups via
+   * `getCount({ type: 'popup' }) > 0`. The underlying top-layer
+   * `Popover` only self-registers when its role is one of
+   * `menu | listbox | dialog | alertdialog | tree | grid`, which would
+   * miss role-less popups and silently regress the splitter.
+   *
+   * Registering here unconditionally preserves the legacy contract.
+   * When the role does opt the `Popover` into observer registration
+   * the count is incremented twice, which is safe because every known
+   * consumer treats the count as a boolean (`> 0` / `=== 0`).
+   */
+  const handleObserverClose = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose(createPopoverCloseEvent({
+      reason: 'programmatic'
+    }));
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    type: 'popup',
+    isOpen,
+    onClose: handleObserverClose
+  });
+
   // onClose bridge.
   // Translates top-layer's { reason: TPopoverCloseReason } into legacy
   // onClose(event, currentLevel?) by synthesizing DOM events.
@@ -142,7 +229,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     update: noop,
     onClose,
     setInitialFocusRef
-  }), [isOpen, onClose]);
+  }), [isOpen, onClose, setInitialFocusRef]);
 
   // Role mapping.
   // Build the role/label props for Popover.

package/dist/esm/compositional/popup-content-top-layer.js

@@ -1,11 +1,11 @@
 /* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup-content-top-layer.compiled.css";
 import * as React from 'react';
-import { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { popupMotion } from '@atlaskit/top-layer/animations';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
@@ -57,11 +57,26 @@ export function PopupContentTopLayer(_ref) {
     _shouldFlip = _ref.shouldFlip,
     _appearance = _ref.appearance,
     _shouldDisableGpuAcceleration = _ref.shouldDisableGpuAcceleration;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    setInitialFocusRef = _useState2[1];
+  /**
+   * Escape hatch for consumer-chosen initial focus target.
+   *
+   * The legacy compositional `PopupContent` surfaced
+   * `setInitialFocusRef` on the content children render prop with a
+   * `Dispatch<SetStateAction<HTMLElement | null>>` signature so it
+   * could be passed as a React `ref` callback. We keep the same shape
+   * for API compatibility, but store the value in a ref rather than
+   * component state. Flipping state on every open caused a needless
+   * re-render and, more importantly, raced the initial-focus effect
+   * below. The ref is read in the open-side effect to override the
+   * role-based default focus chosen by `useInitialFocus` inside the
+   * underlying `Popover`.
+   */
+  var consumerInitialFocusRef = useRef(null);
+  var setInitialFocusRef = useCallback(function (value) {
+    consumerInitialFocusRef.current = typeof value === 'function' ? value(consumerInitialFocusRef.current) : value;
+  }, []);
 
-  // ── Placement conversion ──
+  // Placement conversion
   // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
   // folds it into the new `placement.offset` shape.
   var topLayerPlacement = useMemo(function () {
@@ -90,7 +105,7 @@ export function PopupContentTopLayer(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, setInitialFocusRef]);
 
   // ── Role mapping ──
   var roleProps = useRoleProps({
@@ -101,6 +116,49 @@ export function PopupContentTopLayer(_ref) {
   var popoverRef = useRef(null);
   var anchorRef = useContext(TriggerRefObjectContext);
 
+  /**
+   * Override the role-based initial focus chosen by the underlying
+   * `Popover` (its internal `useInitialFocus`).
+   *
+   * React flushes child effects before parent effects, so by the time
+   * this effect runs the role-based default focus has already moved.
+   * We then apply the legacy `Popup` contract:
+   *
+   * 1. If the consumer wired `setInitialFocusRef`, focus that element
+   *    (escape hatch wins).
+   * 2. Otherwise, if `autoFocus={false}`, return focus to the trigger.
+   *    The `autoFocus` prop on `Popup` opts out of any initial-focus
+   *    movement, even for roles like `dialog`.
+   *
+   * When neither applies the role-based default from the underlying
+   * `Popover` stays in place.
+   */
+  useEffect(function () {
+    if (!isOpen) {
+      /**
+       * Clear the consumer-supplied focus target on close so a
+       * subsequent open does not silently inherit a stale ref from
+       * the previous open cycle. The next open will re-collect a
+       * target only if the content render prop re-wires
+       * `setInitialFocusRef`.
+       */
+      consumerInitialFocusRef.current = null;
+      return;
+    }
+    var consumerTarget = consumerInitialFocusRef.current;
+    if (consumerTarget && consumerTarget.isConnected) {
+      consumerTarget.focus();
+      return;
+    }
+    if (!autoFocus) {
+      var _anchorRef$current;
+      var trigger = (_anchorRef$current = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _anchorRef$current !== void 0 ? _anchorRef$current : null;
+      if (trigger && trigger.isConnected) {
+        trigger.focus();
+      }
+    }
+  }, [isOpen, autoFocus, anchorRef]);
+
   // `isOpen` is included so the anchor positioning effect re-runs when
   // the Popover host element is unmounted/remounted across open cycles.
   useAnchorPosition({
@@ -116,6 +174,33 @@ export function PopupContentTopLayer(_ref) {
     isOpen: isOpen
   });
 
+  /**
+   * Register with the open-layer observer as a `popup` while open.
+   *
+   * The legacy compositional `PopupContent` registered every open
+   * popup with the observer regardless of role, and product surfaces
+   * such as the side-nav panel splitter rely on this signal to detect
+   * open popups via `getCount({ type: 'popup' }) > 0`. The underlying
+   * top-layer `Popover` only self-registers when its role is one of
+   * `menu | listbox | dialog | alertdialog | tree | grid`, which would
+   * miss role-less popups and silently regress the splitter.
+   *
+   * Registering here unconditionally preserves the legacy contract.
+   * When the role does opt the `Popover` into observer registration
+   * the count is incremented twice, which is safe because every known
+   * consumer treats the count as a boolean (`> 0` / `=== 0`).
+   */
+  var handleObserverClose = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose(createPopoverCloseEvent({
+      reason: 'programmatic'
+    }));
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    type: 'popup',
+    isOpen: isOpen,
+    onClose: handleObserverClose
+  });
+
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   var Container = PopupContainer;

package/dist/esm/internal/top-layer-bridge.js

@@ -2,6 +2,13 @@ import { useMemo } from 'react';
 
 /**
  * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ *
+ * The `{ role: undefined }` variant covers the legacy contract where a
+ * consumer omits `role` to opt out of any popup semantics (and the
+ * associated role-based initial-focus movement). Legacy `Popup` left the
+ * popup element role-less in that case; we preserve that behaviour here
+ * rather than defaulting to `'dialog'`, which would move focus into the
+ * popup on open.
  */
 
 /**
@@ -11,6 +18,10 @@ import { useMemo } from 'react';
  * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
  * roles must have `label` or `labelledBy`. This hook bridges the legacy
  * flat-prop API (`role`, `label`, `titleId`) to that shape.
+ *
+ * When `role` is omitted entirely, the result carries `role: undefined`
+ * (no implicit default). This matches the legacy `Popup` contract and
+ * keeps the underlying `Popover` from running role-based initial focus.
  */
 export function useRoleProps(_ref) {
   var role = _ref.role,
@@ -35,16 +46,10 @@ export function useRoleProps(_ref) {
         label: label
       };
     }
-    // Default: dialog role with label or labelledBy
-    if (titleId) {
-      return {
-        role: 'dialog',
-        labelledBy: titleId
-      };
-    }
+    // No role supplied: preserve the legacy "no popup semantics" contract.
     return {
-      role: 'dialog',
-      label: label !== null && label !== void 0 ? label : 'Popup'
+      role: undefined,
+      label: label
     };
   }, [role, label, titleId]);
 }

package/dist/esm/popup-top-layer.js

@@ -1,11 +1,11 @@
 /* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { popupMotion } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
@@ -71,9 +71,66 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
   var triggerRef = useRef(null);
   var popoverRef = useRef(null);
   var popupContainerRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    setInitialFocusRef = _useState2[1];
+
+  /**
+   * Escape hatch for consumer-chosen initial focus target.
+   *
+   * The legacy `Popup` surfaced `setInitialFocusRef` on the content
+   * render prop with a `Dispatch<SetStateAction<HTMLElement | null>>`
+   * signature so it could be passed as a React `ref` callback. We
+   * keep the same shape for API compatibility, but store the value in
+   * a ref rather than component state. Flipping state on every open
+   * caused a needless re-render and, more importantly, raced the
+   * initial-focus effect below. The ref is read in the open-side
+   * effect to override the role-based default focus chosen by
+   * `useInitialFocus` inside the underlying `Popover`.
+   */
+  var consumerInitialFocusRef = useRef(null);
+  var setInitialFocusRef = useCallback(function (value) {
+    consumerInitialFocusRef.current = typeof value === 'function' ? value(consumerInitialFocusRef.current) : value;
+  }, []);
+
+  /**
+   * Override the role-based initial focus chosen by the underlying
+   * `Popover` (its internal `useInitialFocus`).
+   *
+   * React flushes child effects before parent effects, so by the time
+   * this effect runs the role-based default focus has already moved.
+   * We then apply the legacy `Popup` contract:
+   *
+   * 1. If the consumer wired `setInitialFocusRef`, focus that element
+   *    (escape hatch wins).
+   * 2. Otherwise, if `autoFocus={false}`, return focus to the trigger.
+   *    The `autoFocus` prop on `Popup` opts out of any initial-focus
+   *    movement, even for roles like `dialog`.
+   *
+   * When neither applies the role-based default from the underlying
+   * `Popover` stays in place.
+   */
+  useEffect(function () {
+    if (!isOpen) {
+      /**
+       * Clear the consumer-supplied focus target on close so a
+       * subsequent open does not silently inherit a stale ref from
+       * the previous open cycle. The next open will re-collect a
+       * target only if the content render prop re-wires
+       * `setInitialFocusRef`.
+       */
+      consumerInitialFocusRef.current = null;
+      return;
+    }
+    var consumerTarget = consumerInitialFocusRef.current;
+    if (consumerTarget && consumerTarget.isConnected) {
+      consumerTarget.focus();
+      return;
+    }
+    if (!autoFocus) {
+      var _trigger = triggerRef.current;
+      if (_trigger && _trigger.isConnected) {
+        _trigger.focus();
+      }
+    }
+  }, [isOpen, autoFocus]);
   var popoverId = usePopoverId();
 
   // Placement conversion.
@@ -98,6 +155,33 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     isOpen: isOpen
   });
 
+  /**
+   * Register with the open-layer observer as a `popup` while open.
+   *
+   * The legacy `Popup` registered every open popup with the observer
+   * regardless of role, and product surfaces such as the side-nav
+   * panel splitter rely on this signal to detect open popups via
+   * `getCount({ type: 'popup' }) > 0`. The underlying top-layer
+   * `Popover` only self-registers when its role is one of
+   * `menu | listbox | dialog | alertdialog | tree | grid`, which would
+   * miss role-less popups and silently regress the splitter.
+   *
+   * Registering here unconditionally preserves the legacy contract.
+   * When the role does opt the `Popover` into observer registration
+   * the count is incremented twice, which is safe because every known
+   * consumer treats the count as a boolean (`> 0` / `=== 0`).
+   */
+  var handleObserverClose = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose(createPopoverCloseEvent({
+      reason: 'programmatic'
+    }));
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    type: 'popup',
+    isOpen: isOpen,
+    onClose: handleObserverClose
+  });
+
   // onClose bridge.
   // Translates top-layer's { reason: TPopoverCloseReason } into legacy
   // onClose(event, currentLevel?) by synthesizing DOM events.
@@ -126,7 +210,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, setInitialFocusRef]);
 
   // Role mapping.
   // Build the role/label props for Popover.

package/dist/types/internal/top-layer-bridge.d.ts

@@ -2,6 +2,13 @@ type TRestrictedDialogRole = 'dialog' | 'alertdialog' | 'menu';
 type TWcagSupplementalRole = 'tooltip' | 'listbox' | 'tree' | 'grid' | 'note' | 'status' | 'alert' | 'log';
 /**
  * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ *
+ * The `{ role: undefined }` variant covers the legacy contract where a
+ * consumer omits `role` to opt out of any popup semantics (and the
+ * associated role-based initial-focus movement). Legacy `Popup` left the
+ * popup element role-less in that case; we preserve that behaviour here
+ * rather than defaulting to `'dialog'`, which would move focus into the
+ * popup on open.
  */
 export type TUseRolePropsResult = {
     role: TRestrictedDialogRole;
@@ -12,6 +19,9 @@ export type TUseRolePropsResult = {
 } | {
     role: TWcagSupplementalRole;
     label: string | undefined;
+} | {
+    role: undefined;
+    label: string | undefined;
 };
 /**
  * Maps legacy popup role/label/titleId props to the discriminated union
@@ -20,6 +30,10 @@ export type TUseRolePropsResult = {
  * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
  * roles must have `label` or `labelledBy`. This hook bridges the legacy
  * flat-prop API (`role`, `label`, `titleId`) to that shape.
+ *
+ * When `role` is omitted entirely, the result carries `role: undefined`
+ * (no implicit default). This matches the legacy `Popup` contract and
+ * keeps the underlying `Popover` from running role-based initial focus.
  */
 export declare function useRoleProps({ role, label, titleId, }: {
     role: string | undefined;

package/experimental/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/experimental/compositional.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/experimental/compositional.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/experimental/compositional.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.25.0",
+	"version": "4.26.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/tokens": "^13.4.0",
-		"@atlaskit/top-layer": "^0.17.0",
+		"@atlaskit/top-layer": "^0.18.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",