@veracity/vui 2.18.3 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.18.3",
+  "version": "2.19.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/button/button.tsx

@@ -55,7 +55,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     dropDownIcon = 'falAngleDown',
     icon,
     iconLeft,
-    iconRight,
+    iconRight: iconRightProp,
     isActive,
     isDropDown,
     isElevated,
@@ -77,6 +77,8 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
 
   const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {}
 
+  const iconRight = isDropDown ? 'falAngleDown' : iconRightProp
+
   const variant = filterUndefined({
     variant: states[state]?.variant ?? variantProp,
   })
@@ -138,7 +140,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         focusRing={3}
         h={h}
         pl={pl}
-        pr={isDropDown ? 0 : pr}
+        pr={pr}
         ref={ref}
         title={title || ariaLabel}
         type="button"
@@ -159,19 +161,22 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
           {!icon && (
             <>
               {isLoading ? (
-                <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} {...loadingIconProps} />
+                <ButtonIcon mr={iconLeftMr} {...loadingIconProps} />
               ) : isString(iconLeft) ? (
-                <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} name={iconLeft} />
+                <ButtonIcon mr={iconLeftMr} name={iconLeft} />
               ) : (
                 iconLeft
               )}
 
               {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
 
-              {isString(iconRight) ? <ButtonIcon ml={iconRightMl} name={iconRight} /> : iconRight}
+              {isString(iconRight) ? (
+                <ButtonIcon ml={!children && !text ? 0 : iconRightMl} name={iconRight} />
+              ) : (
+                iconRight
+              )}
             </>
           )}
-          {isDropDown && <ButtonIcon name={dropDownIcon} />}
         </Content>
       </ButtonBase>
     </ButtonProvider>

package/src/checkbox/checkbox.tsx

@@ -39,11 +39,11 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: ${checkboxColors.disabled};
+    color: ${checkboxColors.disabledText};
     cursor: not-allowed;
 
     .vui-checkboxControl {
-      color: ${checkboxColors.disabled};
+      color: ${checkboxColors.disabledText};
     }
   }
 `
@@ -81,7 +81,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
 
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
-  const controlMr = children || label ? '12px' : 0
+  const controlMr = children || label ? 1 : 0
   const color = controlColor ? controlColor : checkboxColors.main
   const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
   const isLongLabel = label && label?.length >= 60

package/src/checkbox/consts.ts

@@ -1,5 +1,6 @@
 export const checkboxColors = {
-  main: 'seaBlue.main',
-  hover: 'seaBlue.40',
-  disabled: 'sandstone.main',
-}
+  main: 'sandstone.60',
+  hover: 'sandstone.60',
+  disabled: 'sandstone.60',
+  disabledText: 'sandstone.60',
+} as const

package/src/input/consts.ts

@@ -7,17 +7,17 @@ export const inputColors = {
   helpText: 'sandstone.30',
   icons: 'seaBlue.main',
   disabled: 'sandstone.95',
-  focus: 'seaBlue.main',
+  focus: 'focusColor',
   error: 'energyRed.45',
   loading: 'seaBlue.80',
   success: 'landGreen.35',
-}
+} as const
 
 export const stateIcons = {
   error: 'falExclamationTriangle',
   loading: 'fadSpinnerThird',
   success: 'falCheck',
-}
+} as const
 
 export const inputStateMapping: InputStateMapping = {
   error: {
@@ -49,11 +49,18 @@ export const displayValueOnlyTextSize = {
   md: 'sm',
   lg: 'md',
   xl: 'lg',
-}
+} as const
 
 export const clearIconSize = {
   sm: 'sm',
   md: 'sm',
   lg: 'sm',
   xl: 'md',
-}
+} as const
+
+export const helpTextSize = {
+  sm: 'sm',
+  md: 'sm',
+  lg: 'md',
+  xl: 'md',
+} as const

package/src/input/helpText.tsx

@@ -8,7 +8,7 @@ import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
-/** Displaying help text bellow the input. */
+/** Displaying help text below the input. */
 export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const { className, children, isError, ...rest } = props
   const inputProps = useInputContext()
@@ -23,7 +23,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
       className={cs('vui-inputHelpText', className)}
       color={color}
       display="flex"
-      py={1}
+      pt={0.5}
       ref={ref}
       {...styles.helpText}
       {...rest}

package/src/input/input.tsx

@@ -5,7 +5,7 @@ import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import AutoCompletePopover from './autoCompletePopover'
-import { clearIconSize, displayValueOnlyTextSize, inputColors, inputStateMapping } from './consts'
+import { clearIconSize, displayValueOnlyTextSize, helpTextSize, inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -47,6 +47,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     autoCompleteOptions,
     autoCompleteMaxHeight,
     autoFocus,
+    ariaLabel,
     children,
     className,
     defaultValue,
@@ -151,6 +152,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
                 ref={inputRef}
                 {...{
                   autoFocus,
+                  ariaLabel,
                   defaultValue,
                   disabled,
                   id,
@@ -182,7 +184,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
                 icon="falTimes"
                 mr={0.5}
                 onClick={onClear}
-                size={clearIconSize[size] as 'md' | 'sm' | 'lg'}
+                size={clearIconSize[size]}
                 title="Clear"
               />
             )}
@@ -202,8 +204,12 @@ export const Input = vui<'div', InputProps>((props, ref) => {
         </AutoCompletePopover>
       )}
 
-      {!!helpText && <HelpText>{helpText}</HelpText>}
-      {!!errorText && <HelpText isError>{errorText}</HelpText>}
+      {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}
+      {!!errorText && (
+        <HelpText isError size={helpTextSize[size]}>
+          {errorText}
+        </HelpText>
+      )}
     </InputProvider>
   )
 }) as VuiComponent<'div', InputProps> & {

package/src/input/input.types.ts

@@ -7,7 +7,6 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
 
 export type InputInputProps = PropsOf<'input', SystemProps>
-
 export type InputProps = SystemProps &
   ThemingProps<'Input'> & {
     /** Allow to remove input content with clear icon. */
@@ -20,14 +19,18 @@ export type InputProps = SystemProps &
     autoCompleteMaxHeight?: number
     /** Passed to the inner input. */
     autoFocus?: boolean
+    /** ARIA label for the input element. */
+    ariaLabel?: string
     /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'
     /** Passed to the inner input. */
     defaultValue?: number | string
     /** Passed to the inner input. */
     disabled?: boolean
-    /** Socket displaying error text bellow an input. */
+    /** Socket displaying error text below an input. */
     errorText?: string | React.ReactNode
+    /** Socket displaying help text below an input. */
+    helpText?: React.ReactNode | string
     /** Socket displaying an icon on the left. */
     iconLeft?: IconProp | JSX.Element
     /** Socket displaying an icon on the right. */
@@ -44,8 +47,6 @@ export type InputProps = SystemProps &
     itemLeft?: React.ReactNode
     /** Socket displaying a custom element on the right. */
     itemRight?: React.ReactNode
-    /** Socket displaying help text bellow an input. */
-    helpText?: React.ReactNode | string
     /** Passed to the inner input. */
     max?: number | string
     /** Passed to the inner input. */

package/src/input/inputInput.tsx

@@ -25,18 +25,18 @@ export const InputInputBase = styled.input`
 
 /** Displays an input element within the Input component. */
 export const InputInput = vui<'input', InputInputProps>((props, ref) => {
-  const { className, autoComplete, ...rest } = props
+  const { type, className, autoComplete, ...rest } = props
   const inputProps = useInputContext()
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
   const aliasedProps = filterUndefined({
     'aria-disabled': mergedProps.disabled,
+    'aria-label': mergedProps.ariaLabel,
   })
 
   return (
     <InputInputBase
-      aria-label="input-text"
       autoComplete={autoComplete}
       className={cs('vui-inputInput', className)}
       ref={ref}

package/src/input/theme.ts

@@ -2,7 +2,7 @@ import { inputColors } from './consts'
 
 const baseStyle = {
   container: {
-    focusWithinRing: 2,
+    focusWithinRing: 3,
     color: inputColors.inputText,
   },
   input: {

package/src/list/list.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react'
+import { is } from '@xstyled/util'
+import React, { useEffect, useMemo, useRef } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isArray, isReactText } from '../utils'
@@ -10,6 +11,10 @@ import ListIcon from './listIcon'
 import ListItem from './listItem'
 import ListText from './listText'
 
+const clickKeys = ['Enter', ' ']
+const nextKeys = ['ArrowDown', 'Tab']
+const prevKeys = ['ArrowUp']
+
 export const ListBase = styled.ulBox``
 
 /** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
@@ -19,11 +24,46 @@ export const List = vui<'ul', ListProps>((props, ref) => {
 
   const context = useMemo(() => filterUndefined({ isInteractive, size, variant }), [isInteractive, size, variant])
 
+  const listRef = useRef<HTMLUListElement>(null)
+
+  const [_, setActive] = React.useState(-1)
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if ([...prevKeys, ...nextKeys, ...clickKeys].includes(event.key)) {
+      event.preventDefault()
+      setActive((a: number) => {
+        let active = a
+        if (listRef.current) {
+          const allChildren = Array.from(listRef.current.childNodes)
+          const tabIndexedChildren = allChildren.filter(child => (child as HTMLElement).tabIndex === 0)
+
+          if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1) active++
+          if (prevKeys.includes(event.key)) active = active > 0 ? active - 1 : 0
+
+          tabIndexedChildren.forEach((node, index) => {
+            if (index === active) {
+              if (clickKeys.includes(event.key)) (node as HTMLElement)?.click()
+              else (node as HTMLElement)?.focus()
+            }
+          })
+        }
+        return active
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (isInteractive) document.addEventListener('keydown', onKeydown)
+
+    return () => {
+      if (isInteractive) document.removeEventListener('keydown', onKeydown)
+    }
+  }, [])
+
   return (
     <ListProvider value={context}>
-      <ListBase className={cs('vui-list', className)} ref={ref} {...styles.container} {...rest}>
+      <ListBase className={cs('vui-list', className)} ref={ref || listRef} {...styles.container} {...rest}>
         {isReactText(heading) ? <ListHeading text={heading} /> : heading}
-
         {children ??
           (isArray<ListItemProps>(items)
             ? items.map(({ key, ...props }, index) => <ListItem key={key ?? index} {...props} />)

package/src/menu/menuItem.tsx

@@ -18,16 +18,7 @@ export const MenuItem = vui<'li', ListItemProps>((props, ref) => {
     closeOnSelect && instance?.hide()
   })
 
-  return (
-    <ListItem
-      className={cs('vui-menuItem', className)}
-      isInteractive
-      onClick={onClick}
-      ref={ref}
-      {...styles.item}
-      {...rest}
-    />
-  )
+  return <ListItem className={cs('vui-menuItem', className)} onClick={onClick} ref={ref} {...styles.item} {...rest} />
 })
 
 MenuItem.displayName = 'MenuItem'

package/src/menu/menuList.tsx

@@ -20,6 +20,7 @@ export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
         {slotTop}
         <List
           className={cs('vui-menuList', className)}
+          isInteractive
           py={1}
           ref={ref}
           w="100%"

package/src/radio/consts.ts

@@ -1,5 +1,6 @@
 export const radioColors = {
-  main: 'seaBlue.main',
-  hover: 'seaBlue.40',
-  disabled: 'sandstone.main',
-}
+  main: 'sandstone.60',
+  hover: 'sandstone.60',
+  disabled: 'sandstone.60',
+  disabledText: 'sandstone.60',
+} as const

package/src/radio/radio.tsx

@@ -40,7 +40,7 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: ${radioColors.disabled};
+    color: ${radioColors.disabledText};
     cursor: not-allowed;
 
     .vui-radioControl {

package/src/select/selectButton.tsx

@@ -18,8 +18,16 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
   const styles = useStyleConfig('Select', useSelectContext())
 
   const text = valueText || placeholder
-  const textColor = disabled ? 'sandstone.10' : !valueText ? 'sandstone.10' : undefined
-  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
+
+  const disabledProps = disabled
+    ? {
+        activeBg: 'sandstone.79',
+        cursor: 'not-allowed',
+        backgroundColor: 'sandstone.79',
+        borderColor: 'sandstone.79',
+        hoverBg: 'sandstone.79',
+      }
+    : undefined
 
   const readOnlyProps = readOnly
     ? {
@@ -31,14 +39,17 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
         hoverBg: 'sandstone.95',
         opacity: 1,
       }
-    : {}
+    : undefined
 
   const isInvalidProps = isInvalid
     ? {
         borderColor: 'energyRed.45',
         hoverBorderColor: 'energyRed.45',
       }
-    : {}
+    : undefined
+
+  const textColor = valueText ? undefined : 'sandstone.10'
+  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
 
   return (
     <PopoverTrigger
@@ -59,6 +70,7 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
       }
       userSelect="text"
       {...styles.button}
+      {...disabledProps}
       {...readOnlyProps}
       {...isInvalidProps}
       {...rest}
@@ -67,5 +79,4 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
 })
 
 SelectButton.displayName = 'SelectButton'
-
 export default SelectButton

package/src/tabs/tabsNavBar.tsx

@@ -66,7 +66,10 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
               hoverColor="seaBlue.main"
               isRound={false}
               ml={1}
-              onClick={e => tab?.onDelete?.(e)}
+              onClick={e => {
+                e.stopPropagation()
+                tab?.onDelete?.(e)
+              }}
               title="Delete"
             />
           )}

package/src/textarea/textarea.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
-import { inputColors } from '../input/consts'
+import { helpTextSize, inputColors } from '../input/consts'
+import HelpText from '../input/helpText'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
 import { getInitialCount } from './helpers'
@@ -13,6 +14,7 @@ const TextareaTextarea = styled.textareaBox`
   outline: none;
   padding: 1;
   resize: none;
+  min-height: 80px;
   transition-duration: fast;
   width: 100%;
 
@@ -26,7 +28,7 @@ const TextareaTextarea = styled.textareaBox`
 
 export const TextareaBase = styled.divBox`
   display: flex;
-  min-height: 80px;
+  flex-direction: column;
   position: relative;
   width: 100%;
 `
@@ -38,12 +40,15 @@ export const TextareaBase = styled.divBox`
 export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   const {
     autoFocus,
+    ariaLabel,
     className,
     colorScheme: colorSchemeProp,
     cols,
     defaultValue,
     disabled,
+    errorText,
     id,
+    helpText,
     maxLength,
     name,
     onBlur,
@@ -78,6 +83,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
 
   const textareaAliasedProps = filterUndefined({
     'aria-disabled': disabled,
+    'aria-label': ariaLabel,
     bg: readOnly ? 'sandstone.97' : undefined,
     borderColor: readOnly ? 'sandstone.55' : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
@@ -92,7 +98,6 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   return (
     <TextareaBase className={cs('vui-textarea', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
       <TextareaTextarea
-        aria-label="input-textarea"
         className="vui-textareaTextarea"
         ref={textareaRef}
         {...{
@@ -130,6 +135,13 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
           {count} {maxLength ? `/ ${maxLength}` : null}
         </T>
       )}
+
+      {!!helpText && <HelpText size={helpTextSize['lg']}>{helpText}</HelpText>}
+      {!!errorText && (
+        <HelpText isError size={helpTextSize['lg']}>
+          {errorText}
+        </HelpText>
+      )}
     </TextareaBase>
   )
 })

package/src/textarea/textarea.types.ts

@@ -6,6 +6,8 @@ export type TextareaProps = SystemProps &
   ThemingProps<'Textarea'> & {
     /** Passed to the inner input. */
     autoFocus?: boolean
+    /** ARIA label for the input element. */
+    ariaLabel?: string
     /** Children are disabled for this component. */
     children?: never
     /** Deprecated. Please use variant instead. @deprecated  */
@@ -16,6 +18,10 @@ export type TextareaProps = SystemProps &
     defaultValue?: number | string
     /** Passed to the inner input. */
     disabled?: boolean
+    /** Socket displaying error text below an input. */
+    errorText?: string | React.ReactNode
+    /** Socket displaying help text below an input. */
+    helpText?: React.ReactNode | string
     /** Deprecated. Please use variant="red" instead. @deprecated*/
     isInvalid?: boolean
     /** Passed to the inner input. */

package/src/textarea/theme.ts

@@ -2,7 +2,7 @@ import { inputColors } from '../input/consts'
 
 const baseStyle = {
   textarea: {
-    focusWithinRing: 2,
+    focusWithinRing: 3,
     color: inputColors.inputText,
   },
   input: {