@atlaskit/top-layer 0.3.0 → 0.5.0

package/dist/es2019/testing/polyfill.js

@@ -7,10 +7,15 @@
  * including timing semantics validated against Chromium via Playwright.
  *
  * Behaviour:
- *  - beforetoggle: sync, cancelable on show only. toggle: async task, not cancelable.
+ *  - beforetoggle: sync, cancelable on popover show only. toggle: async task, never cancelable.
  *  - Rapid show/hide coalesces into one toggle event (originalOldState to finalNewState).
  *  - Dialog: showModal/show fire beforetoggle+toggle. close fires toggle then close event.
  *  - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
+ *  - Auto popovers: maintain an open stack, perform light-dismiss on document mousedown
+ *    outside the open chain, and dismiss the topmost on Escape.
+ *  - On open, removes any inline `opacity: 0` from the popover element so callers that
+ *    rely on a `ResizeObserver` reveal callback (e.g. `use-anchor-positioning`) become
+ *    visible in jsdom, where layout-driven RO callbacks never fire.
  *
  * Companion `toBeVisible` patch lives at `./to-be-visible`.
  *
@@ -19,6 +24,7 @@
  * to avoid overwriting native implementations or re-patching.
  */
 
+import { bind } from 'bind-event-listener';
 /**
  * e.g. `<div#my-id.class-a.class-b>`
  */
@@ -173,86 +179,560 @@ function createDialogToggleScheduler() {
 }
 
 // ─── Popover API ────────────────────────────────────────────────────────────
+// Spec: https://html.spec.whatwg.org/multipage/popover.html
 
-if (typeof HTMLElement !== 'undefined' && !HTMLElement.prototype.showPopover) {
-  const schedulePopoverToggle = createToggleScheduler();
-  HTMLElement.prototype.showPopover = function showPopover() {
-    if (!this.hasAttribute('popover')) {
-      throw new DOMException(`Failed to execute 'showPopover' on 'HTMLElement': ${describeElement({
+// `popover` attribute valid values. Empty / "auto" -> "auto"; unknown -> "manual".
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#attr-popover
+
+function getPopoverMode({
+  element
+}) {
+  if (!element.hasAttribute('popover')) {
+    return null;
+  }
+  const raw = element.getAttribute('popover');
+  if (raw === null || raw === '' || raw === 'auto') {
+    return 'auto';
+  }
+  if (raw === 'hint') {
+    return 'hint';
+  }
+  return 'manual';
+}
+
+// IDL property: `el.popover` reflects the popover content attribute. Setter
+// writes verbatim; getter canonicalises (unknown -> "manual", empty -> "auto").
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#dom-popover
+
+if (typeof HTMLElement !== 'undefined' && !Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'popover')) {
+  Object.defineProperty(HTMLElement.prototype, 'popover', {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return getPopoverMode({
         element: this
-      })} is not a popover element. Ensure the element has a 'popover' attribute (e.g. <div popover>).`, 'NotSupportedError');
+      });
+    },
+    set(value) {
+      if (value === null) {
+        this.removeAttribute('popover');
+        return;
+      }
+      // Per spec, the IDL setter writes the value verbatim; the getter then
+      // canonicalises (so setting an unknown value is reflected as "manual"
+      // only when read back, but the attribute keeps the raw string).
+      this.setAttribute('popover', String(value));
     }
-    if (!this.isConnected) {
-      throw new DOMException(`Failed to execute 'showPopover' on 'HTMLElement': ${describeElement({
-        element: this
-      })} is not connected to the document. Ensure the element has been added to the DOM (e.g. via render() or document.body.appendChild()) before calling showPopover().`, 'InvalidStateError');
+  });
+}
+
+// Open auto popovers in open-order. Used for light-dismiss, Escape, and
+// hide-all-popovers-until on new auto opens.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#showing-auto-popover-list
+const openAutoStack = [];
+
+// Open hint popovers in open-order. Hints have their own stack: hint closes
+// other hints, auto closes all hints, hint never closes autos.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#showing-hint-popover-list
+const openHintStack = [];
+function isPopoverOpen({
+  element
+}) {
+  return element.hasAttribute('data-popover-open');
+}
+
+// Stack lookup: returns the stack the element belongs to (or null for manual /
+// non-popovers). Used by hide-handlers to remove from the correct stack and by
+// dismissal logic to find the topmost relevant popover.
+function stackForMode({
+  mode
+}) {
+  if (mode === 'auto') {
+    return openAutoStack;
+  }
+  if (mode === 'hint') {
+    return openHintStack;
+  }
+  return null;
+}
+
+// Polyfill-only. Real browsers reveal the popover once `ResizeObserver`
+// callbacks fire after the first layout pass. jsdom has no layout, so we clear
+// any inline `opacity: 0` (set by callers like `use-anchor-positioning`) once
+// the open toggle has fired.
+function clearOpacityOnOpenToggle({
+  element
+}) {
+  const unbind = bind(element, {
+    type: 'toggle',
+    listener: event => {
+      const toggleEvent = event;
+      if (toggleEvent.newState !== 'open') {
+        return;
+      }
+      element.style.removeProperty('opacity');
+      unbind();
     }
-    if (this.hasAttribute('data-popover-open')) {
-      return; // already showing — no-op
+  });
+}
+
+// Spec: "topmost popover ancestor" walks both DOM ancestry AND the invoker
+// chain (an invoker is a button whose `popovertarget` references an open
+// popover). When opening popover B from a button inside popover A, A is
+// considered B's ancestor and stays open. This walks ancestors of the target,
+// hopping through any invoker references discovered along the way.
+// Find a popover's invoker: an element with `popovertarget=<popover.id>`.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#popover-target-element
+function findInvokerForPopover({
+  popover
+}) {
+  if (!popover.id || !popover.ownerDocument) {
+    return null;
+  }
+  const escaped = (typeof CSS !== 'undefined' && CSS.escape ? CSS.escape : String)(popover.id);
+  const selector = `[popovertarget="${escaped}"]`;
+  return popover.ownerDocument.querySelector(selector);
+}
+
+// True if `candidate` is reachable from `start` via DOM ancestry plus invoker
+// hops. Spec: https://html.spec.whatwg.org/multipage/popover.html#topmost-popover-ancestor
+function reachesViaAncestryOrInvoker({
+  start,
+  candidate
+}) {
+  const found = walkAncestorChain({
+    start,
+    visitor: ({
+      node
+    }) => {
+      if (node === candidate) {
+        return true;
+      }
+      // Hop into the invoked popover's chain when this node is an invoker.
+      if (node instanceof HTMLElement) {
+        const popovertarget = node.getAttribute('popovertarget');
+        if (popovertarget && node.ownerDocument) {
+          const referenced = node.ownerDocument.getElementById(popovertarget);
+          if (referenced && referenced !== node) {
+            if (reachesViaAncestryOrInvoker({
+              start: referenced,
+              candidate
+            })) {
+              return true;
+            }
+          }
+        }
+      }
+      return null;
     }
+  });
+  return found === true;
+}
 
-    // sync, cancelable on show only
-    const allowed = fireToggleEvent({
-      element: this,
-      type: 'beforetoggle',
-      oldState: 'closed',
-      newState: 'open',
-      cancelable: true
+// Is `candidate` an ancestor of `target` via DOM nesting OR invoker chain?
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#topmost-popover-ancestor
+function isInChainTo({
+  candidate,
+  target
+}) {
+  if (!(target instanceof Node)) {
+    return false;
+  }
+  if (reachesViaAncestryOrInvoker({
+    start: target,
+    candidate
+  })) {
+    return true;
+  }
+  // If target is itself a popover, also walk its invoker's chain (a button
+  // elsewhere in the DOM that has `popovertarget=<target.id>`).
+  if (target instanceof HTMLElement && target.hasAttribute('popover')) {
+    const invoker = findInvokerForPopover({
+      popover: target
     });
-    if (!allowed) {
-      return;
+    if (invoker && reachesViaAncestryOrInvoker({
+      start: invoker,
+      candidate
+    })) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// Hide every popover in `stack` that is not an ancestor of `target`. With a
+// null target, closes the entire stack.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#hide-all-popovers-until
+function hidePopoversInStackNotInChainTo({
+  stack,
+  target
+}) {
+  const snapshot = stack.slice();
+  for (let i = snapshot.length - 1; i >= 0; i -= 1) {
+    const popover = snapshot[i];
+    if (isInChainTo({
+      candidate: popover,
+      target
+    })) {
+      break;
     }
-    this.setAttribute('data-popover-open', '');
-    schedulePopoverToggle({
-      element: this,
-      newState: 'open'
+    popover.hidePopover();
+  }
+}
+
+// Two-phase light-dismiss: pointerdown stores the nearest open popover for
+// the target; pointerup dismisses popovers that are not in that popover's
+// chain when the same target is hit. Drag-out / drag-in does not dismiss.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#light-dismiss-open-popovers
+const pointerdownState = {
+  target: null
+};
+
+// If `node` is an invoker for an open popover, return that popover.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#popover-target-element
+function invokedOpenPopover({
+  node
+}) {
+  if (!(node instanceof HTMLElement)) {
+    return null;
+  }
+  const popovertarget = node.getAttribute('popovertarget');
+  if (!popovertarget || !node.ownerDocument) {
+    return null;
+  }
+  const referenced = node.ownerDocument.getElementById(popovertarget);
+  if (!referenced || referenced === node || !isPopoverOpen({
+    element: referenced
+  })) {
+    return null;
+  }
+  return referenced;
+}
+
+// Cycle-safe ancestor walker. Returns the first non-null `visitor` result.
+function walkAncestorChain({
+  start,
+  visitor
+}) {
+  const seen = new Set();
+  function step(node) {
+    if (!node || seen.has(node)) {
+      return null;
+    }
+    seen.add(node);
+    const result = visitor({
+      node
     });
-  };
-  HTMLElement.prototype.hidePopover = function hidePopover() {
-    if (!this.hasAttribute('popover')) {
-      throw new DOMException(`Failed to execute 'hidePopover' on 'HTMLElement': ${describeElement({
-        element: this
-      })} is not a popover element. Ensure the element has a 'popover' attribute (e.g. <div popover>).`, 'NotSupportedError');
+    if (result !== null) {
+      return result;
     }
-    // Browser does not throw for disconnected elements on hide — just no-op
-    if (!this.isConnected || !this.hasAttribute('data-popover-open')) {
-      return;
+    return step(node.parentNode);
+  }
+  return step(start);
+}
+
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#nearest-inclusive-open-popover
+function nearestOpenPopover({
+  target
+}) {
+  return walkAncestorChain({
+    start: target,
+    visitor: ({
+      node
+    }) => {
+      if (node instanceof HTMLElement && isPopoverOpen({
+        element: node
+      })) {
+        return node;
+      }
+      return invokedOpenPopover({
+        node
+      });
+    }
+  });
+}
+function handleDocumentPointerdown(event) {
+  if (openAutoStack.length === 0 && openHintStack.length === 0) {
+    return;
+  }
+  const target = event.target instanceof Node ? event.target : null;
+  pointerdownState.target = nearestOpenPopover({
+    target
+  });
+}
+function handleDocumentPointerup(event) {
+  if (openAutoStack.length === 0 && openHintStack.length === 0) {
+    pointerdownState.target = null;
+    return;
+  }
+  const target = event.target instanceof Node ? event.target : null;
+  const ancestor = nearestOpenPopover({
+    target
+  });
+  const sameTarget = ancestor === pointerdownState.target;
+  pointerdownState.target = null;
+  if (!sameTarget) {
+    // User pointerdowned inside a popover and released elsewhere (or vice
+    // versa). Treat as a drag and do not dismiss per spec.
+    return;
+  }
+  // Hints are dismissed first (they sit "above" autos for dismissal purposes
+  // even though they live in their own stack), then autos. When ancestor is a
+  // hint, autos are unaffected; when ancestor is an auto or null, hints close
+  // entirely (because no hint is the target's ancestor).
+  const ancestorMode = ancestor ? getPopoverMode({
+    element: ancestor
+  }) : null;
+  if (ancestorMode === 'hint') {
+    hidePopoversInStackNotInChainTo({
+      stack: openHintStack,
+      target
+    });
+    return;
+  }
+  hidePopoversInStackNotInChainTo({
+    stack: openHintStack,
+    target: null
+  });
+  hidePopoversInStackNotInChainTo({
+    stack: openAutoStack,
+    target
+  });
+}
+
+// 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
+}) {
+  while (stack.length > 0) {
+    const candidate = stack[stack.length - 1];
+    if (candidate.isConnected) {
+      return candidate;
     }
+    stack.pop();
+  }
+  return null;
+}
+
+// Escape closes the topmost open popover. Hints are dismissed before autos.
+// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+function handleDocumentKeydown(event) {
+  if (event.key !== 'Escape') {
+    return;
+  }
+  const topHint = topmostConnected({
+    stack: openHintStack
+  });
+  if (topHint) {
+    topHint.hidePopover();
+    return;
+  }
+  const topAuto = topmostConnected({
+    stack: openAutoStack
+  });
+  if (topAuto) {
+    topAuto.hidePopover();
+  }
+}
+if (typeof HTMLElement !== 'undefined') {
+  const schedulePopoverToggle = createToggleScheduler();
+
+  // Spec: https://html.spec.whatwg.org/multipage/popover.html#dom-showpopover
+  if (!HTMLElement.prototype.showPopover) {
+    HTMLElement.prototype.showPopover = function showPopover() {
+      if (!this.hasAttribute('popover')) {
+        throw new DOMException(`Failed to execute 'showPopover' on 'HTMLElement': ${describeElement({
+          element: this
+        })} is not a popover element. Ensure the element has a 'popover' attribute (e.g. <div popover>).`, 'NotSupportedError');
+      }
+      if (!this.isConnected) {
+        throw new DOMException(`Failed to execute 'showPopover' on 'HTMLElement': ${describeElement({
+          element: this
+        })} is not connected to the document. Ensure the element has been added to the DOM (e.g. via render() or document.body.appendChild()) before calling showPopover().`, 'InvalidStateError');
+      }
+      if (isPopoverOpen({
+        element: this
+      })) {
+        return; // already showing — no-op
+      }
+
+      // sync, cancelable on show only
+      const allowed = fireToggleEvent({
+        element: this,
+        type: 'beforetoggle',
+        oldState: 'closed',
+        newState: 'open',
+        cancelable: true
+      });
+      if (!allowed) {
+        return;
+      }
+
+      // Spec-driven dismissal of popovers in other stacks before opening:
+      // - opening an `auto`: close all hints; close autos not in the new
+      //   popover's ancestor chain.
+      // - opening a `hint`:  close hints not in the new popover's chain;
+      //   leave autos alone.
+      // - opening a `manual`: leave both stacks untouched.
+      const mode = getPopoverMode({
+        element: this
+      });
+      if (mode === 'auto') {
+        hidePopoversInStackNotInChainTo({
+          stack: openHintStack,
+          target: null
+        });
+        hidePopoversInStackNotInChainTo({
+          stack: openAutoStack,
+          target: this
+        });
+      } else if (mode === 'hint') {
+        hidePopoversInStackNotInChainTo({
+          stack: openHintStack,
+          target: this
+        });
+      }
+      this.setAttribute('data-popover-open', '');
+      const stack = stackForMode({
+        mode
+      });
+      if (stack && !stack.includes(this)) {
+        stack.push(this);
+      }
+      clearOpacityOnOpenToggle({
+        element: this
+      });
+      schedulePopoverToggle({
+        element: this,
+        newState: 'open'
+      });
+    };
+  }
+
+  // Spec: https://html.spec.whatwg.org/multipage/popover.html#dom-hidepopover
+  if (!HTMLElement.prototype.hidePopover) {
+    HTMLElement.prototype.hidePopover = function hidePopover() {
+      if (!this.hasAttribute('popover')) {
+        throw new DOMException(`Failed to execute 'hidePopover' on 'HTMLElement': ${describeElement({
+          element: this
+        })} is not a popover element. Ensure the element has a 'popover' attribute (e.g. <div popover>).`, 'NotSupportedError');
+      }
+      // Browser does not throw for disconnected elements on hide. No-op.
+      if (!this.isConnected || !isPopoverOpen({
+        element: this
+      })) {
+        return;
+      }
 
-    // not cancelable on hide
-    fireToggleEvent({
-      element: this,
-      type: 'beforetoggle',
-      oldState: 'open',
-      newState: 'closed',
-      cancelable: false
+      // not cancelable on hide
+      fireToggleEvent({
+        element: this,
+        type: 'beforetoggle',
+        oldState: 'open',
+        newState: 'closed',
+        cancelable: false
+      });
+      this.removeAttribute('data-popover-open');
+      const stack = stackForMode({
+        mode: getPopoverMode({
+          element: this
+        })
+      });
+      if (stack) {
+        const stackIndex = stack.indexOf(this);
+        if (stackIndex !== -1) {
+          stack.splice(stackIndex, 1);
+        }
+      }
+      schedulePopoverToggle({
+        element: this,
+        newState: 'closed'
+      });
+    };
+  }
+
+  // Spec: https://html.spec.whatwg.org/multipage/popover.html#dom-togglepopover
+  if (!HTMLElement.prototype.togglePopover) {
+    HTMLElement.prototype.togglePopover = function togglePopover(force) {
+      const wasOpen = isPopoverOpen({
+        element: this
+      });
+      if (typeof force === 'boolean') {
+        if (force && !wasOpen) {
+          this.showPopover();
+        } else if (!force && wasOpen) {
+          this.hidePopover();
+        }
+      } else if (wasOpen) {
+        this.hidePopover();
+      } else {
+        this.showPopover();
+      }
+
+      // Return the actual resulting state, which differs from `force` when
+      // `beforetoggle` was preventDefaulted on show.
+      return isPopoverOpen({
+        element: this
+      });
+    };
+  }
+
+  // Document-level light-dismiss for `popover="auto"` and `popover="hint"`.
+  // Spec uses pointerdown + pointerup with same-target check; we also wire
+  // `mousedown` + `mouseup` because jsdom does not fire pointer events for
+  // fireEvent.click() / userEvent.click() in older jsdom versions.
+
+  if (typeof document !== 'undefined' && !document.__atTopLayerLightDismiss) {
+    document.__atTopLayerLightDismiss = true;
+
+    // capture phase so application handlers cannot stop propagation before us
+    const pointerdownAdapter = event => handleDocumentPointerdown(event);
+    const pointerupAdapter = event => handleDocumentPointerup(event);
+    bind(document, {
+      type: 'pointerdown',
+      listener: pointerdownAdapter,
+      options: {
+        capture: true
+      }
     });
-    this.removeAttribute('data-popover-open');
-    schedulePopoverToggle({
-      element: this,
-      newState: 'closed'
+    bind(document, {
+      type: 'pointerup',
+      listener: pointerupAdapter,
+      options: {
+        capture: true
+      }
     });
-  };
-  HTMLElement.prototype.togglePopover = function togglePopover(force) {
-    const isOpen = this.hasAttribute('data-popover-open');
-    if (typeof force === 'boolean') {
-      if (force && !isOpen) {
-        this.showPopover();
-      } else if (!force && isOpen) {
-        this.hidePopover();
+    // Fallback for environments / fireEvent paths that fire mouse events
+    // only. The same handlers work for MouseEvent because we only read
+    // `target`. PointerEvent extends MouseEvent so the runtime cast is safe.
+    bind(document, {
+      type: 'mousedown',
+      listener: pointerdownAdapter,
+      options: {
+        capture: true
       }
-      return force;
-    }
-    if (isOpen) {
-      this.hidePopover();
-      return false;
-    }
-    this.showPopover();
-    return true;
-  };
+    });
+    bind(document, {
+      type: 'mouseup',
+      listener: pointerupAdapter,
+      options: {
+        capture: true
+      }
+    });
+    bind(document, {
+      type: 'keydown',
+      listener: handleDocumentKeydown,
+      options: {
+        capture: true
+      }
+    });
+  }
 }
 
 // ─── HTMLDialogElement ──────────────────────────────────────────────────────
+// Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
 
 if (typeof HTMLDialogElement !== 'undefined') {
   const proto = HTMLDialogElement.prototype;