@veracity/vui 2.21.0 → 2.21.2-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.21.0",
+  "version": "2.21.2-rc.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",
@@ -25,19 +25,19 @@
     "@xstyled/styled-components": "2.5.0",
     "@xstyled/system": "2.5.0",
     "@xstyled/util": "2.2.3",
-    "react-focus-lock": "2.9.6",
+    "react-focus-lock": "2.9.7",
     "styled-components": "5.3.11",
     "tippy.js": "6.3.7"
   },
   "devDependencies": {
-    "@types/node": "^18.19.7",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@veracity/eslint-config": "*",
     "@veracity/prettier-config": "*",
     "@veracity/tsconfig": "*",
     "eslint": "^8.56.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5"
   },
   "peerDependencies": {

package/src/accordion/accordionItem.tsx

@@ -62,8 +62,8 @@ export const AccordionItem = (props: AccordionItemProps) => {
           disabled
             ? 'transparent'
             : collapsedInternal
-            ? styles.item.itemTitleHoverBg
-            : styles.item.expandedItemTitleHoverBg
+              ? styles.item.itemTitleHoverBg
+              : styles.item.expandedItemTitleHoverBg
         }
         justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}
         onClick={toggle}

package/src/accordion/accordionItemHorizontal.tsx

@@ -55,8 +55,8 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
           disabled
             ? 'transparent'
             : collapsedInternal
-            ? styles.item.itemTitleHoverBg
-            : styles.item.expandedItemTitleHoverBg
+              ? styles.item.itemTitleHoverBg
+              : styles.item.expandedItemTitleHoverBg
         }
         justifyContent="space-between"
         minH={styles.item.minH}

package/src/definition/definition.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { DefinitionProps } from './definition.types'
@@ -19,10 +17,17 @@ export const DefinitionVerticalBase = styled.dlBox`
     flex-direction: column;
   }
 
-  dt,
-  dd {
+  dt {
     display: inline-flex;
   }
+
+  dd {
+    white-space: pre-wrap;
+  }
+
+  dd > * {
+    margin-left: 0 !important;
+  }
 `
 
 export const DefinitionHorizontalBase = styled.dlBox`
@@ -44,21 +49,18 @@ export const DefinitionHorizontalBase = styled.dlBox`
     padding-left: 5px;
   }
 
-  dd {
-    ::after {
-      content: '';
-    }
-    @media (min-width: 1024px) {
-      ::after {
-        content: ',';
-      }
-    }
-  }
-
   dt {
     width: 20%;
     min-width: 130px;
   }
+
+  dd {
+    white-space: pre-wrap;
+  }
+
+  dd > * {
+    margin-left: 0 !important;
+  }
 `
 // @formatter:on
 
@@ -72,7 +74,7 @@ export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
       {...styles.container}
       {...rest}
     >
-      <DefinitionContent {...rest} />
+      <DefinitionContent orientation="horizontal" {...rest} />
     </DefinitionHorizontalBase>
   ) : (
     <DefinitionVerticalBase
@@ -81,7 +83,7 @@ export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
       {...styles.container}
       {...rest}
     >
-      <DefinitionContent {...rest} />
+      <DefinitionContent orientation="vertical" {...rest} />
     </DefinitionVerticalBase>
   )
 })

package/src/definition/definition.types.ts

@@ -1,13 +1,16 @@
+import { ReactNode } from 'react'
+
 import { IconProp } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
-export type DefinitionItemProps = SystemProps & {
+export type DefinitionItem = SystemProps & {
   key: string
   keyHasIcon?: boolean
-  value: string | number | string[] | number[]
+  value: string | number | string[] | ReactNode
   valueHasIcon?: boolean
 }
+
 export type DefinitionProps = SystemProps &
   ThemingProps<'Definition'> & {
     /** Socket displaying icon on the left side. */
@@ -16,7 +19,7 @@ export type DefinitionProps = SystemProps &
     iconRight?: IconProp | JSX.Element
     isLabelBold?: boolean
     isValueBold?: boolean
-    items?: DefinitionItemProps[]
+    items?: DefinitionItem[]
     /** Socket defining orientation. */
     orientation?: 'horizontal' | 'vertical'
     size?: 'sm' | 'md'

package/src/definition/definitionContent.tsx

@@ -1,22 +1,21 @@
-import React from 'react'
-
 import Box from '../box'
 import { styled, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
+import P from '../p'
 import { cs, isArray } from '../utils'
-import { DefinitionItemProps, DefinitionProps } from './definition.types'
+import { DefinitionItem, DefinitionProps } from './definition.types'
 
 export const DefinitionItemKey = styled.dtBox``
 export const DefinitionItemValue = styled.ddBox``
 
 export const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {
-  const { iconLeft, iconRight, isLabelBold, isValueBold, items } = props as DefinitionProps
+  const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props as DefinitionProps
 
   const styles = useStyleConfig('Definition', props)
 
   return (
     <>
-      {isArray<DefinitionItemProps>(items)
+      {isArray<DefinitionItem>(items)
         ? items.map(({ key, value, ...props }, index) => (
             <Box className="vui-definitionItemWrapper" key={index} ref={ref}>
               <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>
@@ -29,17 +28,27 @@ export const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {
                 )}
               </DefinitionItemKey>
               {isArray(value) ? (
-                value.map((value, index) => (
-                  <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd} key={index}>
-                    {props.valueHasIcon && iconLeft && (
-                      <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
-                    )}
-                    {value}
-                    {props.valueHasIcon && iconRight && (
-                      <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
-                    )}
-                  </DefinitionItemValue>
-                ))
+                <DefinitionItemValue
+                  display="block"
+                  fontWeight={isValueBold ? 'demi' : 'default'}
+                  {...styles.dd}
+                  key={index}
+                >
+                  {orientation === 'horizontal'
+                    ? value.join(', ')
+                    : value.map((value, index) => (
+                        <P display="flex" key={index + value}>
+                          {props.valueHasIcon && iconLeft && (
+                            <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                          )}
+                          {value}
+                          {props.valueHasIcon && iconRight && (
+                            <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                          )}
+                        </P>
+                      ))}
+                  {}
+                </DefinitionItemValue>
               ) : (
                 <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>
                   {props.valueHasIcon && iconLeft && (

package/src/definition/theme.ts

@@ -51,9 +51,7 @@ const sizes = {
 const variants = {
   light: {
     container: {
-      bg: 'white',
       color: 'sandstone.20',
-      borderColor: 'transparent',
     },
   },
   dark: {

package/src/header/headerMainLinks.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import List from '../list'
 import { cs } from '../utils'

package/src/icon/icon.tsx

@@ -32,9 +32,7 @@ export const Icon = vui<'svg', IconProps>((props, ref) => {
       {...aliasedProps}
       {...rest}
     >
-      {customIcon?.d.map((d, i) => (
-        <path d={d} fill="currentColor" key={i} {...customIcon.pathProps[i]}></path>
-      ))}
+      {customIcon?.d.map((d, i) => <path d={d} fill="currentColor" key={i} {...customIcon.pathProps[i]}></path>)}
     </Svg>
   )
 })

package/src/pagination/helpers.ts

@@ -31,8 +31,8 @@ export function getPaginationItems(page: number, pageCount: number) {
     ...(siblingsStart > boundaryCount + 2
       ? ['ellipsisStart']
       : boundaryCount + 1 < pageCount - boundaryCount
-      ? [boundaryCount + 1]
-      : []),
+        ? [boundaryCount + 1]
+        : []),
 
     // Sibling pages
     ...range(siblingsStart, siblingsEnd),
@@ -41,8 +41,8 @@ export function getPaginationItems(page: number, pageCount: number) {
     ...(siblingsEnd < pageCount - boundaryCount - 1
       ? ['ellipsisEnd']
       : pageCount - boundaryCount > boundaryCount
-      ? [pageCount - boundaryCount]
-      : []),
+        ? [pageCount - boundaryCount]
+        : []),
 
     ...endPages,
     'next',

package/src/select/select.tsx

@@ -27,6 +27,7 @@ export function Select(props: SelectProps) {
     defaultValue,
     disabled,
     errorText,
+    closeOnScroll,
     helpText,
     id: idProp,
     isInvalid,
@@ -73,9 +74,7 @@ export function Select(props: SelectProps) {
     variant,
     ...selectProps,
   }
-  const onQueryChange = (e: any) => {
-    setQuery(e.target.value?.toLowerCase())
-  }
+  const onQueryChange = (e: any) => setQuery(e.target.value?.toLowerCase())
 
   const filterOptions = (i: SelectOptionData) =>
     !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)
@@ -115,7 +114,9 @@ export function Select(props: SelectProps) {
             )}
             <SelectGroup maxH={maxHeight} tabIndex={1000}>
               {children ??
-                filteredOptions?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
+                filteredOptions?.map?.(option => (
+                  <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />
+                ))}
             </SelectGroup>
           </SelectContent>
         </>

package/src/select/select.types.ts

@@ -24,6 +24,8 @@ export type SelectProps = ThemingProps<'Select'> &
   UseSelectProps & {
     /** Select cannot be opened and is styled accordingly. */
     disabled?: boolean
+    /** Hiding the options list on scroll event. Recommended for scrollable containers. */
+    closeOnScroll?: boolean
     /** Socket displaying error text below an input. */
     errorText?: string | React.ReactNode
     /** Socket displaying help text below an input. */
@@ -64,6 +66,8 @@ export type SelectOptionData = {
 }
 
 export type SelectOptionProps = ListItemProps & {
+  /** Hiding the options list on scroll event. */
+  closeOnScroll?: boolean
   /** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */
   value?: SelectValue
   /** Hover title text. */

package/src/select/selectOption.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect } from 'react'
 
 import { Checkbox } from '../checkbox'
 import { useStyleConfig, vui } from '../core'
@@ -14,13 +14,15 @@ import { SelectOptionProps } from './select.types'
  * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.
  */
 export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
-  const { children, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props
+  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props
   const { instance } = usePopoverContext() ?? {}
   const { isMultiple, name, onChange, value } = useSelectContext() ?? {}
   const styles = useStyleConfig('Select', useSelectContext())
 
   const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp
 
+  const hide = () => instance?.hide()
+
   const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {
     const nativeEvent = e.nativeEvent || e
     const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)
@@ -32,11 +34,20 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
 
     onClickProp?.(e as MouseEvent<HTMLLIElement>)
     onChange?.(clonedEvent)
-    !isMultiple && instance?.hide()
+    !isMultiple && hide()
   })
 
   const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))
 
+  // Hiding the popover on scroll
+  useEffect(() => {
+    if (closeOnScroll) document.addEventListener('scroll', hide, true)
+
+    return () => {
+      if (closeOnScroll) document.removeEventListener('scroll', hide, true)
+    }
+  }, [closeOnScroll])
+
   return (
     <ListItem
       activeBg="skyBlue.active"

package/src/table/tbody.tsx

@@ -41,11 +41,7 @@ export const Tbody = vui<'tbody', TbodyProps>((props, ref) => {
     <TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>
       {children ??
         rows?.map((row, index) => (
-          <Tr key={index}>
-            {columns?.map(column => (
-              <Td key={column.field}>{row[column.field]}</Td>
-            ))}
-          </Tr>
+          <Tr key={index}>{columns?.map(column => <Td key={column.field}>{row[column.field]}</Td>)}</Tr>
         ))}
     </TbodyBase>
   )

package/src/table/thead.tsx

@@ -33,13 +33,7 @@ export const Thead = vui<'thead', TheadProps>((props, ref) => {
 
   return (
     <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>
-      {children ?? (
-        <Tr>
-          {columns?.map(column => (
-            <Th key={column.field} role="columnheader" {...column} />
-          ))}
-        </Tr>
-      )}
+      {children ?? <Tr>{columns?.map(column => <Th key={column.field} role="columnheader" {...column} />)}</Tr>}
     </TheadBase>
   )
 })

package/src/tree/treeItem.tsx

@@ -157,8 +157,8 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
             ? styles?.firstLevelItem?.activeBg
             : styles?.firstLevelItem?.bg
           : isActiveInternal
-          ? styles?.item?.activeBg
-          : bg
+            ? styles?.item?.activeBg
+            : bg
       }
       hoverBg={undefined}
       {...aliasedProps}