@atlaskit/top-layer 6.2.4 → 6.2.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/top-layer
 
+## 6.2.5
+
+### Patch Changes
+
+- [`b82a5dc33d636`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b82a5dc33d636) -
+  The testing polyfill now fires a cancelable cancel event when Escape targets a dialog. Unless
+  keydown or cancel is prevented, the dialog closes and emits its existing closing beforetoggle,
+  toggle and close events. Escape respects closedby and dialog/popover opening order.
+
 ## 6.2.4
 
 ### Patch Changes

package/dist/cjs/testing/polyfill.js

@@ -1,6 +1,8 @@
 "use strict";
 
 var _bindEventListener = require("bind-event-listener");
+// Node supports findLast, but the package defaults to older array type declarations.
+/// <reference lib="es2023.array" />
 /* eslint-disable compat/compat */
 /**
  * Popover API & HTMLDialogElement polyfills for jsdom.
@@ -482,40 +484,133 @@ function handleDocumentPointerup(event) {
   });
 }
 
-// Topmost still-connected popover in `stack`, pruning disconnected entries
-// (test pollution where a popover was removed from the DOM without hidePopover).
-// Polyfill-only defensive cleanup; not in the spec.
-function topmostConnected(_ref18) {
-  var stack = _ref18.stack;
-  while (stack.length > 0) {
-    var candidate = stack[stack.length - 1];
-    if (candidate.isConnected) {
-      return candidate;
-    }
-    stack.pop();
+/**
+ * Represents one dialog or popover opening so queued Escape requests cannot close a later opening.
+ */
+
+/**
+ * Tracks dialog and popover Escape targets in opening order.
+ */
+var escapeLayers = [];
+
+/**
+ * Removes an opening from Escape tracking so it cannot receive a later dismissal request.
+ */
+function unregisterEscapeLayer(_ref18) {
+  var element = _ref18.element;
+  var index = escapeLayers.findIndex(function (layer) {
+    return layer.element === element;
+  });
+  if (index !== -1) {
+    escapeLayers.splice(index, 1);
   }
-  return null;
 }
 
-// Escape closes the topmost open popover. Hints are dismissed before autos.
-// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+/**
+ * Records a new opening, replacing any stale registration for the same element.
+ */
+function registerEscapeLayer(_ref19) {
+  var layer = _ref19.layer;
+  unregisterEscapeLayer({
+    element: layer.element
+  });
+  escapeLayers.push(layer);
+}
+
+/**
+ * Checks whether a tracked element is still connected and open, including direct DOM changes.
+ */
+function isEscapeLayerOpen(_ref20) {
+  var layer = _ref20.layer;
+  return layer.element.isConnected && (layer.type === 'dialog' ? layer.element.open : isPopoverOpen({
+    element: layer.element
+  }));
+}
+
+/**
+ * Removes registrations for closed or disconnected elements before choosing an Escape target.
+ */
+function pruneClosedEscapeLayers() {
+  escapeLayers.filter(function (layer) {
+    return !isEscapeLayerOpen({
+      layer: layer
+    });
+  }).forEach(function (layer) {
+    return unregisterEscapeLayer({
+      element: layer.element
+    });
+  });
+}
+
+/**
+ * Checks whether a layer accepts Escape, using closedby and modality for dialogs.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#computed-closed-by-state
+ */
+function acceptsEscape(_ref21) {
+  var _layer$element$getAtt;
+  var layer = _ref21.layer;
+  if (layer.type === 'popover') {
+    return true;
+  }
+  var closedBy = (_layer$element$getAtt = layer.element.getAttribute('closedby')) === null || _layer$element$getAtt === void 0 ? void 0 : _layer$element$getAtt.toLowerCase();
+  if (closedBy === 'none') {
+    return false;
+  }
+  if (closedBy === 'any' || closedBy === 'closerequest') {
+    return true;
+  }
+  // Missing or invalid closedby enables Escape for modal dialogs only.
+  return Boolean(layer.element._isModal);
+}
+
+/**
+ * Dismisses the latest eligible Escape target, allowing application handlers to prevent dialog cancellation.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#set-up-the-dialog-close-watcher
+ */
 function handleDocumentKeydown(event) {
-  if (event.key !== 'Escape') {
+  // A prevented key event must not invoke its default dismissal action.
+  if (event.key !== 'Escape' || event.defaultPrevented) {
     return;
   }
-  var topHint = topmostConnected({
-    stack: openHintStack
+  pruneClosedEscapeLayers();
+
+  // Capture this opening so handlers cannot redirect the same Escape to another layer.
+  var layer = escapeLayers.findLast(function (candidate) {
+    return acceptsEscape({
+      layer: candidate
+    });
   });
-  if (topHint) {
-    topHint.hidePopover();
+  if (!layer) {
     return;
   }
-  var topAuto = topmostConnected({
-    stack: openAutoStack
-  });
-  if (topAuto) {
-    topAuto.hidePopover();
+  if (layer.type === 'popover') {
+    // Popover dismissal is synchronous.
+    layer.element.hidePopover();
+    return;
   }
+
+  // Defer the dialog default action until application keydown listeners have run.
+  setTimeout(function () {
+    // Handlers may prevent Escape, change eligibility, or close and reopen the target.
+    if (event.defaultPrevented || !escapeLayers.includes(layer) || !isEscapeLayerOpen({
+      layer: layer
+    }) || !acceptsEscape({
+      layer: layer
+    })) {
+      return;
+    }
+    var allowed = layer.element.dispatchEvent(new Event('cancel', {
+      cancelable: true,
+      bubbles: false
+    }));
+    // The cancel handler can close or reopen the dialog; only close the original opening.
+    if (allowed && escapeLayers.includes(layer) && isEscapeLayerOpen({
+      layer: layer
+    })) {
+      // close() dispatches beforetoggle and queues toggle and close notifications.
+      layer.element.close();
+    }
+  }, 0);
 }
 if (typeof HTMLElement !== 'undefined') {
   var schedulePopoverToggle = createToggleScheduler();
@@ -597,6 +692,12 @@ if (typeof HTMLElement !== 'undefined') {
       });
       if (stack && !stack.includes(this)) {
         stack.push(this);
+        registerEscapeLayer({
+          layer: {
+            type: 'popover',
+            element: this
+          }
+        });
       }
       clearOpacityOnOpenToggle({
         element: this
@@ -632,6 +733,9 @@ if (typeof HTMLElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('data-popover-open');
+      unregisterEscapeLayer({
+        element: this
+      });
       var stack = stackForMode({
         mode: getPopoverMode({
           element: this
@@ -763,6 +867,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = true;
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -785,6 +895,13 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = false;
+      // Non-modal dialogs can opt into Escape through closedby.
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -808,6 +925,9 @@ if (typeof HTMLDialogElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('open');
+      unregisterEscapeLayer({
+        element: this
+      });
       this._isModal = false;
       if (returnValue !== undefined) {
         this.returnValue = returnValue;

package/dist/es2019/testing/polyfill.js

@@ -1,3 +1,5 @@
+// Node supports findLast, but the package defaults to older array type declarations.
+/// <reference lib="es2023.array" />
 /* eslint-disable compat/compat */
 /**
  * Popover API & HTMLDialogElement polyfills for jsdom.
@@ -495,41 +497,129 @@ function handleDocumentPointerup(event) {
   });
 }
 
-// Topmost still-connected popover in `stack`, pruning disconnected entries
-// (test pollution where a popover was removed from the DOM without hidePopover).
-// Polyfill-only defensive cleanup; not in the spec.
-function topmostConnected({
-  stack
+/**
+ * Represents one dialog or popover opening so queued Escape requests cannot close a later opening.
+ */
+
+/**
+ * Tracks dialog and popover Escape targets in opening order.
+ */
+const escapeLayers = [];
+
+/**
+ * Removes an opening from Escape tracking so it cannot receive a later dismissal request.
+ */
+function unregisterEscapeLayer({
+  element
 }) {
-  while (stack.length > 0) {
-    const candidate = stack[stack.length - 1];
-    if (candidate.isConnected) {
-      return candidate;
-    }
-    stack.pop();
+  const index = escapeLayers.findIndex(layer => layer.element === element);
+  if (index !== -1) {
+    escapeLayers.splice(index, 1);
   }
-  return null;
 }
 
-// Escape closes the topmost open popover. Hints are dismissed before autos.
-// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+/**
+ * Records a new opening, replacing any stale registration for the same element.
+ */
+function registerEscapeLayer({
+  layer
+}) {
+  unregisterEscapeLayer({
+    element: layer.element
+  });
+  escapeLayers.push(layer);
+}
+
+/**
+ * Checks whether a tracked element is still connected and open, including direct DOM changes.
+ */
+function isEscapeLayerOpen({
+  layer
+}) {
+  return layer.element.isConnected && (layer.type === 'dialog' ? layer.element.open : isPopoverOpen({
+    element: layer.element
+  }));
+}
+
+/**
+ * Removes registrations for closed or disconnected elements before choosing an Escape target.
+ */
+function pruneClosedEscapeLayers() {
+  escapeLayers.filter(layer => !isEscapeLayerOpen({
+    layer
+  })).forEach(layer => unregisterEscapeLayer({
+    element: layer.element
+  }));
+}
+
+/**
+ * Checks whether a layer accepts Escape, using closedby and modality for dialogs.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#computed-closed-by-state
+ */
+function acceptsEscape({
+  layer
+}) {
+  var _layer$element$getAtt;
+  if (layer.type === 'popover') {
+    return true;
+  }
+  const closedBy = (_layer$element$getAtt = layer.element.getAttribute('closedby')) === null || _layer$element$getAtt === void 0 ? void 0 : _layer$element$getAtt.toLowerCase();
+  if (closedBy === 'none') {
+    return false;
+  }
+  if (closedBy === 'any' || closedBy === 'closerequest') {
+    return true;
+  }
+  // Missing or invalid closedby enables Escape for modal dialogs only.
+  return Boolean(layer.element._isModal);
+}
+
+/**
+ * Dismisses the latest eligible Escape target, allowing application handlers to prevent dialog cancellation.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#set-up-the-dialog-close-watcher
+ */
 function handleDocumentKeydown(event) {
-  if (event.key !== 'Escape') {
+  // A prevented key event must not invoke its default dismissal action.
+  if (event.key !== 'Escape' || event.defaultPrevented) {
     return;
   }
-  const topHint = topmostConnected({
-    stack: openHintStack
-  });
-  if (topHint) {
-    topHint.hidePopover();
+  pruneClosedEscapeLayers();
+
+  // Capture this opening so handlers cannot redirect the same Escape to another layer.
+  const layer = escapeLayers.findLast(candidate => acceptsEscape({
+    layer: candidate
+  }));
+  if (!layer) {
     return;
   }
-  const topAuto = topmostConnected({
-    stack: openAutoStack
-  });
-  if (topAuto) {
-    topAuto.hidePopover();
+  if (layer.type === 'popover') {
+    // Popover dismissal is synchronous.
+    layer.element.hidePopover();
+    return;
   }
+
+  // Defer the dialog default action until application keydown listeners have run.
+  setTimeout(() => {
+    // Handlers may prevent Escape, change eligibility, or close and reopen the target.
+    if (event.defaultPrevented || !escapeLayers.includes(layer) || !isEscapeLayerOpen({
+      layer
+    }) || !acceptsEscape({
+      layer
+    })) {
+      return;
+    }
+    const allowed = layer.element.dispatchEvent(new Event('cancel', {
+      cancelable: true,
+      bubbles: false
+    }));
+    // The cancel handler can close or reopen the dialog; only close the original opening.
+    if (allowed && escapeLayers.includes(layer) && isEscapeLayerOpen({
+      layer
+    })) {
+      // close() dispatches beforetoggle and queues toggle and close notifications.
+      layer.element.close();
+    }
+  }, 0);
 }
 if (typeof HTMLElement !== 'undefined') {
   const schedulePopoverToggle = createToggleScheduler();
@@ -611,6 +701,12 @@ if (typeof HTMLElement !== 'undefined') {
       });
       if (stack && !stack.includes(this)) {
         stack.push(this);
+        registerEscapeLayer({
+          layer: {
+            type: 'popover',
+            element: this
+          }
+        });
       }
       clearOpacityOnOpenToggle({
         element: this
@@ -646,6 +742,9 @@ if (typeof HTMLElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('data-popover-open');
+      unregisterEscapeLayer({
+        element: this
+      });
       const stack = stackForMode({
         mode: getPopoverMode({
           element: this
@@ -773,6 +872,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = true;
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -795,6 +900,13 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = false;
+      // Non-modal dialogs can opt into Escape through closedby.
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -818,6 +930,9 @@ if (typeof HTMLDialogElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('open');
+      unregisterEscapeLayer({
+        element: this
+      });
       this._isModal = false;
       if (returnValue !== undefined) {
         this.returnValue = returnValue;

package/dist/esm/testing/polyfill.js

@@ -1,3 +1,5 @@
+// Node supports findLast, but the package defaults to older array type declarations.
+/// <reference lib="es2023.array" />
 /* eslint-disable compat/compat */
 /**
  * Popover API & HTMLDialogElement polyfills for jsdom.
@@ -480,40 +482,133 @@ function handleDocumentPointerup(event) {
   });
 }
 
-// Topmost still-connected popover in `stack`, pruning disconnected entries
-// (test pollution where a popover was removed from the DOM without hidePopover).
-// Polyfill-only defensive cleanup; not in the spec.
-function topmostConnected(_ref18) {
-  var stack = _ref18.stack;
-  while (stack.length > 0) {
-    var candidate = stack[stack.length - 1];
-    if (candidate.isConnected) {
-      return candidate;
-    }
-    stack.pop();
+/**
+ * Represents one dialog or popover opening so queued Escape requests cannot close a later opening.
+ */
+
+/**
+ * Tracks dialog and popover Escape targets in opening order.
+ */
+var escapeLayers = [];
+
+/**
+ * Removes an opening from Escape tracking so it cannot receive a later dismissal request.
+ */
+function unregisterEscapeLayer(_ref18) {
+  var element = _ref18.element;
+  var index = escapeLayers.findIndex(function (layer) {
+    return layer.element === element;
+  });
+  if (index !== -1) {
+    escapeLayers.splice(index, 1);
   }
-  return null;
 }
 
-// Escape closes the topmost open popover. Hints are dismissed before autos.
-// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+/**
+ * Records a new opening, replacing any stale registration for the same element.
+ */
+function registerEscapeLayer(_ref19) {
+  var layer = _ref19.layer;
+  unregisterEscapeLayer({
+    element: layer.element
+  });
+  escapeLayers.push(layer);
+}
+
+/**
+ * Checks whether a tracked element is still connected and open, including direct DOM changes.
+ */
+function isEscapeLayerOpen(_ref20) {
+  var layer = _ref20.layer;
+  return layer.element.isConnected && (layer.type === 'dialog' ? layer.element.open : isPopoverOpen({
+    element: layer.element
+  }));
+}
+
+/**
+ * Removes registrations for closed or disconnected elements before choosing an Escape target.
+ */
+function pruneClosedEscapeLayers() {
+  escapeLayers.filter(function (layer) {
+    return !isEscapeLayerOpen({
+      layer: layer
+    });
+  }).forEach(function (layer) {
+    return unregisterEscapeLayer({
+      element: layer.element
+    });
+  });
+}
+
+/**
+ * Checks whether a layer accepts Escape, using closedby and modality for dialogs.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#computed-closed-by-state
+ */
+function acceptsEscape(_ref21) {
+  var _layer$element$getAtt;
+  var layer = _ref21.layer;
+  if (layer.type === 'popover') {
+    return true;
+  }
+  var closedBy = (_layer$element$getAtt = layer.element.getAttribute('closedby')) === null || _layer$element$getAtt === void 0 ? void 0 : _layer$element$getAtt.toLowerCase();
+  if (closedBy === 'none') {
+    return false;
+  }
+  if (closedBy === 'any' || closedBy === 'closerequest') {
+    return true;
+  }
+  // Missing or invalid closedby enables Escape for modal dialogs only.
+  return Boolean(layer.element._isModal);
+}
+
+/**
+ * Dismisses the latest eligible Escape target, allowing application handlers to prevent dialog cancellation.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#set-up-the-dialog-close-watcher
+ */
 function handleDocumentKeydown(event) {
-  if (event.key !== 'Escape') {
+  // A prevented key event must not invoke its default dismissal action.
+  if (event.key !== 'Escape' || event.defaultPrevented) {
     return;
   }
-  var topHint = topmostConnected({
-    stack: openHintStack
+  pruneClosedEscapeLayers();
+
+  // Capture this opening so handlers cannot redirect the same Escape to another layer.
+  var layer = escapeLayers.findLast(function (candidate) {
+    return acceptsEscape({
+      layer: candidate
+    });
   });
-  if (topHint) {
-    topHint.hidePopover();
+  if (!layer) {
     return;
   }
-  var topAuto = topmostConnected({
-    stack: openAutoStack
-  });
-  if (topAuto) {
-    topAuto.hidePopover();
+  if (layer.type === 'popover') {
+    // Popover dismissal is synchronous.
+    layer.element.hidePopover();
+    return;
   }
+
+  // Defer the dialog default action until application keydown listeners have run.
+  setTimeout(function () {
+    // Handlers may prevent Escape, change eligibility, or close and reopen the target.
+    if (event.defaultPrevented || !escapeLayers.includes(layer) || !isEscapeLayerOpen({
+      layer: layer
+    }) || !acceptsEscape({
+      layer: layer
+    })) {
+      return;
+    }
+    var allowed = layer.element.dispatchEvent(new Event('cancel', {
+      cancelable: true,
+      bubbles: false
+    }));
+    // The cancel handler can close or reopen the dialog; only close the original opening.
+    if (allowed && escapeLayers.includes(layer) && isEscapeLayerOpen({
+      layer: layer
+    })) {
+      // close() dispatches beforetoggle and queues toggle and close notifications.
+      layer.element.close();
+    }
+  }, 0);
 }
 if (typeof HTMLElement !== 'undefined') {
   var schedulePopoverToggle = createToggleScheduler();
@@ -595,6 +690,12 @@ if (typeof HTMLElement !== 'undefined') {
       });
       if (stack && !stack.includes(this)) {
         stack.push(this);
+        registerEscapeLayer({
+          layer: {
+            type: 'popover',
+            element: this
+          }
+        });
       }
       clearOpacityOnOpenToggle({
         element: this
@@ -630,6 +731,9 @@ if (typeof HTMLElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('data-popover-open');
+      unregisterEscapeLayer({
+        element: this
+      });
       var stack = stackForMode({
         mode: getPopoverMode({
           element: this
@@ -761,6 +865,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = true;
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -783,6 +893,13 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = false;
+      // Non-modal dialogs can opt into Escape through closedby.
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -806,6 +923,9 @@ if (typeof HTMLDialogElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('open');
+      unregisterEscapeLayer({
+        element: this
+      });
       this._isModal = false;
       if (returnValue !== undefined) {
         this.returnValue = returnValue;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "6.2.4",
+	"version": "6.2.5",
 	"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",