@veracity/vui 1.0.0 → 1.1.0

package/src/radio/radioGroup.tsx

@@ -6,9 +6,9 @@ import { RadioGroupProvider } from './context'
 import { RadioGroupProps } from './radioGroup.types'
 
 export const RadioGroupBase = styled.divBox`
-	display: flex;
-	flex-direction: column;
-	gap: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1;
 `
 
 /**
@@ -16,60 +16,58 @@ export const RadioGroupBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
-	const {
-		className,
-		colorScheme,
-		defaultValue,
-		disabled,
-		isRow,
-		name,
-		onBlur,
-		onChange,
-		onFocus,
-		size,
-		value,
-		variant,
-		...rest
-	} = props
-	const [isChecked, setIsChecked] = useState(value ?? defaultValue)
+  const {
+    className,
+    colorScheme,
+    defaultValue,
+    disabled,
+    isRow,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    size,
+    value,
+    variant,
+    ...rest
+  } = props
+  const [isChecked, setIsChecked] = useState(value ?? defaultValue)
 
-	const handleOnChange = useCallback(
-		(e: ChangeEvent) => {
-			setIsChecked(e.target.value)
-			onChange?.(e)
-		},
-		[onChange]
-	)
+  const handleOnChange = useCallback(
+    (e: ChangeEvent) => {
+      setIsChecked(e.target.value)
+      onChange?.(e)
+    },
+    [onChange]
+  )
 
-	const context = useMemo(
-		() =>
-			filterUndefined({
-				colorScheme,
-				defaultValue,
-				disabled,
-				isChecked,
-				name,
-				onBlur,
-				onChange: handleOnChange,
-				onFocus,
-				size,
-				value,
-				variant
-			}),
-		[colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
-	)
+  const context = useMemo(
+    () =>
+      filterUndefined({
+        colorScheme,
+        defaultValue,
+        disabled,
+        isChecked,
+        name,
+        onBlur,
+        onChange: handleOnChange,
+        onFocus,
+        size,
+        value,
+        variant
+      }),
+    [colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
+  )
 
-	const aliasedProps = filterUndefined({
-		flexDirection: isRow ? 'row' : undefined
-	} as const)
+  const aliasedProps = filterUndefined({
+    flexDirection: isRow ? 'row' : undefined
+  } as const)
 
-	return (
-		<RadioGroupProvider value={context}>
-			<RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />
-		</RadioGroupProvider>
-	)
+  return (
+    <RadioGroupProvider value={context}>
+      <RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />
+    </RadioGroupProvider>
+  )
 })
 
-RadioGroup.displayName = 'RadioGroup'
-
 export default RadioGroup

package/src/radio/radioGroup.types.ts

@@ -3,21 +3,21 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioGroupProps = SystemProps &
-	ThemingProps<'Radio'> & {
-		/** Available theme colors for this component. */
-		colorScheme?: 'blue' | 'prussian'
-		/** Passes the prop to each radio. */
-		disabled?: boolean
-		/** Displays radio buttons in a row. */
-		isRow?: boolean
-		/** Passes the prop to each checkbox. */
-		name?: string
-		/** Passes the prop to each checkbox. */
-		onBlur?: FocusEventHandler
-		/** Passes the prop to each checkbox. */
-		onChange?: ChangeEventHandler
-		/** Passes the prop to each checkbox. */
-		onFocus?: FocusEventHandler
-		/** Passes the prop to each checkbox. */
-		value?: number | string
-	}
+  ThemingProps<'Radio'> & {
+    /** Available theme colors for this component. */
+    colorScheme?: 'blue' | 'prussian'
+    /** Passes the prop to each radio. */
+    disabled?: boolean
+    /** Displays radio buttons in a row. */
+    isRow?: boolean
+    /** Passes the prop to each checkbox. */
+    name?: string
+    /** Passes the prop to each checkbox. */
+    onBlur?: FocusEventHandler
+    /** Passes the prop to each checkbox. */
+    onChange?: ChangeEventHandler
+    /** Passes the prop to each checkbox. */
+    onFocus?: FocusEventHandler
+    /** Passes the prop to each checkbox. */
+    value?: number | string
+  }

package/src/radio/theme.ts

@@ -1,70 +1,70 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const control = {
-		color: `${c}.80`,
-		hoverColor: `${c}.90`
-	}
+  const control = {
+    color: `${c}.80`,
+    hoverColor: `${c}.90`
+  }
 
-	if (c === 'prussian') {
-		control.hoverColor = 'prussian.70'
-	}
+  if (c === 'prussian') {
+    control.hoverColor = 'prussian.70'
+  }
 
-	return {
-		control
-	}
+  return {
+    control
+  }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'default'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'default'
 }
 
 const parts = ['container', 'control', 'label']
 
 const sizes = {
-	sm: {
-		control: {
-			h: 16,
-			w: 16
-		},
-		label: {
-			size: 'sm'
-		}
-	},
-	md: {
-		control: {
-			h: 20,
-			w: 20
-		},
-		label: {
-			size: 'md'
-		}
-	},
-	lg: {
-		control: {
-			h: 24,
-			w: 24
-		},
-		label: {
-			size: 'lg'
-		}
-	}
+  sm: {
+    control: {
+      h: 16,
+      w: 16
+    },
+    label: {
+      size: 'sm'
+    }
+  },
+  md: {
+    control: {
+      h: 20,
+      w: 20
+    },
+    label: {
+      size: 'md'
+    }
+  },
+  lg: {
+    control: {
+      h: 24,
+      w: 24
+    },
+    label: {
+      size: 'lg'
+    }
+  }
 }
 
 const variants = {
-	default: variantDefault
+  default: variantDefault
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/select/select.tsx

@@ -16,64 +16,62 @@ import useSelect from './useSelect'
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
 export function Select(props: SelectProps) {
-	const {
-		children,
-		defaultValue,
-		disabled,
-		isInvalid,
-		isMultiple,
-		name,
-		onChange,
-		options,
-		placeholder = 'Please select',
-		readOnly,
-		size,
-		value,
-		variant,
-		...rest
-	} = props
+  const {
+    children,
+    defaultValue,
+    disabled,
+    isInvalid,
+    isMultiple,
+    name,
+    onChange,
+    options,
+    placeholder = 'Please select',
+    readOnly,
+    size,
+    value,
+    variant,
+    ...rest
+  } = props
 
-	const selectProps = useSelect({ defaultValue, isMultiple, onChange, value })
+  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value })
 
-	if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
-		console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
-	}
+  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
+    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
+  }
 
-	const context = {
-		disabled,
-		isInvalid,
-		isMultiple,
-		name,
-		options,
-		placeholder,
-		readOnly,
-		size,
-		variant,
-		...selectProps
-	}
+  const context = {
+    disabled,
+    isInvalid,
+    isMultiple,
+    name,
+    options,
+    placeholder,
+    readOnly,
+    size,
+    variant,
+    ...selectProps
+  }
 
-	return (
-		<SelectProvider value={context}>
-			<Popover matchWidth {...rest}>
-				{children ?? (
-					<>
-						<SelectButton />
-						<SelectContent>
-							<SelectGroup>
-								{options?.map(option => (
-									<SelectOption key={option.value} {...option} />
-								))}
-							</SelectGroup>
-						</SelectContent>
-					</>
-				)}
-			</Popover>
-		</SelectProvider>
-	)
+  return (
+    <SelectProvider value={context}>
+      <Popover matchWidth {...rest}>
+        {children ?? (
+          <>
+            <SelectButton />
+            <SelectContent>
+              <SelectGroup>
+                {options?.map(option => (
+                  <SelectOption key={option.value} {...option} />
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </>
+        )}
+      </Popover>
+    </SelectProvider>
+  )
 }
 
-Select.displayName = 'Select'
-
 Select.Button = SelectButton
 Select.Content = SelectContent
 Select.Group = SelectGroup

package/src/select/select.types.ts

@@ -10,42 +10,42 @@ export type SelectButtonProps = ButtonProps
 export type SelectContentProps = PopoverContentProps
 
 export type SelectContext = Pick<
-	SelectProps,
-	'disabled' | 'isInvalid' | 'isMultiple' | 'name' | 'options' | 'placeholder' | 'readOnly' | 'size' | 'variant'
+  SelectProps,
+  'disabled' | 'isInvalid' | 'isMultiple' | 'name' | 'options' | 'placeholder' | 'readOnly' | 'size' | 'variant'
 > &
-	UseSelectReturnType
+  UseSelectReturnType
 
 export type SelectGroupProps = ListProps
 
 export type SelectProps = ThemingProps<'Select'> &
-	PopoverProps &
-	UseSelectProps & {
-		/** Select cannot be opened and is styled accordingly. */
-		disabled?: boolean
-		/** Represents invalid form input and is styled accordingly. */
-		isInvalid?: boolean
-		/** Name of the input. Used in custom change event to support form library integration. */
-		name?: string
-		/** Data prop to display an array of options in the popover. */
-		options?: SelectOptionData[]
-		/** Displayed inside the trigger when no value is selected. */
-		placeholder?: string
-		/** Select cannot be opened and is styled accordingly. */
-		readOnly?: boolean
-	}
+  PopoverProps &
+  UseSelectProps & {
+    /** Select cannot be opened and is styled accordingly. */
+    disabled?: boolean
+    /** Represents invalid form input and is styled accordingly. */
+    isInvalid?: boolean
+    /** Name of the input. Used in custom change event to support form library integration. */
+    name?: string
+    /** Data prop to display an array of options in the popover. */
+    options?: SelectOptionData[]
+    /** Displayed inside the trigger when no value is selected. */
+    placeholder?: string
+    /** Select cannot be opened and is styled accordingly. */
+    readOnly?: boolean
+  }
 
 export type SelectOptionData = {
-	/** Option is displayed as disabled. */
-	disabled?: boolean
-	/** Text label of the option. */
-	text?: string
-	/** Value of a given option. */
-	value?: SelectValue
+  /** Option is displayed as disabled. */
+  disabled?: boolean
+  /** Text label of the option. */
+  text?: string
+  /** Value of a given option. */
+  value?: SelectValue
 }
 
 export type SelectOptionProps = ListItemProps & {
-	/** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */
-	value?: SelectValue
+  /** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */
+  value?: SelectValue
 }
 
 export type SelectValue = number | string

package/src/select/selectButton.tsx

@@ -13,54 +13,52 @@ import { SelectButtonProps } from './select.types'
  * Includes special styling for disabled, readOnly and invalid states.
  */
 export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}
-	const styles = useStyleConfig('Select', useSelectContext())
+  const { className, ...rest } = props
+  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}
+  const styles = useStyleConfig('Select', useSelectContext())
 
-	const text = valueText || placeholder
-	const textColor = disabled ? 'disabled.text' : !valueText ? 'grey.60' : undefined
-	const iconColor = disabled ? 'disabled.text' : 'blue.80'
+  const text = valueText || placeholder
+  const textColor = disabled ? 'disabled.text' : !valueText ? 'grey.60' : undefined
+  const iconColor = disabled ? 'disabled.text' : 'blue.80'
 
-	const readOnlyProps = readOnly
-		? {
-				activeBg: 'disabled.bg',
-				bg: 'disabled.bg',
-				color: 'prussian.80',
-				cursor: 'auto',
-				disabled: true,
-				hoverBg: 'disabled.bg'
-		  }
-		: {}
+  const readOnlyProps = readOnly
+    ? {
+        activeBg: 'disabled.bg',
+        bg: 'disabled.bg',
+        color: 'prussian.80',
+        cursor: 'auto',
+        disabled: true,
+        hoverBg: 'disabled.bg'
+      }
+    : {}
 
-	const isInvalidProps = isInvalid
-		? {
-				borderColor: 'red.80',
-				hoverBorderColor: 'red.80'
-		  }
-		: {}
+  const isInvalidProps = isInvalid
+    ? {
+        borderColor: 'red.80',
+        hoverBorderColor: 'red.80'
+      }
+    : {}
 
-	return (
-		<PopoverTrigger
-			as={LineButton}
-			className={cs('vui-selectButton', className)}
-			colorScheme="prussian"
-			disabled={disabled}
-			focusRing={2}
-			fontWeight="regular"
-			iconRight={<Button.Icon color={iconColor} ml="auto" name="falAngleDown" />}
-			isFullWidth
-			px={1}
-			ref={ref}
-			text={<Button.Text color={textColor}>{text}</Button.Text>}
-			userSelect="text"
-			{...styles.button}
-			{...readOnlyProps}
-			{...isInvalidProps}
-			{...rest}
-		/>
-	)
+  return (
+    <PopoverTrigger
+      as={LineButton}
+      className={cs('vui-selectButton', className)}
+      colorScheme="prussian"
+      disabled={disabled}
+      focusRing={2}
+      fontWeight="regular"
+      iconRight={<Button.Icon color={iconColor} ml="auto" name="falAngleDown" />}
+      isFullWidth
+      px={1}
+      ref={ref}
+      text={<Button.Text color={textColor}>{text}</Button.Text>}
+      userSelect="text"
+      {...styles.button}
+      {...readOnlyProps}
+      {...isInvalidProps}
+      {...rest}
+    />
+  )
 })
 
-SelectButton.displayName = 'SelectButton'
-
 export default SelectButton

package/src/select/selectContent.tsx

@@ -8,21 +8,19 @@ import { SelectContentProps } from './select.types'
 
 /** Extends PopoverContent to display given content is an overlaying box. */
 export const SelectContent = vui<'div', SelectContentProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Select', useSelectContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Select', useSelectContext())
 
-	return (
-		<PopoverContent
-			className={cs('vui-selectContent', className)}
-			column
-			py={1}
-			ref={ref}
-			{...styles.content}
-			{...rest}
-		/>
-	)
+  return (
+    <PopoverContent
+      className={cs('vui-selectContent', className)}
+      column
+      py={1}
+      ref={ref}
+      {...styles.content}
+      {...rest}
+    />
+  )
 })
 
-SelectContent.displayName = 'SelectContent'
-
 export default SelectContent

package/src/select/selectGroup.tsx

@@ -8,17 +8,15 @@ import { SelectGroupProps } from './select.types'
 
 /** Displays a list of options with optional heading to describe an individual group. */
 export const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Select', useSelectContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Select', useSelectContext())
 
-	return <List className={cs('vui-selectGroup', className)} ref={ref} size="sm" {...styles.group} {...rest} />
+  return <List className={cs('vui-selectGroup', className)} ref={ref} size="sm" {...styles.group} {...rest} />
 }) as VuiComponent<'ul', SelectGroupProps> & {
-	Divider: typeof ListDivider
-	Heading: typeof ListHeading
+  Divider: typeof ListDivider
+  Heading: typeof ListHeading
 }
 
-SelectGroup.displayName = 'SelectGroup'
-
 SelectGroup.Divider = ListDivider
 SelectGroup.Heading = ListHeading