@veracity/vui 2.21.4 → 2.22.0

package/package.json

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

@@ -6,7 +6,7 @@ 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'
@@ -39,6 +39,7 @@ export function Select(props: SelectProps) {
     onChange,
     options,
     placeholder = 'Please select',
+    selectedText,
     readOnly,
     selectButton,
     selectButtonProps,
@@ -49,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)
@@ -68,6 +69,7 @@ export function Select(props: SelectProps) {
     name,
     options,
     placeholder,
+    selectedText,
     readOnly,
     size,
     variant,

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/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.
    *