@abgov/jsonforms-components 1.40.2 → 1.40.3

package/index.esm.js

@@ -4424,6 +4424,7 @@ const ESCAPE_KEY = 'Escape';
 const ARROW_DOWN_KEY = 'ArrowDown';
 const ARROW_UP_KEY = 'ArrowUp';
 const TAB_KEY = 'Tab';
+const SPACE_KEY = ' ';
 
 let _$7 = t => t,
   _t$7,
@@ -4470,7 +4471,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
   }
   &:hover {
     background-color: var(--goa-color-interactive-hover) !important;
-    color: white !important;
+    color: var(--goa-color-text-light) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
 const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
@@ -4497,7 +4498,7 @@ const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
   }
   &:focus-within {
     caret-color: transparent;
-    color: ${0} !important;
+    color: 'var(--goa-color-text-light) !important';
     background-color: var(--goa-color-interactive-hover) !important;
   }
   .dropDownListItem:focus-visible {
@@ -4505,7 +4506,7 @@ const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
     outline: none !important;
     color: ${0};
   }
-`), p => p.isSelected ? 'white' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'white' : 'var(--goa-color-interactive-hover)', p => p.isSelected ? 'white' : 'var(--goa-color-interactive-hover) !important');
+`), p => p.isSelected ? 'var(--goa-color-text-light)' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-text-light)' : 'var(--goa-color-interactive-hover) !important');
 
 const isValidKey = keyCode => {
   if (keyCode === 'Shift' || keyCode === 'Alt') return false;
@@ -4591,7 +4592,7 @@ const Dropdown = props => {
   /* istanbul ignore next */
   const handleKeyDown = e => {
     var _a, _b, _c;
-    if (e.key === ENTER_KEY) {
+    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
       setIsOpen(previousIsOpen => !previousIsOpen);
       const el = document.getElementById(`${PREFIX}-${label}-${(_a = items.at(0)) === null || _a === void 0 ? void 0 : _a.value}`);
       setElementFocus(e, el, false);
@@ -4628,7 +4629,7 @@ const Dropdown = props => {
   };
   const handDropDownItemOnKeyDown = (e, item) => {
     var _a, _b, _c, _d;
-    if (e.key === ENTER_KEY) {
+    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
       updateDropDownData(item);
       const inputEl = document.getElementById(`${id}-input`);
       if (inputEl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.40.2",
+  "version": "1.40.3",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Components/DropDownTypes.d.ts

@@ -32,3 +32,6 @@ export declare const ESCAPE_KEY = "Escape";
 export declare const ARROW_DOWN_KEY = "ArrowDown";
 export declare const ARROW_UP_KEY = "ArrowUp";
 export declare const TAB_KEY = "Tab";
+export declare const SPACE_KEY = " ";
+export declare const ALT_KEY = "Alt";
+export declare const SHIFT_KEY = "Shift";