@workday/canvas-kit-popup-stack 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -42,6 +42,24 @@ interface Stack {
     };
     _adapter: Partial<typeof PopupStack>;
 }
+/**
+ * The `PopupStack` is a framework agnostic first-in-last-out (FILO) stack that tracks all popups
+ * ("floating UI" or any UI that renders on top of other content). It contains methods that interact
+ * with the stack to support all coordinating behaviors of all popups on the page. The `PopupStack`
+ * helps:
+ *
+ * - Render popups in the right order on the page
+ * - Helps accessibility with the Escape key (topmost popup is closed)
+ * - Handles transition to [Full
+ *   Screen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
+ *
+ * The `PopupStack` supports adapters to work with existing popup systems. {@link createAdapter} is
+ * exported to accept an adapter. Only a single adapter should be used per page.
+ *
+ * The `PopupStack` is designed to handle multiple versions of `PopupStack` on the page at once
+ * while the internal FILO stack is shared between instances. You should not attempt to use the
+ * internal FILO stack. If an adapter is used, the internal FILO stack may be empty.
+ */
 export declare const PopupStack: {
     /**
      * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -139,6 +157,10 @@ export declare const PopupStack: {
  */
 export declare function resetStack(): void;
 /**
+ * An adapter is a custom implementation of the {@link PopupStack}. There is only ever a single
+ * instance of an adapter on the page. It allows an adapter to intercept any `PopupStack` method.
+ * This could bypass the internal FILO stack of the `PopupStack` and allows the FILO stack to be
+ * handled by something else.
  *
  * @param adapter The parts of the PopupStack that we want to override
  */

package/dist/commonjs/lib/PopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AA2CD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;uBACgB,WAAW;IAS9B;;;;;OAKG;cACO,cAAc,GAAG,IAAI;IAY/B;;;;;;OAMG;oBACa,WAAW,GAAG,IAAI;IAelC;;;;OAIG;uBACgB,WAAW,GAAG,OAAO;IAaxC;;;;OAIG;oDACiC,WAAW,EAAE;IAQjD;;;;;;;;;;;OAWG;wBACiB,WAAW,GAAG,IAAI;IA6BtC;;;;;;;;;;OAUG;sBACe,WAAW,eAAe,WAAW,GAAG,OAAO;IA2BjE;;;;;;OAMG;gCACyB,WAAW,GAAG,IAAI;IAoB9C;;;;OAIG;+BACwB,WAAW,GAAG,IAAI;IAY7C;;;;;;;;;;;;;;OAcG;mCAC4B,cAAc,GAAG,IAAI;CAqBrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,YAAa,QAAQ,iBAAiB,CAAC,SAEhE,CAAC"}
+{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AA2CD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;uBACgB,WAAW;IAS9B;;;;;OAKG;cACO,cAAc,GAAG,IAAI;IAY/B;;;;;;OAMG;oBACa,WAAW,GAAG,IAAI;IAelC;;;;OAIG;uBACgB,WAAW,GAAG,OAAO;IAaxC;;;;OAIG;oDACiC,WAAW,EAAE;IAQjD;;;;;;;;;;;OAWG;wBACiB,WAAW,GAAG,IAAI;IA6BtC;;;;;;;;;;OAUG;sBACe,WAAW,eAAe,WAAW,GAAG,OAAO;IA2BjE;;;;;;OAMG;gCACyB,WAAW,GAAG,IAAI;IAoB9C;;;;OAIG;+BACwB,WAAW,GAAG,IAAI;IAY7C;;;;;;;;;;;;;;OAcG;mCAC4B,cAAc,GAAG,IAAI;CAqBrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,YAAa,QAAQ,iBAAiB,CAAC,SAEhE,CAAC"}

package/dist/commonjs/lib/PopupStack.js

@@ -1,17 +1,10 @@
 "use strict";
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAdapter = exports.resetStack = exports.PopupStack = exports.getValue = void 0;
-var screenfull_1 = __importDefault(require("screenfull"));
+const screenfull_1 = __importDefault(require("screenfull"));
 function getLast(items) {
     if (items.length) {
         return items[items.length - 1];
@@ -25,7 +18,7 @@ function getLast(items) {
  * popups.
  */
 function getValue(index, length) {
-    var _a = stack.zIndex, min = _a.min, max = _a.max;
+    const { min, max } = stack.zIndex;
     if (length <= max - min) {
         return index + min;
     }
@@ -37,8 +30,8 @@ exports.getValue = getValue;
  * will be run any time the stack changes.
  */
 function setZIndexOfElements(elements) {
-    var length = elements.length;
-    elements.forEach(function (element, index) {
+    const length = elements.length;
+    elements.forEach((element, index) => {
         element.style.zIndex = String(getValue(index, length));
     });
 }
@@ -47,9 +40,9 @@ function setZIndexOfElements(elements) {
  * to the stack.
  */
 function getOwnerPopup(element, items) {
-    var parentEl = element;
+    let parentEl = element;
     do {
-        var owner = items.find(function (el) { return el.element === parentEl; });
+        const owner = items.find(el => el.element === parentEl);
         if (owner) {
             return owner.element;
         }
@@ -62,10 +55,10 @@ function getOwnerPopup(element, items) {
  * hierarchy.
  */
 function getChildPopups(item, items) {
-    var owners = items
-        .filter(function (i) { return i.owner; })
-        .map(function (i) { return ({ element: i.element, parent: getOwnerPopup(i.owner, items) }); })
-        .filter(function (i) { return i.parent === item.element; });
+    const owners = items
+        .filter(i => i.owner)
+        .map(i => ({ element: i.element, parent: getOwnerPopup(i.owner, items) }))
+        .filter(i => i.parent === item.element);
     return owners;
 }
 /**
@@ -75,8 +68,8 @@ function getChildPopups(item, items) {
  * @param path dot-notation path of a deep property
  */
 function get(obj, path) {
-    var parts = path.split('.');
-    var first = parts.splice(0, 1)[0];
+    const parts = path.split('.');
+    const first = parts.splice(0, 1)[0];
     if (parts.length && obj[first]) {
         return get(obj[first], parts.join('.'));
     }
@@ -91,8 +84,8 @@ function get(obj, path) {
  * @param value Any value
  */
 function set(obj, path, value) {
-    var parts = path.split('.');
-    var first = parts.splice(0, 1)[0];
+    const parts = path.split('.');
+    const first = parts.splice(0, 1)[0];
     if (parts.length) {
         if (obj[first] === undefined) {
             obj[first] = {};
@@ -113,7 +106,7 @@ if (typeof window !== 'undefined') {
  * environments without a `window` object, so it is safe to use in server-side rendering.
  * @param path Any dot-notation path
  */
-var getFromWindow = function (path) {
+const getFromWindow = (path) => {
     if (typeof window !== 'undefined') {
         return get(window, path);
     }
@@ -125,7 +118,7 @@ var getFromWindow = function (path) {
  * @param path dot-notation path of a deep property
  * @param value Any value
  */
-var setToWindow = function (path, value) {
+const setToWindow = (path, value) => {
     if (typeof window !== 'undefined') {
         set(window, path, value);
     }
@@ -133,20 +126,38 @@ var setToWindow = function (path, value) {
 // We need to make sure only one stack is ever in use on the page - ever. If a stack is already
 // defined on the page, we need to use that one. Never, ever, ever change this variable name on
 // window
-var stack = getFromWindow('workday.__popupStack') || {
+const stack = getFromWindow('workday.__popupStack') || {
     description: 'Global popup stack from @workday/canvas-kit/popup-stack',
-    container: function () { return document.body; },
+    container: () => document.body,
     items: [],
     zIndex: { min: 30, max: 50, getValue: getValue },
     _adapter: {},
 };
 setToWindow('workday.__popupStack', stack);
-var stacks = getFromWindow('workday.__popupStackOfStacks') || [stack];
+const 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];
 }
+/**
+ * The `PopupStack` is a framework agnostic first-in-last-out (FILO) stack that tracks all popups
+ * ("floating UI" or any UI that renders on top of other content). It contains methods that interact
+ * with the stack to support all coordinating behaviors of all popups on the page. The `PopupStack`
+ * helps:
+ *
+ * - Render popups in the right order on the page
+ * - Helps accessibility with the Escape key (topmost popup is closed)
+ * - Handles transition to [Full
+ *   Screen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
+ *
+ * The `PopupStack` supports adapters to work with existing popup systems. {@link createAdapter} is
+ * exported to accept an adapter. Only a single adapter should be used per page.
+ *
+ * The `PopupStack` is designed to handle multiple versions of `PopupStack` on the page at once
+ * while the internal FILO stack is shared between instances. You should not attempt to use the
+ * internal FILO stack. If an adapter is used, the internal FILO stack may be empty.
+ */
 exports.PopupStack = {
     /**
      * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -154,13 +165,13 @@ exports.PopupStack = {
      * element is added and removed from the DOM as well as the `z-index` style property. Your content
      * should be added to this element.
      */
-    createContainer: function () {
+    createContainer() {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.createContainer) {
             return stack._adapter.createContainer();
         }
-        var div = document.createElement('div');
+        const div = document.createElement('div');
         div.style.position = 'relative'; // z-index only works on _positioned_ elements
         return div;
     },
@@ -170,9 +181,9 @@ exports.PopupStack = {
      * popups to be registered initially, but rendered when the user triggers some event, call this
      * method when the event triggers.
      */
-    add: function (item) {
+    add(item) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.add) {
             stack._adapter.add(item);
             return;
@@ -188,16 +199,16 @@ exports.PopupStack = {
      * called when the element is removed from the DOM. This method will reset z-index values of the
      * stack.
      */
-    remove: function (element) {
+    remove(element) {
         var _a, _b;
         // Find the stack the popup belongs to.
-        var stack = stacks.find(function (stack) { return !!exports.PopupStack.getElements(stack).find(function (el) { return el === element; }); });
+        const stack = stacks.find(stack => !!exports.PopupStack.getElements(stack).find(el => el === 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; });
+            stack.items = stack.items.filter(item => item.element !== element);
             (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) || document.body).removeChild(element);
             setZIndexOfElements(exports.PopupStack.getElements(stack));
         }
@@ -207,13 +218,13 @@ exports.PopupStack = {
      * is not the top of the stack or is not found in the stack. The `element` should be the same
      * reference that was passed to `add`
      */
-    isTopmost: function (element) {
+    isTopmost(element) {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.isTopmost) {
             return stack._adapter.isTopmost(element);
         }
-        var last = getLast(stack.items);
+        const last = getLast(stack.items);
         if (last) {
             return last.element === element;
         }
@@ -224,13 +235,13 @@ exports.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 (stackOverride) {
+    getElements(stackOverride) {
         var _a;
-        var stack = stackOverride || getTopStack();
+        const stack = stackOverride || getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.getElements) {
             return stack._adapter.getElements();
         }
-        return stack.items.map(function (i) { return i.element; });
+        return stack.items.map(i => i.element);
     },
     /**
      * Bring the element to the top of the stack. This is useful for persistent popups to place them
@@ -244,30 +255,30 @@ exports.PopupStack = {
      * This does not need to be called when a popup is added since added popups are already place on
      * the top of the stack.
      */
-    bringToTop: function (element) {
+    bringToTop(element) {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.bringToTop) {
             stack._adapter.bringToTop(element);
             return;
         }
-        var item = stack.items.find(function (i) { return i.element === element; });
+        const item = stack.items.find(i => i.element === element);
         if (item) {
-            stack.items = __spreadArrays(stack.items.filter(function (i) { return i !== item; }), [item]);
+            stack.items = [...stack.items.filter(i => i !== item), item];
             // Also bring children to top. There are a few cases where stacking might break otherwise:
             // - Clicking a Popup calls `bringToTop`, but mouse is over a Tooltip so that Tooltip is now
             //   under the Popup
             // - Clicking a button opens a new Popup, but that click bubbles up to a `bringToTop` call
             //   putting the new popup under an existing one
             // Example: https://user-images.githubusercontent.com/338257/83924476-031af580-a742-11ea-8f68-0edabdf0fd6a.gif
-            getChildPopups(item, stack.items).forEach(function (popup) {
+            getChildPopups(item, stack.items).forEach(popup => {
                 exports.PopupStack.bringToTop(popup.element);
             });
             setZIndexOfElements(exports.PopupStack.getElements());
         }
         else {
             // not found
-            var e = new Error();
+            const e = new Error();
             console.warn('Could not find item', e.stack);
         }
     },
@@ -282,22 +293,24 @@ exports.PopupStack = {
      * opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
      * is not inside `element`).
      */
-    contains: function (element, eventTarget) {
+    contains(element, eventTarget) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.contains) {
             return stack._adapter.contains(element, eventTarget);
         }
-        var item = stack.items.find(function (i) { return i.element === element; });
-        var containsOwnerOfAnotherPopupTargeted = stack.items.some(function (currentItem) {
+        const item = stack.items.find(i => i.element === element);
+        const containsOwnerOfAnotherPopupTargeted = stack.items.some(currentItem => {
             var _a;
             return ((item === null || item === void 0 ? void 0 : item.element.contains(currentItem.owner || null)) &&
-                (eventTarget === currentItem.owner || ((_a = currentItem.owner) === null || _a === void 0 ? void 0 : _a.contains(eventTarget)) ||
+                (eventTarget === currentItem.owner ||
+                    ((_a = currentItem.owner) === null || _a === void 0 ? void 0 : _a.contains(eventTarget)) ||
                     currentItem.element.contains(eventTarget)));
         });
         if (item) {
             return (containsOwnerOfAnotherPopupTargeted ||
-                eventTarget === item.owner || ((_b = item.owner) === null || _b === void 0 ? void 0 : _b.contains(eventTarget)) ||
+                eventTarget === item.owner ||
+                ((_b = item.owner) === null || _b === void 0 ? void 0 : _b.contains(eventTarget)) ||
                 element.contains(eventTarget));
         }
         return false;
@@ -309,9 +322,9 @@ exports.PopupStack = {
      * 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) {
+    pushStackContext(container) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.pushStackContext) {
             return stack._adapter.pushStackContext(container);
         }
@@ -319,10 +332,10 @@ exports.PopupStack = {
         if (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) === container) {
             return;
         }
-        var newStack = {
+        const newStack = {
             items: [],
             zIndex: stack.zIndex,
-            container: function () { return container; },
+            container: () => container,
             _adapter: {},
         };
         stacks.push(newStack);
@@ -332,9 +345,9 @@ exports.PopupStack = {
      * context container element matches to guard against accidental remove of other stack contexts
      * you don't own.
      */
-    popStackContext: function (container) {
+    popStackContext(container) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.popStackContext) {
             return stack._adapter.popStackContext(container);
         }
@@ -357,19 +370,19 @@ exports.PopupStack = {
      * 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) {
+    transferToCurrentContext(item) {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.transferToCurrentContext) {
             return stack._adapter.transferToCurrentContext(item);
         }
-        if (stack.items.find(function (i) { return i.element === item.element; })) {
+        if (stack.items.find(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
-        var oldStack = stacks.find(function (stack) { return !!stack.items.find(function (i) { return i.element === item.element; }); });
+        const oldStack = stacks.find(stack => !!stack.items.find(i => i.element === item.element));
         if (oldStack) {
             exports.PopupStack.remove(item.element);
         }
@@ -385,21 +398,25 @@ function resetStack() {
 }
 exports.resetStack = resetStack;
 /**
+ * An adapter is a custom implementation of the {@link PopupStack}. There is only ever a single
+ * instance of an adapter on the page. It allows an adapter to intercept any `PopupStack` method.
+ * This could bypass the internal FILO stack of the `PopupStack` and allows the FILO stack to be
+ * handled by something else.
  *
  * @param adapter The parts of the PopupStack that we want to override
  */
-var createAdapter = function (adapter) {
+const createAdapter = (adapter) => {
     stack._adapter = adapter;
 };
 exports.createAdapter = createAdapter;
 // keep track of the element ourselves to avoid accidentally popping off someone else's stack
 // context
-var element = null;
+let 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_1.default.isEnabled) {
-    screenfull_1.default.on('change', function () {
+    screenfull_1.default.on('change', () => {
         if (screenfull_1.default.isFullscreen) {
             if (screenfull_1.default.element) {
                 element = screenfull_1.default.element;

package/dist/es6/lib/PopupStack.d.ts

@@ -42,6 +42,24 @@ interface Stack {
     };
     _adapter: Partial<typeof PopupStack>;
 }
+/**
+ * The `PopupStack` is a framework agnostic first-in-last-out (FILO) stack that tracks all popups
+ * ("floating UI" or any UI that renders on top of other content). It contains methods that interact
+ * with the stack to support all coordinating behaviors of all popups on the page. The `PopupStack`
+ * helps:
+ *
+ * - Render popups in the right order on the page
+ * - Helps accessibility with the Escape key (topmost popup is closed)
+ * - Handles transition to [Full
+ *   Screen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
+ *
+ * The `PopupStack` supports adapters to work with existing popup systems. {@link createAdapter} is
+ * exported to accept an adapter. Only a single adapter should be used per page.
+ *
+ * The `PopupStack` is designed to handle multiple versions of `PopupStack` on the page at once
+ * while the internal FILO stack is shared between instances. You should not attempt to use the
+ * internal FILO stack. If an adapter is used, the internal FILO stack may be empty.
+ */
 export declare const PopupStack: {
     /**
      * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -139,6 +157,10 @@ export declare const PopupStack: {
  */
 export declare function resetStack(): void;
 /**
+ * An adapter is a custom implementation of the {@link PopupStack}. There is only ever a single
+ * instance of an adapter on the page. It allows an adapter to intercept any `PopupStack` method.
+ * This could bypass the internal FILO stack of the `PopupStack` and allows the FILO stack to be
+ * handled by something else.
  *
  * @param adapter The parts of the PopupStack that we want to override
  */

package/dist/es6/lib/PopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AA2CD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;uBACgB,WAAW;IAS9B;;;;;OAKG;cACO,cAAc,GAAG,IAAI;IAY/B;;;;;;OAMG;oBACa,WAAW,GAAG,IAAI;IAelC;;;;OAIG;uBACgB,WAAW,GAAG,OAAO;IAaxC;;;;OAIG;oDACiC,WAAW,EAAE;IAQjD;;;;;;;;;;;OAWG;wBACiB,WAAW,GAAG,IAAI;IA6BtC;;;;;;;;;;OAUG;sBACe,WAAW,eAAe,WAAW,GAAG,OAAO;IA2BjE;;;;;;OAMG;gCACyB,WAAW,GAAG,IAAI;IAoB9C;;;;OAIG;+BACwB,WAAW,GAAG,IAAI;IAY7C;;;;;;;;;;;;;;OAcG;mCAC4B,cAAc,GAAG,IAAI;CAqBrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,YAAa,QAAQ,iBAAiB,CAAC,SAEhE,CAAC"}
+{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AA2CD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;uBACgB,WAAW;IAS9B;;;;;OAKG;cACO,cAAc,GAAG,IAAI;IAY/B;;;;;;OAMG;oBACa,WAAW,GAAG,IAAI;IAelC;;;;OAIG;uBACgB,WAAW,GAAG,OAAO;IAaxC;;;;OAIG;oDACiC,WAAW,EAAE;IAQjD;;;;;;;;;;;OAWG;wBACiB,WAAW,GAAG,IAAI;IA6BtC;;;;;;;;;;OAUG;sBACe,WAAW,eAAe,WAAW,GAAG,OAAO;IA2BjE;;;;;;OAMG;gCACyB,WAAW,GAAG,IAAI;IAoB9C;;;;OAIG;+BACwB,WAAW,GAAG,IAAI;IAY7C;;;;;;;;;;;;;;OAcG;mCAC4B,cAAc,GAAG,IAAI;CAqBrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,YAAa,QAAQ,iBAAiB,CAAC,SAEhE,CAAC"}

package/dist/es6/lib/PopupStack.js

@@ -1,10 +1,3 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import screenfull from 'screenfull';
 function getLast(items) {
     if (items.length) {
@@ -19,7 +12,7 @@ function getLast(items) {
  * popups.
  */
 export function getValue(index, length) {
-    var _a = stack.zIndex, min = _a.min, max = _a.max;
+    const { min, max } = stack.zIndex;
     if (length <= max - min) {
         return index + min;
     }
@@ -30,8 +23,8 @@ export function getValue(index, length) {
  * will be run any time the stack changes.
  */
 function setZIndexOfElements(elements) {
-    var length = elements.length;
-    elements.forEach(function (element, index) {
+    const length = elements.length;
+    elements.forEach((element, index) => {
         element.style.zIndex = String(getValue(index, length));
     });
 }
@@ -40,9 +33,9 @@ function setZIndexOfElements(elements) {
  * to the stack.
  */
 function getOwnerPopup(element, items) {
-    var parentEl = element;
+    let parentEl = element;
     do {
-        var owner = items.find(function (el) { return el.element === parentEl; });
+        const owner = items.find(el => el.element === parentEl);
         if (owner) {
             return owner.element;
         }
@@ -55,10 +48,10 @@ function getOwnerPopup(element, items) {
  * hierarchy.
  */
 function getChildPopups(item, items) {
-    var owners = items
-        .filter(function (i) { return i.owner; })
-        .map(function (i) { return ({ element: i.element, parent: getOwnerPopup(i.owner, items) }); })
-        .filter(function (i) { return i.parent === item.element; });
+    const owners = items
+        .filter(i => i.owner)
+        .map(i => ({ element: i.element, parent: getOwnerPopup(i.owner, items) }))
+        .filter(i => i.parent === item.element);
     return owners;
 }
 /**
@@ -68,8 +61,8 @@ function getChildPopups(item, items) {
  * @param path dot-notation path of a deep property
  */
 function get(obj, path) {
-    var parts = path.split('.');
-    var first = parts.splice(0, 1)[0];
+    const parts = path.split('.');
+    const first = parts.splice(0, 1)[0];
     if (parts.length && obj[first]) {
         return get(obj[first], parts.join('.'));
     }
@@ -84,8 +77,8 @@ function get(obj, path) {
  * @param value Any value
  */
 function set(obj, path, value) {
-    var parts = path.split('.');
-    var first = parts.splice(0, 1)[0];
+    const parts = path.split('.');
+    const first = parts.splice(0, 1)[0];
     if (parts.length) {
         if (obj[first] === undefined) {
             obj[first] = {};
@@ -106,7 +99,7 @@ if (typeof window !== 'undefined') {
  * environments without a `window` object, so it is safe to use in server-side rendering.
  * @param path Any dot-notation path
  */
-var getFromWindow = function (path) {
+const getFromWindow = (path) => {
     if (typeof window !== 'undefined') {
         return get(window, path);
     }
@@ -118,7 +111,7 @@ var getFromWindow = function (path) {
  * @param path dot-notation path of a deep property
  * @param value Any value
  */
-var setToWindow = function (path, value) {
+const setToWindow = (path, value) => {
     if (typeof window !== 'undefined') {
         set(window, path, value);
     }
@@ -126,34 +119,52 @@ var setToWindow = function (path, value) {
 // We need to make sure only one stack is ever in use on the page - ever. If a stack is already
 // defined on the page, we need to use that one. Never, ever, ever change this variable name on
 // window
-var stack = getFromWindow('workday.__popupStack') || {
+const stack = getFromWindow('workday.__popupStack') || {
     description: 'Global popup stack from @workday/canvas-kit/popup-stack',
-    container: function () { return document.body; },
+    container: () => document.body,
     items: [],
     zIndex: { min: 30, max: 50, getValue: getValue },
     _adapter: {},
 };
 setToWindow('workday.__popupStack', stack);
-var stacks = getFromWindow('workday.__popupStackOfStacks') || [stack];
+const 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 = {
+/**
+ * The `PopupStack` is a framework agnostic first-in-last-out (FILO) stack that tracks all popups
+ * ("floating UI" or any UI that renders on top of other content). It contains methods that interact
+ * with the stack to support all coordinating behaviors of all popups on the page. The `PopupStack`
+ * helps:
+ *
+ * - Render popups in the right order on the page
+ * - Helps accessibility with the Escape key (topmost popup is closed)
+ * - Handles transition to [Full
+ *   Screen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
+ *
+ * The `PopupStack` supports adapters to work with existing popup systems. {@link createAdapter} is
+ * exported to accept an adapter. Only a single adapter should be used per page.
+ *
+ * The `PopupStack` is designed to handle multiple versions of `PopupStack` on the page at once
+ * while the internal FILO stack is shared between instances. You should not attempt to use the
+ * internal FILO stack. If an adapter is used, the internal FILO stack may be empty.
+ */
+export const PopupStack = {
     /**
      * Create a HTMLElement as the container for the popup stack item. The returned element reference
      * will be the reference to be passed to all other methods. The Popup Stack will control when this
      * element is added and removed from the DOM as well as the `z-index` style property. Your content
      * should be added to this element.
      */
-    createContainer: function () {
+    createContainer() {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.createContainer) {
             return stack._adapter.createContainer();
         }
-        var div = document.createElement('div');
+        const div = document.createElement('div');
         div.style.position = 'relative'; // z-index only works on _positioned_ elements
         return div;
     },
@@ -163,9 +174,9 @@ export var PopupStack = {
      * popups to be registered initially, but rendered when the user triggers some event, call this
      * method when the event triggers.
      */
-    add: function (item) {
+    add(item) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.add) {
             stack._adapter.add(item);
             return;
@@ -181,16 +192,16 @@ export var PopupStack = {
      * called when the element is removed from the DOM. This method will reset z-index values of the
      * stack.
      */
-    remove: function (element) {
+    remove(element) {
         var _a, _b;
         // Find the stack the popup belongs to.
-        var stack = stacks.find(function (stack) { return !!PopupStack.getElements(stack).find(function (el) { return el === element; }); });
+        const stack = stacks.find(stack => !!PopupStack.getElements(stack).find(el => el === 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; });
+            stack.items = stack.items.filter(item => item.element !== element);
             (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) || document.body).removeChild(element);
             setZIndexOfElements(PopupStack.getElements(stack));
         }
@@ -200,13 +211,13 @@ export var PopupStack = {
      * is not the top of the stack or is not found in the stack. The `element` should be the same
      * reference that was passed to `add`
      */
-    isTopmost: function (element) {
+    isTopmost(element) {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.isTopmost) {
             return stack._adapter.isTopmost(element);
         }
-        var last = getLast(stack.items);
+        const last = getLast(stack.items);
         if (last) {
             return last.element === element;
         }
@@ -217,13 +228,13 @@ 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 (stackOverride) {
+    getElements(stackOverride) {
         var _a;
-        var stack = stackOverride || getTopStack();
+        const stack = stackOverride || getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.getElements) {
             return stack._adapter.getElements();
         }
-        return stack.items.map(function (i) { return i.element; });
+        return stack.items.map(i => i.element);
     },
     /**
      * Bring the element to the top of the stack. This is useful for persistent popups to place them
@@ -237,30 +248,30 @@ export var PopupStack = {
      * This does not need to be called when a popup is added since added popups are already place on
      * the top of the stack.
      */
-    bringToTop: function (element) {
+    bringToTop(element) {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.bringToTop) {
             stack._adapter.bringToTop(element);
             return;
         }
-        var item = stack.items.find(function (i) { return i.element === element; });
+        const item = stack.items.find(i => i.element === element);
         if (item) {
-            stack.items = __spreadArrays(stack.items.filter(function (i) { return i !== item; }), [item]);
+            stack.items = [...stack.items.filter(i => i !== item), item];
             // Also bring children to top. There are a few cases where stacking might break otherwise:
             // - Clicking a Popup calls `bringToTop`, but mouse is over a Tooltip so that Tooltip is now
             //   under the Popup
             // - Clicking a button opens a new Popup, but that click bubbles up to a `bringToTop` call
             //   putting the new popup under an existing one
             // Example: https://user-images.githubusercontent.com/338257/83924476-031af580-a742-11ea-8f68-0edabdf0fd6a.gif
-            getChildPopups(item, stack.items).forEach(function (popup) {
+            getChildPopups(item, stack.items).forEach(popup => {
                 PopupStack.bringToTop(popup.element);
             });
             setZIndexOfElements(PopupStack.getElements());
         }
         else {
             // not found
-            var e = new Error();
+            const e = new Error();
             console.warn('Could not find item', e.stack);
         }
     },
@@ -275,22 +286,24 @@ export var PopupStack = {
      * opt-in to toggling. Otherwise there is no way to opt-out of toggle behavior (because the target
      * is not inside `element`).
      */
-    contains: function (element, eventTarget) {
+    contains(element, eventTarget) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.contains) {
             return stack._adapter.contains(element, eventTarget);
         }
-        var item = stack.items.find(function (i) { return i.element === element; });
-        var containsOwnerOfAnotherPopupTargeted = stack.items.some(function (currentItem) {
+        const item = stack.items.find(i => i.element === element);
+        const containsOwnerOfAnotherPopupTargeted = stack.items.some(currentItem => {
             var _a;
             return ((item === null || item === void 0 ? void 0 : item.element.contains(currentItem.owner || null)) &&
-                (eventTarget === currentItem.owner || ((_a = currentItem.owner) === null || _a === void 0 ? void 0 : _a.contains(eventTarget)) ||
+                (eventTarget === currentItem.owner ||
+                    ((_a = currentItem.owner) === null || _a === void 0 ? void 0 : _a.contains(eventTarget)) ||
                     currentItem.element.contains(eventTarget)));
         });
         if (item) {
             return (containsOwnerOfAnotherPopupTargeted ||
-                eventTarget === item.owner || ((_b = item.owner) === null || _b === void 0 ? void 0 : _b.contains(eventTarget)) ||
+                eventTarget === item.owner ||
+                ((_b = item.owner) === null || _b === void 0 ? void 0 : _b.contains(eventTarget)) ||
                 element.contains(eventTarget));
         }
         return false;
@@ -302,9 +315,9 @@ export var PopupStack = {
      * 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) {
+    pushStackContext(container) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.pushStackContext) {
             return stack._adapter.pushStackContext(container);
         }
@@ -312,10 +325,10 @@ export var PopupStack = {
         if (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) === container) {
             return;
         }
-        var newStack = {
+        const newStack = {
             items: [],
             zIndex: stack.zIndex,
-            container: function () { return container; },
+            container: () => container,
             _adapter: {},
         };
         stacks.push(newStack);
@@ -325,9 +338,9 @@ export var PopupStack = {
      * context container element matches to guard against accidental remove of other stack contexts
      * you don't own.
      */
-    popStackContext: function (container) {
+    popStackContext(container) {
         var _a, _b;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.popStackContext) {
             return stack._adapter.popStackContext(container);
         }
@@ -350,19 +363,19 @@ export var PopupStack = {
      * 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) {
+    transferToCurrentContext(item) {
         var _a;
-        var stack = getTopStack();
+        const stack = getTopStack();
         if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.transferToCurrentContext) {
             return stack._adapter.transferToCurrentContext(item);
         }
-        if (stack.items.find(function (i) { return i.element === item.element; })) {
+        if (stack.items.find(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
-        var oldStack = stacks.find(function (stack) { return !!stack.items.find(function (i) { return i.element === item.element; }); });
+        const oldStack = stacks.find(stack => !!stack.items.find(i => i.element === item.element));
         if (oldStack) {
             PopupStack.remove(item.element);
         }
@@ -377,20 +390,24 @@ export function resetStack() {
     stack.items = [];
 }
 /**
+ * An adapter is a custom implementation of the {@link PopupStack}. There is only ever a single
+ * instance of an adapter on the page. It allows an adapter to intercept any `PopupStack` method.
+ * This could bypass the internal FILO stack of the `PopupStack` and allows the FILO stack to be
+ * handled by something else.
  *
  * @param adapter The parts of the PopupStack that we want to override
  */
-export var createAdapter = function (adapter) {
+export const createAdapter = (adapter) => {
     stack._adapter = adapter;
 };
 // keep track of the element ourselves to avoid accidentally popping off someone else's stack
 // context
-var element = null;
+let 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 () {
+    screenfull.on('change', () => {
         if (screenfull.isFullscreen) {
             if (screenfull.element) {
                 element = screenfull.element;

package/lib/PopupStack.ts

@@ -188,6 +188,24 @@ function getTopStack() {
   return stacks[stacks.length - 1];
 }
 
+/**
+ * The `PopupStack` is a framework agnostic first-in-last-out (FILO) stack that tracks all popups
+ * ("floating UI" or any UI that renders on top of other content). It contains methods that interact
+ * with the stack to support all coordinating behaviors of all popups on the page. The `PopupStack`
+ * helps:
+ *
+ * - Render popups in the right order on the page
+ * - Helps accessibility with the Escape key (topmost popup is closed)
+ * - Handles transition to [Full
+ *   Screen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
+ *
+ * The `PopupStack` supports adapters to work with existing popup systems. {@link createAdapter} is
+ * exported to accept an adapter. Only a single adapter should be used per page.
+ *
+ * The `PopupStack` is designed to handle multiple versions of `PopupStack` on the page at once
+ * while the internal FILO stack is shared between instances. You should not attempt to use the
+ * internal FILO stack. If an adapter is used, the internal FILO stack may be empty.
+ */
 export const PopupStack = {
   /**
    * Create a HTMLElement as the container for the popup stack item. The returned element reference
@@ -445,6 +463,10 @@ export function resetStack() {
 }
 
 /**
+ * An adapter is a custom implementation of the {@link PopupStack}. There is only ever a single
+ * instance of an adapter on the page. It allows an adapter to intercept any `PopupStack` method.
+ * This could bypass the internal FILO stack of the `PopupStack` and allows the FILO stack to be
+ * handled by something else.
  *
  * @param adapter The parts of the PopupStack that we want to override
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "8.0.0-alpha.253-next.22+7350b9a5",
+  "version": "8.0.0-alpha.428-next.2+2c79134a",
   "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",
@@ -37,5 +37,5 @@
   "dependencies": {
     "screenfull": "^5.2.0"
   },
-  "gitHead": "7350b9a521c0c710ec18a027afd8442dc92dd875"
+  "gitHead": "2c79134aa48ef0efde9cdf883b529b8157337a28"
 }