@veracity/vui 2.20.0-rc.2 → 2.20.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.20.0-rc.2",
+  "version": "2.20.0-rc.3",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/select/selectOption.tsx

@@ -4,7 +4,7 @@ import { Checkbox } from '../checkbox'
 import { useStyleConfig, vui } from '../core'
 import { List, ListItem } from '../list'
 import { usePopoverContext } from '../popover'
-import { cs, ellipsisOverflow, MouseEvent, useCallbackRef } from '../utils'
+import { cs, ellipsisOverflow, KeyboardEvent, MouseEvent, useCallbackRef } from '../utils'
 import { useSelectContext } from './context'
 import { SelectOptionProps } from './select.types'
 
@@ -21,22 +21,22 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
 
   const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp
 
-  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
-    // Clone original click event
+  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {
     const nativeEvent = e.nativeEvent || e
     const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)
 
-    // Extend cloned event with 'value' and 'name'
     Object.defineProperty(clonedEvent, 'target', {
       writable: true,
       value: { value: valueProp, name },
     })
 
-    onClickProp?.(e)
+    onClickProp?.(e as MouseEvent<HTMLLIElement>)
     onChange?.(clonedEvent)
     !isMultiple && instance?.hide()
   })
 
+  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))
+
   return (
     <ListItem
       activeBg="skyBlue.active"
@@ -46,8 +46,10 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
       isInteractive
       isSelected={isSelected}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       ref={ref}
       selectedBg="skyBlue.selected"
+      tabIndex={0}
       title={title}
       value={valueProp}
       {...styles.option}