@atlaskit/top-layer 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/top-layer
 
+## 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/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/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/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.0",
 	"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",