@atlaskit/top-layer 4.4.2 → 4.4.4

package/dist/cjs/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -98,7 +98,9 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
  * ### 📜 Browser dismiss is non-cancellable
  *
  * Per the popover spec, `beforetoggle` is cancellable on open transitions
- * only, not on close.
+ * only, not on close. Consumers should update controlled intent by setting
+ * `isOpen` to `false` from `onClose`. If controlled intent remains open after
+ * native close, the Popover remains closed until the prop changes.
  *
  * - Spec: <https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute>
  * - <https://github.com/whatwg/html/issues/8973>
@@ -137,44 +139,25 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref].filter(Boolean));
   // `useId()` colons are invalid in CSS selectors and popover target attributes.
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
-  var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
-      isOpen: isOpen,
-      shouldAnimate: shouldAnimate,
-      elementRef: ownRef,
-      onEnterFinish: onEnterFinish,
-      onExitFinish: onExitFinish
-    }),
-    phase = _useAnimatedVisibilit.phase,
-    onToggle = _useAnimatedVisibilit.onToggle;
 
-  // True while the host element is mounted (any phase except `closed`).
-  // Used as a dep so listener-rebind effects re-attach after a remount.
-  var isVisible = phase !== 'closed';
-
-  // Focus management: initial focus on entry (role-dependent), Tab cycling
-  // for dialog roles. Restoration is native for outermost popovers; nested
-  // focus-capturing roles are handled below via the `beforetoggle` snapshot.
-  // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
-  // window (WCAG 2.4.3 guard). See notes/architecture/focus-restoration.md.
-  (0, _useFocusWrap.useFocusWrap)({
-    elementRef: ownRef,
-    role: role,
-    phase: phase
-  });
-  (0, _useInitialFocus.useInitialFocus)({
-    elementRef: ownRef,
-    phase: phase,
-    role: role
-  });
+  // Keep semantic callbacks current without rebinding native lifecycle
+  // listeners during the same commit that calls showPopover()/hidePopover().
+  var onCloseRef = (0, _react.useRef)(onClose);
+  var roleRef = (0, _react.useRef)(role);
+  (0, _react.useLayoutEffect)(function () {
+    onCloseRef.current = onClose;
+    roleRef.current = role;
+  }, [onClose, role]);
 
   // Register with open layer observer so `closeLayers()` and open-count
   // subscriptions work. Only popup-like roles register as `popup`; passive
   // roles (tooltip, status, etc.) leave `type` undefined.
   var handleObserverClose = (0, _react.useCallback)(function () {
-    onClose === null || onClose === void 0 || onClose({
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
       reason: 'programmatic'
     });
-  }, [onClose]);
+  }, []);
   (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
     type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
     isOpen: isOpen,
@@ -215,51 +198,75 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     var active = document.activeElement;
     previouslyFocusedElementRef.current = active instanceof HTMLElement ? active : null;
   }, []);
-  var handleToggle = (0, _react.useCallback)(function (event) {
-    var element = ownRef.current;
-    if (event.newState === 'open') {
-      onToggle(event);
-      return;
+  var restorePreviouslyFocusedElement = (0, _react.useCallback)(function () {
+    var previouslyFocused = previouslyFocusedElementRef.current;
+    previouslyFocusedElementRef.current = null;
+    if (previouslyFocused !== null && previouslyFocused.isConnected && (0, _shouldFocusIntoPopover.shouldFocusIntoPopover)({
+      role: roleRef.current
+    })) {
+      previouslyFocused.focus({
+        preventScroll: true
+      });
+    }
+  }, []);
+  var handleToggleClosed = (0, _react.useCallback)(function (_event) {
+    var _onCloseRef$current2;
+    // Nested-popover focus restoration fallback (browser only
+    // restores outermost; Firefox skips nested entirely).
+    // Restore only when the role moved focus in on open AND the
+    // close was Escape/programmatic. For light dismiss, the
+    // click target keeps focus per HTML spec
+    // (`focusPreviousElement=false`).
+    var reason = closeReasonRef.current;
+    var isProgrammatic = programmaticCloseRef.current;
+    if (reason === 'escape' || isProgrammatic) {
+      restorePreviouslyFocusedElement();
+    } else {
+      previouslyFocusedElementRef.current = null;
     }
-    if (event.newState === 'closed') {
-      if (element) {
-        // Nested-popover focus restoration fallback (browser only
-        // restores outermost; Firefox skips nested entirely).
-        // Restore only when the role moved focus in on open AND the
-        // close was Escape/programmatic. For light dismiss, the
-        // click target keeps focus per HTML spec
-        // (`focusPreviousElement=false`).
-        var previouslyFocused = previouslyFocusedElementRef.current;
-        var reason = closeReasonRef.current;
-        var isProgrammatic = programmaticCloseRef.current;
-        var shouldRestore = previouslyFocused !== null && previouslyFocused.isConnected && (0, _shouldFocusIntoPopover.shouldFocusIntoPopover)({
-          role: role
-        }) && (reason === 'escape' || isProgrammatic);
-        if (shouldRestore && previouslyFocused) {
-          previouslyFocused.focus({
-            preventScroll: true
-          });
-        }
-        previouslyFocusedElementRef.current = null;
-      }
 
-      // Programmatic close: consumer already knows.
-      if (programmaticCloseRef.current) {
-        // Reset reason so a stale 'escape' from a race with Escape keydown
-        // does not corrupt the next browser-dismiss cycle.
-        closeReasonRef.current = 'light-dismiss';
-      } else {
-        // Browser dismiss (Escape/click-outside).
-        var _reason = closeReasonRef.current;
-        closeReasonRef.current = 'light-dismiss';
-        // Optional: `manual` mode has no `onClose` in the forwarded type.
-        onClose === null || onClose === void 0 || onClose({
-          reason: _reason
-        });
-      }
+    // Reset reason so a stale 'escape' from a race with Escape keydown
+    // does not corrupt the next browser-dismiss cycle.
+    closeReasonRef.current = 'light-dismiss';
+
+    // Programmatic close: consumer already knows.
+    if (isProgrammatic) {
+      return;
     }
-    onToggle(event);
-  }, [onClose, onToggle, role]);
+
+    // Browser dismiss (Escape/click-outside).
+    // Optional: `manual` mode has no `onClose` in the forwarded type.
+    (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
+      reason: reason
+    });
+  }, [restorePreviouslyFocusedElement]);
+  var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
+      isOpen: isOpen,
+      shouldAnimate: shouldAnimate,
+      elementRef: ownRef,
+      onEnterFinish: onEnterFinish,
+      onExitFinish: onExitFinish
+    }),
+    phase = _useAnimatedVisibilit.phase,
+    isMounted = _useAnimatedVisibilit.isMounted,
+    onBeforeToggle = _useAnimatedVisibilit.onBeforeToggle,
+    onToggle = _useAnimatedVisibilit.onToggle;
+
+  // Focus management: initial focus on entry (role-dependent), Tab cycling
+  // for dialog roles. Restoration is native for outermost popovers; nested
+  // focus-capturing roles are handled above via the `beforetoggle` snapshot.
+  // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
+  // window (WCAG 2.4.3 guard). See notes/architecture/focus-restoration.md.
+  (0, _useFocusWrap.useFocusWrap)({
+    elementRef: ownRef,
+    role: role,
+    phase: phase
+  });
+  (0, _useInitialFocus.useInitialFocus)({
+    elementRef: ownRef,
+    phase: phase,
+    role: role
+  });
 
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
@@ -287,19 +294,28 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     });
     var unbindToggle = (0, _bindEventListener.bind)(element, {
       type: 'toggle',
-      listener: handleToggle
+      listener: function listener(event) {
+        if (event.newState === 'closed') {
+          handleToggleClosed(event);
+        }
+        onToggle(event);
+      }
     });
-    // Snapshot `document.activeElement` before `useInitialFocus` moves it.
+    // Snapshot `document.activeElement` before `useInitialFocus` moves it,
+    // then advance the shared visibility lifecycle.
     var unbindBeforeToggle = (0, _bindEventListener.bind)(element, {
       type: 'beforetoggle',
-      listener: handleBeforeToggle
+      listener: function listener(event) {
+        handleBeforeToggle(event);
+        onBeforeToggle(event);
+      }
     });
     return function () {
       unbindEscape();
       unbindToggle();
       unbindBeforeToggle();
     };
-  }, [handleToggle, handleBeforeToggle, isVisible]);
+  }, [handleBeforeToggle, handleToggleClosed, isMounted, onBeforeToggle, onToggle]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
@@ -312,8 +328,8 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     if (isOpen) {
       programmaticCloseRef.current = false;
       // Clear stale 'escape' from a prior cycle: the ref outlives
-      // the host element, and the no-animation path unmounts before
-      // `handleToggle` can reset it.
+      // the host element, and interrupted close lifecycles may not reach
+      // `handleToggleClosed` to reset it.
       closeReasonRef.current = 'light-dismiss';
       try {
         element.showPopover();
@@ -334,7 +350,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Unmount the host once exit completes so it does not leave an empty
   // `role`/`popover` element in the accessibility tree. The element
   // remounts on the next open; the `popoverId` is stable across opens.
-  if (!isVisible) {
+  if (!isMounted) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
@@ -75,8 +75,17 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const ownRef = useRef(null);
   const combinedRef = mergeRefs([ownRef, ref]);
   const closeReasonRef = useRef(null);
+  const dismissedByRef = useRef(dismissedBy);
+  const onCloseRef = useRef(onClose);
+  // Keep native event handlers stable while ensuring they read the latest committed props.
+  useLayoutEffect(() => {
+    dismissedByRef.current = dismissedBy;
+    onCloseRef.current = onClose;
+  }, [dismissedBy, onClose]);
   const {
     phase,
+    isMounted,
+    onBeforeToggle,
     onToggle
   } = useAnimatedVisibility({
     isOpen,
@@ -86,9 +95,48 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     onExitFinish
   });
 
-  // True while the host element is mounted (any phase except `closed`).
-  // Used as a dep so listener-rebind effects re-attach after a remount.
-  const isVisible = phase !== 'closed';
+  // Ordering is important: bind native lifecycle listeners before the later
+  // layout effect calls showModal() or close(), because `beforetoggle` fires
+  // synchronously during those calls.
+  useLayoutEffect(() => {
+    if (!isMounted) {
+      return;
+    }
+    const dialog = ownRef.current;
+    if (!dialog) {
+      return;
+    }
+    return bindAll(dialog, [{
+      type: 'beforetoggle',
+      listener: onBeforeToggle
+    }, {
+      // Browsers retarget clicks on ::backdrop to the <dialog> element.
+      // Close on backdrop click when outside-click dismissal is enabled.
+      type: 'click',
+      listener(event) {
+        if (event.target === event.currentTarget && dismissedByRef.current === 'escape-and-outside-click') {
+          closeReasonRef.current = 'overlay-click';
+          dialog.close();
+        }
+      }
+    }, {
+      type: 'toggle',
+      listener(event) {
+        if (event.newState === 'closed') {
+          const reason = closeReasonRef.current;
+          closeReasonRef.current = null;
+          // A reason is only set for user-initiated closes. When React closes the
+          // dialog because isOpen changed, the consumer already knows.
+          if (reason) {
+            onCloseRef.current({
+              reason
+            });
+          }
+        }
+        onToggle(event);
+      }
+    }]);
+  }, [isMounted, onBeforeToggle, onToggle]);
 
   // Native `<dialog>.showModal()` traps focus but wraps through `<body>` at
   // the boundary (A → B → C → body → A). This hook intercepts Tab to wrap
@@ -136,7 +184,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     shouldIgnoreEscape
   } = useSafariEscapeFix({
     dialogRef: ownRef,
-    isVisible
+    isVisible: isMounted
   });
 
   // Handle native Escape (cancel event)
@@ -168,49 +216,11 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     closeReasonRef.current = 'escape';
   }, [dismissedBy, shouldIgnoreEscape]);
 
-  // Handle backdrop interaction
-  // Attached via bind-event-listener rather than a React prop so we avoid
-  // a11y lint suppressions on the <dialog> element.
-  // The click listener provides light dismiss consistently across browsers.
-  // `isVisible` is in deps so the listener re-binds to the new <dialog>
-  // element after a host unmount / remount cycle.
-  useLayoutEffect(() => {
-    const dialog = ownRef.current;
-    if (!dialog) {
-      return;
-    }
-    return bindAll(dialog, [{
-      type: 'click',
-      listener(event) {
-        if (event.target === event.currentTarget && dismissedBy === 'escape-and-outside-click') {
-          closeReasonRef.current = 'overlay-click';
-          // Calls native close because this is emulating the native light-dismiss behavior
-          dialog.close();
-        }
-      }
-    }, {
-      type: 'toggle',
-      listener(event) {
-        if (event.newState === 'closed') {
-          const reason = closeReasonRef.current;
-          closeReasonRef.current = null;
-          if (reason) {
-            onClose({
-              reason
-            });
-          }
-        }
-
-        // Visibility cleanup runs after close-reason handling.
-        onToggle(event);
-      }
-    }]);
-  }, [dismissedBy, onClose, onToggle, isVisible]);
-
   // Unmount the `<dialog>` once exit completes so it does not leave an
-  // empty `role="dialog"` element in the accessibility tree. On the next
-  // open the element remounts and its effects run against the fresh element.
-  if (!isVisible) {
+  // empty `role="dialog"` element in the accessibility tree. A later open
+  // remounts a fresh element, so the listener-binding and native-visibility
+  // effects run against that element.
+  if (!isMounted) {
     return null;
   }
   const shouldAnimateBackdrop = !shouldHideBackdrop && shouldAnimate;

package/dist/es2019/focus/get-closest-layer.js

@@ -0,0 +1,5 @@
+export function getClosestLayer({
+  element
+}) {
+  return element.closest('[popover], dialog');
+}

package/dist/es2019/focus/get-focusables.js

@@ -1,7 +1,28 @@
-import { isInSameLayer } from './is-in-same-layer';
-import { selectors } from './selectors';
+import { getClosestLayer } from './get-closest-layer';
+const focusableExclusions = ['[tabindex="-1"]', ':disabled', '[aria-disabled="true"]', '[aria-hidden="true"]'];
+const exclusionSelector = focusableExclusions.map(selector => `:not(${selector})`).join('');
+const focusableSelector = ['a[href]', 'area[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'button', 'iframe', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', '[tabindex]'].map(selector => `${selector}${exclusionSelector}`).join(',');
+function isVisible(element) {
+  // Visibility filtering must not break focus navigation when the API is unsupported.
+  if (typeof element.checkVisibility !== 'function') {
+    return true;
+  }
+  try {
+    // Exclude elements hidden by display, content-visibility or visibility because
+    // they cannot receive focus. Offscreen, occluded and opacity-zero elements can
+    // receive focus, so they intentionally remain included.
+    return element.checkVisibility({
+      checkVisibilityCSS: true
+    });
+  } catch {
+    return true;
+  }
+}
+
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
+ * Elements with `tabindex="-1"` are excluded because they can be focused
+ * programmatically but are not sequential focus navigation destinations.
  *
  * Focusables that belong to a nested top-layer scope (a `[popover]` or
  * `<dialog>` descendant of the container) are excluded - those elements
@@ -12,8 +33,24 @@ export function getFocusables({
   container,
   filter
 }) {
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(element => element instanceof HTMLElement).filter(element => isInSameLayer({
-    element,
-    container
-  })).filter(element => !filter || filter(element, container));
+  const containerLayer = getClosestLayer({
+    element: container
+  });
+  return Array.from(container.querySelectorAll(focusableSelector)).filter(element => {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    if (getClosestLayer({
+      element
+    }) !== containerLayer) {
+      return false;
+    }
+    if (element.closest('[inert]')) {
+      return false;
+    }
+    if (!isVisible(element)) {
+      return false;
+    }
+    return !filter || filter(element, container);
+  });
 }

package/dist/es2019/focus/get-next-focusable.js

@@ -2,37 +2,60 @@
  * Returns the next focusable element in the given direction relative to the
  * currently focused element within the container. Wraps around at both ends.
  *
- * Returns `null` if there is no focused element within the container or if
- * the focused element is not in the list of focusable elements.
+ * The currently focused element does not need to be tabbable. This prevents
+ * navigation from getting stuck on an element that was programmatically or
+ * pointer focused with `tabindex="-1"`. Negative-tab-index elements remain
+ * excluded as destinations.
+ *
+ * Returns `null` if there is no focused element within the container.
  */
 
 import { getFocusables } from './get-focusables';
-import { selectors } from './selectors';
 export function getNextFocusable({
   container,
   direction,
   filter
 }) {
-  var _all$nextIndex;
+  var _all3;
   const all = getFocusables({
     container,
     filter
   });
-  const current = container.querySelector(selectors.focused);
-  if (!(current instanceof HTMLElement)) {
+  const first = all[0];
+  const last = all[all.length - 1];
+
+  // Checking the elements directly narrows types from `HTMLElement | undefined`.
+  if (!first || !last) {
     return null;
   }
-  const index = all.indexOf(current);
-  if (index === -1) {
+  const current = container.ownerDocument.activeElement;
+  if (!(current instanceof HTMLElement) || !container.contains(current)) {
     return null;
   }
-  const nextIndex = (() => {
+  const index = all.indexOf(current);
+
+  // The focused element can be absent from `all` when it is non-tabbable or
+  // excluded by the filter. Find the first focusable element that follows it in
+  // the DOM, which identifies the nearest focusable destination in either direction.
+  if (index === -1) {
+    var _all;
+    const followingIndex = all.findIndex(element => Boolean(current.compareDocumentPosition(element) & current.DOCUMENT_POSITION_FOLLOWING));
     if (direction === 'forwards') {
-      return (index + 1) % all.length;
+      var _all$followingIndex;
+      // If nothing follows the current element, then wrap to the start.
+      return (_all$followingIndex = all[followingIndex]) !== null && _all$followingIndex !== void 0 ? _all$followingIndex : first;
     }
-    const proposed = index - 1;
-    // if going into negative numbers, loop back to the last item
-    return proposed < 0 ? all.length - 1 : proposed;
-  })();
-  return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
+
+    // The closest preceding element is immediately before the first following one.
+    // A missing adjacent entry means the backward sequence wraps to the end.
+    return (_all = all[followingIndex - 1]) !== null && _all !== void 0 ? _all : last;
+  }
+
+  // The current element is tabbable, so use its adjacent list entry and wrap
+  // when it is already at the boundary.
+  if (direction === 'forwards') {
+    var _all2;
+    return (_all2 = all[index + 1]) !== null && _all2 !== void 0 ? _all2 : first;
+  }
+  return (_all3 = all[index - 1]) !== null && _all3 !== void 0 ? _all3 : last;
 }

package/dist/es2019/focus/is-nested-layer-focused.js

@@ -1,16 +1,14 @@
-import { getDocument } from '@atlaskit/browser-apis';
-import { isInSameLayer } from './is-in-same-layer';
+import { getClosestLayer } from './get-closest-layer';
 
 /**
  * Returns `true` when `document.activeElement` is inside a nested top-layer
- * descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
- * `[role="alertdialog"]` that is itself a descendant of `container`).
+ * descendant of `container` (a `[popover]` or `<dialog>` that is itself a
+ * descendant of `container`).
  */
 export function isNestedLayerFocused({
   container
 }) {
-  var _getDocument;
-  const focused = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+  const focused = container.ownerDocument.activeElement;
   if (!(focused instanceof HTMLElement)) {
     return false;
   }
@@ -21,8 +19,9 @@ export function isNestedLayerFocused({
   }
 
   // If not in the same layer, must be in a nested layer
-  return !isInSameLayer({
-    element: focused,
-    container
+  return getClosestLayer({
+    element: focused
+  }) !== getClosestLayer({
+    element: container
   });
 }