@veracity/vui 1.0.0 → 1.1.0

package/src/select/selectOption.tsx

@@ -14,52 +14,50 @@ 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, 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 onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
-		// Clone original click event
-		const nativeEvent = e.nativeEvent || e
-		const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)
-
-		// Extend cloned event with 'value' and 'name'
-		Object.defineProperty(clonedEvent, 'target', {
-			writable: true,
-			value: { value: valueProp, name }
-		})
-
-		onClickProp?.(e)
-		onChange?.(clonedEvent)
-		!isMultiple && instance?.hide()
-	})
-
-	return (
-		<ListItem
-			className={cs('vui-selectOption', className)}
-			disabled={disabled}
-			isInteractive
-			isSelected={isSelected}
-			onClick={onClick}
-			ref={ref}
-			value={valueProp}
-			{...styles.item}
-			{...rest}
-		>
-			{children ??
-				(isMultiple && (
-					<>
-						<Checkbox checked={isSelected} disabled={disabled} mr={1} />
-						<List.Text>{props.text}</List.Text>
-					</>
-				))}
-		</ListItem>
-	)
+  const { children, className, disabled, 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 onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
+    // Clone original click event
+    const nativeEvent = e.nativeEvent || e
+    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)
+
+    // Extend cloned event with 'value' and 'name'
+    Object.defineProperty(clonedEvent, 'target', {
+      writable: true,
+      value: { value: valueProp, name }
+    })
+
+    onClickProp?.(e)
+    onChange?.(clonedEvent)
+    !isMultiple && instance?.hide()
+  })
+
+  return (
+    <ListItem
+      className={cs('vui-selectOption', className)}
+      disabled={disabled}
+      isInteractive
+      isSelected={isSelected}
+      onClick={onClick}
+      ref={ref}
+      value={valueProp}
+      {...styles.item}
+      {...rest}
+    >
+      {children ??
+        (isMultiple && (
+          <>
+            <Checkbox checked={isSelected} disabled={disabled} mr={1} />
+            <List.Text>{props.text}</List.Text>
+          </>
+        ))}
+    </ListItem>
+  )
 })
 
-SelectOption.displayName = 'SelectOption'
-
 export default SelectOption

package/src/select/theme.ts

@@ -1,40 +1,40 @@
 const baseStyle = {}
 
 const defaultProps = {
-	size: 'md',
-	variant: 'outlined'
+  size: 'md',
+  variant: 'outlined'
 }
 
 const parts = ['container', 'button', 'content', 'group', 'option']
 
 const sizes = {
-	sm: {
-		button: {
-			size: 'sm'
-		}
-	},
-	md: {
-		button: {
-			size: 'md'
-		}
-	}
+  sm: {
+    button: {
+      size: 'sm'
+    }
+  },
+  md: {
+    button: {
+      size: 'md'
+    }
+  }
 }
 
 const variants = {
-	outlined: {
-		button: {
-			hoverBg: 'transparent',
-			activeBg: 'transparent',
-			borderColor: 'grey.60',
-			hoverBorderColor: 'grey.60'
-		}
-	}
+  outlined: {
+    button: {
+      hoverBg: 'transparent',
+      activeBg: 'transparent',
+      borderColor: 'grey.60',
+      hoverBorderColor: 'grey.60'
+    }
+  }
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/select/useSelect.tsx

@@ -5,30 +5,30 @@ import { UseSelectProps } from './useSelect.types'
 
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props: UseSelectProps) {
-	const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp } = props
-
-	// Not using useControlled here, because we need custom value setter when uncontrolled
-	const [stateValue, setStateValue] = useState(defaultValue)
-	const isControlled = valueProp !== undefined
-	const value = isControlled ? valueProp : stateValue
-
-	/** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
-	const onChange = useCallbackRef((e: ChangeEvent) => {
-		onChangeProp?.(e)
-
-		if (!isControlled) {
-			setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))
-		}
-	})
-
-	const valueText =
-		isMultiple && Array.isArray(value)
-			? value[0]
-				? `${value[0]}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
-				: undefined
-			: value
-
-	return { onChange, value, valueText }
+  const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp } = props
+
+  // Not using useControlled here, because we need custom value setter when uncontrolled
+  const [stateValue, setStateValue] = useState(defaultValue)
+  const isControlled = valueProp !== undefined
+  const value = isControlled ? valueProp : stateValue
+
+  /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
+  const onChange = useCallbackRef((e: ChangeEvent) => {
+    onChangeProp?.(e)
+
+    if (!isControlled) {
+      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))
+    }
+  })
+
+  const valueText =
+    isMultiple && Array.isArray(value)
+      ? value[0]
+        ? `${value[0]}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+        : undefined
+      : value
+
+  return { onChange, value, valueText }
 }
 
 export type UseSelectReturnType = ReturnType<typeof useSelect>

package/src/select/useSelect.types.ts

@@ -2,17 +2,17 @@ import { ChangeEvent } from '../utils'
 import { SelectValue } from './select.types'
 
 export type UseSelectProps = {
-	/** Currently selected value in controlled mode. */
-	value?: SelectValue | SelectValue[]
-	/** Provides initial value in uncontrolled mode. */
-	defaultValue?: SelectValue | SelectValue[]
-	/** Allows choosing multiple values. Popover won't close automatically on item click. */
-	isMultiple?: boolean
-	/**
-	 * Callback triggered when an option is selected.
-	 *
-	 * WARNING: In reality it's a click event extended with our own 'value' and 'name' on e.target.
-	 * It's this way to support external form libraries and typed as input ChangeEvent to avoid type conflicts.
-	 */
-	onChange?: (e: ChangeEvent) => void
+  /** Currently selected value in controlled mode. */
+  value?: SelectValue | SelectValue[]
+  /** Provides initial value in uncontrolled mode. */
+  defaultValue?: SelectValue | SelectValue[]
+  /** Allows choosing multiple values. Popover won't close automatically on item click. */
+  isMultiple?: boolean
+  /**
+   * Callback triggered when an option is selected.
+   *
+   * WARNING: In reality it's a click event extended with our own 'value' and 'name' on e.target.
+   * It's this way to support external form libraries and typed as input ChangeEvent to avoid type conflicts.
+   */
+  onChange?: (e: ChangeEvent) => void
 }

package/src/skeleton/skeleton.tsx

@@ -5,37 +5,35 @@ import { cs, filterUndefined } from '../utils'
 import { SkeletonProps } from './skeleton.types'
 
 export const SkeletonBase = styled.divBox`
-	animation: vui-pulse 1.5s ease-in-out 0.5s infinite;
+  animation: vui-pulse 1.5s ease-in-out 0.5s infinite;
 `
 /**
  * Displays one or more animated skeleton elements to signify loading content.
  */
 export const Skeleton = vui<'div', SkeletonProps>((props, ref) => {
-	const { className, repeat = 1, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Skeleton', props)
+  const { className, repeat = 1, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Skeleton', props)
 
-	const arr = Array(repeat).fill(0)
+  const arr = Array(repeat).fill(0)
 
-	const aliasedProps = filterUndefined({
-		w: props.variant === 'circle' ? styles.h : undefined
-	})
+  const aliasedProps = filterUndefined({
+    w: props.variant === 'circle' ? styles.h : undefined
+  })
 
-	return (
-		<>
-			{arr.map((_, i) => (
-				<SkeletonBase
-					className={cs('vui-skeleton', className)}
-					key={i}
-					ref={ref}
-					{...styles}
-					{...aliasedProps}
-					{...rest}
-				/>
-			))}
-		</>
-	)
+  return (
+    <>
+      {arr.map((_, i) => (
+        <SkeletonBase
+          className={cs('vui-skeleton', className)}
+          key={i}
+          ref={ref}
+          {...styles}
+          {...aliasedProps}
+          {...rest}
+        />
+      ))}
+    </>
+  )
 }) as VuiComponent<'div', SkeletonProps>
 
-// Skeleton.displayName = 'Skeleton'
-
 export default Skeleton

package/src/skeleton/skeleton.types.ts

@@ -2,11 +2,11 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type SkeletonProps = SystemProps &
-	ThemingProps<'Skeleton'> & {
-		/** Children are disabled for this component. */
-		children?: never
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'grey'
-		/** Displays given amount of skeleton elements. */
-		repeat?: number
-	}
+  ThemingProps<'Skeleton'> & {
+    /** Children are disabled for this component. */
+    children?: never
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey'
+    /** Displays given amount of skeleton elements. */
+    repeat?: number
+  }

package/src/skeleton/theme.ts

@@ -1,59 +1,59 @@
 import { Dict } from '../utils'
 
 function variantCircle(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const styles = {
-		borderRadius: '50%',
-		bg: `${c}.20`
-	}
+  const styles = {
+    borderRadius: '50%',
+    bg: `${c}.20`
+  }
 
-	return styles
+  return styles
 }
 
 function variantRectangle(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const styles = {
-		borderRadius: 'md',
-		bg: `${c}.20`,
-		w: '100%'
-	}
+  const styles = {
+    borderRadius: 'md',
+    bg: `${c}.20`,
+    w: '100%'
+  }
 
-	return styles
+  return styles
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'rect'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'rect'
 }
 
 const sizes = {
-	xs: {
-		h: 24
-	},
-	sm: {
-		h: 32
-	},
-	md: {
-		h: 40
-	},
-	lg: {
-		h: 48
-	}
+  xs: {
+    h: 24
+  },
+  sm: {
+    h: 32
+  },
+  md: {
+    h: 40
+  },
+  lg: {
+    h: 48
+  }
 }
 
 const variants = {
-	circle: variantCircle,
-	rect: variantRectangle
+  circle: variantCircle,
+  rect: variantRectangle
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }

package/src/spinner/consts.ts

@@ -1,22 +1,22 @@
 import { Dict } from '../utils'
 
 export const spinnerPositionMapping = {
-	bottom: {
-		container: { flexDirection: 'column' }
-	},
-	left: {
-		container: { flexDirection: 'row-reverse' }
-	},
-	right: {
-		container: { flexDirection: 'row' }
-	},
-	top: {
-		container: { flexDirection: 'column-reverse' }
-	}
+  bottom: {
+    container: { flexDirection: 'column' }
+  },
+  left: {
+    container: { flexDirection: 'row-reverse' }
+  },
+  right: {
+    container: { flexDirection: 'row' }
+  },
+  top: {
+    container: { flexDirection: 'column-reverse' }
+  }
 }
 
 export const spinnerSpeedMapping: Dict<string> = {
-	slow: '1s',
-	normal: '0.9s',
-	fast: '0.8s'
+  slow: '1s',
+  normal: '0.9s',
+  fast: '0.8s'
 }

package/src/spinner/spinner.tsx

@@ -8,9 +8,9 @@ import { spinnerPositionMapping, spinnerSpeedMapping } from './consts'
 import { SpinnerProps } from './spinner.types'
 
 export const SpinnerCircle = styled.divBox`
-	border-radius: round;
-	display: flex;
-	flex-shrink: 0;
+  border-radius: round;
+  display: flex;
+  flex-shrink: 0;
 `
 
 /**
@@ -19,56 +19,54 @@ export const SpinnerCircle = styled.divBox`
  * Handles different positioning scenarios, speeds and coloring of the circle.
  */
 export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
-	const {
-		className,
-		emptyColor,
-		size,
-		speed: speedProp = 'normal',
-		text,
-		textPosition = 'bottom',
-		thickness,
-		...rest
-	} = props
-	const styles = useStyleConfig('Spinner', props)
+  const {
+    className,
+    emptyColor,
+    size,
+    speed: speedProp = 'normal',
+    text,
+    textPosition = 'bottom',
+    thickness,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Spinner', props)
 
-	const isCustomSize = typeof size === 'number'
-	const positionProps = spinnerPositionMapping[textPosition]
-	const speed = spinnerSpeedMapping[speedProp] ?? speedProp
+  const isCustomSize = typeof size === 'number'
+  const positionProps = spinnerPositionMapping[textPosition]
+  const speed = spinnerSpeedMapping[speedProp] ?? speedProp
 
-	const circleProps = filterUndefined({
-		borderColor: emptyColor,
-		borderWidth: isCustomSize ? thickness ?? 4 : thickness,
-		h: isCustomSize ? size : undefined,
-		w: isCustomSize ? size : undefined
-	})
+  const circleProps = filterUndefined({
+    borderColor: emptyColor,
+    borderWidth: isCustomSize ? thickness ?? 4 : thickness,
+    h: isCustomSize ? size : undefined,
+    w: isCustomSize ? size : undefined
+  })
 
-	return (
-		<Box
-			center
-			className={cs('vui-spinner', className)}
-			gap={1}
-			ref={ref}
-			transitionDuration="fast"
-			{...styles.container}
-			{...positionProps.container}
-			{...rest}
-		>
-			<SpinnerCircle
-				animation={`vui-spin ${speed} linear infinite`}
-				className="vui-spinnerCircle"
-				{...styles.circle}
-				{...circleProps}
-			/>
+  return (
+    <Box
+      center
+      className={cs('vui-spinner', className)}
+      gap={1}
+      ref={ref}
+      transitionDuration="fast"
+      {...styles.container}
+      {...positionProps.container}
+      {...rest}
+    >
+      <SpinnerCircle
+        animation={`vui-spin ${speed} linear infinite`}
+        className="vui-spinnerCircle"
+        {...styles.circle}
+        {...circleProps}
+      />
 
-			{text && (
-				<T className="vui-spinnerText" {...styles.text}>
-					{text}
-				</T>
-			)}
-		</Box>
-	)
+      {text && (
+        <T className="vui-spinnerText" {...styles.text}>
+          {text}
+        </T>
+      )}
+    </Box>
+  )
 })
 
-// Spinner.displayName = 'Spinner'
-
 export default Spinner

package/src/spinner/spinner.types.ts

@@ -2,21 +2,21 @@ import { BoxProps } from '../box'
 import { ThemingProps } from '../theme'
 
 export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> &
-	Omit<ThemingProps<'Spinner'>, 'size'> & {
-		/** Children are disabled for this component. */
-		children?: never
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'grey' | 'prussian'
-		/** Color of the 'empty' part of the circle. */
-		emptyColor?: string | 'transparent'
-		/** Amount of time needed to make a full rotation. */
-		speed?: 'normal' | 'fast' | 'slow'
-		/** Theme size or a number defining height and width. */
-		size?: ThemingProps<'Spinner'>['size'] | number
-		/** Displays given text next to the spinner. */
-		text?: string
-		/** Text placement relative to the spinner. */
-		textPosition?: 'bottom' | 'left' | 'right' | 'top'
-		/** Thickness of the spinner circle in pixels. */
-		thickness?: number
-	}
+  Omit<ThemingProps<'Spinner'>, 'size'> & {
+    /** Children are disabled for this component. */
+    children?: never
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey' | 'prussian'
+    /** Color of the 'empty' part of the circle. */
+    emptyColor?: string | 'transparent'
+    /** Amount of time needed to make a full rotation. */
+    speed?: 'normal' | 'fast' | 'slow'
+    /** Theme size or a number defining height and width. */
+    size?: ThemingProps<'Spinner'>['size'] | number
+    /** Displays given text next to the spinner. */
+    text?: string
+    /** Text placement relative to the spinner. */
+    textPosition?: 'bottom' | 'left' | 'right' | 'top'
+    /** Thickness of the spinner circle in pixels. */
+    thickness?: number
+  }