@dso-toolkit/core 35.0.0 → 36.2.0

package/dist/esm/{focus-trap.esm-299989f2.js → focus-trap.esm-a01ad6c9.js}

@@ -1,7 +1,7 @@
-import { t as tabbable, f as focusable, i as isTabbable, a as isFocusable } from './index.esm-a1362957.js';
+import { t as tabbable, f as focusable, i as isTabbable, a as isFocusable } from './index.esm-45465af7.js';
 
 /*!
-* focus-trap 6.7.3
+* focus-trap 6.8.1
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -152,20 +152,28 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   }, userOptions);
 
   var state = {
+    // containers given to createFocusTrap()
     // @type {Array<HTMLElement>}
     containers: [],
-    // list of objects identifying the first and last tabbable nodes in all containers/groups in
-    //  the trap
+    // list of objects identifying tabbable nodes in `containers` in the trap
     // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
     //  is active, but the trap should never get to a state where there isn't at least one group
     //  with at least one tabbable node in it (that would lead to an error condition that would
     //  result in an error being thrown)
     // @type {Array<{
     //   container: HTMLElement,
+    //   tabbableNodes: Array<HTMLElement>, // empty if none
+    //   focusableNodes: Array<HTMLElement>, // empty if none
     //   firstTabbableNode: HTMLElement|null,
     //   lastTabbableNode: HTMLElement|null,
     //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
     // }>}
+    containerGroups: [],
+    // same order/length as `containers` list
+    // references to objects in `containerGroups`, but only those that actually have
+    //  tabbable nodes in them
+    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
+    //  the same length
     tabbableGroups: [],
     nodeFocusedBeforeActivation: null,
     mostRecentlyFocusedNode: null,
@@ -177,14 +185,42 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   };
   var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
 
+  /**
+   * Gets a configuration option value.
+   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,
+   *  value will be taken from this object. Otherwise, value will be taken from base configuration.
+   * @param {string} optionName Name of the option whose value is sought.
+   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`
+   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.
+   */
+
   var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {
     return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];
   };
+  /**
+   * Finds the index of the container that contains the element.
+   * @param {HTMLElement} element
+   * @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 containersContain = function containersContain(element) {
-    return !!(element && state.containers.some(function (container) {
-      return container.contains(element);
-    }));
+  var findContainerIndex = function findContainerIndex(element) {
+    // 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
+      //  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) {
+        return node === element;
+      });
+    });
   };
   /**
    * Gets the node for the given option, which is expected to be an option that
@@ -243,7 +279,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
     if (node === undefined) {
       // option not specified: use fallback options
-      if (containersContain(doc.activeElement)) {
+      if (findContainerIndex(doc.activeElement) >= 0) {
         node = doc.activeElement;
       } else {
         var firstTabbableGroup = state.tabbableGroups[0];
@@ -261,60 +297,61 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   };
 
   var updateTabbableNodes = function updateTabbableNodes() {
-    state.tabbableGroups = state.containers.map(function (container) {
-      var tabbableNodes = tabbable(container); // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
+    state.containerGroups = state.containers.map(function (container) {
+      var tabbableNodes = tabbable(container, config.tabbableOptions); // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
       //  are a superset of tabbable nodes
 
-      var focusableNodes = focusable(container);
-
-      if (tabbableNodes.length > 0) {
-        return {
-          container: container,
-          firstTabbableNode: tabbableNodes[0],
-          lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
-
-          /**
-           * Finds the __tabbable__ node that follows the given node in the specified direction,
-           *  in this container, if any.
-           * @param {HTMLElement} node
-           * @param {boolean} [forward] True if going in forward tab order; false if going
-           *  in reverse.
-           * @returns {HTMLElement|undefined} The next tabbable node, if any.
-           */
-          nextTabbableNode: function nextTabbableNode(node) {
-            var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-            // NOTE: If tabindex is positive (in order to manipulate the tab order separate
-            //  from the DOM order), this __will not work__ because the list of focusableNodes,
-            //  while it contains tabbable nodes, does not sort its nodes in any order other
-            //  than DOM order, because it can't: Where would you place focusable (but not
-            //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
-            // Support for positive tabindex is already broken and hard to manage (possibly
-            //  not supportable, TBD), so this isn't going to make things worse than they
-            //  already are, and at least makes things better for the majority of cases where
-            //  tabindex is either 0/unset or negative.
-            // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
-            var nodeIdx = focusableNodes.findIndex(function (n) {
-              return n === node;
-            });
-
-            if (forward) {
-              return focusableNodes.slice(nodeIdx + 1).find(function (n) {
-                return isTabbable(n);
-              });
-            }
+      var focusableNodes = focusable(container, config.tabbableOptions);
+      return {
+        container: container,
+        tabbableNodes: tabbableNodes,
+        focusableNodes: focusableNodes,
+        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
+        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
+
+        /**
+         * Finds the __tabbable__ node that follows the given node in the specified direction,
+         *  in this container, if any.
+         * @param {HTMLElement} node
+         * @param {boolean} [forward] True if going in forward tab order; false if going
+         *  in reverse.
+         * @returns {HTMLElement|undefined} The next tabbable node, if any.
+         */
+        nextTabbableNode: function nextTabbableNode(node) {
+          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+          // NOTE: If tabindex is positive (in order to manipulate the tab order separate
+          //  from the DOM order), this __will not work__ because the list of focusableNodes,
+          //  while it contains tabbable nodes, does not sort its nodes in any order other
+          //  than DOM order, because it can't: Where would you place focusable (but not
+          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
+          // Support for positive tabindex is already broken and hard to manage (possibly
+          //  not supportable, TBD), so this isn't going to make things worse than they
+          //  already are, and at least makes things better for the majority of cases where
+          //  tabindex is either 0/unset or negative.
+          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
+          var nodeIdx = focusableNodes.findIndex(function (n) {
+            return n === node;
+          });
+
+          if (nodeIdx < 0) {
+            return undefined;
+          }
 
-            return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
-              return isTabbable(n);
+          if (forward) {
+            return focusableNodes.slice(nodeIdx + 1).find(function (n) {
+              return isTabbable(n, config.tabbableOptions);
             });
           }
-        };
-      }
 
-      return undefined;
-    }).filter(function (group) {
-      return !!group;
-    }); // remove groups with no tabbable nodes
-    // throw if no groups have tabbable nodes and we don't have a fallback focus node either
+          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
+            return isTabbable(n, config.tabbableOptions);
+          });
+        }
+      };
+    });
+    state.tabbableGroups = state.containerGroups.filter(function (group) {
+      return group.tabbableNodes.length > 0;
+    }); // throw if no groups have tabbable nodes and we don't have a fallback focus node either
 
     if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option
     ) {
@@ -356,7 +393,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   var checkPointerDown = function checkPointerDown(e) {
     var target = getActualTarget(e);
 
-    if (containersContain(target)) {
+    if (findContainerIndex(target) >= 0) {
       // allow the click since it ocurred inside the trap
       return;
     }
@@ -375,7 +412,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         //  that was clicked, whether it's focusable or not; by setting
         //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
         //  on activation (or the configured `setReturnFocus` node)
-        returnFocus: config.returnFocusOnDeactivate && !isFocusable(target)
+        returnFocus: config.returnFocusOnDeactivate && !isFocusable(target, config.tabbableOptions)
       });
       return;
     } // This is needed for mobile devices.
@@ -395,7 +432,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
   var checkFocusIn = function checkFocusIn(e) {
     var target = getActualTarget(e);
-    var targetContained = containersContain(target); // In Firefox when you Tab out of an iframe the Document is briefly focused.
+    var targetContained = findContainerIndex(target) >= 0; // In Firefox when you Tab out of an iframe the Document is briefly focused.
 
     if (targetContained || target instanceof Document) {
       if (targetContained) {
@@ -421,11 +458,8 @@ 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 = findIndex(state.tabbableGroups, function (_ref) {
-        var container = _ref.container;
-        return container.contains(target);
-      });
-      var containerGroup = containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
+      var containerIndex = findContainerIndex(target);
+      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
 
       if (containerIndex < 0) {
         // target not found in any group: quite possible focus has escaped the trap,
@@ -445,7 +479,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           return target === firstTabbableNode;
         });
 
-        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target, false))) {
+        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
           // an exception case where the target is either the container itself, or
           //  a non-tabbable node that was given focus (i.e. tabindex is negative
           //  and user clicked on it or node was programmatically given focus)
@@ -471,7 +505,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           return target === lastTabbableNode;
         });
 
-        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target))) {
+        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
           // an exception case where the target is the container itself, or
           //  a non-tabbable node that was given focus (i.e. tabindex is negative
           //  and user clicked on it or node was programmatically given focus)
@@ -523,7 +557,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
     var target = getActualTarget(e);
 
-    if (containersContain(target)) {
+    if (findContainerIndex(target) >= 0) {
       return;
     }
 

package/dist/esm/{index-d54cae76.js → index-1602fde1.js}

@@ -410,7 +410,6 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
-                            // tslint:disable-next-line: triple-equals
                         }
                         else if (oldValue == null || elm[memberName] != n) {
                             elm[memberName] = n;
@@ -1116,9 +1115,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             promise = safeCall(instance, 'componentWillLoad');
         }
     }
-    {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
-    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1579,14 +1575,14 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
-                    //  In a webcomponent lifecyle the attributeChangedCallback runs prior to connectedCallback
+                    //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
                     //  ```html
                     //    <my-component some-attribute="some-value"></my-component>
                     //  ```
                     //
-                    //  There is an edge case where a developer sets the attribute inline on a custom element and then programatically
-                    //  changes it before it has been upgraded as shown below:
+                    //  There is an edge case where a developer sets the attribute inline on a custom element and then
+                    //  programmatically changes it before it has been upgraded as shown below:
                     //
                     //  ```html
                     //    <!-- this component has _not_ been upgraded yet -->
@@ -1596,13 +1592,13 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      el = document.querySelector("#test");
                     //      el.someAttribute = "another-value";
                     //      // upgrade component
-                    //      cutsomElements.define('my-component', MyComponent);
+                    //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
                     //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the intial value rather than "another-value"
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
                     //
                     //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
@@ -1616,6 +1612,14 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         newValue = this[propName];
                         delete this[propName];
                     }
+                    else if (prototype.hasOwnProperty(propName) &&
+                        typeof this[propName] === 'number' &&
+                        this[propName] == newValue) {
+                        // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
+                        // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
+                        // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
@@ -1702,7 +1706,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
     const ancestorComponent = hostRef.$ancestorComponent$;
     const schedule = () => scheduleUpdate(hostRef, true);
     if (ancestorComponent && ancestorComponent['s-rc']) {
-        // this is the intial load and this component it has an ancestor component
+        // this is the initial load and this component it has an ancestor component
         // but the ancestor component has NOT fired its will update lifecycle yet
         // so let's just cool our jets and wait for the ancestor to continue first
         // this will get fired off when the ancestor component
@@ -1842,71 +1846,73 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
         }
     }
-    lazyBundles.map((lazyBundle) => lazyBundle[1].map((compactMeta) => {
-        const cmpMeta = {
-            $flags$: compactMeta[0],
-            $tagName$: compactMeta[1],
-            $members$: compactMeta[2],
-            $listeners$: compactMeta[3],
-        };
-        {
-            cmpMeta.$members$ = compactMeta[2];
-        }
-        {
-            cmpMeta.$listeners$ = compactMeta[3];
-        }
-        {
-            cmpMeta.$attrsToReflect$ = [];
-        }
-        {
-            cmpMeta.$watchers$ = {};
-        }
-        const tagName = cmpMeta.$tagName$;
-        const HostElement = class extends HTMLElement {
-            // StencilLazyHost
-            constructor(self) {
-                // @ts-ignore
-                super(self);
-                self = this;
-                registerHost(self, cmpMeta);
-                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                    // this component is using shadow dom
-                    // and this browser supports shadow dom
-                    // add the read-only property "shadowRoot" to the host element
-                    // adding the shadow root build conditionals to minimize runtime
-                    {
+    lazyBundles.map((lazyBundle) => {
+        lazyBundle[1].map((compactMeta) => {
+            const cmpMeta = {
+                $flags$: compactMeta[0],
+                $tagName$: compactMeta[1],
+                $members$: compactMeta[2],
+                $listeners$: compactMeta[3],
+            };
+            {
+                cmpMeta.$members$ = compactMeta[2];
+            }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
+            {
+                cmpMeta.$watchers$ = {};
+            }
+            const tagName = cmpMeta.$tagName$;
+            const HostElement = class extends HTMLElement {
+                // StencilLazyHost
+                constructor(self) {
+                    // @ts-ignore
+                    super(self);
+                    self = this;
+                    registerHost(self, cmpMeta);
+                    if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
                         {
-                            self.attachShadow({ mode: 'open' });
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
                         }
                     }
                 }
-            }
-            connectedCallback() {
-                if (appLoadFallback) {
-                    clearTimeout(appLoadFallback);
-                    appLoadFallback = null;
+                connectedCallback() {
+                    if (appLoadFallback) {
+                        clearTimeout(appLoadFallback);
+                        appLoadFallback = null;
+                    }
+                    if (isBootstrapping) {
+                        // connectedCallback will be processed once all components have been registered
+                        deferredConnectedCallbacks.push(this);
+                    }
+                    else {
+                        plt.jmp(() => connectedCallback(this));
+                    }
                 }
-                if (isBootstrapping) {
-                    // connectedCallback will be processed once all components have been registered
-                    deferredConnectedCallbacks.push(this);
+                disconnectedCallback() {
+                    plt.jmp(() => disconnectedCallback(this));
                 }
-                else {
-                    plt.jmp(() => connectedCallback(this));
+                componentOnReady() {
+                    return getHostRef(this).$onReadyPromise$;
                 }
+            };
+            cmpMeta.$lazyBundleId$ = lazyBundle[0];
+            if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+                cmpTags.push(tagName);
+                customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
             }
-            disconnectedCallback() {
-                plt.jmp(() => disconnectedCallback(this));
-            }
-            componentOnReady() {
-                return getHostRef(this).$onReadyPromise$;
-            }
-        };
-        cmpMeta.$lazyBundleId$ = lazyBundle[0];
-        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
-            cmpTags.push(tagName);
-            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
-        }
-    }));
+        });
+    });
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');