@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/commonjs/popup/lib/PopupPopper.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,28 +18,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupPopper = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var hooks_1 = require("./hooks");
-var Popper_1 = require("./Popper");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const hooks_1 = require("./hooks");
+const Popper_1 = require("./Popper");
 exports.PopupPopper = common_1.createSubcomponent('div')({
     displayName: 'Popup.Popper',
     modelHook: hooks_1.usePopupModel,
     elemPropsHook: hooks_1.usePopupPopper,
-})(function (_a) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Popper_1.Popper, __assign({}, elemProps), children);
+})(({ children, ...elemProps }) => {
+    return React.createElement(Popper_1.Popper, Object.assign({}, elemProps), children);
 });

package/dist/commonjs/popup/lib/PopupTarget.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,14 +20,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupTarget = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var button_1 = require("@workday/canvas-kit-react/button");
-var hooks_1 = require("./hooks");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+const hooks_1 = require("./hooks");
 exports.PopupTarget = common_1.createSubcomponent(button_1.SecondaryButton)({
     displayName: 'Popup.Target',
     modelHook: hooks_1.usePopupModel,
     elemPropsHook: hooks_1.usePopupTarget,
-})(function (elemProps, Element) {
-    return React.createElement(Element, __assign({}, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps));
 });

package/dist/commonjs/popup/lib/getTransformFromPlacement.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTransformFromPlacement = void 0;
-var getTransformFromPlacement = function (placement) {
-    var _a = placement.split('-'), first = _a[0], second = _a[1];
-    var vertical = first === 'top'
+const getTransformFromPlacement = (placement) => {
+    const [first, second] = placement.split('-');
+    const vertical = first === 'top'
         ? 'bottom'
         : first === 'bottom'
             ? 'top'
@@ -12,7 +12,7 @@ var getTransformFromPlacement = function (placement) {
                 : second === 'start'
                     ? 'bottom'
                     : 'center';
-    var horizontal = first === 'left'
+    const horizontal = first === 'left'
         ? 'right'
         : first === 'right'
             ? 'left'
@@ -22,8 +22,8 @@ var getTransformFromPlacement = function (placement) {
                     ? 'right'
                     : 'center';
     return {
-        vertical: vertical,
-        horizontal: horizontal,
+        vertical,
+        horizontal,
     };
 };
 exports.getTransformFromPlacement = getTransformFromPlacement;

package/dist/commonjs/popup/lib/hooks/focus-trap-js.js

@@ -3,7 +3,7 @@
 /// <reference types="@types/node" />
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tabTrappingKey = void 0;
-var candidateSelectors = [
+const candidateSelectors = [
     'input',
     'select',
     'textarea',
@@ -21,7 +21,7 @@ function isHidden(node) {
     return node.offsetParent === null || getComputedStyle(node).visibility === 'hidden';
 }
 function getCheckedRadio(nodes, form) {
-    for (var i = 0; i < nodes.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
         if (nodes[i].checked && nodes[i].form === form) {
             return nodes[i];
         }
@@ -32,38 +32,38 @@ function isNotRadioOrTabbableRadio(node) {
     if (node.tagName !== 'INPUT' || node.type !== 'radio' || !node.name) {
         return true;
     }
-    var radioScope = node.form || node.ownerDocument;
+    const radioScope = node.form || node.ownerDocument;
     if (!radioScope) {
         return false;
     }
-    var radioSet = radioScope.querySelectorAll('input[type="radio"][name="' + node.name + '"]');
-    var checked = getCheckedRadio(radioSet, node.form);
+    const radioSet = radioScope.querySelectorAll('input[type="radio"][name="' + node.name + '"]');
+    const checked = getCheckedRadio(radioSet, node.form);
     return checked === node || (checked === undefined && radioSet[0] === node);
 }
 function getAllTabbingElements(parentElem) {
     var _a;
-    var currentActiveElement = document.activeElement;
-    var tabbableNodes = parentElem.querySelectorAll(candidateSelectors.join(','));
-    var onlyTabbable = [];
-    var _loop_1 = function (i) {
-        var node = tabbableNodes[i];
+    const currentActiveElement = document.activeElement;
+    const tabbableNodes = parentElem.querySelectorAll(candidateSelectors.join(','));
+    const onlyTabbable = [];
+    for (let i = 0; i < tabbableNodes.length; i++) {
+        const node = tabbableNodes[i];
         if (currentActiveElement === node ||
             (!node.disabled &&
                 getTabIndex(node) > -1 &&
                 !isHidden(node) &&
                 isNotRadioOrTabbableRadio(node))) {
             if (node instanceof HTMLIFrameElement) {
-                var iframeDoc_1 = (_a = node.contentWindow) === null || _a === void 0 ? void 0 : _a.document;
-                if (iframeDoc_1) {
-                    var tabbableElementsInIframe = getAllTabbingElements(iframeDoc_1);
-                    var handleKeyEvent_1 = function (event) {
-                        var blocked = tabTrappingKey(event, iframeDoc_1, onlyTabbable);
+                const iframeDoc = (_a = node.contentWindow) === null || _a === void 0 ? void 0 : _a.document;
+                if (iframeDoc) {
+                    const tabbableElementsInIframe = getAllTabbingElements(iframeDoc);
+                    const handleKeyEvent = (event) => {
+                        const blocked = tabTrappingKey(event, iframeDoc, onlyTabbable);
                         if (blocked) {
-                            iframeDoc_1.removeEventListener('keydown', handleKeyEvent_1);
+                            iframeDoc.removeEventListener('keydown', handleKeyEvent);
                         }
                     };
-                    iframeDoc_1.addEventListener('keydown', handleKeyEvent_1);
-                    tabbableElementsInIframe.forEach(function (elem) {
+                    iframeDoc.addEventListener('keydown', handleKeyEvent);
+                    tabbableElementsInIframe.forEach(elem => {
                         onlyTabbable.push(elem);
                     });
                 }
@@ -72,14 +72,10 @@ function getAllTabbingElements(parentElem) {
                 onlyTabbable.push(node);
             }
         }
-    };
-    for (var i = 0; i < tabbableNodes.length; i++) {
-        _loop_1(i);
     }
     return onlyTabbable;
 }
-function tabTrappingKey(event, parentElem, onlyTabbable) {
-    if (onlyTabbable === void 0) { onlyTabbable = null; }
+function tabTrappingKey(event, parentElem, onlyTabbable = null) {
     // check if current event keyCode is tab
     if (!event || event.key !== 'Tab') {
         return;
@@ -93,9 +89,9 @@ function tabTrappingKey(event, parentElem, onlyTabbable) {
     if (!parentElem.contains(event.target)) {
         return false;
     }
-    var allTabbingElements = onlyTabbable || getAllTabbingElements(parentElem);
-    var firstFocusableElement = allTabbingElements[0];
-    var lastFocusableElement = allTabbingElements[allTabbingElements.length - 1];
+    const allTabbingElements = onlyTabbable || getAllTabbingElements(parentElem);
+    const firstFocusableElement = allTabbingElements[0];
+    const lastFocusableElement = allTabbingElements[allTabbingElements.length - 1];
     if (event.shiftKey && event.target === firstFocusableElement) {
         lastFocusableElement.focus();
         event.preventDefault();
@@ -110,7 +106,7 @@ function tabTrappingKey(event, parentElem, onlyTabbable) {
 }
 exports.tabTrappingKey = tabTrappingKey;
 function getTabIndex(node) {
-    var tabIndexAttr = parseInt(node.getAttribute('tabindex') || '', 10);
+    const tabIndexAttr = parseInt(node.getAttribute('tabindex') || '', 10);
     if (!isNaN(tabIndexAttr)) {
         return tabIndexAttr;
     }

package/dist/commonjs/popup/lib/hooks/useAlwaysCloseOnOutsideClick.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAlwaysCloseOnOutsideClick = void 0;
-var react_1 = __importDefault(require("react"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `stackRef` element and its children regardless of the position in the
@@ -17,8 +17,8 @@ var usePopupModel_1 = require("./usePopupModel");
  * This should be used with popup elements that should close no matter their position in the stack
  * (i.e. Tooltips).
  */
-exports.useAlwaysCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var onClick = react_1.default.useCallback(function (event) {
+exports.useAlwaysCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const onClick = react_1.default.useCallback((event) => {
         if (!model.state.stackRef.current) {
             return;
         }
@@ -30,15 +30,15 @@ exports.useAlwaysCloseOnOutsideClick = common_1.createElemPropsHook(usePopupMode
             model.events.hide();
         }
     }, [model.events, model.state.stackRef]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useLayoutEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useLayoutEffect(() => {
         var _a;
         if (!visible) {
             return;
         }
         document.addEventListener('mousedown', onClick);
         (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-behavior-click-outside-close', 'always');
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', onClick);
         };
     }, [model.state.stackRef, visible, onClick]);

package/dist/commonjs/popup/lib/hooks/useAssistiveHideSiblings.js

@@ -1,17 +1,12 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAssistiveHideSiblings = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * This hook will hide all sibling elements from assistive technology. Very useful for modal
  * dialogs. This will set `aria-hidden` for sibling elements of the provided PopupModel's
@@ -23,21 +18,23 @@ var usePopupModel_1 = require("./usePopupModel");
  *
  * This should be used on popup elements that need to hide content (i.e. Modals).
  */
-exports.useAssistiveHideSiblings = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useEffect(function () {
+exports.useAssistiveHideSiblings = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(() => {
         var _a, _b;
         if (!visible) {
             return;
         }
-        var siblings = __spreadArray([], (_b = (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children).filter(function (el) { return el !== model.state.stackRef.current; });
-        var prevAriaHidden = siblings.map(function (el) { return el.getAttribute('aria-hidden'); });
-        siblings.forEach(function (el) {
+        const siblings = [
+            ...(_b = (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children,
+        ].filter(el => el !== model.state.stackRef.current);
+        const prevAriaHidden = siblings.map(el => el.getAttribute('aria-hidden'));
+        siblings.forEach(el => {
             el.setAttribute('aria-hidden', 'true');
         });
-        return function () {
-            siblings.forEach(function (el, index) {
-                var prev = prevAriaHidden[index];
+        return () => {
+            siblings.forEach((el, index) => {
+                const prev = prevAriaHidden[index];
                 if (prev) {
                     el.setAttribute('aria-hidden', prev);
                 }

package/dist/commonjs/popup/lib/hooks/useBringToTopOnClick.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBringToTopOnClick = void 0;
-var react_1 = __importDefault(require("react"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * This hook will bring an element to the top of the stack when any element inside the provided
  * {@link PopupModel}'s `state.stackRef` element is clicked. If {@link PopupPopper Popup.Popper} was
@@ -17,25 +17,25 @@ var usePopupModel_1 = require("./usePopupModel");
  *
  * This should be used on popup elements that are meant to persist (i.e. Windows).
  */
-exports.useBringToTopOnClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var timer = react_1.default.useRef(-1);
-    var onClick = react_1.default.useCallback(function (event) {
+exports.useBringToTopOnClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const timer = react_1.default.useRef(-1);
+    const onClick = react_1.default.useCallback((event) => {
         // requestAnimationFrame is used to control timing of when `bringToTop` is called.
         // https://github.com/Workday/canvas-kit/pull/670#discussion_r436158184
-        timer.current = requestAnimationFrame(function () {
+        timer.current = requestAnimationFrame(() => {
             var _a;
             if ((_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
                 canvas_kit_popup_stack_1.PopupStack.bringToTop(model.state.stackRef.current);
             }
         });
     }, [model.state.stackRef]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useLayoutEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useLayoutEffect(() => {
         if (!visible) {
             return;
         }
         document.addEventListener('click', onClick);
-        return function () {
+        return () => {
             cancelAnimationFrame(timer.current);
             document.removeEventListener('click', onClick);
         };

package/dist/commonjs/popup/lib/hooks/useCloseOnEscape.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnEscape = void 0;
-var react_1 = __importDefault(require("react"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Registers global detection of the Escape key. It will only call the {@link PopupModel}'s `hide`
  * event if the provided model's `state.stackRef` element is the topmost in the stack.
@@ -15,21 +15,21 @@ var usePopupModel_1 = require("./usePopupModel");
  * This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
  * dialogs, dropdown menus, etc.
  */
-exports.useCloseOnEscape = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var onKeyDown = react_1.default.useCallback(function (event) {
+exports.useCloseOnEscape = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const onKeyDown = react_1.default.useCallback((event) => {
         if ((event.key === 'Esc' || event.key === 'Escape') &&
             canvas_kit_popup_stack_1.PopupStack.isTopmost(model.state.stackRef.current)) {
             model.events.hide(event);
         }
     }, [model.state.stackRef, model.events]);
-    var visible = model.state.visibility !== 'hidden';
+    const visible = model.state.visibility !== 'hidden';
     // `useLayoutEffect` for automation
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         if (!visible) {
             return;
         }
         document.addEventListener('keydown', onKeyDown);
-        return function () {
+        return () => {
             document.removeEventListener('keydown', onKeyDown);
         };
     }, [onKeyDown, visible]);

package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.js

@@ -4,29 +4,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnFullscreenExit = void 0;
-var react_1 = __importDefault(require("react"));
-var screenfull_1 = __importDefault(require("screenfull"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const screenfull_1 = __importDefault(require("screenfull"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
  * the entire screen. This should be added to popup types that are very context sensitive like
  * Tooltips.
  */
-exports.useCloseOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var handler = react_1.default.useCallback(function (event) {
+exports.useCloseOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const handler = react_1.default.useCallback((event) => {
         if (!screenfull_1.default.isFullscreen) {
             model.events.hide(event);
         }
     }, [model.events]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(() => {
         if (!visible) {
             return;
         }
         if (screenfull_1.default.isEnabled) {
             screenfull_1.default.on('change', handler);
-            return function () {
+            return () => {
                 screenfull_1.default.off('change', handler);
             };
         }

package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnOutsideClick = void 0;
-var react_1 = __importDefault(require("react"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Registers global listener for all clicks. It will only call the {@link PopupModel}'s `hide` event
  * if the click happened outside the PopupModel's `state.stackRef` element and its children _and_
@@ -18,14 +18,14 @@ var usePopupModel_1 = require("./usePopupModel");
  * dropdown menus, etc. Tooltips and hierarchical menus should use
  * {@link useAlwaysCloseOnClickOutside} instead.
  */
-exports.useCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var onClick = react_1.default.useCallback(function (event) {
+exports.useCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const onClick = react_1.default.useCallback((event) => {
         if (!model.state.stackRef.current) {
             return;
         }
-        var elements = canvas_kit_popup_stack_1.PopupStack.getElements()
-            .filter(function (e) { return e.getAttribute('data-behavior-click-outside-close') === 'topmost'; })
-            .sort(function (a, b) { return Number(a.style.zIndex) - Number(b.style.zIndex); });
+        const elements = canvas_kit_popup_stack_1.PopupStack.getElements()
+            .filter(e => e.getAttribute('data-behavior-click-outside-close') === 'topmost')
+            .sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
         if (elements.length &&
             elements[elements.length - 1] === model.state.stackRef.current &&
             // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
@@ -35,15 +35,15 @@ exports.useCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.us
             model.events.hide(event);
         }
     }, [model.state.stackRef, model.events]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useLayoutEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useLayoutEffect(() => {
         var _a;
         if (!visible) {
             return;
         }
         document.addEventListener('mousedown', onClick);
         (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-behavior-click-outside-close', 'topmost');
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', onClick);
         };
     }, [model.state.stackRef, visible, onClick]);

package/dist/commonjs/popup/lib/hooks/useCloseOnTargetHidden.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnTargetHidden = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
 function getScrollParent(element) {
     if (element === document.body || !element.parentElement) {
         return element;
     }
-    var styles = getComputedStyle(element);
+    const styles = getComputedStyle(element);
     if (styles.overflowY === 'scroll' ||
         styles.overflowY === 'auto' ||
         styles.overflowX === 'scroll' ||
@@ -29,26 +29,26 @@ function getScrollParent(element) {
  *
  * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
  */
-exports.useCloseOnTargetHidden = common_1.createElemPropsHook(popup_1.usePopupModel)(function (model) {
-    var visible = model.state.visibility !== 'hidden';
-    var callback = react_1.default.useCallback(function (entries) {
+exports.useCloseOnTargetHidden = common_1.createElemPropsHook(popup_1.usePopupModel)(model => {
+    const visible = model.state.visibility !== 'hidden';
+    const callback = react_1.default.useCallback(entries => {
         if (entries[0].intersectionRatio < 0.5) {
             model.events.hide();
         }
     }, [model.events]);
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         if (!visible || !model.state.targetRef.current) {
             return;
         }
-        var target = model.state.targetRef.current;
-        var scrollParent = getScrollParent(target);
+        const target = model.state.targetRef.current;
+        const scrollParent = getScrollParent(target);
         // eslint-disable-next-line compat/compat
-        var observer = new IntersectionObserver(callback, {
+        const observer = new IntersectionObserver(callback, {
             root: scrollParent,
             threshold: 0.5,
         });
         observer.observe(model.state.targetRef.current);
-        return function () {
+        return () => {
             observer.disconnect();
         };
     }, [callback, model.state.targetRef, visible]);

package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDisableBodyScroll = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
  * page scrolling while the popup is visible.
@@ -14,19 +14,19 @@ var usePopupModel_1 = require("./usePopupModel");
  * This should be used with popup elements that hide all other content and force the user to accept
  * or dismiss the popup before continuing (i.e. Modals).
  */
-exports.useDisableBodyScroll = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useLayoutEffect(function () {
+exports.useDisableBodyScroll = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useLayoutEffect(() => {
         if (!visible) {
             return;
         }
-        var overflowY = document.body.style.overflowY;
-        var overflowX = document.body.style.overflowX;
-        var overflow = document.body.style.overflow;
+        const overflowY = document.body.style.overflowY;
+        const overflowX = document.body.style.overflowX;
+        const overflow = document.body.style.overflow;
         document.body.style.overflow = 'hidden';
         document.body.style.overflowY = 'hidden';
         document.body.style.overflowX = 'hidden';
-        return function () {
+        return () => {
             document.body.style.overflow = overflow;
             document.body.style.overflowY = overflowY;
             document.body.style.overflowX = overflowX;