@veracity/vui 2.21.3 → 2.22.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.21.3",
+  "version": "2.22.0-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",

package/src/button/theme.ts

@@ -59,7 +59,7 @@ const sizes = {
   },
 }
 
-const variants = {
+const variants: Record<string, Record<string, Record<string, string>>> = {
   primaryDark: {
     container: {
       bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
@@ -274,21 +274,30 @@ const variants = {
       color: 'landGreen.30',
     },
   },
-  // buttonGroupRounded is an internal variant, used in buttonGroup;
-  buttonGroupRounded: {
-    container: {
-      bg: 'white',
-      borderColor: 'sandstone.79',
-      color: 'sandstone.10',
-      hoverBg: 'seaBlue.20',
-      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
-      hoverColor: 'white',
-      activeBg: 'seaBlue.35',
-      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
-      activeColor: 'white',
-      borderRadius: 'round',
-      marginRight: '22px',
-    },
+}
+
+// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark
+variants.buttonGroupDefault = {
+  container: {
+    ...variants.secondaryDark.container,
+    borderColor: 'sandstone.60',
+  },
+}
+
+// buttonGroupRounded is an internal variant
+variants.buttonGroupRounded = {
+  container: {
+    bg: 'white',
+    borderColor: 'sandstone.79',
+    color: 'sandstone.10',
+    hoverBg: 'seaBlue.20',
+    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+    hoverColor: 'white',
+    activeBg: 'seaBlue.35',
+    activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+    activeColor: 'white',
+    borderRadius: 'round',
+    marginRight: '22px',
   },
 }
 

package/src/buttonGroup/buttonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { styled, th, vui } from '../core'
 import { activeClassName, cs, filterUndefined } from '../utils'
@@ -39,12 +39,12 @@ export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
 
   //
   > .${activeClassName}.vui-button-variant-secondaryDark {
-    background-color: ${p => th.color('skyBlue.90')};
+    background-color: ${th.color('skyBlue.90')};
   }
 
   > .${activeClassName}.vui-button-variant-buttonGroupRounded {
-    background-color: ${p => th.color('seaBlue.main')};
-    color: ${p => th.color('white')};
+    background-color: ${th.color('seaBlue.main')};
+    color: ${th.color('white')};
   }
 
   > .vui-button-variant-buttonGroupRounded {
@@ -52,11 +52,11 @@ export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
   }
 
   > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {
-    background-color: ${p => th.color('seaBlue.20')};
+    background-color: ${th.color('seaBlue.20')};
   }
 
   > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {
-    background-color: ${p => th.color('seaBlue.35')};
+    background-color: ${th.color('seaBlue.35')};
   }
 `
 
@@ -72,7 +72,7 @@ export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
       filterUndefined({
         disabled,
         size,
-        variant: variant === 'default' ? 'secondaryDark' : 'buttonGroupRounded',
+        variant: variant === 'default' ? 'buttonGroupDefault' : 'buttonGroupRounded',
       }),
     [disabled, size, variant],
   )

package/src/select/select.tsx

@@ -1,13 +1,12 @@
 import { useEffect, useId, useState } from 'react'
 
 import { Box } from '../box'
-import { useStyleConfig } from '../core'
 import { Input } from '../input'
 import { helpTextSize } from '../input/consts'
 import HelpText from '../input/helpText'
 import { Popover } from '../popover'
 import { __DEV__ } from '../utils'
-import { SelectProvider, useSelectContext } from './context'
+import { SelectProvider } from './context'
 import { SelectOptionData, SelectProps } from './select.types'
 import SelectButton from './selectButton'
 import SelectContent from './selectContent'
@@ -40,6 +39,7 @@ export function Select(props: SelectProps) {
     onChange,
     options,
     placeholder = 'Please select',
+    selectedText,
     readOnly,
     selectButton,
     selectButtonProps,
@@ -50,7 +50,7 @@ export function Select(props: SelectProps) {
     ...rest
   } = props
 
-  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, children })
+  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })
 
   if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
     console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
@@ -69,6 +69,7 @@ export function Select(props: SelectProps) {
     name,
     options,
     placeholder,
+    selectedText,
     readOnly,
     size,
     variant,
@@ -97,7 +98,7 @@ export function Select(props: SelectProps) {
       <Popover matchWidth {...rest}>
         <>
           {selectButton ?? <SelectButton {...selectButtonProps} />}
-          <SelectContent>
+          <SelectContent overflow="hidden">
             {showOptionsFilter && (
               <Box mr={2}>
                 <Input
@@ -112,7 +113,7 @@ export function Select(props: SelectProps) {
                 />
               </Box>
             )}
-            <SelectGroup maxH={maxHeight} tabIndex={1000}>
+            <SelectGroup maxH={maxHeight} overflowY="auto" tabIndex={1000}>
               {children ??
                 filteredOptions?.map?.(option => (
                   <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />

package/src/select/select.types.ts

@@ -48,6 +48,8 @@ export type SelectProps = ThemingProps<'Select'> &
     options?: SelectOptionData[]
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string
+    /** Displayed inside the trigger when value(s) selected. */
+    selectedText?: string
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean
     /** Custom select button slot. */

package/src/select/selectGroup.tsx

@@ -11,7 +11,7 @@ export const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Select', useSelectContext())
 
-  return <List className={cs('vui-selectGroup', className)} ref={ref} {...styles.group} {...rest} />
+  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />
 }) as VuiComponent<'ul', SelectGroupProps> & {
   Divider: typeof ListDivider
   Heading: typeof ListHeading

package/src/select/selectOption.tsx

@@ -39,7 +39,7 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
 
   const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))
 
-  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-selectContent') && hide()
+  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()
 
   // Hiding the popover on scroll
   useEffect(() => {

package/src/select/useSelect.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent, toggleItem, useCallbackRef } from '../utils'
 import { SelectOptionData, SelectValue } from './select.types'
 import { UseSelectProps } from './useSelect.types'
 
-const getValueText = (value: SelectValue, options: SelectOptionData[]) => {
+export const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {
   const option = options?.find((o: SelectOptionData) => o?.value === value)
 
   return option?.text || value
@@ -12,7 +12,15 @@ const getValueText = (value: SelectValue, options: SelectOptionData[]) => {
 
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props: UseSelectProps) {
-  const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props
+  const {
+    defaultValue,
+    isMultiple,
+    onChange: onChangeProp,
+    value: valueProp,
+    options = [],
+    selectedText,
+    children,
+  } = props
 
   // Not using useControlled here, because we need custom value setter when uncontrolled
   const [stateValue, setStateValue] = useState(defaultValue)
@@ -38,11 +46,13 @@ export default function useSelect(props: UseSelectProps) {
   const valueText =
     isMultiple && Array.isArray(value)
       ? value[0]
-        ? `${getValueText(value[0], [...options, ...dynamicOptions])}${
-            value.length > 1 ? ` (+${value.length - 1})` : ''
-          }`
+        ? selectedText && value.length > 1
+          ? selectedText
+          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${
+              value.length > 1 ? ` (+${value.length - 1})` : ''
+            }`
         : undefined
-      : getValueText(value as SelectValue, [...options, ...dynamicOptions])
+      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])
 
   return { onChange, value, valueText }
 }

package/src/select/useSelect.types.ts

@@ -17,6 +17,8 @@ export type UseSelectProps = {
   children?: ReactNode
   /** Props added to the select button */
   selectButtonProps?: ButtonProps
+  /** Displayed inside the trigger when multiple options selected. */
+  selectedText?: string
   /**
    * Callback triggered when an option is selected.
    *