@atlaskit/top-layer 6.1.1 → 6.2.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/top-layer
 
+## 6.2.1
+
+### Patch Changes
+
+- [`26ee4b1f57a30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26ee4b1f57a30) -
+  Fix nested-menu detection and read arrow-navigation focus from the container's document.
+
+## 6.2.0
+
+### Minor Changes
+
+- [`fd59fcdb03cf1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd59fcdb03cf1) -
+  `Popover` registers with the open layer observer only when it has an `onClose`, and manual popover
+  props now accept `onClose`.
+
 ## 6.1.1
 
 ### Patch Changes

package/dist/cjs/popover/popover.js

@@ -179,7 +179,8 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
 
   // 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.
+  // roles (tooltip, status, etc.) leave `type` undefined. Without `onClose`
+  // the layer cannot be closed, so it does not register.
   var handleObserverClose = (0, _react.useCallback)(function () {
     var _onCloseRef$current;
     (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
@@ -188,7 +189,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   }, []);
   (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
     type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
-    isOpen: isOpen,
+    isOpen: isOpen && Boolean(onClose),
     onClose: handleObserverClose
   });
 

package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useArrowNavigation = useArrowNavigation;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _browserApis = require("@atlaskit/browser-apis");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _getFirstFocusable2 = require("../focus/get-first-focusable");
 var _getLastFocusable2 = require("../focus/get-last-focusable");
@@ -73,7 +72,6 @@ function useArrowNavigation(_ref) {
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     filter = _ref.filter;
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var _getDocument;
     var container = containerRef.current;
     if (!container) {
       return;
@@ -84,7 +82,7 @@ function useArrowNavigation(_ref) {
     // [role="menu"] must be this container (not a nested sub-menu).
     // When no filter is provided, fall back to the closest-menu check
     // if the container has role="menu".
-    var focused = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+    var focused = container.ownerDocument.activeElement;
     if (focused instanceof HTMLElement) {
       if (filter) {
         if (!filter(focused, container)) {
@@ -161,7 +159,7 @@ function useArrowNavigation(_ref) {
         // Only close if this container is inside another role="menu"
         // (i.e. it is a submenu, not the top-level menu).
         // Walk up from the parent to avoid matching the container itself.
-        var isNested = ((_container$parentElem = container.parentElement) === null || _container$parentElem === void 0 ? void 0 : _container$parentElem.closest(menuScope)) !== null;
+        var isNested = Boolean((_container$parentElem = container.parentElement) === null || _container$parentElem === void 0 ? void 0 : _container$parentElem.closest(menuScope));
         if (isNested) {
           event.preventDefault();
           onNestedClose();

package/dist/es2019/popover/popover.js

@@ -173,7 +173,8 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
 
   // 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.
+  // roles (tooltip, status, etc.) leave `type` undefined. Without `onClose`
+  // the layer cannot be closed, so it does not register.
   const handleObserverClose = useCallback(() => {
     var _onCloseRef$current;
     (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
@@ -182,7 +183,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   }, []);
   useNotifyOpenLayerObserver({
     type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
-    isOpen,
+    isOpen: isOpen && Boolean(onClose),
     onClose: handleObserverClose
   });
 

package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js

@@ -1,6 +1,5 @@
 import { useCallback, useEffect } from 'react';
 import { bind } from 'bind-event-listener';
-import { getDocument } from '@atlaskit/browser-apis';
 import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
 import { getFirstFocusable } from '../focus/get-first-focusable';
 import { getLastFocusable } from '../focus/get-last-focusable';
@@ -67,7 +66,6 @@ export function useArrowNavigation({
   filter
 }) {
   const handleKeyDown = useCallback(event => {
-    var _getDocument;
     const container = containerRef.current;
     if (!container) {
       return;
@@ -78,7 +76,7 @@ export function useArrowNavigation({
     // [role="menu"] must be this container (not a nested sub-menu).
     // When no filter is provided, fall back to the closest-menu check
     // if the container has role="menu".
-    const focused = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+    const focused = container.ownerDocument.activeElement;
     if (focused instanceof HTMLElement) {
       if (filter) {
         if (!filter(focused, container)) {
@@ -155,7 +153,7 @@ export function useArrowNavigation({
         // Only close if this container is inside another role="menu"
         // (i.e. it is a submenu, not the top-level menu).
         // Walk up from the parent to avoid matching the container itself.
-        const isNested = ((_container$parentElem = container.parentElement) === null || _container$parentElem === void 0 ? void 0 : _container$parentElem.closest(menuScope)) !== null;
+        const isNested = Boolean((_container$parentElem = container.parentElement) === null || _container$parentElem === void 0 ? void 0 : _container$parentElem.closest(menuScope));
         if (isNested) {
           event.preventDefault();
           onNestedClose();

package/dist/esm/popover/popover.js

@@ -170,7 +170,8 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref2, ref) {
 
   // 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.
+  // roles (tooltip, status, etc.) leave `type` undefined. Without `onClose`
+  // the layer cannot be closed, so it does not register.
   var handleObserverClose = useCallback(function () {
     var _onCloseRef$current;
     (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
@@ -179,7 +180,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref2, ref) {
   }, []);
   useNotifyOpenLayerObserver({
     type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
-    isOpen: isOpen,
+    isOpen: isOpen && Boolean(onClose),
     onClose: handleObserverClose
   });
 

package/dist/esm/use-arrow-navigation/use-arrow-navigation.js

@@ -1,6 +1,5 @@
 import { useCallback, useEffect } from 'react';
 import { bind } from 'bind-event-listener';
-import { getDocument } from '@atlaskit/browser-apis';
 import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
 import { getFirstFocusable } from '../focus/get-first-focusable';
 import { getLastFocusable } from '../focus/get-last-focusable';
@@ -67,7 +66,6 @@ export function useArrowNavigation(_ref) {
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     filter = _ref.filter;
   var handleKeyDown = useCallback(function (event) {
-    var _getDocument;
     var container = containerRef.current;
     if (!container) {
       return;
@@ -78,7 +76,7 @@ export function useArrowNavigation(_ref) {
     // [role="menu"] must be this container (not a nested sub-menu).
     // When no filter is provided, fall back to the closest-menu check
     // if the container has role="menu".
-    var focused = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+    var focused = container.ownerDocument.activeElement;
     if (focused instanceof HTMLElement) {
       if (filter) {
         if (!filter(focused, container)) {
@@ -155,7 +153,7 @@ export function useArrowNavigation(_ref) {
         // Only close if this container is inside another role="menu"
         // (i.e. it is a submenu, not the top-level menu).
         // Walk up from the parent to avoid matching the container itself.
-        var isNested = ((_container$parentElem = container.parentElement) === null || _container$parentElem === void 0 ? void 0 : _container$parentElem.closest(menuScope)) !== null;
+        var isNested = Boolean((_container$parentElem = container.parentElement) === null || _container$parentElem === void 0 ? void 0 : _container$parentElem.closest(menuScope));
         if (isNested) {
           event.preventDefault();
           onNestedClose();

package/dist/types/popover/types.d.ts

@@ -21,6 +21,12 @@ export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
  */
 export type TPopoverForwardedProps = TPopoverBaseProps & {
     mode?: 'auto' | 'hint' | 'manual';
+    /**
+     * Called when the popover asks to close. See `TPopoverProps` for each `reason`.
+     *
+     * Also opts the popover into the open layer observer: only a popover with
+     * `onClose` registers, so only it can be closed by `closeLayers()`.
+     */
     onClose?: (args: {
         reason: TPopoverCloseReason;
     }) => void;
@@ -165,14 +171,29 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
      * controlled intent after native dismissal. If `isOpen` remains `true`,
      * the Popover remains natively closed until the prop changes.
      *
-     * The `reason` field indicates how the dismiss occurred:
+     * The `reason` field indicates how the close was requested:
      * - `'escape'`: the user pressed the Escape key.
      * - `'light-dismiss'`: the user clicked outside (or another auto-dismiss).
+     * - `'programmatic'`: the open layer observer's `closeLayers()` asked
+     *   every open layer to close (for example, the side navigation toggle).
+     *   The popover stays open until the consumer sets `isOpen` to `false`.
      */
     onClose: (args: {
         reason: TPopoverCloseReason;
     }) => void;
 } | {
     mode: 'manual';
-    onClose?: never;
+    /**
+     * Enables programmatic close through the open layer observer. When
+     * provided, the popover registers as an open layer, and `closeLayers()`
+     * calls this with `reason: 'programmatic'`. Set `isOpen` to `false` in
+     * response. Without it, the popover does not register, so `closeLayers()`
+     * cannot close it and it is not counted as an open layer.
+     *
+     * Manual popovers have no light dismiss, so this is the only reason
+     * they receive.
+     */
+    onClose?: (args: {
+        reason: TPopoverCloseReason;
+    }) => void;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "6.1.1",
+	"version": "6.2.1",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",