@veracity/vui 1.0.0 → 1.1.0

package/src/popover/usePopover.ts

@@ -11,112 +11,112 @@ import { UsePopoverProps } from './usePopover.types'
  * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
  */
 export default function usePopover(props: UsePopoverProps = {}) {
-	const {
-		closeOnBlur = true,
-		closeOnEsc = true,
-		defaultIsOpen = false,
-		// disablePortal,
-		isOpen: isOpenProp,
-		matchWidth,
-		offset,
-		onClose: onCloseProp,
-		onOpen: onOpenProp,
-		options,
-		placement = 'bottom-start',
-		trigger = 'click'
-	} = props
+  const {
+    closeOnBlur = true,
+    closeOnEsc = true,
+    defaultIsOpen = false,
+    // disablePortal,
+    isOpen: isOpenProp,
+    matchWidth,
+    offset,
+    onClose: onCloseProp,
+    onOpen: onOpenProp,
+    options,
+    placement = 'bottom-start',
+    trigger = 'click'
+  } = props
 
-	const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen)
-	const [instance, setInstance] = useState<Instance | null>(null)
-	const [reference, setReference] = useState<HTMLElement | null>(null)
-	const [popper, setPopper] = useState<HTMLElement | null>(null)
+  const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen)
+  const [instance, setInstance] = useState<Instance | null>(null)
+  const [reference, setReference] = useState<HTMLElement | null>(null)
+  const [popper, setPopper] = useState<HTMLElement | null>(null)
 
-	const close = useCallback(() => instance?.hide(), [instance])
-	const onClose = useCallbackRef(onCloseProp)
-	const onOpen = useCallbackRef(onOpenProp)
-	const open = useCallback(() => instance?.show(), [instance])
+  const close = useCallback(() => instance?.hide(), [instance])
+  const onClose = useCallbackRef(onCloseProp)
+  const onOpen = useCallbackRef(onOpenProp)
+  const open = useCallback(() => instance?.show(), [instance])
 
-	const isControlled = isOpenProp !== undefined
+  const isControlled = isOpenProp !== undefined
 
-	const tippyOptions: Partial<TippyProps> = useMemo(() => {
-		const {
-			offset: optionsOffset,
-			onHidden,
-			onHide,
-			onShow,
-			plugins = [],
-			popperOptions = {},
-			...otherOptions
-		} = options ?? {}
+  const tippyOptions: Partial<TippyProps> = useMemo(() => {
+    const {
+      offset: optionsOffset,
+      onHidden,
+      onHide,
+      onShow,
+      plugins = [],
+      popperOptions = {},
+      ...otherOptions
+    } = options ?? {}
 
-		return {
-			arrow: false,
-			duration: [200, 150],
-			hideOnClick: !isControlled ? closeOnBlur : false,
-			interactive: true,
-			maxWidth: 'none',
-			offset: optionsOffset ?? offset ?? [0, 4],
-			onHidden: instance => {
-				setIsOpen(false)
-				onHidden?.(instance)
-			},
-			onHide: instance => {
-				onClose(instance)
-				onHide?.(instance)
-			},
-			onShow: instance => {
-				setIsOpen(true)
-				onOpen(instance)
-				onShow?.(instance)
-			},
-			placement,
-			plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
-			popperOptions: {
-				...popperOptions,
-				modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
-			},
-			showOnCreate: isOpenProp ?? defaultIsOpen,
-			trigger: !isControlled ? trigger : 'manual',
-			...otherOptions
-		}
-	}, [closeOnBlur, closeOnEsc, offset, options, placement, trigger])
+    return {
+      arrow: false,
+      duration: [200, 150],
+      hideOnClick: !isControlled ? closeOnBlur : false,
+      interactive: true,
+      maxWidth: 'none',
+      offset: optionsOffset ?? offset ?? [0, 4],
+      onHidden: instance => {
+        setIsOpen(false)
+        onHidden?.(instance)
+      },
+      onHide: instance => {
+        onClose(instance)
+        onHide?.(instance)
+      },
+      onShow: instance => {
+        setIsOpen(true)
+        onOpen(instance)
+        onShow?.(instance)
+      },
+      placement,
+      plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
+      popperOptions: {
+        ...popperOptions,
+        modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
+      },
+      showOnCreate: isOpenProp ?? defaultIsOpen,
+      trigger: !isControlled ? trigger : 'manual',
+      ...otherOptions
+    }
+  }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger])
 
-	// Create a new Tippy instance
-	useEffect(() => {
-		if (popper !== null && reference !== null) {
-			// Destroy old instance to ensure new options work
-			instance?.destroy()
+  // Create a new Tippy instance
+  useEffect(() => {
+    if (popper !== null && reference !== null) {
+      // Destroy old instance to ensure new options work
+      instance?.destroy()
 
-			const newInstance = tippy(reference, {
-				...tippyOptions,
-				content: popper
-			})
+      const newInstance = tippy(reference, {
+        ...tippyOptions,
+        content: popper
+      })
 
-			setInstance(newInstance)
-		}
-	}, [popper, tippyOptions, trigger])
+      setInstance(newInstance)
+    }
+  }, [popper, tippyOptions, trigger])
 
-	// Handle showing/hiding popup in controlled mode
-	useEffect(() => {
-		if (isControlled) {
-			if (isOpenProp) {
-				instance?.show()
-			} else {
-				instance?.hide()
-			}
-		}
-	}, [isOpenProp])
+  // Handle showing/hiding popup in controlled mode
+  useEffect(() => {
+    if (isControlled) {
+      if (isOpenProp) {
+        instance?.show()
+      } else {
+        instance?.hide()
+      }
+    }
+  }, [isOpenProp])
 
-	return {
-		close,
-		instance,
-		isOpen,
-		open,
-		popper,
-		reference,
-		setPopper,
-		setReference
-	}
+  return {
+    close,
+    instance,
+    isOpen,
+    open,
+    popper,
+    reference,
+    setPopper,
+    setReference
+  }
 }
 
 export type UsePopoverType = ReturnType<typeof usePopover>

package/src/popover/usePopover.types.ts

@@ -5,27 +5,27 @@ import { AnyString } from '../utils'
 export type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter'
 
 export type UsePopoverProps = {
-	/** Content closes when clicking the trigger or anywhere outside. @default true */
-	closeOnBlur?: boolean
-	/** Content closes when pressing 'Escape'. @default true */
-	closeOnEsc?: boolean
-	/** Content is opened on first render. Uncontrolled mode. */
-	defaultIsOpen?: boolean
-	// disablePortal?: boolean
-	/** Content is opened/closed by the consumer. Controlled mode. */
-	isOpen?: boolean
-	/** Sets the content element width to be the same as trigger element. */
-	matchWidth?: boolean
-	/** Displaces content from the trigger in pixels. */
-	offset?: TippyProps['offset']
-	/** Invoked once content is fully hidden. */
-	onClose?: (instance: Instance<TippyProps>) => void
-	/** Invoked once content begins to show. */
-	onOpen?: (instance: Instance<TippyProps>) => void
-	/** Object with any Tippy props. */
-	options?: Partial<TippyProps>
-	/** Preferred placement of the content. Might be flipped if needs more space. */
-	placement?: Placement
-	/** Determintes the events that cause the content to show. */
-	trigger?: PopoverTrigger | AnyString
+  /** Content closes when clicking the trigger or anywhere outside. @default true */
+  closeOnBlur?: boolean
+  /** Content closes when pressing 'Escape'. @default true */
+  closeOnEsc?: boolean
+  /** Content is opened on first render. Uncontrolled mode. */
+  defaultIsOpen?: boolean
+  // disablePortal?: boolean
+  /** Content is opened/closed by the consumer. Controlled mode. */
+  isOpen?: boolean
+  /** Sets the content element width to be the same as trigger element. */
+  matchWidth?: boolean
+  /** Displaces content from the trigger in pixels. */
+  offset?: TippyProps['offset']
+  /** Invoked once content is fully hidden. */
+  onClose?: (instance: Instance<TippyProps>) => void
+  /** Invoked once content begins to show. */
+  onOpen?: (instance: Instance<TippyProps>) => void
+  /** Object with any Tippy props. */
+  options?: Partial<TippyProps>
+  /** Preferred placement of the content. Might be flipped if needs more space. */
+  placement?: Placement
+  /** Determintes the events that cause the content to show. */
+  trigger?: PopoverTrigger | AnyString
 }

package/src/portal/portal.tsx

@@ -5,18 +5,18 @@ import { PortalProps } from './portal.types'
 
 /** Provided children are portaled to document.body or custom container. */
 export const Portal: FC<PortalProps> = props => {
-	const { children, containerRef, disablePortal } = props
-	const [mountNode, setMountNode] = useState<HTMLElement>()
+  const { children, containerRef, disablePortal } = props
+  const [mountNode, setMountNode] = useState<HTMLElement>()
 
-	useEffect(() => {
-		if (!disablePortal) {
-			setMountNode(containerRef?.current ?? document.body)
-		}
-	}, [disablePortal])
+  useEffect(() => {
+    if (!disablePortal) {
+      setMountNode(containerRef?.current ?? document.body)
+    }
+  }, [disablePortal])
 
-	if (disablePortal) return <>{children}</>
+  if (disablePortal) return <>{children}</>
 
-	return mountNode ? createPortal(children, mountNode) : <>{mountNode}</>
+  return mountNode ? createPortal(children, mountNode) : <>{mountNode}</>
 }
 
 export default Portal

package/src/portal/portal.types.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react'
 
 export type PortalProps = {
-	/** Ref of a custom container that will be used instead of document.body. */
-	containerRef?: RefObject<HTMLElement | null>
-	/** Content will be rendered as usual, without portaling. */
-	disablePortal?: boolean
+  /** Ref of a custom container that will be used instead of document.body. */
+  containerRef?: RefObject<HTMLElement | null>
+  /** Content will be rendered as usual, without portaling. */
+  disablePortal?: boolean
 }

package/src/radio/radio.tsx

@@ -8,44 +8,44 @@ import { useRadioGroupContext } from './context'
 import { RadioProps, RadioStyleProps } from './radio.types'
 
 const RadioControl = styled.spanBox`
-	border-radius: 50%;
-	display: inline-flex;
-	flex-shrink: 0;
-	position: relative;
-	transition-duration: fast;
+  border-radius: 50%;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+  transition-duration: fast;
 `
 
 const RadioInput = styled.input`
-	cursor: inherit;
-	height: 100%;
-	left: 0;
-	margin: 0;
-	opacity: 0;
-	padding: 0;
-	position: absolute;
-	top: 0;
-	width: 100%;
-	z-index: 1;
+  cursor: inherit;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
 `
 
 export const RadioBase = styled.labelBox<RadioStyleProps>`
-	align-items: center;
-	cursor: pointer;
-	display: inline-flex;
-	width: fit-content;
-
-	&:not([aria-disabled='true']):hover .vui-radioControl {
-		color: ${p => th.color(p.controlHoverColor)};
-	}
-
-	&[aria-disabled='true'] {
-		color: disabled.color;
-		cursor: not-allowed;
-
-		.vui-radioControl {
-			color: disabled.color;
-		}
-	}
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+
+  &:not([aria-disabled='true']):hover .vui-radioControl {
+    color: ${p => th.color(p.controlHoverColor)};
+  }
+
+  &[aria-disabled='true'] {
+    color: disabled.color;
+    cursor: not-allowed;
+
+    .vui-radioControl {
+      color: disabled.color;
+    }
+  }
 `
 
 /**
@@ -53,92 +53,90 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
  * Uses icons to display itself in different states.
  */
 export const Radio = vui<'span', RadioProps>((props, ref) => {
-	const {
-		defaultValue: groupDefaultValue,
-		isChecked: groupIsChecked,
-		onChange: groupOnChange,
-		value: groupValue,
-		...radioGroupProps
-	} = useRadioGroupContext() ?? {}
-	const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined
-
-	const mergedProps = { ...radioGroupProps, ...props }
-	const {
-		checked = groupValue !== undefined ? props.value === groupValue : undefined,
-		children,
-		className,
-		defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,
-		disabled,
-		icon: iconProp = 'cuiRadioUnselected',
-		iconChecked = 'cuiRadioSelected',
-		id,
-		inputProps,
-		inputRef,
-		label,
-		name,
-		onChange,
-		required,
-		value,
-		...rest
-	} = omitThemingProps(mergedProps)
-	const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)
-	const styles = useStyleConfig('Radio', mergedProps)
-	const { color: controlColor, hoverColor, ...controlStyles } = styles.control
-
-	const icon = isChecked ? iconChecked : iconProp
-	const controlMr = children || label ? 1 : 0
-	const color = isChecked ? controlColor : 'grey.60'
-	const controlHoverColor = isChecked ? hoverColor : 'grey.90'
-
-	useEffect(() => {
-		if (groupIsChecked !== undefined) {
-			setIsChecked(groupIsChecked === value)
-		} else if (checked !== undefined) {
-			setIsChecked(checked)
-		}
-	}, [checked, groupIsChecked])
-
-	function handleOnChange(e: ChangeEvent) {
-		groupOnChange?.(e)
-		onChange?.(e)
-	}
-
-	const aliasedProps = filterUndefined({
-		'aria-disabled': disabled
-	})
-
-	return (
-		<RadioBase
-			className={cs('vui-radio', className)}
-			controlHoverColor={controlHoverColor}
-			ref={ref}
-			{...styles.container}
-			{...aliasedProps}
-			{...rest}
-		>
-			<RadioControl className="vui-radioControl" color={color} focusWithinRing={3} mr={controlMr} {...controlStyles}>
-				<RadioInput
-					className="vui-radioInput"
-					onChange={handleOnChange}
-					ref={inputRef}
-					type="radio"
-					{...{ checked, defaultChecked, disabled, id, name, required, value }}
-					{...inputProps}
-				/>
-
-				<Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
-			</RadioControl>
-
-			{children ??
-				(label && (
-					<T className="vui-radioLabel" lineHeight="normal" {...styles.label}>
-						{label}
-					</T>
-				))}
-		</RadioBase>
-	)
+  const {
+    defaultValue: groupDefaultValue,
+    isChecked: groupIsChecked,
+    onChange: groupOnChange,
+    value: groupValue,
+    ...radioGroupProps
+  } = useRadioGroupContext() ?? {}
+  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined
+
+  const mergedProps = { ...radioGroupProps, ...props }
+  const {
+    checked = groupValue !== undefined ? props.value === groupValue : undefined,
+    children,
+    className,
+    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,
+    disabled,
+    icon: iconProp = 'cuiRadioUnselected',
+    iconChecked = 'cuiRadioSelected',
+    id,
+    inputProps,
+    inputRef,
+    label,
+    name,
+    onChange,
+    required,
+    value,
+    ...rest
+  } = omitThemingProps(mergedProps)
+  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)
+  const styles = useStyleConfig('Radio', mergedProps)
+  const { color: controlColor, hoverColor, ...controlStyles } = styles.control
+
+  const icon = isChecked ? iconChecked : iconProp
+  const controlMr = children || label ? 1 : 0
+  const color = isChecked ? controlColor : 'grey.60'
+  const controlHoverColor = isChecked ? hoverColor : 'grey.90'
+
+  useEffect(() => {
+    if (groupIsChecked !== undefined) {
+      setIsChecked(groupIsChecked === value)
+    } else if (checked !== undefined) {
+      setIsChecked(checked)
+    }
+  }, [checked, groupIsChecked])
+
+  function handleOnChange(e: ChangeEvent) {
+    groupOnChange?.(e)
+    onChange?.(e)
+  }
+
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled
+  })
+
+  return (
+    <RadioBase
+      className={cs('vui-radio', className)}
+      controlHoverColor={controlHoverColor}
+      ref={ref}
+      {...styles.container}
+      {...aliasedProps}
+      {...rest}
+    >
+      <RadioControl className="vui-radioControl" color={color} focusWithinRing={3} mr={controlMr} {...controlStyles}>
+        <RadioInput
+          className="vui-radioInput"
+          onChange={handleOnChange}
+          ref={inputRef}
+          type="radio"
+          {...{ checked, defaultChecked, disabled, id, name, required, value }}
+          {...inputProps}
+        />
+
+        <Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
+      </RadioControl>
+
+      {children ??
+        (label && (
+          <T className="vui-radioLabel" lineHeight="normal" {...styles.label}>
+            {label}
+          </T>
+        ))}
+    </RadioBase>
+  )
 })
 
-Radio.displayName = 'Radio'
-
 export default Radio

package/src/radio/radio.types.ts

@@ -6,38 +6,38 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioProps = SystemProps &
-	ThemingProps<'Radio'> & {
-		/** Provides value to radio in controlled mode. */
-		checked?: boolean
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'prussian'
-		/** Disables radio and related elements with the right styling. */
-		disabled?: boolean
-		/** Icon used when not checked. @default cuiRadioSelected */
-		icon?: IconProp
-		/** Icon used when checked. @default cuiRadioUnselected */
-		iconChecked?: IconProp
-		/** Props object passed to the inner input element. */
-		inputProps?: HTMLAttributes<HTMLInputElement>
-		/** Ref passed to the inner input element. */
-		inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-		/** Socket placing text to the left of the checkbox. */
-		label?: string
-		/** Passed to the inner input. */
-		name?: string
-		/** Passed to the inner input. */
-		onBlur?: FocusEventHandler
-		/** Passed to the inner input. */
-		onChange?: ChangeEventHandler
-		/** Passed to the inner input. */
-		onFocus?: FocusEventHandler
-		/** Passed to the inner input. */
-		required?: boolean
-		/** Passed to the inner input. */
-		value?: number | string
-	}
+  ThemingProps<'Radio'> & {
+    /** Provides value to radio in controlled mode. */
+    checked?: boolean
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'prussian'
+    /** Disables radio and related elements with the right styling. */
+    disabled?: boolean
+    /** Icon used when not checked. @default cuiRadioSelected */
+    icon?: IconProp
+    /** Icon used when checked. @default cuiRadioUnselected */
+    iconChecked?: IconProp
+    /** Props object passed to the inner input element. */
+    inputProps?: HTMLAttributes<HTMLInputElement>
+    /** Ref passed to the inner input element. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
+    /** Socket placing text to the left of the checkbox. */
+    label?: string
+    /** Passed to the inner input. */
+    name?: string
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler
+    /** Passed to the inner input. */
+    required?: boolean
+    /** Passed to the inner input. */
+    value?: number | string
+  }
 
 export type RadioStyleProps = {
-	/** Styles the icon when any part of the radio is hovered. */
-	controlHoverColor: string
+  /** Styles the icon when any part of the radio is hovered. */
+  controlHoverColor: string
 }