@veracity/vui 2.9.0 → 2.10.0-beta.0

package/src/popover/popover.types.ts

@@ -1,3 +1,5 @@
+import { TippyProps } from '@tippyjs/react'
+
 import { BoxProps } from '../box'
 import { SystemProps } from '../system'
 import { RenderProps } from '../utils'
@@ -11,6 +13,8 @@ export type PopoverProps = UsePopoverProps & {
   children?: PopoverRenderProps
   /** Mounts provided content only when popover is opened for performance. @default true */
   isLazy?: boolean
+  /** Object with any Tippy props. */
+  options?: Partial<TippyProps>
 }
 
 export type PopoverRenderProps = RenderProps<{

package/src/popover/usePopover.ts

@@ -40,6 +40,7 @@ export default function usePopover(props: UsePopoverProps = {}) {
 
   const tippyOptions: Partial<TippyProps> = useMemo(() => {
     const {
+      aria,
       offset: optionsOffset,
       onHidden,
       onHide,
@@ -50,6 +51,7 @@ export default function usePopover(props: UsePopoverProps = {}) {
     } = options ?? {}
 
     return {
+      aria,
       arrow: false,
       duration: [200, 150],
       hideOnClick: !isControlled ? closeOnBlur : false,

package/src/progressCircular/progressCircular.tsx

@@ -50,6 +50,7 @@ export const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) =
         aria-valuemin={0}
         aria-valuenow={progress}
         height={styles.width}
+        role="meter"
         version="1.1"
         viewBox="0 0 100 100"
         width={styles.width}

package/src/radio/radio.tsx

@@ -82,6 +82,7 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
     value,
     ...rest
   } = omitThemingProps(mergedProps)
+
   const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)
   const styles = useStyleConfig('Radio', mergedProps)
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
@@ -125,15 +126,30 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
         mr={controlMr}
         {...controlStyles}
       >
-        <RadioInput
-          aria-label="input-radio"
-          className="vui-radioInput"
-          onChange={handleOnChange}
-          ref={inputRef}
-          type="radio"
-          {...{ checked, defaultChecked, disabled, id, name, required, value }}
-          {...inputProps}
-        />
+        {checked !== undefined && (
+          <RadioInput
+            aria-label="input-radio"
+            className="vui-radioInput"
+            onChange={handleOnChange}
+            ref={inputRef}
+            type="radio"
+            {...{ checked, disabled, id, name, required, value }}
+            {...inputProps}
+          />
+        )}
+
+        {checked === undefined && (
+          <RadioInput
+            aria-label="input-radio"
+            className="vui-radioInput"
+            onChange={handleOnChange}
+            ref={inputRef}
+            type="radio"
+            {...{ defaultChecked, disabled, id, name, required, value }}
+            {...inputProps}
+          />
+        )}
+
         <Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
       </RadioControl>
 

package/src/select/select.tsx

@@ -31,6 +31,7 @@ export function Select(props: SelectProps) {
     placeholder = 'Please select',
     readOnly,
     selectButton,
+    selectButtonProps,
     showOptionsFilter,
     size,
     value,
@@ -55,6 +56,7 @@ export function Select(props: SelectProps) {
     options,
     placeholder,
     readOnly,
+
     size,
     variant,
     ...selectProps
@@ -74,7 +76,7 @@ export function Select(props: SelectProps) {
     <SelectProvider value={context}>
       <Popover matchWidth {...rest}>
         <>
-          {selectButton ?? <SelectButton />}
+          {selectButton ?? <SelectButton {...selectButtonProps} />}
           <SelectContent>
             {showOptionsFilter && (
               <Box mr={2}>

package/src/select/useSelect.types.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 
+import { ButtonProps } from '../button'
 import { ChangeEvent } from '../utils'
 import { SelectOptionData, SelectValue } from './select.types'
 
@@ -14,6 +15,8 @@ export type UseSelectProps = {
   options?: SelectOptionData[]
   /** Select children elements for dynamic handling */
   children?: ReactNode
+  /** Props added to the select button */
+  selectButtonProps?: ButtonProps
   /**
    * Callback triggered when an option is selected.
    *

package/src/sidemenu/consts.ts

@@ -1,3 +1 @@
-export const border = '1px solid lightgray'
-
 export const expandedWidth = 64

package/src/sidemenu/sidemenu.tsx

@@ -5,7 +5,7 @@ import Button from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined } from '../utils'
-import { border, expandedWidth } from './consts'
+import { expandedWidth } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
@@ -19,12 +19,17 @@ export const SidemenuBase = styled.divBox`
   overflow: hidden;
 `
 
-/** [Beta] A collapsible side menu for navigation. */
+/** A collapsible side menu for navigation. */
 export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
-  const { children, className, items, isExpanded = false, width = 280, ...rest } = props
+  const { children, className, items, isExpanded = false, size, variant, width = 280, ...rest } = props
   const styles = useStyleConfig('Sidemenu', props)
   const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded)
-  const context = useMemo(() => filterUndefined({ isExpandedInternal }), [isExpandedInternal])
+  const context = useMemo(
+    () => filterUndefined({ size, variant, isExpandedInternal }),
+    [size, variant, isExpandedInternal]
+  )
+
+  const isDark = variant === 'dark'
 
   const aliasedProps = filterUndefined<SidemenuProps>({})
 
@@ -40,14 +45,28 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
 
   return (
     <SidemenuProvider value={context}>
-      <SidemenuBase className={cs('vui-sidemenu', className)} ref={ref} w={w} {...styles} {...aliasedProps} {...rest}>
+      <SidemenuBase
+        className={cs('vui-sidemenu', className)}
+        ref={ref}
+        w={w}
+        {...styles.container}
+        {...aliasedProps}
+        {...rest}
+      >
         <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
           {items
             ? items?.map?.((item: SidemenuItemProps, key: number) => <SidemenuItem key={key} {...item} />)
             : children}
         </Box>
-        <Box borderTop={border} className="vui-sidemenu-bottom" w="100%">
-          <Button borderRadius={0} justifyContent={justifyContent} onClick={onToggle} variant="tertiaryDark" w="100%">
+        <Box className="vui-sidemenu-bottom" w="100%" {...styles.bottom}>
+          <Button
+            borderRadius={0}
+            justifyContent={justifyContent}
+            minH={size === 'lg' ? '56px' : '40px'}
+            onClick={onToggle}
+            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
+            w="100%"
+          >
             <Icon name={icon} />
           </Button>
         </Box>

package/src/sidemenu/sidemenuItem.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
-import { omitThemingProps, vui, VuiComponent } from '../core'
+import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import T from '../t'
 import { cs } from '../utils'
@@ -12,10 +12,10 @@ import { SidemenuItemProps } from './sidemenu.types'
 /** A menu item. */
 export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   const { className, children, icon, iconSize = 'md', isActive, onClick, title, ...rest } = omitThemingProps(props)
-
   const [displayChildren, setDisplayChildren] = useState(true)
-
-  const { isExpandedInternal } = useSidemenuContext()
+  const { variant, size, isExpandedInternal } = useSidemenuContext()
+  const styles = useStyleConfig('Sidemenu', useSidemenuContext)
+  const isDark = variant === 'dark'
 
   const innerContent = isExpandedInternal ? (
     <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
@@ -41,16 +41,18 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
       <Button
         alignItems="center"
         border="none"
-        borderLeft="3px solid black"
-        borderLeftColor={isActive ? 'blue.80' : 'transparent'}
+        borderLeft="3px solid transparent"
+        borderLeftColor={isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined}
         borderRadius={0}
         className={cs('vui-sidemenu-item', className)}
         h="auto"
         justifyContent="space-between"
         onClick={() => onClick?.()}
         p={0}
-        variant="tertiaryDark"
+        variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
         w="100%"
+        {...styles.item}
+        minH={size === 'lg' ? '56px' : '40px'}
         {...rest}
       >
         {innerContent}
@@ -61,7 +63,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
             mr={1}
             onClick={toggle}
             size="sm"
-            variant="tertiaryDark"
+            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
           />
         )}
       </Button>

package/src/sidemenu/sidemenuTop.tsx

@@ -1,22 +1,21 @@
 import React from 'react'
 
 import { Box } from '../box'
-import { omitThemingProps } from '../core'
+import { omitThemingProps, useStyleConfig } from '../core'
 import { cs } from '../utils'
-import { border } from './consts'
 import { useSidemenuContext } from './context'
 import { SidemenuTopProps } from './sidemenu.types'
 
 /** Top container. */
 export const SidemenuTop = (props: SidemenuTopProps) => {
   const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)
-
+  const styles = useStyleConfig('Sidemenu', props)
   const { isExpandedInternal } = useSidemenuContext()
 
   if (!leftSlot && !rightSlot) return null
 
   return (
-    <Box borderBottom={border} className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...rest}>
+    <Box className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...styles.sidemenuTop} {...rest}>
       {!!leftSlot && leftSlot}
       {!!rightSlot && isExpandedInternal && rightSlot}
     </Box>

package/src/sidemenu/theme.ts

@@ -1,14 +1,54 @@
 const baseStyle = {}
 
-const defaultProps = {}
+const defaultProps = {
+  size: 'md',
+  variant: 'light'
+}
 
-const sizes = {}
+const parts = ['container', 'item', 'sidemenuTop', 'bottom']
 
-const variants = {}
+const sizes = {
+  md: {
+    item: {
+      minH: '40px'
+    }
+  },
+  lg: {
+    item: {
+      minH: '56px'
+    }
+  }
+}
+const variants = {
+  light: {
+    container: {},
+    bottom: {
+      borderTop: '1px solid lightgray'
+    },
+    sidemenuTop: {
+      borderBottom: '1px solid lightgray'
+    },
+    item: {}
+  },
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    },
+    bottom: {
+      borderTop: '1px solid black'
+    },
+    sidemenuTop: {
+      borderBottom: '1px solid black'
+    },
+    item: {}
+  }
+}
 
 export default {
   baseStyle,
   defaultProps,
+  parts,
   sizes,
   variants
 }

package/src/switch/consts.ts

@@ -1,7 +1,9 @@
 export const switchColors = {
   main: 'seaBlue.main',
   hover: 'seaBlue.40',
-  disabled: 'sandstone.main',
+  offBg: 'sandstone.55', // on/off state of the switch
+  offBgContrast: 'sandstone.45', // on/off state of the switch
+  disabled: 'sandstone.main', // 79: the non-clickable state
   disabledBg: 'sandstone.95',
   green: 'landGreen.main',
   red: 'energyRed.main'

package/src/switch/switchButton.tsx

@@ -112,7 +112,6 @@ export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
   const labelOffset = `${thumbStyles.h - hDiff + 4}px`
 
   const aliasedProps = filterUndefined({
-    'aria-checked': isChecked ? true : false,
     'aria-disabled': disabled,
     'data-focused': isFocused ? true : false
   })
@@ -123,7 +122,7 @@ export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
   })
 
   const trackAliasedProps = filterUndefined({
-    bg: isChecked ? trackStyles.bg : switchColors.disabled,
+    bg: isChecked ? trackStyles.bg : innerLabelOff ? switchColors.offBgContrast : switchColors.offBg,
     pl: isChecked ? 1 : labelOffset,
     pr: isChecked ? labelOffset : 1,
     ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3

package/src/table/tableSortIcon.tsx

@@ -11,7 +11,7 @@ export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
   const { className, order, ...rest } = props
   const styles = useStyleConfig('Table', useTableContext())
   const rotate = order === 'asc' ? 180 : 0
-  const pathFill = order !== undefined ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main'
+  const pathFill = order ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main'
 
   return (
     <Icon

package/src/table/useTable.ts

@@ -1,17 +1,25 @@
-import { useCallbackRef, useControlled } from '../utils'
+import { SortOrder, useCallbackRef, useControlled } from '../utils'
 import { UseTableProps } from './useTable.types'
 
+const sortOrders: SortOrder[] = ['asc', 'desc', null]
+const defaultSortOrder: SortOrder = sortOrders[0]
+
+function getNextOrder(order: SortOrder) {
+  const next = sortOrders.indexOf(order) + 1
+  return sortOrders[next] !== undefined ? sortOrders[next] : defaultSortOrder
+}
+
 /** Handles controlled/uncontrolled sort of the Table rows. */
 export default function useTable(props: UseTableProps) {
-  const { defaultSort = { key: '', order: 'asc' }, onSortChange: onSortChangeProp, sort: sortProp } = props
+  const { defaultSort = { key: '', order: defaultSortOrder }, onSortChange: onSortChangeProp, sort: value } = props
   const [sort, onChange, { isControlled }] = useControlled({
     defaultValue: defaultSort,
     onChange: onSortChangeProp,
-    value: sortProp
+    value
   })
 
   const onSortChange = useCallbackRef((key: string) => {
-    const order = sort.key === key ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc'
+    const order = sort.key === key ? getNextOrder(sort.order) : defaultSortOrder
     onChange({ key, order })
   })
 

package/src/theme/foundations/colors.ts

@@ -225,6 +225,7 @@ export const seaBlue = {
 }
 
 export const sandstone = {
+  97: 'hsl(40, 3%, 97%)',
   95: 'hsl(40, 3%, 95%)',
   90: 'hsl(40, 3%, 90%)',
   85: 'hsl(40, 3%, 85%)',

package/src/tree/tree.tsx

@@ -85,7 +85,7 @@ export const Tree = vui<'div', TreeProps>((props, ref) => {
   return (
     <TreeProvider value={context}>
       <TreeBase className={cs('vui-tree', className)} ref={ref} {...styles.container} {...rest}>
-        <List w={1}>
+        <List role="tree" w={1}>
           {itemsInternal?.map(({ id, isActive, ...props }, index: number) => {
             return (
               <TreeItem

package/src/tree/treeItem.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { Box } from '../box'
 import { styled, useStyleConfig, vui } from '../core'
 import { List } from '../list'
-import { cs, isArray, isReactText, vuiColorToRGBA } from '../utils'
+import { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils'
 import { useTreeContext } from './context'
 import { TreeItemProps } from './tree.types'
 import TreeIcon from './treeIcon'
@@ -130,6 +130,11 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
     textMl += 3.8
   }
 
+  const aliasedProps = filterUndefined({
+    'aria-expanded': isCollapsable ? !collapsedInternal : undefined,
+    role: 'treeitem'
+  })
+
   // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
   return (
     <TreeItemBase
@@ -156,6 +161,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
           : bg
       }
       hoverBg={undefined}
+      {...aliasedProps}
       {...rest}
     >
       <>
@@ -178,7 +184,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
         </Box>
 
         {isCollapsable && !collapsedInternal && (
-          <List w={1}>
+          <List role="tree" w={1}>
             {children ??
               (isArray<TreeItemProps>(items)
                 ? items.map(({ key, propagatedPL, ...props }, index) => {

package/src/tutorial/tutorial.types.ts

@@ -19,11 +19,11 @@ export type TutorialProps = {
   className?: string
   /** An id for further handling with localStorage */
   id: string
-  /** Invoked once the action button clicked. */
+  /** Invoked once the action button is clicked. */
   onAction?: () => void
-  /** Invoked once the dismiss button clicked. */
+  /** Invoked once the dismiss button is clicked. */
   onDismiss?: () => void
-  /** Invoked once the finish button clicked. */
+  /** Invoked once the finish button is clicked. */
   onFinish?: () => void
   /** Popover placement */
   placement?: Placement

package/src/tutorial/tutorialCard.tsx

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

package/src/utils/array.ts

@@ -6,6 +6,7 @@ export function compareBy<T extends object, K extends keyof T>(key: K, order: So
   const ord = order === 'asc' ? 1 : -1
 
   return (item1: T, item2: T) => {
+    if (order === null) return 0
     const a = item1[key]
     const b = item2[key]
 

package/src/utils/types.ts

@@ -63,7 +63,9 @@ export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode)
 /** Merges props definitions, overriding source keys */
 export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps
 
+export type SortOrder = 'asc' | 'desc' | null
+
 export type Sort<T = string> = {
   key: T
-  order: 'asc' | 'desc'
+  order: SortOrder
 }