@veracity/vui 2.20.0-rc.2 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.20.0-rc.2",
+  "version": "2.20.0",
   "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/header/headerNotifications.tsx

@@ -48,7 +48,6 @@ export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, re
       {children ?? (
         <>
           <Button.Icon name="falBell" />
-
           {count > 0 && (
             <Badge px={count < 9 ? '0' : '4px'} right={count < 9 ? 1 : 0}>
               {count < 100 ? count : '99+'}

package/src/notification/notificationButton.tsx

@@ -22,6 +22,7 @@ export const NotificationButton = vui<'button', ButtonProps>((props, ref) => {
       px="12px"
       py="6px"
       ref={ref}
+      size="md"
       {...styles.button}
       variant={variant}
       {...rest}

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}

package/src/tutorial/tutorialCard.tsx

@@ -126,7 +126,7 @@ export function TutorialCard({
               </Button>
             )}
             {!!onAction && (
-              <Button mr={6} onClick={onAction} variant="primaryLight">
+              <Button mr={9} onClick={onAction} variant="primaryLight">
                 {actionLabel}
               </Button>
             )}