@dso-toolkit/core 52.0.3 → 53.1.0

package/dist/cjs/{focus-trap.esm-c501d382.js → focus-trap.esm-a5b7273f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const index_esm = require('./index.esm-03a9e0b4.js');
+const index_esm = require('./index.esm-0e935715.js');
 
 /*!
-* focus-trap 7.1.0
+* focus-trap 7.4.3
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -29,6 +29,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -41,8 +42,21 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-var rooTrapStack = [];
 var activeFocusTraps = {
   activateTrap: function activateTrap(trapStack, trap) {
     if (trapStack.length > 0) {
@@ -79,6 +93,16 @@ var isEscapeEvent = function isEscapeEvent(e) {
 var isTabEvent = function isTabEvent(e) {
   return e.key === 'Tab' || e.keyCode === 9;
 };
+
+// checks for TAB by default
+var isKeyForward = function isKeyForward(e) {
+  return isTabEvent(e) && !e.shiftKey;
+};
+
+// checks for SHIFT+TAB by default
+var isKeyBackward = function isKeyBackward(e) {
+  return isTabEvent(e) && e.shiftKey;
+};
 var delay = function delay(fn) {
   return setTimeout(fn, 0);
 };
@@ -122,15 +146,21 @@ var getActualTarget = function getActualTarget(event) {
   //  composedPath()[0] === event.target always).
   return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;
 };
+
+// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+//  current instance use the same stack if `userOptions.trapStack` isn't specified
+var internalTrapStack = [];
 var createFocusTrap = function createFocusTrap(elements, userOptions) {
   // SSR: a live trap shouldn't be created in this type of environment so this
   //  should be safe code to execute if the `document` option isn't specified
   var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
-  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || rooTrapStack;
+  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
   var config = _objectSpread2({
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
-    delayInitialFocus: true
+    delayInitialFocus: true,
+    isKeyForward: isKeyForward,
+    isKeyBackward: isKeyBackward
   }, userOptions);
   var state = {
     // containers given to createFocusTrap()
@@ -182,23 +212,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;
       });
     });
@@ -254,8 +285,8 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     if (node === false) {
       return false;
     }
-    if (node === undefined) {
-      // option not specified: use fallback options
+    if (node === undefined || !index_esm.isFocusable(node, config.tabbableOptions)) {
+      // option not specified nor focusable: use fallback options
       if (findContainerIndex(doc.activeElement) >= 0) {
         node = doc.activeElement;
       } else {
@@ -359,25 +390,20 @@ 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;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {
       // immediately deactivate the trap
       trap.deactivate({
-        // if, on deactivation, we should return focus to the node originally-focused
-        //  when the trap was activated (or the configured `setReturnFocus` node),
-        //  then assume it's also OK to return focus to the outside node that was
-        //  just clicked, causing deactivation, as long as that node is focusable;
-        //  if it isn't focusable, then return focus to the original node focused
-        //  on activation (or the configured `setReturnFocus` node)
         // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
         //  which will result in the outside click setting focus to the node
-        //  that was clicked, whether it's focusable or not; by setting
+        //  that was clicked (and if not focusable, to "nothing"); by setting
         //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
-        //  on activation (or the configured `setReturnFocus` node)
-        returnFocus: config.returnFocusOnDeactivate && !index_esm.isFocusable(target, config.tabbableOptions)
+        //  on activation (or the configured `setReturnFocus` node), whether the
+        //  outside click was on a focusable node or not
+        returnFocus: config.returnFocusOnDeactivate
       });
       return;
     }
@@ -397,7 +423,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) {
@@ -411,31 +437,32 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     }
   };
 
-  // Hijack Tab events on the first and last focusable nodes of the trap,
+  // Hijack key nav events on the first and last focusable nodes of the trap,
   // in order to prevent focus from escaping. If it escapes for even a
   // moment it can end up scrolling the page and causing confusion so we
   // kind of need to capture the action at the keydown phase.
-  var checkTab = function checkTab(e) {
-    var target = getActualTarget(e);
+  var checkKeyNav = function checkKeyNav(event) {
+    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var target = getActualTarget(event);
     updateTabbableNodes();
     var destinationNode = null;
     if (state.tabbableGroups.length > 0) {
       // 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,
-        //  so bring it back in to...
-        if (e.shiftKey) {
+        //  so bring it back into...
+        if (isBackward) {
           // ...the last node in the last group
           destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
         } else {
           // ...the first node in the first group
           destinationNode = state.tabbableGroups[0].firstTabbableNode;
         }
-      } else if (e.shiftKey) {
+      } else if (isBackward) {
         // REVERSE
 
         // is the target the first tabbable node in a group?
@@ -459,6 +486,10 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
           var destinationGroup = state.tabbableGroups[destinationGroupIndex];
           destinationNode = destinationGroup.lastTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target, false);
         }
       } else {
         // FORWARD
@@ -484,33 +515,43 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
           var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
           destinationNode = _destinationGroup.firstTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target);
         }
       }
     } else {
+      // no groups available
       // NOTE: the fallbackFocus option does not support returning false to opt-out
       destinationNode = getNodeForOption('fallbackFocus');
     }
     if (destinationNode) {
-      e.preventDefault();
+      if (isTabEvent(event)) {
+        // since tab natively moves focus, we wouldn't have a destination node unless we
+        //  were on the edge of a container and had to move to the next/previous edge, in
+        //  which case we want to prevent default to keep the browser from moving focus
+        //  to where it normally would
+        event.preventDefault();
+      }
       tryFocus(destinationNode);
     }
     // else, let the browser take care of [shift+]tab and move the focus
   };
 
-  var checkKey = function checkKey(e) {
-    if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) {
-      e.preventDefault();
+  var checkKey = function checkKey(event) {
+    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
+      event.preventDefault();
       trap.deactivate();
       return;
     }
-    if (isTabEvent(e)) {
-      checkTab(e);
-      return;
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
     }
   };
   var checkClick = function checkClick(e) {
     var target = getActualTarget(e);
-    if (findContainerIndex(target) >= 0) {
+    if (findContainerIndex(target, e) >= 0) {
       return;
     }
     if (valueOrHandler(config.clickOutsideDeactivates, e)) {
@@ -571,6 +612,43 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     return trap;
   };
 
+  //
+  // MUTATION OBSERVER
+  //
+
+  var checkDomRemoval = function checkDomRemoval(mutations) {
+    var isFocusedNodeRemoved = mutations.some(function (mutation) {
+      var removedNodes = Array.from(mutation.removedNodes);
+      return removedNodes.some(function (node) {
+        return node === state.mostRecentlyFocusedNode;
+      });
+    });
+
+    // If the currently focused is removed then browsers will move focus to the
+    // <body> element. If this happens, try to move focus back into the trap.
+    if (isFocusedNodeRemoved) {
+      tryFocus(getInitialFocusNode());
+    }
+  };
+
+  // Use MutationObserver - if supported - to detect if focused node is removed
+  // from the DOM.
+  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;
+  var updateObservedNodes = function updateObservedNodes() {
+    if (!mutationObserver) {
+      return;
+    }
+    mutationObserver.disconnect();
+    if (state.active && !state.paused) {
+      state.containers.map(function (container) {
+        mutationObserver.observe(container, {
+          subtree: true,
+          childList: true
+        });
+      });
+    }
+  };
+
   //
   // TRAP DEFINITION
   //
@@ -595,17 +673,14 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       state.active = true;
       state.paused = false;
       state.nodeFocusedBeforeActivation = doc.activeElement;
-      if (onActivate) {
-        onActivate();
-      }
+      onActivate === null || onActivate === void 0 ? void 0 : onActivate();
       var finishActivation = function finishActivation() {
         if (checkCanFocusTrap) {
           updateTabbableNodes();
         }
         addListeners();
-        if (onPostActivate) {
-          onPostActivate();
-        }
+        updateObservedNodes();
+        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();
       };
       if (checkCanFocusTrap) {
         checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
@@ -628,22 +703,19 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       removeListeners();
       state.active = false;
       state.paused = false;
+      updateObservedNodes();
       activeFocusTraps.deactivateTrap(trapStack, trap);
       var onDeactivate = getOption(options, 'onDeactivate');
       var onPostDeactivate = getOption(options, 'onPostDeactivate');
       var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
       var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
-      if (onDeactivate) {
-        onDeactivate();
-      }
+      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
       var finishDeactivation = function finishDeactivation() {
         delay(function () {
           if (returnFocus) {
             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
           }
-          if (onPostDeactivate) {
-            onPostDeactivate();
-          }
+          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();
         });
       };
       if (returnFocus && checkCanReturnFocus) {
@@ -653,21 +725,31 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       finishDeactivation();
       return this;
     },
-    pause: function pause() {
+    pause: function pause(pauseOptions) {
       if (state.paused || !state.active) {
         return this;
       }
+      var onPause = getOption(pauseOptions, 'onPause');
+      var onPostPause = getOption(pauseOptions, 'onPostPause');
       state.paused = true;
+      onPause === null || onPause === void 0 ? void 0 : onPause();
       removeListeners();
+      updateObservedNodes();
+      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();
       return this;
     },
-    unpause: function unpause() {
+    unpause: function unpause(unpauseOptions) {
       if (!state.paused || !state.active) {
         return this;
       }
+      var onUnpause = getOption(unpauseOptions, 'onUnpause');
+      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');
       state.paused = false;
+      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();
       updateTabbableNodes();
       addListeners();
+      updateObservedNodes();
+      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();
       return this;
     },
     updateContainerElements: function updateContainerElements(containerElements) {
@@ -678,6 +760,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       if (state.active) {
         updateTabbableNodes();
       }
+      updateObservedNodes();
       return this;
     }
   };

package/dist/cjs/{has-overflow-b1b4f3f3.js → has-overflow-dd552ec8.js}

@@ -163,7 +163,7 @@ var round = Math.round;
 function getUAString() {
   var uaData = navigator.userAgentData;
 
-  if (uaData != null && uaData.brands) {
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
     return uaData.brands.map(function (item) {
       return item.brand + "/" + item.version;
     }).join(' ');
@@ -482,10 +482,9 @@ var unsetSides = {
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
 
-function roundOffsetsByDPR(_ref) {
+function roundOffsetsByDPR(_ref, win) {
   var x = _ref.x,
       y = _ref.y;
-  var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
     x: round(x * dpr) / dpr || 0,
@@ -568,7 +567,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }) : {
+  }, getWindow(popper)) : {
     x: x,
     y: y
   };

package/dist/cjs/index.cjs.js

@@ -2,8 +2,75 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const expandable_interfaces = require('./expandable.interfaces-19b608b9.js');
 const mapControls_interfaces = require('./map-controls.interfaces-5ceec716.js');
 
+class DsoModalRef {
+  constructor(modalElement) {
+    this.modalElement = modalElement;
+    if (!modalElement) {
+      throw new Error("unable to add event listener. try opening the modal first");
+    }
+  }
+  /** Removes the modal from the DOM. */
+  close() {
+    document.body.removeChild(this.modalElement);
+  }
+  addEventListener(eventName, fn) {
+    this.modalElement.addEventListener(eventName, fn);
+  }
+  removeEventListener(eventName, fn) {
+    this.modalElement.removeEventListener(eventName, fn);
+  }
+}
 
+class DsoModalController {
+  open(modal, options) {
+    const dsoModalElement = this.createModal(modal, options);
+    document.body.appendChild(dsoModalElement);
+    return new DsoModalRef(dsoModalElement);
+  }
+  createModal({ title, body, footer }, options) {
+    const element = document.createElement(`dso-modal`);
+    if (title) {
+      element.setAttribute("modal-title", title);
+    }
+    if (options) {
+      const { role, showCloseButton, initialFocus } = options;
+      if (role) {
+        element.role = role;
+      }
+      if (showCloseButton) {
+        element.setAttribute("show-close-button", showCloseButton ? "true" : "false");
+      }
+      if (initialFocus) {
+        element.setAttribute("initial-focus", initialFocus);
+      }
+    }
+    const bodyDiv = document.createElement("div");
+    bodyDiv.setAttribute("slot", "body");
+    if (typeof body === "string") {
+      bodyDiv.innerHTML = body;
+    }
+    else {
+      bodyDiv.appendChild(body);
+    }
+    element.appendChild(bodyDiv);
+    if (footer) {
+      const footerDiv = document.createElement("div");
+      footerDiv.setAttribute("slot", "footer");
+      if (typeof footer === "string") {
+        footerDiv.innerHTML = footer;
+      }
+      else {
+        footerDiv.appendChild(footer);
+      }
+      element.appendChild(footerDiv);
+    }
+    return element;
+  }
+}
 
+exports.isExpandable = expandable_interfaces.isExpandable;
 exports.transitionDuration = mapControls_interfaces.transitionDuration;
+exports.DsoModalController = DsoModalController;