@abgov/web-components 1.0.0-alpha.83 → 1.0.0-alpha.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.83",
+  "version": "1.0.0-alpha.84",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -2147,7 +2147,7 @@ function create_fragment$z(ctx) {
 function instance$u($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
-	let { heading } = $$props;
+	let { heading = "" } = $$props;
 	let { testid = "" } = $$props;
 
 	$$self.$$set = $$props => {
@@ -6338,7 +6338,7 @@ function create_if_block$9(ctx) {
 			attr(div4, "data-testid", "modal");
 			attr(div4, "class", "modal");
 			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[4] + "px; " + (/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";");
-			set_custom_element_data(goa_focus_trap, "open", /*open*/ ctx[1]);
+			set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, goa_focus_trap, anchor);
@@ -6413,7 +6413,7 @@ function create_if_block$9(ctx) {
 			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 8) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[3] });
 
 			if (!current || dirty & /*open*/ 2) {
-				set_custom_element_data(goa_focus_trap, "open", /*open*/ ctx[1]);
+				set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -9887,26 +9887,22 @@ function create_fragment$7(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			/*div_binding*/ ctx[3](div);
+			/*div_binding*/ ctx[4](div);
 		},
 		p: noop,
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			/*div_binding*/ ctx[3](null);
+			/*div_binding*/ 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':
@@ -9923,11 +9919,12 @@ 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);
@@ -9937,13 +9934,16 @@ function instance$6($$self, $$props, $$invalidate) {
 		document.addEventListener('focus', trapFocus, true);
 	}
 
-	function attemptFocusOnFirstDescendant(descendants) {
-		if (!descendants) return false;
+	// ====
+	// First Node 
+	// ====
+	function focusOnFirstNode(nodes) {
+		if (!nodes) return false;
 
-		for (let i = 0; i < descendants.length; i++) {
-			let descendant = descendants[i];
+		for (const node of nodes) {
+			const isFocusable = focus(node) || focusOnFirstNode(node.childNodes) || focusOnFirstNodeOfSlot(node) || focusOnFirstNodeOfShadowDOM(node);
 
-			if (attemptFocus(descendant) || attemptFocusOnFirstDescendant(descendant.childNodes) || attemptFocusOnFirstDescendantOfSlotElement(descendant) || attemptFocusOnFirstDescendantOfShadowDOM(descendant)) {
+			if (isFocusable) {
 				return true;
 			}
 		}
@@ -9951,43 +9951,35 @@ 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;
-
-		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;
+	function focusOnFirstNodeOfShadowDOM(node) {
+		var _a;
+		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;
 		}
 	}
 
-	function attemptFocusOnLastDescendant(descendants) {
-		if (!descendants) return false;
+	// ====
+	// Last Node 
+	// ====
+	function focusOnLastNode(nodes) {
+		if (!nodes) return false;
 
-		for (let i = descendants.length - 1; i >= 0; i--) {
-			let descendant = descendants[i];
+		for (let i = nodes.length - 1; i >= 0; i--) {
+			let node = nodes[i];
 
-			if (attemptFocus(descendant) || attemptFocusOnLastDescendant(descendant.childNodes) || attemptFocusOnLastDescendantOfSlotElement(descendant) || attemptFocusOnLastDescendantOfShadowDOM(descendant)) {
+			if (focus(node) || focusOnLastNode(node.childNodes) || focusOnLastNodeOfSlot(node) || focusOnLastNodeOfShadowDOM(node)) {
 				return true;
 			}
 		}
@@ -9995,59 +9987,43 @@ 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;
-
-		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;
+	function focusOnLastNodeOfShadowDOM(node) {
+		var _a;
+		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) {
 			
+		} 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
@@ -10061,15 +10037,16 @@ function instance$6($$self, $$props, $$invalidate) {
 
 		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) {
@@ -10080,26 +10057,30 @@ 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*/ 2) {
-			$$invalidate(2, isOpen = toBoolean(open));
+		if ($$self.$$.dirty & /*active*/ 2) {
+			$$invalidate(3, isActive = toBoolean(active));
 		}
 
-		if ($$self.$$.dirty & /*isOpen*/ 4) {
+		if ($$self.$$.dirty & /*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 {
@@ -10116,7 +10097,7 @@ class FocusTrap extends SvelteElement {
 			instance$6,
 			create_fragment$7,
 			safe_not_equal,
-			{ open: 1 },
+			{ active: 1 },
 			null
 		);
 
@@ -10133,15 +10114,15 @@ class FocusTrap extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["open"];
+		return ["active"];
 	}
 
-	get open() {
+	get active() {
 		return this.$$.ctx[1];
 	}
 
-	set open(open) {
-		this.$$set({ open });
+	set active(active) {
+		this.$$set({ active });
 		flush();
 	}
 }