@workday/canvas-kit-popup-stack 6.1.5 → 6.2.0

package/dist/es6/lib/PopupStack.js

@@ -5,6 +5,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
             r[k] = a[j];
     return r;
 };
+import screenfull from 'screenfull';
 function getLast(items) {
     if (items.length) {
         return items[items.length - 1];
@@ -136,12 +137,19 @@ var setToWindow = function (path, value) {
 // defined on the page, we need to use that one. Never, ever, ever change this variable name on
 // window
 var stack = getFromWindow('workday.__popupStack') || {
-    description: 'Global popup stack from @workday/canvas-kit-popup-stack',
+    description: 'Global popup stack from @workday/canvas-kit/popup-stack',
+    container: function () { return document.body; },
     items: [],
     zIndex: { min: 30, max: 50, getValue: getValue },
     _adapter: {},
 };
 setToWindow('workday.__popupStack', stack);
+var stacks = getFromWindow('workday.__popupStackOfStacks') || [stack];
+stacks.description = 'Global stack of popup stacks from @workday/canvas-kit/popup-stack';
+setToWindow('workday.__popupStackOfStacks', stacks);
+function getTopStack() {
+    return stacks[stacks.length - 1];
+}
 export var PopupStack = {
     /**
      * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -151,6 +159,7 @@ export var PopupStack = {
      */
     createContainer: function () {
         var _a;
+        var stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.createContainer) {
             return stack._adapter.createContainer();
         }
@@ -165,30 +174,36 @@ export var PopupStack = {
      * method when the event triggers.
      */
     add: function (item) {
-        var _a;
+        var _a, _b;
+        var stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.add) {
             stack._adapter.add(item);
             return;
         }
         stack.items.push(item);
-        document.body.appendChild(item.element);
+        (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) || document.body).appendChild(item.element);
         setZIndexOfElements(PopupStack.getElements());
     },
     /**
-     * Removes an item from the stack by its `HTMLElement` reference. This should be called when a
-     * popup is "closed" or when the element is removed from the page entirely to ensure proper memory
-     * cleanup. This will not automatically be called when the element is removed from the DOM. Will
-     * reset z-index values of the stack
+     * Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
+     * is "closed" or when the element is removed from the page entirely to ensure proper memory
+     * cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
+     * called when the element is removed from the DOM. This method will reset z-index values of the
+     * stack.
      */
     remove: function (element) {
-        var _a;
-        if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.remove) {
-            stack._adapter.remove(element);
-            return;
+        var _a, _b;
+        // Find the stack the popup belongs to.
+        var stack = find(stacks, function (stack) { return !!find(stack.items, function (item) { return item.element === element; }); });
+        if (stack) {
+            if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.remove) {
+                stack._adapter.remove(element);
+                return;
+            }
+            stack.items = stack.items.filter(function (item) { return item.element !== element; });
+            (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) || document.body).removeChild(element);
+            setZIndexOfElements(PopupStack.getElements(stack));
         }
-        stack.items = stack.items.filter(function (item) { return item.element !== element; });
-        document.body.removeChild(element);
-        setZIndexOfElements(PopupStack.getElements());
     },
     /**
      * Returns true when the provided `element` is at the top of the stack. It will return false if it
@@ -197,6 +212,7 @@ export var PopupStack = {
      */
     isTopmost: function (element) {
         var _a;
+        var stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.isTopmost) {
             return stack._adapter.isTopmost(element);
         }
@@ -211,8 +227,9 @@ export var PopupStack = {
      * elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
      * make decisions based on z-index order.
      */
-    getElements: function () {
+    getElements: function (stackOverride) {
         var _a;
+        var stack = stackOverride || getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.getElements) {
             return stack._adapter.getElements();
         }
@@ -232,6 +249,7 @@ export var PopupStack = {
      */
     bringToTop: function (element) {
         var _a;
+        var stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.bringToTop) {
             stack._adapter.bringToTop(element);
             return;
@@ -269,6 +287,7 @@ export var PopupStack = {
      */
     contains: function (element, eventTarget) {
         var _a, _b;
+        var stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.contains) {
             return stack._adapter.contains(element, eventTarget);
         }
@@ -286,6 +305,79 @@ export var PopupStack = {
         }
         return false;
     },
+    /**
+     * Add a new stack context for popups. This method could be called with the same element multiple
+     * times, but should only push a new stack context once. The most common use-case for calling
+     * `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
+     * pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
+     * this method filters out multiple calls to push the same element as a new stack context.
+     */
+    pushStackContext: function (container) {
+        var _a, _b;
+        var stack = getTopStack();
+        if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.pushStackContext) {
+            return stack._adapter.pushStackContext(container);
+        }
+        // Don't push if the container already exists. This removes duplicates
+        if (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) === container) {
+            return;
+        }
+        var newStack = {
+            items: [],
+            zIndex: stack.zIndex,
+            container: function () { return container; },
+            _adapter: {},
+        };
+        stacks.push(newStack);
+    },
+    /**
+     * Remove the topmost stack context. The stack context will only be removed if the top stack
+     * context container element matches to guard against accidental remove of other stack contexts
+     * you don't own.
+     */
+    popStackContext: function (container) {
+        var _a, _b;
+        var stack = getTopStack();
+        if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.popStackContext) {
+            return stack._adapter.popStackContext(container);
+        }
+        if (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) === container && stacks.length > 1) {
+            stacks.pop();
+        }
+    },
+    /**
+     * Transfer the popup stack item into the current popup stack context.
+     *
+     * An example might be a popup
+     * that is opened and an element goes into fullscreen. The default popup stack context is
+     * `document.body`, but the [Fullscreen
+     * API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
+     * that are children of the fullscreen element. If the popup isn't transferred to the current
+     * popup stack context, the popup will remain open, but will no longer be rendered. This method
+     * will transfer that popup to the fullscreen element so that it will render. Popups created while
+     * in a fullscreen context that need to be transferred back when fullscreen is exited should also
+     * call this method. While popups may still render when fullscreen is exited, popups will be
+     * members of different popup stack contexts which will cause unspecified results (like the escape
+     * key will choose the wrong popup as the "topmost").
+     */
+    transferToCurrentContext: function (item) {
+        var _a;
+        var stack = getTopStack();
+        if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.transferToCurrentContext) {
+            return stack._adapter.transferToCurrentContext(item);
+        }
+        if (find(stack.items, function (i) { return i.element === item.element; })) {
+            // The element is already in the stack, don't do anything
+            return;
+        }
+        // Try to find the element in existing stacks. If it exists, we need to first remove from that
+        // stack context
+        var oldStack = find(stacks, function (stack) { return !!find(stack.items, function (i) { return i.element === item.element; }); });
+        if (oldStack) {
+            PopupStack.remove(item.element);
+        }
+        PopupStack.add(item);
+    },
 };
 /**
  * Reset all the items in the stack. This should only be used for testing or if the page doesn't
@@ -301,3 +393,22 @@ export function resetStack() {
 export var createAdapter = function (adapter) {
     stack._adapter = adapter;
 };
+// keep track of the element ourselves to avoid accidentally popping off someone else's stack
+// context
+var element = null;
+// Where should this go? Each version of `PopupStack` on a page will add a listener. The
+// `PopupStack` should guard against multiple handlers like this simultaneously and there is no
+// lifecycle here.
+if (screenfull.isEnabled) {
+    screenfull.on('change', function () {
+        if (screenfull.isFullscreen) {
+            if (screenfull.element) {
+                element = screenfull.element;
+                PopupStack.pushStackContext(element);
+            }
+        }
+        else if (element) {
+            PopupStack.popStackContext(element);
+        }
+    });
+}

package/lib/PopupStack.ts

@@ -1,3 +1,5 @@
+import screenfull from 'screenfull';
+
 /**
  * This type is purposely an interface so that it can be extended for a specific use-case.
  */
@@ -106,6 +108,7 @@ function getChildPopups(item: PopupStackItem, items: PopupStackItem[]): PopupSta
 
 interface Stack {
   items: PopupStackItem[];
+  container?: () => HTMLElement;
   zIndex: {
     min: number;
     max: number;
@@ -183,13 +186,23 @@ const setToWindow = (path: string, value: any) => {
 // defined on the page, we need to use that one. Never, ever, ever change this variable name on
 // window
 const stack: Stack = getFromWindow('workday.__popupStack') || {
-  description: 'Global popup stack from @workday/canvas-kit-popup-stack',
-  items: [] as PopupStackItem[],
+  description: 'Global popup stack from @workday/canvas-kit/popup-stack',
+  container: () => document.body,
+  items: [],
   zIndex: {min: 30, max: 50, getValue: getValue},
-  _adapter: {} as Partial<typeof PopupStack>,
+  _adapter: {},
 };
 setToWindow('workday.__popupStack', stack);
 
+const stacks: Stack[] = getFromWindow('workday.__popupStackOfStacks') || [stack];
+
+(stacks as any).description = 'Global stack of popup stacks from @workday/canvas-kit/popup-stack';
+setToWindow('workday.__popupStackOfStacks', stacks);
+
+function getTopStack() {
+  return stacks[stacks.length - 1];
+}
+
 export const PopupStack = {
   /**
    * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -198,6 +211,7 @@ export const PopupStack = {
    * should be added to this element.
    */
   createContainer(): HTMLElement {
+    const stack = getTopStack();
     if (stack._adapter?.createContainer) {
       return stack._adapter.createContainer();
     }
@@ -212,31 +226,37 @@ export const PopupStack = {
    * method when the event triggers.
    */
   add(item: PopupStackItem): void {
+    const stack = getTopStack();
     if (stack._adapter?.add) {
       stack._adapter.add(item);
       return;
     }
     stack.items.push(item);
-    document.body.appendChild(item.element);
+    (stack.container?.() || document.body).appendChild(item.element);
 
     setZIndexOfElements(PopupStack.getElements());
   },
 
   /**
-   * Removes an item from the stack by its `HTMLElement` reference. This should be called when a
-   * popup is "closed" or when the element is removed from the page entirely to ensure proper memory
-   * cleanup. This will not automatically be called when the element is removed from the DOM. Will
-   * reset z-index values of the stack
+   * Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
+   * is "closed" or when the element is removed from the page entirely to ensure proper memory
+   * cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
+   * called when the element is removed from the DOM. This method will reset z-index values of the
+   * stack.
    */
   remove(element: HTMLElement): void {
-    if (stack._adapter?.remove) {
-      stack._adapter.remove(element);
-      return;
+    // Find the stack the popup belongs to.
+    const stack = find(stacks, stack => !!find(stack.items, item => item.element === element));
+    if (stack) {
+      if (stack._adapter?.remove) {
+        stack._adapter.remove(element);
+        return;
+      }
+      stack.items = stack.items.filter(item => item.element !== element);
+      (stack.container?.() || document.body).removeChild(element);
+
+      setZIndexOfElements(PopupStack.getElements(stack));
     }
-    stack.items = stack.items.filter(item => item.element !== element);
-    document.body.removeChild(element);
-
-    setZIndexOfElements(PopupStack.getElements());
   },
 
   /**
@@ -245,6 +265,7 @@ export const PopupStack = {
    * reference that was passed to `add`
    */
   isTopmost(element: HTMLElement): boolean {
+    const stack = getTopStack();
     if (stack._adapter?.isTopmost) {
       return stack._adapter.isTopmost(element);
     }
@@ -261,7 +282,8 @@ export const PopupStack = {
    * elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
    * make decisions based on z-index order.
    */
-  getElements(): HTMLElement[] {
+  getElements(stackOverride?: Stack): HTMLElement[] {
+    const stack = stackOverride || getTopStack();
     if (stack._adapter?.getElements) {
       return stack._adapter.getElements();
     }
@@ -281,6 +303,7 @@ export const PopupStack = {
    * the top of the stack.
    */
   bringToTop(element: HTMLElement): void {
+    const stack = getTopStack();
     if (stack._adapter?.bringToTop) {
       stack._adapter.bringToTop(element);
       return;
@@ -320,6 +343,7 @@ export const PopupStack = {
    * is not inside `element`).
    */
   contains(element: HTMLElement, eventTarget: HTMLElement): boolean {
+    const stack = getTopStack();
     if (stack._adapter?.contains) {
       return stack._adapter.contains(element, eventTarget);
     }
@@ -344,6 +368,87 @@ export const PopupStack = {
     }
     return false;
   },
+
+  /**
+   * Add a new stack context for popups. This method could be called with the same element multiple
+   * times, but should only push a new stack context once. The most common use-case for calling
+   * `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
+   * pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
+   * this method filters out multiple calls to push the same element as a new stack context.
+   */
+  pushStackContext(container: HTMLElement): void {
+    const stack = getTopStack();
+
+    if (stack._adapter?.pushStackContext) {
+      return stack._adapter.pushStackContext(container);
+    }
+    // Don't push if the container already exists. This removes duplicates
+    if (stack.container?.() === container) {
+      return;
+    }
+
+    const newStack: Stack = {
+      items: [],
+      zIndex: stack.zIndex,
+      container: () => container,
+      _adapter: {},
+    };
+    stacks.push(newStack);
+  },
+
+  /**
+   * Remove the topmost stack context. The stack context will only be removed if the top stack
+   * context container element matches to guard against accidental remove of other stack contexts
+   * you don't own.
+   */
+  popStackContext(container: HTMLElement): void {
+    const stack = getTopStack();
+
+    if (stack._adapter?.popStackContext) {
+      return stack._adapter.popStackContext(container);
+    }
+
+    if (stack.container?.() === container && stacks.length > 1) {
+      stacks.pop();
+    }
+  },
+
+  /**
+   * Transfer the popup stack item into the current popup stack context.
+   *
+   * An example might be a popup
+   * that is opened and an element goes into fullscreen. The default popup stack context is
+   * `document.body`, but the [Fullscreen
+   * API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
+   * that are children of the fullscreen element. If the popup isn't transferred to the current
+   * popup stack context, the popup will remain open, but will no longer be rendered. This method
+   * will transfer that popup to the fullscreen element so that it will render. Popups created while
+   * in a fullscreen context that need to be transferred back when fullscreen is exited should also
+   * call this method. While popups may still render when fullscreen is exited, popups will be
+   * members of different popup stack contexts which will cause unspecified results (like the escape
+   * key will choose the wrong popup as the "topmost").
+   */
+  transferToCurrentContext(item: PopupStackItem): void {
+    const stack = getTopStack();
+
+    if (stack._adapter?.transferToCurrentContext) {
+      return stack._adapter.transferToCurrentContext(item);
+    }
+
+    if (find(stack.items, i => i.element === item.element)) {
+      // The element is already in the stack, don't do anything
+      return;
+    }
+
+    // Try to find the element in existing stacks. If it exists, we need to first remove from that
+    // stack context
+    const oldStack = find(stacks, stack => !!find(stack.items, i => i.element === item.element));
+    if (oldStack) {
+      PopupStack.remove(item.element);
+    }
+
+    PopupStack.add(item);
+  },
 };
 
 /**
@@ -361,3 +466,23 @@ export function resetStack() {
 export const createAdapter = (adapter: Partial<typeof PopupStack>) => {
   stack._adapter = adapter;
 };
+
+// keep track of the element ourselves to avoid accidentally popping off someone else's stack
+// context
+let element: HTMLElement | null = null;
+
+// Where should this go? Each version of `PopupStack` on a page will add a listener. The
+// `PopupStack` should guard against multiple handlers like this simultaneously and there is no
+// lifecycle here.
+if (screenfull.isEnabled) {
+  screenfull.on('change', () => {
+    if (screenfull.isFullscreen) {
+      if (screenfull.element) {
+        element = screenfull.element as HTMLElement;
+        PopupStack.pushStackContext(element);
+      }
+    } else if (element) {
+      PopupStack.popStackContext(element);
+    }
+  });
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "6.1.5",
+  "version": "6.2.0",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
   "main": "dist/commonjs/index.js",
   "module": "dist/es6/index.js",
-  "sideEffects": false,
+  "sideEffects": true,
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
@@ -42,5 +42,8 @@
     "workday",
     "popup-stack"
   ],
-  "gitHead": "33b9994408c63b78923a201af73d8c2e6f7e5914"
+  "dependencies": {
+    "screenfull": "^5.2.0"
+  },
+  "gitHead": "5eaacab495cdfeacb8dbbaa12782a36382ecc813"
 }

package/ts3.5/dist/commonjs/lib/PopupStack.d.ts

@@ -32,6 +32,16 @@ export interface PopupStackItem {
  * popups.
  */
 export declare function getValue(index: number, length: number): number;
+interface Stack {
+    items: PopupStackItem[];
+    container?: () => HTMLElement;
+    zIndex: {
+        min: number;
+        max: number;
+        getValue: typeof getValue;
+    };
+    _adapter: Partial<typeof PopupStack>;
+}
 export declare const PopupStack: {
     /**
      * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -48,10 +58,11 @@ export declare const PopupStack: {
      */
     add(item: PopupStackItem): void;
     /**
-     * Removes an item from the stack by its `HTMLElement` reference. This should be called when a
-     * popup is "closed" or when the element is removed from the page entirely to ensure proper memory
-     * cleanup. This will not automatically be called when the element is removed from the DOM. Will
-     * reset z-index values of the stack
+     * Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
+     * is "closed" or when the element is removed from the page entirely to ensure proper memory
+     * cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
+     * called when the element is removed from the DOM. This method will reset z-index values of the
+     * stack.
      */
     remove(element: HTMLElement): void;
     /**
@@ -65,7 +76,7 @@ export declare const PopupStack: {
      * elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
      * make decisions based on z-index order.
      */
-    getElements(): HTMLElement[];
+    getElements(stackOverride?: Stack | undefined): HTMLElement[];
     /**
      * Bring the element to the top of the stack. This is useful for persistent popups to place them
      * on top of the stack when clicked. If an `owner` was provided to an item when it was added and
@@ -91,6 +102,36 @@ export declare const PopupStack: {
      * is not inside `element`).
      */
     contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
+    /**
+     * Add a new stack context for popups. This method could be called with the same element multiple
+     * times, but should only push a new stack context once. The most common use-case for calling
+     * `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
+     * pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
+     * this method filters out multiple calls to push the same element as a new stack context.
+     */
+    pushStackContext(container: HTMLElement): void;
+    /**
+     * Remove the topmost stack context. The stack context will only be removed if the top stack
+     * context container element matches to guard against accidental remove of other stack contexts
+     * you don't own.
+     */
+    popStackContext(container: HTMLElement): void;
+    /**
+     * Transfer the popup stack item into the current popup stack context.
+     *
+     * An example might be a popup
+     * that is opened and an element goes into fullscreen. The default popup stack context is
+     * `document.body`, but the [Fullscreen
+     * API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
+     * that are children of the fullscreen element. If the popup isn't transferred to the current
+     * popup stack context, the popup will remain open, but will no longer be rendered. This method
+     * will transfer that popup to the fullscreen element so that it will render. Popups created while
+     * in a fullscreen context that need to be transferred back when fullscreen is exited should also
+     * call this method. While popups may still render when fullscreen is exited, popups will be
+     * members of different popup stack contexts which will cause unspecified results (like the escape
+     * key will choose the wrong popup as the "topmost").
+     */
+    transferToCurrentContext(item: PopupStackItem): void;
 };
 /**
  * Reset all the items in the stack. This should only be used for testing or if the page doesn't
@@ -117,10 +158,11 @@ export declare const createAdapter: (adapter: Partial<{
      */
     add(item: PopupStackItem): void;
     /**
-     * Removes an item from the stack by its `HTMLElement` reference. This should be called when a
-     * popup is "closed" or when the element is removed from the page entirely to ensure proper memory
-     * cleanup. This will not automatically be called when the element is removed from the DOM. Will
-     * reset z-index values of the stack
+     * Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
+     * is "closed" or when the element is removed from the page entirely to ensure proper memory
+     * cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
+     * called when the element is removed from the DOM. This method will reset z-index values of the
+     * stack.
      */
     remove(element: HTMLElement): void;
     /**
@@ -134,7 +176,7 @@ export declare const createAdapter: (adapter: Partial<{
      * elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
      * make decisions based on z-index order.
      */
-    getElements(): HTMLElement[];
+    getElements(stackOverride?: Stack | undefined): HTMLElement[];
     /**
      * Bring the element to the top of the stack. This is useful for persistent popups to place them
      * on top of the stack when clicked. If an `owner` was provided to an item when it was added and
@@ -160,5 +202,36 @@ export declare const createAdapter: (adapter: Partial<{
      * is not inside `element`).
      */
     contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
+    /**
+     * Add a new stack context for popups. This method could be called with the same element multiple
+     * times, but should only push a new stack context once. The most common use-case for calling
+     * `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
+     * pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
+     * this method filters out multiple calls to push the same element as a new stack context.
+     */
+    pushStackContext(container: HTMLElement): void;
+    /**
+     * Remove the topmost stack context. The stack context will only be removed if the top stack
+     * context container element matches to guard against accidental remove of other stack contexts
+     * you don't own.
+     */
+    popStackContext(container: HTMLElement): void;
+    /**
+     * Transfer the popup stack item into the current popup stack context.
+     *
+     * An example might be a popup
+     * that is opened and an element goes into fullscreen. The default popup stack context is
+     * `document.body`, but the [Fullscreen
+     * API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
+     * that are children of the fullscreen element. If the popup isn't transferred to the current
+     * popup stack context, the popup will remain open, but will no longer be rendered. This method
+     * will transfer that popup to the fullscreen element so that it will render. Popups created while
+     * in a fullscreen context that need to be transferred back when fullscreen is exited should also
+     * call this method. While popups may still render when fullscreen is exited, popups will be
+     * members of different popup stack contexts which will cause unspecified results (like the escape
+     * key will choose the wrong popup as the "topmost").
+     */
+    transferToCurrentContext(item: PopupStackItem): void;
 }>) => void;
+export {};
 //# sourceMappingURL=PopupStack.d.ts.map