@abgov/react-components 4.0.0-alpha.56 → 4.0.0-alpha.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.56",
+  "version": "4.0.0-alpha.58",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -16,13 +16,14 @@
     "url": "https://github.com/GovAlta/ui-components.git",
     "directory": "libs/react-components"
   },
+  "peerDependencies": {
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
   "dependencies": {
     "date-fns": "^2.29.2"
   },
   "main": "./react-components.umd.js",
   "module": "./react-components.esm.js",
-  "typings": "./index.d.ts",
-  "peerDependencies": {
-    "react": "17.0.2"
-  }
+  "typings": "./index.d.ts"
 }

package/react-components.esm.js

@@ -4796,7 +4796,7 @@ function get_each_context$4(ctx, list, i) {
   child_ctx[39] = list[i];
   child_ctx[41] = i;
   return child_ctx;
-} // (198:2) {#if isMenuVisible}
+} // (201:2) {#if isMenuVisible}
 
 
 function create_if_block$c(ctx) {
@@ -4841,7 +4841,7 @@ function create_if_block$c(ctx) {
     }
 
   };
-} // (239:4) {#each options as option, index}
+} // (242:4) {#each options as option, index}
 
 
 function create_each_block$4(ctx) {
@@ -4854,6 +4854,7 @@ function create_each_block$4(ctx) {
   let t;
   let li_id_value;
   let li_aria_label_value;
+  let li_aria_selected_value;
   let li_data_testid_value;
   let li_data_index_value;
   let li_style_value;
@@ -4876,19 +4877,24 @@ function create_each_block$4(ctx) {
       attr(li, "id", li_id_value =
       /*option*/
       ctx[39].label);
+      attr(li, "role", "option");
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
       ctx[39].label ||
       /*option*/
       ctx[39].value);
-      attr(li, "role", "option");
+      attr(li, "aria-selected", li_aria_selected_value =
+      /*_values*/
+      ctx[9].includes(
+      /*option*/
+      ctx[39].value) ? "true" : "false");
+      attr(li, "class", "goa-dropdown-option");
       attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
       ctx[41]);
-      attr(li, "class", "goa-dropdown-option");
       attr(li, "style", li_style_value = `display: ${"block"}`);
       toggle_class(li, "goa-dropdown-option--disabled", false);
       toggle_class(li, "goa-dropdown-option--tabbed",
@@ -4941,6 +4947,16 @@ function create_each_block$4(ctx) {
         attr(li, "aria-label", li_aria_label_value);
       }
 
+      if (dirty[0] &
+      /*_values, options*/
+      1536 && li_aria_selected_value !== (li_aria_selected_value =
+      /*_values*/
+      ctx[9].includes(
+      /*option*/
+      ctx[39].value) ? "true" : "false")) {
+        attr(li, "aria-selected", li_aria_selected_value);
+      }
+
       if (dirty[0] &
       /*options*/
       1024 && li_data_testid_value !== (li_data_testid_value = `${
@@ -5205,7 +5221,7 @@ function create_fragment$r(ctx) {
       }
 
       if (dirty[0] &
-      /*options, highlightedIndex, _values, onSelect*/
+      /*options, _values, highlightedIndex, onSelect*/
       534016) {
         each_value =
         /*options*/
@@ -5453,7 +5469,7 @@ function instance$p($$self, $$props, $$invalidate) {
   } // Event handlers
 
 
-  function onSelect(val, label) {
+  function onSelect(val, label, close) {
     if (_disabled) return;
     $$invalidate(11, selectedLabel = label);
 
@@ -5478,7 +5494,9 @@ function instance$p($$self, $$props, $$invalidate) {
       }));
     }
 
-    closeMenu();
+    if (close) {
+      closeMenu();
+    }
   }
 
   const onInputKeyDown = e => {
@@ -5503,23 +5521,26 @@ function instance$p($$self, $$props, $$invalidate) {
   function onMenuKeyDown(e) {
     switch (e.key) {
       case "ArrowUp":
-        if (highlightedIndex === 0) {
-          $$invalidate(13, highlightedIndex = options.length - 1);
-        } else {
+        if (highlightedIndex > 0) {
           $$invalidate(13, highlightedIndex--, highlightedIndex);
+          onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
         }
 
         e.preventDefault();
         break;
 
       case "ArrowDown":
-        $$invalidate(13, highlightedIndex = (highlightedIndex + 1) % options.length);
+        if (highlightedIndex < options.length - 1) {
+          $$invalidate(13, highlightedIndex++, highlightedIndex);
+          onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+        }
+
         e.preventDefault();
         break;
 
       case "Tab":
       case "Enter":
-        onSelect(options[highlightedIndex].value, options[highlightedIndex].label);
+        closeMenu();
         e.preventDefault();
         break;
 
@@ -5534,7 +5555,7 @@ function instance$p($$self, $$props, $$invalidate) {
     $$invalidate(13, highlightedIndex = Number(e.target.dataset.index));
   }
 
-  const click_handler = option => onSelect(option.value, option.label);
+  const click_handler = option => onSelect(option.value, option.label, true);
 
   function ul_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {

package/react-components.umd.js

@@ -4838,7 +4838,7 @@
 	  child_ctx[39] = list[i];
 	  child_ctx[41] = i;
 	  return child_ctx;
-	} // (198:2) {#if isMenuVisible}
+	} // (201:2) {#if isMenuVisible}
 
 
 	function create_if_block$c(ctx) {
@@ -4883,7 +4883,7 @@
 	    }
 
 	  };
-	} // (239:4) {#each options as option, index}
+	} // (242:4) {#each options as option, index}
 
 
 	function create_each_block$4(ctx) {
@@ -4896,6 +4896,7 @@
 	  let t;
 	  let li_id_value;
 	  let li_aria_label_value;
+	  let li_aria_selected_value;
 	  let li_data_testid_value;
 	  let li_data_index_value;
 	  let li_style_value;
@@ -4918,19 +4919,24 @@
 	      attr(li, "id", li_id_value =
 	      /*option*/
 	      ctx[39].label);
+	      attr(li, "role", "option");
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
 	      ctx[39].value);
-	      attr(li, "role", "option");
+	      attr(li, "aria-selected", li_aria_selected_value =
+	      /*_values*/
+	      ctx[9].includes(
+	      /*option*/
+	      ctx[39].value) ? "true" : "false");
+	      attr(li, "class", "goa-dropdown-option");
 	      attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
 	      attr(li, "data-index", li_data_index_value =
 	      /*index*/
 	      ctx[41]);
-	      attr(li, "class", "goa-dropdown-option");
 	      attr(li, "style", li_style_value = `display: ${"block"}`);
 	      toggle_class(li, "goa-dropdown-option--disabled", false);
 	      toggle_class(li, "goa-dropdown-option--tabbed",
@@ -4983,6 +4989,16 @@
 	        attr(li, "aria-label", li_aria_label_value);
 	      }
 
+	      if (dirty[0] &
+	      /*_values, options*/
+	      1536 && li_aria_selected_value !== (li_aria_selected_value =
+	      /*_values*/
+	      ctx[9].includes(
+	      /*option*/
+	      ctx[39].value) ? "true" : "false")) {
+	        attr(li, "aria-selected", li_aria_selected_value);
+	      }
+
 	      if (dirty[0] &
 	      /*options*/
 	      1024 && li_data_testid_value !== (li_data_testid_value = `${
@@ -5247,7 +5263,7 @@
 	      }
 
 	      if (dirty[0] &
-	      /*options, highlightedIndex, _values, onSelect*/
+	      /*options, _values, highlightedIndex, onSelect*/
 	      534016) {
 	        each_value =
 	        /*options*/
@@ -5498,7 +5514,7 @@
 	  } // Event handlers
 
 
-	  function onSelect(val, label) {
+	  function onSelect(val, label, close) {
 	    if (_disabled) return;
 	    $$invalidate(11, selectedLabel = label);
 
@@ -5523,7 +5539,9 @@
 	      }));
 	    }
 
-	    closeMenu();
+	    if (close) {
+	      closeMenu();
+	    }
 	  }
 
 	  const onInputKeyDown = e => {
@@ -5548,23 +5566,26 @@
 	  function onMenuKeyDown(e) {
 	    switch (e.key) {
 	      case "ArrowUp":
-	        if (highlightedIndex === 0) {
-	          $$invalidate(13, highlightedIndex = options.length - 1);
-	        } else {
+	        if (highlightedIndex > 0) {
 	          $$invalidate(13, highlightedIndex--, highlightedIndex);
+	          onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
 	        }
 
 	        e.preventDefault();
 	        break;
 
 	      case "ArrowDown":
-	        $$invalidate(13, highlightedIndex = (highlightedIndex + 1) % options.length);
+	        if (highlightedIndex < options.length - 1) {
+	          $$invalidate(13, highlightedIndex++, highlightedIndex);
+	          onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+	        }
+
 	        e.preventDefault();
 	        break;
 
 	      case "Tab":
 	      case "Enter":
-	        onSelect(options[highlightedIndex].value, options[highlightedIndex].label);
+	        closeMenu();
 	        e.preventDefault();
 	        break;
 
@@ -5579,7 +5600,7 @@
 	    $$invalidate(13, highlightedIndex = Number(e.target.dataset.index));
 	  }
 
-	  const click_handler = option => onSelect(option.value, option.label);
+	  const click_handler = option => onSelect(option.value, option.label, true);
 
 	  function ul_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {