@atlaskit/top-layer 3.2.0 → 4.1.0

package/AGENTS.md

@@ -110,4 +110,6 @@ const [state, setState] = useState<TState>({ type: 'idle' });
 
 ## Versioning
 
-This package is still on `0.x` releases. All changes should be a `minor` (`0.x`) release.
+This package is on stable releases. Follow semantic versioning: use `major` for public API removals
+or incompatible behavior changes, `minor` for public API additions, and `patch` for compatible fixes
+and internal implementation changes.

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/top-layer
 
+## 4.1.0
+
+### Minor Changes
+
+- [`ccb9237bc10d9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ccb9237bc10d9) -
+  Add the `dismissedBy` API to control Dialog dismissal consistently across browsers. Align Dialog
+  with Popover by notifying `onClose` after native dismissal, ensure both primitives unmount after
+  native dismissal, and simplify Modal close handling behind `platform-dst-top-layer`.
+
+## 4.0.0
+
+### Major Changes
+
+- [`eff4aad608ff2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eff4aad608ff2) -
+  Remove the obsolete `@atlaskit/top-layer/animations` entry point and simplify internal helpers.
+  Use the built-in `shouldAnimate` behavior on `Popover` and `Dialog`, with phase-specific xcss
+  overrides when customization is required.
+
 ## 3.2.0
 
 ### Minor Changes

package/README.md

@@ -92,20 +92,6 @@ for entry and
 [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
 `display`/`overlay` for exit — no JavaScript animation coordination required.
 
-Presets are available from `@atlaskit/top-layer/animations`:
-
-```tsx
-import {
-	// Popover presets
-	slideAndFade,
-	fade,
-	scaleAndFade,
-	// Dialog presets
-	dialogSlideUpAndFade,
-	dialogFade,
-} from '@atlaskit/top-layer/animations';
-```
-
 ### Popover animation
 
 Pass `shouldAnimate` to enable the default popover entry and exit animation:

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

@@ -54,8 +54,8 @@ var backdropStyles = {
  *
  * Handles native `cancel` event (Escape) and backdrop click detection.
  *
- * Close flow: we never call `dialog.close()` from event handlers. We always call
- * `onClose`; the consumer decides whether to set `isOpen={false}`.
+ * Close flow: allowed user dismissal closes the native dialog before `onClose`
+ * notifies the consumer. The consumer must synchronize `isOpen` in response.
  *
  * Accessibility: render at least one focusable element (typically a close
  * button) when `isOpen` becomes `true`. Tab is always trapped inside the
@@ -65,6 +65,8 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var children = _ref.children,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
+    _ref$dismissedBy = _ref.dismissedBy,
+    dismissedBy = _ref$dismissedBy === void 0 ? 'escape-and-outside-click' : _ref$dismissedBy,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     _ref$shouldAnimate = _ref.shouldAnimate,
@@ -82,6 +84,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var dialogId = providedId !== null && providedId !== void 0 ? providedId : generatedId;
   var ownRef = (0, _react.useRef)(null);
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
+  var closeReasonRef = (0, _react.useRef)(null);
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       animationKind: 'dialog',
@@ -90,7 +93,8 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
-    phase = _useAnimatedVisibilit.phase;
+    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.
@@ -121,6 +125,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       return;
     }
     if (isOpen) {
+      closeReasonRef.current = null;
       if (!dialog.open) {
         dialog.showModal();
       }
@@ -153,45 +158,67 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     if (event.target !== event.currentTarget) {
       return;
     }
-    event.preventDefault();
+
     // Spurious Safari `cancel`: the keydown snapshot saw an open child
     // popover, so this Escape belongs to that popover (light-dismissed
     // natively). Keep the dialog open instead of forwarding to `onClose`.
     if (shouldIgnoreEscape()) {
+      event.preventDefault();
       return;
     }
-    onClose({
-      reason: 'escape'
-    });
-  }, [onClose, shouldIgnoreEscape]);
 
-  // Handle backdrop click
+    // Without native `closedby`, cancel Escape only when dismissal is disabled.
+    // Allowed dismissal follows Popover behavior: the browser closes the element
+    // and `onClose` notifies the controlled owner of the reason.
+    if (dismissedBy === 'none') {
+      event.preventDefault();
+      return;
+    }
+    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.
-  // Keyboard dismiss is already handled natively (Escape → onCancel above).
+  // 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.
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     var dialog = ownRef.current;
     if (!dialog) {
       return;
     }
-    return (0, _bindEventListener.bind)(dialog, {
+    return (0, _bindEventListener.bindAll)(dialog, [{
       type: 'click',
       listener: function listener(event) {
-        if (event.target === event.currentTarget) {
-          onClose({
-            reason: 'overlay-click'
-          });
+        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();
         }
       }
-    });
-  }, [onClose, isVisible]);
+    }, {
+      type: 'toggle',
+      listener: function listener(event) {
+        if (event.newState === 'closed') {
+          var reason = closeReasonRef.current;
+          closeReasonRef.current = null;
+          if (reason) {
+            onClose({
+              reason: 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 the `[isOpen]` and `[onClose, isVisible]`
-  // effects re-run against the fresh element.
+  // open the element remounts and its effects run against the fresh element.
   if (!isVisible) {
     return null;
   }

package/dist/cjs/focus/is-in-same-layer.js

@@ -13,11 +13,5 @@ var topLayerSelector = '[popover], dialog, [role="dialog"], [role="alertdialog"]
 function isInSameLayer(_ref) {
   var element = _ref.element,
     container = _ref.container;
-  var elementLayer = element.closest(topLayerSelector);
-  var containerLayer = container.closest(topLayerSelector);
-  // Both elements are in the "document" layer
-  if (!elementLayer && !containerLayer) {
-    return true;
-  }
-  return elementLayer === containerLayer;
+  return element.closest(topLayerSelector) === container.closest(topLayerSelector);
 }

package/dist/cjs/focus/selectors.js

@@ -8,7 +8,7 @@ var selectors = exports.selectors = function () {
   // Common exclusion filter applied to every selector.
   var not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
   var notDisabled = ":not([disabled])".concat(not);
-  var focusable = ["a[href]".concat(not), "area[href]".concat(not), "input".concat(notDisabled, ":not([type=\"hidden\"])"), "select".concat(notDisabled), "textarea".concat(notDisabled), "button".concat(notDisabled), "iframe".concat(not), "audio[controls]".concat(not), "video[controls]".concat(not), "[contenteditable]:not([contenteditable=\"false\"])".concat(not), "[tabindex]".concat(notDisabled).concat(not)];
+  var focusable = ["a[href]".concat(not), "area[href]".concat(not), "input".concat(notDisabled, ":not([type=\"hidden\"])"), "select".concat(notDisabled), "textarea".concat(notDisabled), "button".concat(notDisabled), "iframe".concat(not), "audio[controls]".concat(not), "video[controls]".concat(not), "[contenteditable]:not([contenteditable=\"false\"])".concat(not), "[tabindex]".concat(notDisabled)];
   return {
     focusable: focusable.join(','),
     // Build the `:focus` selector

package/dist/cjs/internal/get-aria-for-trigger.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAriaForTrigger = getAriaForTrigger;
-var _roleToAriaHasPopup = require("./role-to-aria-has-popup");
 /**
  * Roles accepted by `getAriaForTrigger`.
  *
@@ -14,12 +13,34 @@ var _roleToAriaHasPopup = require("./role-to-aria-has-popup");
  * manually for tooltip triggers.
  */
 
+/**
+ * Valid values for the `aria-haspopup` attribute.
+ *
+ * Derived from the HTML spec - maps popover roles to what the trigger
+ * announces. `undefined` means the attribute is omitted entirely (used for
+ * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
+ * `aria-haspopup` would be misleading).
+ *
+ * `true` is intentionally NOT in the union - the runtime only ever produces
+ * the explicit string forms, so widening the type would invite consumers to
+ * pass `true` and get an `aria-haspopup="true"` serialisation that the
+ * runtime no longer emits.
+ */
+
 /**
  * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
  * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
  * trigger always receives a defined attribute value.
  */
 
+var roleToAriaHasPopup = {
+  dialog: 'dialog',
+  alertdialog: 'dialog',
+  menu: 'menu',
+  listbox: 'listbox',
+  tree: 'tree',
+  grid: 'grid'
+};
 /**
  * Returns the ARIA attributes to spread onto a click-activated popover trigger.
  *
@@ -71,13 +92,6 @@ function getAriaForTrigger(_ref) {
   var role = _ref.role,
     isOpen = _ref.isOpen,
     popoverId = _ref.popoverId;
-  // `roleToAriaHasPopup` accepts a wider role union (including tooltip-family
-  // roles that map to `undefined`). `TAriaForTriggerRole` excludes those, so
-  // the returned value is guaranteed to be a defined string. The cast narrows
-  // the wider helper signature to match.
-  var ariaHasPopup = (0, _roleToAriaHasPopup.roleToAriaHasPopup)({
-    role: role
-  });
   // `aria-controls` is set to `undefined` while closed. The `Popover` /
   // `Dialog` primitives unmount their host element after the exit
   // animation finishes, so a closed-state `aria-controls` would point
@@ -86,7 +100,7 @@ function getAriaForTrigger(_ref) {
   // until the target exists, avoiding the dangling reference while
   // keeping the relationship live whenever it is meaningful.
   return {
-    'aria-haspopup': ariaHasPopup,
+    'aria-haspopup': roleToAriaHasPopup[role],
     'aria-expanded': isOpen,
     'aria-controls': isOpen ? popoverId : undefined
   };

package/dist/cjs/internal/role-types.js

@@ -1,64 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
-/**
- * Valid values for the `aria-haspopup` attribute.
- *
- * Derived from the HTML spec - maps popover roles to what the trigger
- * announces. `undefined` means the attribute is omitted entirely (used for
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
- * `aria-haspopup` would be misleading).
- *
- * `true` is intentionally NOT in the union - the runtime only ever produces
- * the explicit string forms, so widening the type would invite consumers to
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
- * runtime no longer emits.
- */
-
-/**
- * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
- * Without a name, assistive technology cannot identify these landmarks.
- */
-
-/**
- * Roles where the accessible name is derived from content or provided externally
- * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
- */
-
-// Shared ARIA role discrimination types
-//
-// These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
-// and `menu` MUST have an accessible name (either `label` or `labelledBy`).
-// TypeScript enforces this at compile time via discriminated unions.
-
-/**
- * ARIA role props where a role is always required.
- *
- * Used by `TPopupContentProps`. Popup content must always declare
- * its role so assistive technology can identify the layer.
- */
-
-/**
- * ARIA role props where a role is optional.
- *
- * Used by `TPopoverProps`. The low-level primitive allows omitting
- * the role for cases where it is set externally or not needed.
- */
-
-var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
-
-/**
- * Returns `true` when the given popover role moves focus into the popover
- * on open, and `false` otherwise (including when `role` is `undefined`).
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function shouldFocusIntoPopover(_ref) {
-  var role = _ref.role;
-  if (!role) {
-    return false;
-  }
-  return rolesThatMoveFocus.has(role);
-}
+"use strict";

package/dist/cjs/internal/use-anchor-position.js

@@ -324,11 +324,10 @@ function useAnchorPosition(_ref3) {
        * See `notes/decisions/anchor-name-lifetime.md`
        */
       trigger.style.setProperty('anchor-name', anchorName);
-      var _undoPositioning = (0, _combine.combine)((0, _setStyle.setStyle)({
+      return (0, _setStyle.setStyle)({
         element: popover,
         styles: popoverStyles
-      }));
-      return _undoPositioning;
+      });
     }
 
     // JS fallback. The popover is already in the top layer via

package/dist/cjs/internal/use-animated-visibility.js

@@ -117,7 +117,7 @@ function runOnTransitionEndOrTimeout(_ref) {
  * `entering`, `open`, `exiting`). The host element is rendered while
  * `phase !== 'closed'`, so the `exiting` phase keeps the host mounted
  * while the CSS exit transition plays (or, with animation disabled,
- * while we wait for the browser `toggle` / `close` event to fire on the
+ * while we wait for the browser's closing `toggle` event to fire on the
  * still-attached element):
  *
  * ```
@@ -136,6 +136,7 @@ function useAnimatedVisibility(_ref2) {
     onEnterFinish = _ref2.onEnterFinish,
     onExitFinish = _ref2.onExitFinish;
   var willAnimate = shouldAnimate && !(0, _reducedMotion.prefersReducedMotion)();
+  var isNativeClosedRef = (0, _react.useRef)(false);
 
   // Promote `closed → entering`/`closed → open` synchronously during
   // render so the host element mounts in the same commit as the open
@@ -149,16 +150,23 @@ function useAnimatedVisibility(_ref2) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     phase = _useState2[0],
     setPhase = _useState2[1];
-  if (isOpen && phase === 'closed') {
+
+  // Rearm only after controlled state and the native lifecycle have both
+  // reached closed. Resetting as soon as `isOpen` becomes false can erase a
+  // closing toggle that was handled in the same React batch.
+  if (!isOpen && phase === 'closed') {
+    isNativeClosedRef.current = false;
+  }
+  if (isOpen && phase === 'closed' && !isNativeClosedRef.current) {
     setPhase(willAnimate ? 'entering' : 'open');
   }
   if (!isOpen && (phase === 'open' || phase === 'entering')) {
     // Close intent. Move to `exiting` to gate the unmount on either
-    // the exit transition (animated) or the toggle/close event
+    // the exit transition (animated) or the closing toggle event
     // (non-animated). Includes interrupted entry (`entering → exiting`).
     setPhase('exiting');
   }
-  if (isOpen && phase === 'exiting') {
+  if (isOpen && phase === 'exiting' && !isNativeClosedRef.current) {
     // Reopen mid-exit. With animation, jump back to `entering` and let
     // the entry transition restart from current visual state. Without
     // animation, jump straight to `open` (the handshake we were waiting
@@ -247,49 +255,37 @@ function useAnimatedVisibility(_ref2) {
     });
   }, [phase, willAnimate, animationKind, elementRef]);
 
-  // Non-animated exit: wait for the browser's `toggle` (closed) or
-  // `close` event before unmounting, so the consumer's listener (close
-  // reason, nested focus restoration, `onClose`) and the browser's
-  // native focus restoration both run against the still-attached
-  // element. A naive `setTimeout(0)` occasionally beats the `toggle`
-  // task in Chromium and drops focus restoration.
-  //
-  // `useLayoutEffect` so the listener binds in the same commit as the
-  // show/hide layout effect that calls `hidePopover()` / `dialog.close()`.
-  // The toggle/close event is queued as a task and cannot run until the
-  // frame completes. SSR-safe: `phase` starts at `'closed'`.
-  //
-  // `onExitFinish` is fired separately (see effect below) so consumers
-  // observe it the moment `isOpen` flips to `false`.
+  // Native dismissal is authoritative. Its toggle can arrive while controlled
+  // state still says open, so remember that native state and do not
+  // reopen until `isOpen` has first moved to false.
   (0, _react.useLayoutEffect)(function () {
-    if (phase !== 'exiting' || willAnimate) {
-      return;
+    if (phase === 'exiting' && !willAnimate && isNativeClosedRef.current) {
+      setPhase('closed');
     }
-    var element = elementRef.current;
-    if (!element) {
+  }, [phase, willAnimate]);
+  var onToggle = (0, _react.useCallback)(function (event) {
+    if (event.newState === 'open') {
+      isNativeClosedRef.current = false;
       return;
     }
-    function unmount() {
-      setPhase(function (current) {
-        return current === 'exiting' ? 'closed' : current;
-      });
+    if (event.newState !== 'closed') {
+      return;
     }
-    return (0, _bindEventListener.bindAll)(element, [{
-      type: 'toggle',
-      listener: function listener(event) {
-        if (event.newState === 'closed') {
-          unmount();
-        }
+    isNativeClosedRef.current = true;
+    setPhase(function (current) {
+      if (current === 'open' || current === 'entering') {
+        return 'exiting';
       }
-    }, {
-      type: 'close',
-      listener: unmount
-    }]);
-  }, [phase, willAnimate, elementRef]);
+      if (current === 'exiting' && !willAnimate) {
+        return 'closed';
+      }
+      return current;
+    });
+  }, [willAnimate]);
 
   // Non-animated exit callback. No `transitionend` to wait for, so fire
   // `onExitFinish` on the transition into `exiting` (the unmount itself
-  // is gated by the toggle/close handshake above).
+  // is gated by the closing toggle handshake above).
   var prevPhaseForExitRef = (0, _react.useRef)('closed');
   (0, _react.useEffect)(function () {
     var prevPhase = prevPhaseForExitRef.current;
@@ -304,6 +300,7 @@ function useAnimatedVisibility(_ref2) {
     }
   }, [phase, willAnimate]);
   return {
-    phase: phase
+    phase: phase,
+    onToggle: onToggle
   };
 }

package/dist/cjs/popover/popover.js

@@ -16,7 +16,7 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _resolvePlacement2 = require("../internal/resolve-placement");
-var _roleTypes = require("../internal/role-types");
+var _shouldFocusIntoPopover = require("../internal/should-focus-into-popover");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useInitialFocus = require("../internal/use-initial-focus");
@@ -97,11 +97,7 @@ 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. Consumers that need to ignore a specific dismiss
- * (e.g. a click on a logically-associated external trigger) must reconcile
- * inside their own `onClose` handler by calling `showPopover()` again.
- * `Popover` does not self-heal so consumers do not pay a reconcile cost
- * by default.
+ * only, not on close.
  *
  * - Spec: <https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute>
  * - <https://github.com/whatwg/html/issues/8973>
@@ -148,7 +144,8 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
       onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
-    phase = _useAnimatedVisibilit.phase;
+    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.
@@ -221,6 +218,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   var handleToggle = (0, _react.useCallback)(function (event) {
     var element = ownRef.current;
     if (event.newState === 'open') {
+      onToggle(event);
       return;
     }
     if (event.newState === 'closed') {
@@ -232,11 +230,11 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         // click target keeps focus per HTML spec
         // (`focusPreviousElement=false`).
         var previouslyFocused = previouslyFocusedElementRef.current;
-        var _reason = closeReasonRef.current;
+        var reason = closeReasonRef.current;
         var isProgrammatic = programmaticCloseRef.current;
-        var shouldRestore = previouslyFocused !== null && previouslyFocused.isConnected && (0, _roleTypes.shouldFocusIntoPopover)({
+        var shouldRestore = previouslyFocused !== null && previouslyFocused.isConnected && (0, _shouldFocusIntoPopover.shouldFocusIntoPopover)({
           role: role
-        }) && (_reason === 'escape' || isProgrammatic);
+        }) && (reason === 'escape' || isProgrammatic);
         if (shouldRestore && previouslyFocused) {
           previouslyFocused.focus({
             preventScroll: true
@@ -250,18 +248,18 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         // Reset reason so a stale 'escape' from a race with Escape keydown
         // does not corrupt the next browser-dismiss cycle.
         closeReasonRef.current = 'light-dismiss';
-        return;
+      } 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
+        });
       }
-
-      // 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
-      });
     }
-  }, [onClose, role]);
+    onToggle(event);
+  }, [onClose, onToggle, role]);
 
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously