@esri/calcite-components 1.4.0-next.2 → 1.4.0-next.21

package/dist/cjs/{dom-f9400ca1.js → dom-7b094354.js}

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 'use strict';
 
-const guid = require('./guid-df0b1b5d.js');
-const resources = require('./resources-0ea2e924.js');
+const guid = require('./guid-f8f47882.js');
+const resources = require('./resources-ebb63cb0.js');
 
 /*!
-* tabbable 6.1.1
+* tabbable 6.1.2
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -545,6 +545,11 @@ var isFocusable = function isFocusable(node, options) {
   return isNodeMatchingSelectorFocusable(options, node);
 };
 
+/**
+ * The default `focus-trap/tabbable` options.
+ *
+ * See https://github.com/focus-trap/tabbable#tabbable
+ */
 const tabbableOptions = {
   getShadowRoot: true
 };
@@ -553,7 +558,7 @@ const tabbableOptions = {
  *
  * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  *
- * @param el
+ * @param {Element} el An element.
  * @returns {string} The element's ID.
  */
 function ensureId(el) {
@@ -562,27 +567,76 @@ function ensureId(el) {
   }
   return (el.id = el.id || `${el.tagName.toLowerCase()}-${guid.guid()}`);
 }
+/**
+ * This helper returns an array from a NodeList.
+ *
+ * @param {NodeList} nodeList A NodeList.
+ * @returns {Element[]} An array of elements.
+ */
 function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
+/**
+ * This helper returns the Calcite "mode" of an element.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {"light"|"dark"} The Calcite mode.
+ */
 function getModeName(el) {
   const closestElWithMode = closestElementCrossShadowBoundary(el, `.${resources.CSS_UTILITY.darkMode}, .${resources.CSS_UTILITY.lightMode}`);
   return closestElWithMode?.classList.contains("calcite-mode-dark") ? "dark" : "light";
 }
+/**
+ * This helper returns the direction of a HTML element.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {Direction} The direction.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
   const closest = closestElementCrossShadowBoundary(el, selector);
   return closest ? closest.getAttribute(prop) : "ltr";
 }
-function getElementProp(el, prop, fallbackValue) {
-  const selector = `[${prop}]`;
+/**
+ * This helper returns the value of an attribute on an element.
+ *
+ * @param {HTMLElement} el An element.
+ * @param {string} attribute An attribute name.
+ * @param {any} fallbackValue A fallback value.
+ * @returns {any} The value.
+ * @deprecated
+ */
+function getElementProp(el, attribute, fallbackValue) {
+  const selector = `[${attribute}]`;
   const closest = el.closest(selector);
-  return closest ? closest.getAttribute(prop) : fallbackValue;
+  return closest ? closest.getAttribute(attribute) : fallbackValue;
 }
+/**
+ * This helper returns the rootNode of an element.
+ *
+ * @param {Element} el An element.
+ * @returns {Document|ShadowRoot} The element's root node.
+ */
 function getRootNode(el) {
   return el.getRootNode();
 }
+/**
+ * This helper returns the node's shadowRoot root node if it exists.
+ *
+ * @param {Element} el The element.
+ * @returns {ShadowRoot|null} The element's root node ShadowRoot.
+ */
+function getShadowRootNode(el) {
+  const rootNode = getRootNode(el);
+  return "host" in rootNode ? rootNode : null;
+}
+/**
+ * This helper returns the host of a ShadowRoot.
+ *
+ * @param {Document | ShadowRoot} root A root element.
+ * @returns {Element | null} The host element.
+ */
 function getHost(root) {
   return root.host || null;
 }
@@ -591,11 +645,11 @@ function getHost(root) {
  *
  * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  *
- * @param element
+ * @param {Element} element An element.
  * @param root0
  * @param root0.selector
  * @param root0.id
- * @returns {Element} The element.
+ * @returns {Element} An element.
  */
 function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
@@ -624,6 +678,13 @@ function queryElementRoots(element, { selector, id }) {
   }
   return queryFrom(element);
 }
+/**
+ * This helper returns the closest element matching the selector by crossing he shadow boundary if necessary.
+ *
+ * @param {Element} element The starting element.
+ * @param {string} selector The selector.
+ * @returns {Element} The targeted element.
+ */
 function closestElementCrossShadowBoundary(element, selector) {
   // based on https://stackoverflow.com/q/54520554/194216
   function closestFrom(el) {
@@ -636,8 +697,9 @@ function closestElementCrossShadowBoundary(element, selector) {
  *
  * Returning early or undefined in `onVisit` will continue traversing up the DOM tree. Otherwise, traversal will halt with the returned value as the result of the function
  *
- * @param element
- * @param onVisit
+ * @param {Element} element An element.
+ * @param {(node: Node) => Element} onVisit The callback.
+ * @returns {Element} The result.
  */
 function walkUpAncestry(element, onVisit) {
   return visit(element, onVisit);
@@ -653,12 +715,30 @@ function visit(node, onVisit) {
   const { parentNode } = node;
   return visit(parentNode instanceof ShadowRoot ? parentNode.host : parentNode, onVisit);
 }
+/**
+ * This helper returns true when an element has the descendant in question.
+ *
+ * @param {Element} element The starting element.
+ * @param {Element} maybeDescendant The descendant.
+ * @returns {boolean} The result.
+ */
 function containsCrossShadowBoundary(element, maybeDescendant) {
   return !!walkUpAncestry(maybeDescendant, (node) => (node === element ? true : undefined));
 }
+/**
+ * This helper returns true when an element has a setFocus method.
+ *
+ * @param {Element} el An element.
+ * @returns {boolean} The result.
+ */
 function isCalciteFocusable(el) {
   return typeof el?.setFocus === "function";
 }
+/**
+ * This helper focuses an element using the `setFocus` method if available and falls back to using the `focus` method if not available.
+ *
+ * @param {Element} el An element.
+ */
 async function focusElement(el) {
   if (!el) {
     return;
@@ -718,10 +798,24 @@ function querySingle(element, slotSelector, options) {
   const selector = options?.selector;
   return selector ? match?.querySelector(selector) : match;
 }
+/**
+ * Filters direct children.
+ *
+ * @param {Element} el An element.
+ * @param {string} selector The selector.
+ * @returns {Element[]} An array of elements.
+ */
 function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
 }
-// set a default icon from a defined set or allow an override with an icon name string
+/**
+ * Set a default icon from a defined set or allow an override with an icon name string
+ *
+ * @param {Record<string, string>} iconObject The icon object.
+ * @param {string | boolean} iconValue The icon value.
+ * @param {string} matchedValue The matched value.
+ * @returns {string|undefined} The resulting icon value.
+ */
 function setRequestedIcon(iconObject, iconValue, matchedValue) {
   if (typeof iconValue === "string" && iconValue !== "") {
     return iconValue;
@@ -730,6 +824,13 @@ function setRequestedIcon(iconObject, iconValue, matchedValue) {
     return iconObject[matchedValue];
   }
 }
+/**
+ * This helper returns true when two rectangles intersect.
+ *
+ * @param {DOMRect} rect1 The first rectangle.
+ * @param {DOMRect} rect2 The second rectangle.
+ * @returns {boolean} The result.
+ */
 function intersects(rect1, rect2) {
   return !(rect2.left > rect1.right ||
     rect2.right < rect1.left ||
@@ -741,7 +842,7 @@ function intersects(rect1, rect2) {
  *
  * It should only be used for aria attributes that require a string value of "true" or "false".
  *
- * @param value
+ * @param {boolean} value The value.
  * @returns {string} The string conversion of a boolean value ("true" | "false").
  */
 function toAriaBoolean(value) {
@@ -754,7 +855,7 @@ function toAriaBoolean(value) {
  * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
  * ```
  *
- * @param event
+ * @param {Event} event The event.
  * @returns {boolean} Whether the slot has any assigned elements.
  */
 function slotChangeHasAssignedElement(event) {
@@ -767,7 +868,7 @@ function slotChangeHasAssignedElement(event) {
  * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
  * ```
  *
- * @param event
+ * @param {Event} event The event.
  * @returns {boolean} Whether the slot has any assigned elements.
  */
 function slotChangeGetAssignedElements(event) {
@@ -780,32 +881,41 @@ function slotChangeGetAssignedElements(event) {
  *
  * See https://www.w3.org/TR/pointerevents/#the-button-property.
  *
- * @param event
- * @returns {boolean}
+ * @param {PointerEvent} event The pointer event.
+ * @returns {boolean} The value.
  */
 function isPrimaryPointerButton(event) {
   return !!(event.isPrimary && event.button === 0);
 }
-const focusElementInGroup = (elements, currentElement, destination) => {
+/**
+ * This helper sets focus on and returns a destination element from within a group of provided elements.
+ *
+ * @param {Element[]} elements An array of elements.
+ * @param {Element}  currentElement The current element.
+ * @param {FocusElementInGroupDestination} destination target destination element to focus.
+ * @param {boolean} cycle Should navigation cycle through elements or stop at extent - defaults to true.
+ * @returns {Element} The focused element.
+ */
+const focusElementInGroup = (elements, currentElement, destination, cycle = true) => {
   const currentIndex = elements.indexOf(currentElement);
   const isFirstItem = currentIndex === 0;
   const isLastItem = currentIndex === elements.length - 1;
-  destination =
-    destination === "previous" && isFirstItem ? "last" : destination === "next" && isLastItem ? "first" : destination;
+  if (cycle) {
+    destination =
+      destination === "previous" && isFirstItem ? "last" : destination === "next" && isLastItem ? "first" : destination;
+  }
   let focusTarget;
-  switch (destination) {
-    case "first":
-      focusTarget = elements[0];
-      break;
-    case "last":
-      focusTarget = elements[elements.length - 1];
-      break;
-    case "next":
-      focusTarget = elements[currentIndex + 1] || elements[0];
-      break;
-    case "previous":
-      focusTarget = elements[currentIndex - 1] || elements[elements.length - 1];
-      break;
+  if (destination === "previous") {
+    focusTarget = elements[currentIndex - 1] || elements[cycle ? elements.length - 1 : currentIndex];
+  }
+  else if (destination === "next") {
+    focusTarget = elements[currentIndex + 1] || elements[cycle ? 0 : currentIndex];
+  }
+  else if (destination === "last") {
+    focusTarget = elements[elements.length - 1];
+  }
+  else {
+    focusTarget = elements[0];
   }
   focusElement(focusTarget);
   return focusTarget;
@@ -823,6 +933,7 @@ exports.getElementDir = getElementDir;
 exports.getElementProp = getElementProp;
 exports.getModeName = getModeName;
 exports.getRootNode = getRootNode;
+exports.getShadowRootNode = getShadowRootNode;
 exports.getSlotted = getSlotted;
 exports.intersects = intersects;
 exports.isFocusable = isFocusable;

package/dist/cjs/{filter-4b6a7ee1.js → filter-c0840b74.js}

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 'use strict';
 
-const debounce = require('./debounce-0b0c3e48.js');
+const debounce = require('./debounce-af63da08.js');
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee

package/dist/cjs/{floating-ui-49a14f8c.js → floating-ui-43c57987.js}

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 'use strict';
 
-const dom = require('./dom-f9400ca1.js');
-const debounce = require('./debounce-0b0c3e48.js');
+const dom = require('./dom-7b094354.js');
+const debounce = require('./debounce-af63da08.js');
 
 function getAlignment(placement) {
   return placement.split('-')[1];
@@ -289,7 +289,8 @@ const arrow = options => ({
       y,
       placement,
       rects,
-      platform
+      platform,
+      elements
     } = state;
     if (element == null) {
       return {};
@@ -302,14 +303,18 @@ const arrow = options => ({
     const axis = getMainAxisFromPlacement(placement);
     const length = getLengthFromAxis(axis);
     const arrowDimensions = await platform.getDimensions(element);
-    const minProp = axis === 'y' ? 'top' : 'left';
-    const maxProp = axis === 'y' ? 'bottom' : 'right';
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
     const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
     const startDiff = coords[axis] - rects.reference[axis];
     const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
-    let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
-    if (clientSize === 0) {
-      clientSize = rects.floating[length];
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
     }
     const centerToReference = endDiff / 2 - startDiff / 2;
 
@@ -850,28 +855,9 @@ function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-
-function getCssDimensions(element) {
-  const css = getComputedStyle$1(element);
-  let width = parseFloat(css.width);
-  let height = parseFloat(css.height);
-  const offsetWidth = element.offsetWidth;
-  const offsetHeight = element.offsetHeight;
-  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
-  if (shouldFallback) {
-    width = offsetWidth;
-    height = offsetHeight;
-  }
-  return {
-    width,
-    height,
-    fallback: shouldFallback
-  };
+function isNode(value) {
+  return value instanceof getWindow(value).Node;
 }
-
 function getNodeName(node) {
   return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
 }
@@ -895,9 +881,6 @@ function isHTMLElement(value) {
 function isElement(value) {
   return value instanceof getWindow(value).Element;
 }
-function isNode(value) {
-  return value instanceof getWindow(value).Node;
-}
 function isShadowRoot(node) {
   // Browsers without `ShadowRoot` support.
   if (typeof ShadowRoot === 'undefined') {
@@ -954,6 +937,29 @@ function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
 
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  let width = parseFloat(css.width);
+  let height = parseFloat(css.height);
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    fallback: shouldFallback
+  };
+}
+
 function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
@@ -1035,16 +1041,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       currentIFrame = getWindow(currentIFrame).frameElement;
     }
   }
-  return {
+  return rectToClientRect({
     width,
     height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x,
     x,
     y
-  };
+  });
 }
 
 function getDocumentElement(node) {
@@ -1243,6 +1245,13 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   }
   return rectToClientRect(rect);
 }
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
 // clipping (or hiding) child elements. This returns all clipping ancestors
@@ -1260,19 +1269,17 @@ function getClippingElementAncestors(element, cache) {
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
     const computedStyle = getComputedStyle$1(currentNode);
-    const containingBlock = isContainingBlock(currentNode);
-    const shouldIgnoreCurrentNode = computedStyle.position === 'fixed';
-    if (shouldIgnoreCurrentNode) {
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
-      if (shouldDropCurrentNode) {
-        // Drop non-containing blocks.
-        result = result.filter(ancestor => ancestor !== currentNode);
-      } else {
-        // Record last containing block for next iteration.
-        currentContainingBlockComputedStyle = computedStyle;
-      }
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -1309,10 +1316,7 @@ function getClippingRect(_ref) {
 }
 
 function getDimensions(element) {
-  if (isHTMLElement(element)) {
-    return getCssDimensions(element);
-  }
-  return element.getBoundingClientRect();
+  return getCssDimensions(element);
 }
 
 function getTrueOffsetParent(element, polyfill) {
@@ -1340,6 +1344,9 @@ function getContainingBlock(element) {
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
   const window = getWindow(element);
+  if (!isHTMLElement(element)) {
+    return window;
+  }
   let offsetParent = getTrueOffsetParent(element, polyfill);
   while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
@@ -1424,27 +1431,26 @@ function autoUpdate(reference, floating, update, options) {
     options = {};
   }
   const {
-    ancestorScroll: _ancestorScroll = true,
+    ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
     animationFrame = false
   } = options;
-  const ancestorScroll = _ancestorScroll && !animationFrame;
   const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
-    ancestorScroll && ancestor.addEventListener('scroll', update, {
-      passive: true
-    });
+    // ignores Window, checks for [object VisualViewport]
+    const isVisualViewport = !isElement(ancestor) && ancestor.toString().includes('V');
+    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
+      ancestor.addEventListener('scroll', update, {
+        passive: true
+      });
+    }
     ancestorResize && ancestor.addEventListener('resize', update);
   });
   let observer = null;
   if (elementResize) {
-    let initialUpdate = true;
     observer = new ResizeObserver(() => {
-      if (!initialUpdate) {
-        update();
-      }
-      initialUpdate = false;
+      update();
     });
     isElement(reference) && !animationFrame && observer.observe(reference);
     if (!isElement(reference) && reference.contextElement && !animationFrame) {
@@ -1545,7 +1551,7 @@ async function patchFloatingUiForNonChromiumBrowsers() {
   if (config.floatingUINonChromiumPositioningFix &&
     // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
     (/firefox|safari/i.test(getUAString()) || isChrome109OrAbove())) {
-    const { offsetParent } = await Promise.resolve().then(function () { return require('./composed-offset-position.esm-bc107f9c.js'); });
+    const { offsetParent } = await Promise.resolve().then(function () { return require('./composed-offset-position.esm-673a3f3d.js'); });
     const originalGetOffsetParent = platform.getOffsetParent;
     platform.getOffsetParent = (element) => originalGetOffsetParent(element, offsetParent);
   }

package/dist/cjs/{focusTrapComponent-a4005ef0.js → focusTrapComponent-d22ecd15.js}

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 'use strict';
 
-const dom = require('./dom-f9400ca1.js');
+const dom = require('./dom-7b094354.js');
 
 /*!
-* focus-trap 7.4.0
+* focus-trap 7.4.2
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -217,23 +217,24 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   /**
    * Finds the index of the container that contains the element.
    * @param {HTMLElement} element
+   * @param {Event} [event]
    * @returns {number} Index of the container in either `state.containers` or
    *  `state.containerGroups` (the order/length of these lists are the same); -1
    *  if the element isn't found.
    */
-  var findContainerIndex = function findContainerIndex(element) {
+  var findContainerIndex = function findContainerIndex(element, event) {
+    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;
     // NOTE: search `containerGroups` because it's possible a group contains no tabbable
     //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
     //  and we still need to find the element in there
     return state.containerGroups.findIndex(function (_ref) {
       var container = _ref.container,
         tabbableNodes = _ref.tabbableNodes;
-      return container.contains(element) ||
-      // fall back to explicit tabbable search which will take into consideration any
+      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any
       //  web components if the `tabbableOptions.getShadowRoot` option was used for
       //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
       //  look inside web components even if open)
-      tabbableNodes.find(function (node) {
+      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {
         return node === element;
       });
     });
@@ -394,7 +395,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // so that it precedes the focus event.
   var checkPointerDown = function checkPointerDown(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       // allow the click since it ocurred inside the trap
       return;
     }
@@ -427,7 +428,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // In case focus escapes the trap for some strange reason, pull it back in.
   var checkFocusIn = function checkFocusIn(e) {
     var target = getActualTarget(e);
-    var targetContained = findContainerIndex(target) >= 0;
+    var targetContained = findContainerIndex(target, e) >= 0;
 
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
     if (targetContained || target instanceof Document) {
@@ -454,7 +455,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       // make sure the target is actually contained in a group
       // NOTE: the target may also be the container itself if it's focusable
       //  with tabIndex='-1' and was given initial focus
-      var containerIndex = findContainerIndex(target);
+      var containerIndex = findContainerIndex(target, event);
       var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
@@ -555,7 +556,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   };
   var checkClick = function checkClick(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       return;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {

package/dist/cjs/{form-5319a134.js → form-2388b68c.js}

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 'use strict';
 
-const dom = require('./dom-f9400ca1.js');
-const index = require('./index-553d1664.js');
+const dom = require('./dom-7b094354.js');
+const index = require('./index-d8e24abf.js');
 
 (function(prototype) {
   if (typeof prototype.requestSubmit == "function") return