@abgov/react-components 4.0.0-alpha.26 → 4.0.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.26",
+  "version": "4.0.0-alpha.27",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -2594,7 +2594,7 @@ function instance$u($$self, $$props, $$invalidate) {
     type
   } = $$props;
   let {
-    heading
+    heading = ""
   } = $$props;
   let {
     testid = ""
@@ -7664,7 +7664,7 @@ function create_if_block$9(ctx) {
       ctx[2] && `--width: ${
       /*width*/
       ctx[2]};`) + ";");
-      set_custom_element_data(goa_focus_trap, "open",
+      set_custom_element_data(goa_focus_trap, "active",
       /*open*/
       ctx[1]);
     },
@@ -7765,7 +7765,7 @@ function create_if_block$9(ctx) {
       if (!current || dirty &
       /*open*/
       2) {
-        set_custom_element_data(goa_focus_trap, "open",
+        set_custom_element_data(goa_focus_trap, "active",
         /*open*/
         ctx[1]);
       }
@@ -11989,7 +11989,7 @@ function create_fragment$7(ctx) {
       insert(target, div, anchor);
       /*div_binding*/
 
-      ctx[3](div);
+      ctx[4](div);
     },
 
     p: noop,
@@ -12000,20 +12000,16 @@ function create_fragment$7(ctx) {
       if (detaching) detach(div);
       /*div_binding*/
 
-      ctx[3](null);
+      ctx[4](null);
     }
 
   };
 }
 
 function isFocusable(element) {
-  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
-    return true;
-  }
-
-  if (element.disabled) {
-    return false;
-  }
+  const isTabbable = element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null;
+  if (isTabbable) return true;
+  if (element.disabled) return false;
 
   switch (element.nodeName) {
     case 'A':
@@ -12033,13 +12029,14 @@ function isFocusable(element) {
 }
 
 function instance$6($$self, $$props, $$invalidate) {
-  let isOpen;
+  let isActive;
+  let {
+    active
+  } = $$props;
   let ignoreFocusChanges = false;
   let lastFocus;
   let element;
-  let {
-    open
-  } = $$props;
+  let hasListeners = false;
 
   function removeListeners() {
     document.removeEventListener('focus', trapFocus, true);
@@ -12047,15 +12044,18 @@ function instance$6($$self, $$props, $$invalidate) {
 
   function addListeners() {
     document.addEventListener('focus', trapFocus, true);
-  }
+  } // ====
+  // First Node 
+  // ====
 
-  function attemptFocusOnFirstDescendant(descendants) {
-    if (!descendants) return false;
 
-    for (let i = 0; i < descendants.length; i++) {
-      let descendant = descendants[i];
+  function focusOnFirstNode(nodes) {
+    if (!nodes) return false;
 
-      if (attemptFocus(descendant) || attemptFocusOnFirstDescendant(descendant.childNodes) || attemptFocusOnFirstDescendantOfSlotElement(descendant) || attemptFocusOnFirstDescendantOfShadowDOM(descendant)) {
+    for (const node of nodes) {
+      const isFocusable = focus(node) || focusOnFirstNode(node.childNodes) || focusOnFirstNodeOfSlot(node) || focusOnFirstNodeOfShadowDOM(node);
+
+      if (isFocusable) {
         return true;
       }
     }
@@ -12063,37 +12063,34 @@ function instance$6($$self, $$props, $$invalidate) {
     return false;
   }
 
-  function attemptFocusOnFirstDescendantOfSlotElement(node) {
-    var _a;
-
-    if (node instanceof HTMLSlotElement) {
-      let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0 ? void 0 : _a.assignedNodes();
+  function focusOnFirstNodeOfSlot(node) {
+    if (!(node instanceof HTMLSlotElement)) return false;
 
-      if (attemptFocusOnFirstDescendant(assingedNodesOfSlotElement)) {
-        return true;
-      }
+    if (focusOnFirstNode(node.assignedNodes())) {
+      return true;
     }
   }
 
-  function attemptFocusOnFirstDescendantOfShadowDOM(node) {
-    var _a, _b;
+  function focusOnFirstNodeOfShadowDOM(node) {
+    var _a;
 
-    if (node instanceof HTMLElement) {
-      let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.childNodes;
+    if (!(node instanceof HTMLElement)) return false;
 
-      if (attemptFocusOnFirstDescendant(childNodesOfShadowRoot)) {
-        return true;
-      }
+    if (focusOnFirstNode((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childNodes)) {
+      return true;
     }
-  }
+  } // ====
+  // Last Node 
+  // ====
 
-  function attemptFocusOnLastDescendant(descendants) {
-    if (!descendants) return false;
 
-    for (let i = descendants.length - 1; i >= 0; i--) {
-      let descendant = descendants[i];
+  function focusOnLastNode(nodes) {
+    if (!nodes) return false;
 
-      if (attemptFocus(descendant) || attemptFocusOnLastDescendant(descendant.childNodes) || attemptFocusOnLastDescendantOfSlotElement(descendant) || attemptFocusOnLastDescendantOfShadowDOM(descendant)) {
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      let node = nodes[i];
+
+      if (focus(node) || focusOnLastNode(node.childNodes) || focusOnLastNodeOfSlot(node) || focusOnLastNodeOfShadowDOM(node)) {
         return true;
       }
     }
@@ -12101,67 +12098,57 @@ function instance$6($$self, $$props, $$invalidate) {
     return false;
   }
 
-  function attemptFocusOnLastDescendantOfSlotElement(node) {
-    var _a;
-
-    if (node instanceof HTMLSlotElement) {
-      let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0 ? void 0 : _a.assignedNodes();
+  function focusOnLastNodeOfSlot(node) {
+    if (!(node instanceof HTMLSlotElement)) return false;
 
-      if (attemptFocusOnLastDescendant(assingedNodesOfSlotElement)) {
-        return true;
-      }
+    if (focusOnLastNode(node.assignedNodes())) {
+      return true;
     }
   }
 
-  function attemptFocusOnLastDescendantOfShadowDOM(node) {
-    var _a, _b;
+  function focusOnLastNodeOfShadowDOM(node) {
+    var _a;
 
-    if (node instanceof HTMLElement) {
-      let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.childNodes;
+    if (!(node instanceof HTMLElement)) return false;
 
-      if (attemptFocusOnLastDescendant(childNodesOfShadowRoot)) {
-        return true;
-      }
+    if (focusOnLastNode((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childNodes)) {
+      return true;
     }
   }
 
-  function attemptFocus(element) {
-    if (!isFocusable(element)) {
-      return false;
-    }
-
-    ignoreFocusChanges = true;
+  function focus(element) {
+    if (!isFocusable(element)) return false;
 
     try {
+      ignoreFocusChanges = true;
       element.focus();
-    } catch (e) {}
+    } catch (e) {} finally {
+      ignoreFocusChanges = false;
+    }
 
-    ignoreFocusChanges = false;
     return document.activeElement === element;
   }
 
   function trapFocus(event) {
     var _a;
 
-    if (ignoreFocusChanges) {
-      return;
-    }
-
+    if (ignoreFocusChanges) return;
     const slotElements = (_a = element.firstChild) === null || _a === void 0 ? void 0 : _a.assignedElements();
     if (!(slotElements === null || slotElements === void 0 ? void 0 : slotElements.length)) return;
     const contentRootElement = slotElements[0];
 
     if (event.composedPath().includes(contentRootElement)) {
       lastFocus = event.target;
-    } else {
-      attemptFocusOnFirstDescendant(contentRootElement.childNodes);
+      return;
+    }
 
-      if (lastFocus == document.activeElement) {
-        attemptFocusOnLastDescendant(contentRootElement.childNodes);
-      }
+    focusOnFirstNode(contentRootElement.childNodes);
 
-      lastFocus = document.activeElement;
+    if (lastFocus == document.activeElement) {
+      focusOnLastNode(contentRootElement.childNodes);
     }
+
+    lastFocus = document.activeElement;
   }
 
   function div_binding($$value) {
@@ -12172,30 +12159,34 @@ function instance$6($$self, $$props, $$invalidate) {
   }
 
   $$self.$$set = $$props => {
-    if ('open' in $$props) $$invalidate(1, open = $$props.open);
+    if ('active' in $$props) $$invalidate(1, active = $$props.active);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
-    /*open*/
+    /*active*/
     2) {
-      $$invalidate(2, isOpen = toBoolean(open));
+      $$invalidate(3, isActive = toBoolean(active));
     }
 
     if ($$self.$$.dirty &
-    /*isOpen*/
-    4) {
+    /*isActive, hasListeners*/
+    12) {
       {
-        if (isOpen) {
+        if (isActive && !hasListeners) {
           addListeners();
-        } else {
+          $$invalidate(2, hasListeners = true);
+        }
+
+        if (!isActive && hasListeners) {
           removeListeners();
+          $$invalidate(2, hasListeners = false);
         }
       }
     }
   };
 
-  return [element, open, isOpen, div_binding];
+  return [element, active, hasListeners, isActive, div_binding];
 }
 
 class FocusTrap extends SvelteElement {
@@ -12206,7 +12197,7 @@ class FocusTrap extends SvelteElement {
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$6, create_fragment$7, safe_not_equal, {
-      open: 1
+      active: 1
     }, null);
 
     if (options) {
@@ -12222,16 +12213,16 @@ class FocusTrap extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["open"];
+    return ["active"];
   }
 
-  get open() {
+  get active() {
     return this.$$.ctx[1];
   }
 
-  set open(open) {
+  set active(active) {
     this.$$set({
-      open
+      active
     });
     flush();
   }

package/react-components.umd.js

@@ -2650,7 +2650,7 @@
 	    type
 	  } = $$props;
 	  let {
-	    heading
+	    heading = ""
 	  } = $$props;
 	  let {
 	    testid = ""
@@ -7707,7 +7707,7 @@
 	      ctx[2] && `--width: ${
       /*width*/
       ctx[2]};`) + ";");
-	      set_custom_element_data(goa_focus_trap, "open",
+	      set_custom_element_data(goa_focus_trap, "active",
 	      /*open*/
 	      ctx[1]);
 	    },
@@ -7808,7 +7808,7 @@
 	      if (!current || dirty &
 	      /*open*/
 	      2) {
-	        set_custom_element_data(goa_focus_trap, "open",
+	        set_custom_element_data(goa_focus_trap, "active",
 	        /*open*/
 	        ctx[1]);
 	      }
@@ -12035,7 +12035,7 @@
 	      insert(target, div, anchor);
 	      /*div_binding*/
 
-	      ctx[3](div);
+	      ctx[4](div);
 	    },
 
 	    p: noop,
@@ -12046,20 +12046,16 @@
 	      if (detaching) detach(div);
 	      /*div_binding*/
 
-	      ctx[3](null);
+	      ctx[4](null);
 	    }
 
 	  };
 	}
 
 	function isFocusable(element) {
-	  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
-	    return true;
-	  }
-
-	  if (element.disabled) {
-	    return false;
-	  }
+	  const isTabbable = element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null;
+	  if (isTabbable) return true;
+	  if (element.disabled) return false;
 
 	  switch (element.nodeName) {
 	    case 'A':
@@ -12079,13 +12075,14 @@
 	}
 
 	function instance$6($$self, $$props, $$invalidate) {
-	  let isOpen;
+	  let isActive;
+	  let {
+	    active
+	  } = $$props;
 	  let ignoreFocusChanges = false;
 	  let lastFocus;
 	  let element;
-	  let {
-	    open
-	  } = $$props;
+	  let hasListeners = false;
 
 	  function removeListeners() {
 	    document.removeEventListener('focus', trapFocus, true);
@@ -12093,15 +12090,18 @@
 
 	  function addListeners() {
 	    document.addEventListener('focus', trapFocus, true);
-	  }
+	  } // ====
+	  // First Node 
+	  // ====
 
-	  function attemptFocusOnFirstDescendant(descendants) {
-	    if (!descendants) return false;
 
-	    for (let i = 0; i < descendants.length; i++) {
-	      let descendant = descendants[i];
+	  function focusOnFirstNode(nodes) {
+	    if (!nodes) return false;
 
-	      if (attemptFocus(descendant) || attemptFocusOnFirstDescendant(descendant.childNodes) || attemptFocusOnFirstDescendantOfSlotElement(descendant) || attemptFocusOnFirstDescendantOfShadowDOM(descendant)) {
+	    for (const node of nodes) {
+	      const isFocusable = focus(node) || focusOnFirstNode(node.childNodes) || focusOnFirstNodeOfSlot(node) || focusOnFirstNodeOfShadowDOM(node);
+
+	      if (isFocusable) {
 	        return true;
 	      }
 	    }
@@ -12109,37 +12109,34 @@
 	    return false;
 	  }
 
-	  function attemptFocusOnFirstDescendantOfSlotElement(node) {
-	    var _a;
-
-	    if (node instanceof HTMLSlotElement) {
-	      let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0 ? void 0 : _a.assignedNodes();
+	  function focusOnFirstNodeOfSlot(node) {
+	    if (!(node instanceof HTMLSlotElement)) return false;
 
-	      if (attemptFocusOnFirstDescendant(assingedNodesOfSlotElement)) {
-	        return true;
-	      }
+	    if (focusOnFirstNode(node.assignedNodes())) {
+	      return true;
 	    }
 	  }
 
-	  function attemptFocusOnFirstDescendantOfShadowDOM(node) {
-	    var _a, _b;
+	  function focusOnFirstNodeOfShadowDOM(node) {
+	    var _a;
 
-	    if (node instanceof HTMLElement) {
-	      let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.childNodes;
+	    if (!(node instanceof HTMLElement)) return false;
 
-	      if (attemptFocusOnFirstDescendant(childNodesOfShadowRoot)) {
-	        return true;
-	      }
+	    if (focusOnFirstNode((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childNodes)) {
+	      return true;
 	    }
-	  }
+	  } // ====
+	  // Last Node 
+	  // ====
 
-	  function attemptFocusOnLastDescendant(descendants) {
-	    if (!descendants) return false;
 
-	    for (let i = descendants.length - 1; i >= 0; i--) {
-	      let descendant = descendants[i];
+	  function focusOnLastNode(nodes) {
+	    if (!nodes) return false;
 
-	      if (attemptFocus(descendant) || attemptFocusOnLastDescendant(descendant.childNodes) || attemptFocusOnLastDescendantOfSlotElement(descendant) || attemptFocusOnLastDescendantOfShadowDOM(descendant)) {
+	    for (let i = nodes.length - 1; i >= 0; i--) {
+	      let node = nodes[i];
+
+	      if (focus(node) || focusOnLastNode(node.childNodes) || focusOnLastNodeOfSlot(node) || focusOnLastNodeOfShadowDOM(node)) {
 	        return true;
 	      }
 	    }
@@ -12147,67 +12144,57 @@
 	    return false;
 	  }
 
-	  function attemptFocusOnLastDescendantOfSlotElement(node) {
-	    var _a;
-
-	    if (node instanceof HTMLSlotElement) {
-	      let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0 ? void 0 : _a.assignedNodes();
+	  function focusOnLastNodeOfSlot(node) {
+	    if (!(node instanceof HTMLSlotElement)) return false;
 
-	      if (attemptFocusOnLastDescendant(assingedNodesOfSlotElement)) {
-	        return true;
-	      }
+	    if (focusOnLastNode(node.assignedNodes())) {
+	      return true;
 	    }
 	  }
 
-	  function attemptFocusOnLastDescendantOfShadowDOM(node) {
-	    var _a, _b;
+	  function focusOnLastNodeOfShadowDOM(node) {
+	    var _a;
 
-	    if (node instanceof HTMLElement) {
-	      let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.childNodes;
+	    if (!(node instanceof HTMLElement)) return false;
 
-	      if (attemptFocusOnLastDescendant(childNodesOfShadowRoot)) {
-	        return true;
-	      }
+	    if (focusOnLastNode((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childNodes)) {
+	      return true;
 	    }
 	  }
 
-	  function attemptFocus(element) {
-	    if (!isFocusable(element)) {
-	      return false;
-	    }
-
-	    ignoreFocusChanges = true;
+	  function focus(element) {
+	    if (!isFocusable(element)) return false;
 
 	    try {
+	      ignoreFocusChanges = true;
 	      element.focus();
-	    } catch (e) {}
+	    } catch (e) {} finally {
+	      ignoreFocusChanges = false;
+	    }
 
-	    ignoreFocusChanges = false;
 	    return document.activeElement === element;
 	  }
 
 	  function trapFocus(event) {
 	    var _a;
 
-	    if (ignoreFocusChanges) {
-	      return;
-	    }
-
+	    if (ignoreFocusChanges) return;
 	    const slotElements = (_a = element.firstChild) === null || _a === void 0 ? void 0 : _a.assignedElements();
 	    if (!(slotElements === null || slotElements === void 0 ? void 0 : slotElements.length)) return;
 	    const contentRootElement = slotElements[0];
 
 	    if (event.composedPath().includes(contentRootElement)) {
 	      lastFocus = event.target;
-	    } else {
-	      attemptFocusOnFirstDescendant(contentRootElement.childNodes);
+	      return;
+	    }
 
-	      if (lastFocus == document.activeElement) {
-	        attemptFocusOnLastDescendant(contentRootElement.childNodes);
-	      }
+	    focusOnFirstNode(contentRootElement.childNodes);
 
-	      lastFocus = document.activeElement;
+	    if (lastFocus == document.activeElement) {
+	      focusOnLastNode(contentRootElement.childNodes);
 	    }
+
+	    lastFocus = document.activeElement;
 	  }
 
 	  function div_binding($$value) {
@@ -12218,30 +12205,34 @@
 	  }
 
 	  $$self.$$set = $$props => {
-	    if ('open' in $$props) $$invalidate(1, open = $$props.open);
+	    if ('active' in $$props) $$invalidate(1, active = $$props.active);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
-	    /*open*/
+	    /*active*/
 	    2) {
-	      $$invalidate(2, isOpen = toBoolean(open));
+	      $$invalidate(3, isActive = toBoolean(active));
 	    }
 
 	    if ($$self.$$.dirty &
-	    /*isOpen*/
-	    4) {
+	    /*isActive, hasListeners*/
+	    12) {
 	      {
-	        if (isOpen) {
+	        if (isActive && !hasListeners) {
 	          addListeners();
-	        } else {
+	          $$invalidate(2, hasListeners = true);
+	        }
+
+	        if (!isActive && hasListeners) {
 	          removeListeners();
+	          $$invalidate(2, hasListeners = false);
 	        }
 	      }
 	    }
 	  };
 
-	  return [element, open, isOpen, div_binding];
+	  return [element, active, hasListeners, isActive, div_binding];
 	}
 
 	class FocusTrap extends SvelteElement {
@@ -12252,7 +12243,7 @@
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$6, create_fragment$7, safe_not_equal, {
-	      open: 1
+	      active: 1
 	    }, null);
 
 	    if (options) {
@@ -12268,16 +12259,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["open"];
+	    return ["active"];
 	  }
 
-	  get open() {
+	  get active() {
 	    return this.$$.ctx[1];
 	  }
 
-	  set open(open) {
+	  set active(active) {
 	    this.$$set({
-	      open
+	      active
 	    });
 	    flush();
 	  }