@abgov/web-components 1.0.0-alpha.208 → 1.0.0-alpha.209

package/package.json

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

package/web-components.es.js

@@ -6228,18 +6228,18 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[50] = list[i];
-	child_ctx[54] = i;
+	child_ctx[48] = list[i];
+	child_ctx[52] = i;
 	return child_ctx;
 }
 
 function get_each_context$7(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[50] = list[i];
+	child_ctx[48] = list[i];
 	return child_ctx;
 }
 
-// (271:2) {:else}
+// (259:2) {:else}
 function create_else_block$9(ctx) {
 	let slot;
 	let t0;
@@ -6256,7 +6256,7 @@ function create_else_block$9(ctx) {
 	let mounted;
 	let dispose;
 	let each_value_1 = /*_options*/ ctx[12];
-	const get_key = ctx => /*index*/ ctx[54];
+	const get_key = ctx => /*index*/ ctx[52];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
 		let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6411,7 +6411,7 @@ function create_else_block$9(ctx) {
 	};
 }
 
-// (252:2) {#if _native}
+// (240:2) {#if _native}
 function create_if_block$l(ctx) {
 	let select;
 	let slot;
@@ -6501,10 +6501,10 @@ function create_if_block$l(ctx) {
 	};
 }
 
-// (310:8) {#each _options as option, index (index)}
+// (298:8) {#each _options as option, index (index)}
 function create_each_block_1(key_1, ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[50].label || /*option*/ ctx[50].value) + "";
+	let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
 	let t0;
 	let t1;
 	let li_id_value;
@@ -6513,12 +6513,11 @@ function create_each_block_1(key_1, ctx) {
 	let li_data_testid_value;
 	let li_data_index_value;
 	let li_data_value_value;
-	let li_style_value;
 	let mounted;
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[31](/*option*/ ctx[50]);
+		return /*click_handler*/ ctx[31](/*option*/ ctx[48]);
 	}
 
 	return {
@@ -6528,22 +6527,22 @@ function create_each_block_1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "id", li_id_value = /*option*/ ctx[50].label);
+			attr(li, "id", li_id_value = /*option*/ ctx[48].label);
 			attr(li, "role", "option");
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[50].label || /*option*/ ctx[50].value);
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value);
 
-			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[50].value)
+			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[48].value)
 			? "true"
 			: "false");
 
 			attr(li, "class", "dropdown-item");
-			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[50].value}`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[54]);
-			attr(li, "data-value", li_data_value_value = /*option*/ ctx[50].value);
-			attr(li, "style", li_style_value = `display: ${"block"}`);
+			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[52]);
+			attr(li, "data-value", li_data_value_value = /*option*/ ctx[48].value);
+			set_style(li, "display", "block");
 			toggle_class(li, "dropdown-item--disabled", false);
-			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[54] === /*_highlightedIndex*/ ctx[18]);
-			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[50].value));
+			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[18]);
+			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[48].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -6558,40 +6557,40 @@ function create_each_block_1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = (/*option*/ ctx[50].label || /*option*/ ctx[50].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 4096 && li_id_value !== (li_id_value = /*option*/ ctx[50].label)) {
+			if (dirty[0] & /*_options*/ 4096 && li_id_value !== (li_id_value = /*option*/ ctx[48].label)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[50].label || /*option*/ ctx[50].value)) {
+			if (dirty[0] & /*_options*/ 4096 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value)) {
 				attr(li, "aria-label", li_aria_label_value);
 			}
 
-			if (dirty[0] & /*_values, _options*/ 36864 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[50].value)
+			if (dirty[0] & /*_values, _options*/ 36864 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[48].value)
 			? "true"
 			: "false")) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[50].value}`)) {
+			if (dirty[0] & /*_options*/ 4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[54])) {
+			if (dirty[0] & /*_options*/ 4096 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[52])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[50].value)) {
+			if (dirty[0] & /*_options*/ 4096 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[48].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
 			if (dirty[0] & /*_options, _highlightedIndex*/ 266240) {
-				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[54] === /*_highlightedIndex*/ ctx[18]);
+				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[18]);
 			}
 
 			if (dirty[0] & /*_values, _options*/ 36864) {
-				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[50].value));
+				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[48].value));
 			}
 		},
 		d(detaching) {
@@ -6602,10 +6601,10 @@ function create_each_block_1(key_1, ctx) {
 	};
 }
 
-// (261:6) {#each _options as option}
+// (249:6) {#each _options as option}
 function create_each_block$7(ctx) {
 	let option;
-	let t0_value = /*option*/ ctx[50].label + "";
+	let t0_value = /*option*/ ctx[48].label + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -6617,10 +6616,10 @@ function create_each_block$7(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*option*/ ctx[50].selected;
-			option.__value = option_value_value = /*option*/ ctx[50].value;
+			option.selected = option_selected_value = /*option*/ ctx[48].selected;
+			option.__value = option_value_value = /*option*/ ctx[48].value;
 			option.value = option.__value;
-			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[50].label);
+			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[48].label);
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -6628,18 +6627,18 @@ function create_each_block$7(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = /*option*/ ctx[50].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = /*option*/ ctx[48].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 4096 && option_selected_value !== (option_selected_value = /*option*/ ctx[50].selected)) {
+			if (dirty[0] & /*_options*/ 4096 && option_selected_value !== (option_selected_value = /*option*/ ctx[48].selected)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && option_value_value !== (option_value_value = /*option*/ ctx[50].value)) {
+			if (dirty[0] & /*_options*/ 4096 && option_value_value !== (option_value_value = /*option*/ ctx[48].value)) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[50].label)) {
+			if (dirty[0] & /*_options*/ 4096 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[48].label)) {
 				attr(option, "aria-label", option_aria_label_value);
 			}
 		},
@@ -6865,8 +6864,6 @@ function instance$C($$self, $$props, $$invalidate) {
 
 		// bind up/down arrows to navigate options
 		_menuEl.addEventListener("mouseover", onHighlight);
-
-		setDropdownMenuPosition();
 	}
 
 	function closeMenu() {
@@ -6876,15 +6873,6 @@ function instance$C($$self, $$props, $$invalidate) {
 		$$invalidate(17, _isMenuVisible = false);
 	}
 
-	function setDropdownMenuPosition() {
-		const dropdownRect = _el.getBoundingClientRect();
-		const menuRect = _menuEl.getBoundingClientRect();
-
-		if (window.innerHeight - dropdownRect.top < dropdownRect.height + menuRect.height) {
-			menuRect.top - dropdownRect.top + 'px';
-		}
-	}
-
 	function setHighlightedIndexToSelected() {
 		$$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
 	}
@@ -6918,6 +6906,7 @@ function instance$C($$self, $$props, $$invalidate) {
 			case " ":
 			case "Enter":
 				_isMenuVisible ? closeMenu() : showMenu();
+				_menuEl.focus();
 				e.preventDefault();
 				break;
 			case "Escape":
@@ -6927,11 +6916,10 @@ function instance$C($$self, $$props, $$invalidate) {
 				break;
 			case "ArrowDown":
 				if (e.altKey) {
-					_isMenuVisible ? closeMenu() : showMenu();
+					_isMenuVisible ? closeMenu() : showMenu(); // set menu focus to allow arrow keys to trigger scrolling within option list
 					break;
 				}
 				_handleArrowDown();
-				e.preventDefault();
 				break;
 			case "ArrowUp":
 				if (e.altKey) {
@@ -6939,7 +6927,6 @@ function instance$C($$self, $$props, $$invalidate) {
 					break;
 				}
 				_handleArrowUp();
-				e.preventDefault();
 				break;
 		}
 	};