@veracity/vui 0.7.0-beta.1 → 0.7.0-beta.2

package/src/notification/notificationButton.tsx

@@ -2,16 +2,18 @@ import React from 'react'
 
 import Button, { ButtonProps } from '../button'
 import { useStyleConfig, vui } from '../core'
-import { useNotification } from './context'
+import { cs } from '../utils'
+import { useNotificationContext } from './context'
 
 /** Displays an action button within the Notification. */
 export const NotificationButton = vui<'button', ButtonProps>((props, ref) => {
-	const mergedProps = { ...useNotification(), ...props }
-	const styles = useStyleConfig('Notification', mergedProps)
+	const { className, ...rest } = props
+	const mergedProps = { ...useNotificationContext(), ...props }
+	const styles = useStyleConfig('Notification', useNotificationContext())
 
 	return (
 		<Button
-			className="vui-notificationButton"
+			className={cs('vui-notificationButton', className)}
 			colorScheme={mergedProps.colorScheme}
 			ml={1}
 			mr={-0.5}
@@ -19,7 +21,7 @@ export const NotificationButton = vui<'button', ButtonProps>((props, ref) => {
 			size="sm"
 			variant="text"
 			{...styles.button}
-			{...props}
+			{...rest}
 		/>
 	)
 })

package/src/notification/notificationIcon.tsx

@@ -2,27 +2,29 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
+import { cs } from '../utils'
 import { notificationStatusMapping } from './consts'
-import { useNotification } from './context'
+import { useNotificationContext } from './context'
 
 /** Displays an icon based on the status within the Notification. */
 export const NotificationIcon = vui<'svg', IconProps>((props, ref) => {
-	const mergedProps = { ...useNotification(), ...props }
-	const styles = useStyleConfig('Notification', mergedProps)
+	const { className, ...rest } = props
+	const mergedProps = { ...useNotificationContext(), ...props }
+	const styles = useStyleConfig('Notification', useNotificationContext())
 
 	const { status = '' } = mergedProps
 	const { iconProps } = notificationStatusMapping[status] ?? {}
 
 	return (
 		<Icon
-			className="vui-notificationIcon"
+			className={cs('vui-notificationIcon', className)}
 			mr={1}
 			my={0.5}
 			ref={ref}
 			size="md"
 			{...styles.icon}
 			{...iconProps}
-			{...props}
+			{...rest}
 		/>
 	)
 })

package/src/notification/notificationText.tsx

@@ -2,22 +2,24 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
-import { useNotification } from './context'
+import { cs } from '../utils'
+import { useNotificationContext } from './context'
 
 /** Displays text within the Notification. */
 export const NotificationText = vui<'p', TProps>((props, ref) => {
-	const styles = useStyleConfig('Notification', { ...useNotification(), ...props })
+	const { className, ...rest } = props
+	const styles = useStyleConfig('Notification', useNotificationContext())
 
 	return (
 		<T
-			className="vui-notificationText"
+			className={cs('vui-notificationText', className)}
 			flex="1"
 			lineHeight="24px"
 			minW={0}
 			py={0.5}
 			ref={ref}
 			{...styles.text}
-			{...props}
+			{...rest}
 		/>
 	)
 })

package/src/notification/notificationTitle.tsx

@@ -2,13 +2,23 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import { H6, HeadingProps } from '../heading'
-import { useNotification } from './context'
+import { cs } from '../utils'
+import { useNotificationContext } from './context'
 
 /** Displays a title within the Notification. */
 export const NotificationTitle = vui<'h6', HeadingProps>((props, ref) => {
-	const styles = useStyleConfig('Notification', { ...useNotification(), ...props })
+	const { className, ...rest } = props
+	const styles = useStyleConfig('Notification', useNotificationContext())
 
-	return <H6 className="vui-notificationTitle" display="inline-flex" ref={ref} {...styles.title} {...props} />
+	return (
+		<H6
+			className={cs('vui-notificationTitle', className)}
+			display="inline-flex"
+			ref={ref}
+			{...styles.title}
+			{...rest}
+		/>
+	)
 })
 
 NotificationTitle.displayName = 'NotificationTitle'

package/src/pagination/helpers.ts

@@ -1,20 +1,52 @@
 import { PaginationItem } from './pagination.types'
 
+const range = (start: number, end: number) => {
+	const length = end - start + 1
+	return Array.from({ length }, (_, i) => start + i)
+}
+
 /** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
 export function getPaginationItems(page: number, pageCount: number) {
-	const items: PaginationItem[] = ['previous', 1]
+	const boundaryCount = 1
+	const siblingCount = 1
+
+	const startPages = range(1, Math.min(boundaryCount, pageCount))
+	const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount)
+
+	const siblingsStart = Math.max(
+		Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
+		boundaryCount + 2
+	)
+
+	const siblingsEnd = Math.min(
+		Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+		endPages.length > 0 ? endPages[0] - 2 : pageCount - 1
+	)
 
-	if (page - 2 > 1) items.push('ellipsisStart')
+	const items = [
+		'previous',
+		...startPages,
 
-	for (let i = page - 1; i <= page + 1; i++) {
-		if (i > 1 && i < pageCount) items.push(i)
-	}
+		// Start ellipsis
+		...(siblingsStart > boundaryCount + 2
+			? ['ellipsisStart']
+			: boundaryCount + 1 < pageCount - boundaryCount
+			? [boundaryCount + 1]
+			: []),
 
-	if (page + 2 < pageCount) items.push('ellipsisEnd')
+		// Sibling pages
+		...range(siblingsStart, siblingsEnd),
 
-	if (pageCount > 1) items.push(pageCount)
+		// End ellipsis
+		...(siblingsEnd < pageCount - boundaryCount - 1
+			? ['ellipsisEnd']
+			: pageCount - boundaryCount > boundaryCount
+			? [pageCount - boundaryCount]
+			: []),
 
-	items.push('next')
+		...endPages,
+		'next'
+	] as PaginationItem[]
 
 	return items
 }

package/src/pagination/paginationButton.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 
 import Button from '../button'
 import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
 import { usePaginationContext } from './context'
 import { PaginationButtonProps } from './pagination.types'
 
 /** Displays a page navigation button within the Pagination. */
 export const PaginationButton = vui<'button', PaginationButtonProps>((props, ref) => {
-	const { isActive: isActiveProp, page: pageProp, ...rest } = props
+	const { className, isActive: isActiveProp, page: pageProp, ...rest } = props
 	const { onPageChange, page } = usePaginationContext()
 	const styles = useStyleConfig('Pagination', usePaginationContext())
 
@@ -23,7 +24,7 @@ export const PaginationButton = vui<'button', PaginationButtonProps>((props, ref
 
 	return (
 		<Button
-			className="vui-paginationButton"
+			className={cs('vui-paginationButton', className)}
 			minW={0}
 			onClick={() => onPageChange(pageProp)}
 			ref={ref}

package/src/pagination/paginationEllipsis.tsx

@@ -2,15 +2,23 @@ import React from 'react'
 
 import Box, { BoxProps } from '../box'
 import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
 import { usePaginationContext } from './context'
 
 /** Displays '...' ellipsis for hidden pages. */
 export const PaginationEllipsis = vui<'span', BoxProps>((props, ref) => {
-	const { children, ...rest } = props
+	const { children, className, ...rest } = props
 	const styles = useStyleConfig('Pagination', usePaginationContext())
 
 	return (
-		<Box alignItems="center" className="vui-paginationEllipsis" ref={ref} {...styles.ellipsis} {...rest}>
+		<Box
+			alignItems="center"
+			className={cs('vui-paginationEllipsis', className)}
+			px="10px"
+			ref={ref}
+			{...styles.ellipsis}
+			{...rest}
+		>
 			{children ?? '...'}
 		</Box>
 	)

package/src/pagination/paginationGoToPage.tsx

@@ -4,11 +4,12 @@ import Box, { BoxProps } from '../box'
 import { useStyleConfig, vui } from '../core'
 import Input from '../input'
 import T from '../t'
-import { ChangeEvent } from '../utils'
+import { ChangeEvent, cs } from '../utils'
 import { usePaginationContext } from './context'
 
 /** Displays a number input, which allows quickly jumping between pages. */
 export const PaginationGoToPage = vui<'div', BoxProps>((props, ref) => {
+	const { className, ...rest } = props
 	const { onPageChange, pageCount } = usePaginationContext()
 	const styles = useStyleConfig('Pagination', usePaginationContext())
 
@@ -20,7 +21,14 @@ export const PaginationGoToPage = vui<'div', BoxProps>((props, ref) => {
 	}
 
 	return (
-		<Box centerV className="vui-paginationGoToPage" lineHeight="normal" ref={ref} {...styles.goToPage} {...props}>
+		<Box
+			centerV
+			className={cs('vui-paginationGoToPage', className)}
+			lineHeight="normal"
+			ref={ref}
+			{...styles.goToPage}
+			{...rest}
+		>
 			<T size="sm" weight="medium">
 				Go to
 			</T>

package/src/pagination/paginationNavigation.tsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 
 import Box, { BoxProps } from '../box'
 import { useStyleConfig, vui } from '../core'
-import { isNumber, isString } from '../utils'
+import { cs, isNumber, isString } from '../utils'
 import { usePaginationContext } from './context'
 import PaginationButton from './paginationButton'
 import PaginationEllipsis from './paginationEllipsis'
@@ -10,12 +10,12 @@ import PaginationPrevNext from './paginationPrevNext'
 
 /** Displays a set of page navigation buttons. */
 export const PaginationNavigation = vui<'div', BoxProps>((props, ref) => {
-	const { children, ...rest } = props
+	const { children, className, ...rest } = props
 	const { items } = usePaginationContext()
 	const styles = useStyleConfig('Pagination', usePaginationContext())
 
 	return (
-		<Box className="vui-paginationNavigation" gap={1} ref={ref} wrap {...styles.navigation} {...rest}>
+		<Box className={cs('vui-paginationNavigation', className)} gap={1} ref={ref} wrap {...styles.navigation} {...rest}>
 			{children ??
 				items.map(item => (
 					<Fragment key={item}>

package/src/pagination/paginationPrevNext.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 
 import Button from '../button'
 import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
 import { usePaginationContext } from './context'
 import { PaginationPrevNextProps } from './pagination.types'
 
 /** Displays a page navigation button, which navigates forward or backward. */
 export const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props, ref) => {
-	const { direction, ...rest } = props
+	const { className, direction, ...rest } = props
 	const { onPageChange, page, pageCount } = usePaginationContext()
 	const styles = useStyleConfig('Pagination', usePaginationContext())
 
@@ -21,7 +22,7 @@ export const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props,
 
 	return (
 		<Button
-			className="vui-paginationPrevNext"
+			className={cs('vui-paginationPrevNext', className)}
 			minW={0}
 			ref={ref}
 			size="sm"

package/src/pagination/paginationResults.tsx

@@ -2,17 +2,18 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
+import { cs } from '../utils'
 import { usePaginationContext } from './context'
 
 /** Displays an action button within the Pagination. */
 export const PaginationResults = vui<'span', TProps>((props, ref) => {
-	const { children, ...rest } = props
+	const { children, className, ...rest } = props
 	const { count, rangeEnd, rangeStart } = usePaginationContext()
 	const styles = useStyleConfig('Pagination', usePaginationContext())
 
 	return (
 		<T
-			className="vui-paginationResults"
+			className={cs('vui-paginationResults', className)}
 			color="grey.80"
 			ref={ref}
 			size="sm"

package/src/popover/popoverContent.tsx

@@ -2,15 +2,15 @@ import React from 'react'
 
 import Box from '../box'
 import { useStyleConfig, vui } from '../core'
-import { mergeRefs } from '../utils'
+import { cs, mergeRefs } from '../utils'
 import { usePopoverContext } from './context'
 import { PopoverContentProps } from './popover.types'
 
 /** Displays provided content in an overlaying wrapper. */
 export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
+	const { children, className, ...rest } = props
 	const popoverProps = usePopoverContext() ?? {}
 	const { isLazy, isOpen, setPopper } = popoverProps
-	const { children, ...rest } = props
 	const styles = useStyleConfig('Popover', { ...popoverProps, ...props })
 
 	const shouldRenderChildren = isLazy ? isOpen : true
@@ -22,7 +22,7 @@ export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
 				bg="white"
 				borderRadius="md"
 				boxShadow="2"
-				className="vui-popoverContent"
+				className={cs('vui-popoverContent', className)}
 				overflowY="auto"
 				ref={mergeRefs(setPopper, ref)}
 				{...styles.content}

package/src/popover/popoverTrigger.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 
 import { useStyleConfig, v, vui } from '../core'
-import { mergeRefs, MouseEvent } from '../utils'
+import { cs, mergeRefs, MouseEvent } from '../utils'
 import { usePopoverContext } from './context'
 import { PopoverTriggerProps } from './popover.types'
 
@@ -12,11 +12,11 @@ import { PopoverTriggerProps } from './popover.types'
  * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
  */
 export const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) => {
+	// @ts-ignore - TS incorrectly doesn't recognize 'as' prop
+	const { as: As, className, onClick: onClickProp, ...rest } = props
 	const { setReference, ...popoverProps } = usePopoverContext() ?? {}
 	const styles = useStyleConfig('Popover', { ...popoverProps, ...props })
 
-	// @ts-ignore - TS incorrectly doesn't recognize 'as' prop
-	const { as: As, onClick: onClickProp, ...rest } = props
 	const Element = As || v.button
 
 	const onClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -27,7 +27,7 @@ export const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) =>
 
 	return (
 		<Element
-			className="vui-popoverTrigger"
+			className={cs('vui-popoverTrigger', className)}
 			onClick={onClick}
 			ref={mergeRefs(setReference, ref)}
 			{...styles.trigger}

package/src/radio/context.ts

@@ -1,5 +1,5 @@
 import { createContext, Dict } from '../utils'
 
-const [RadioGroupProvider, useRadioGroup] = createContext<Dict>({ isOptional: true })
+const [RadioGroupProvider, useRadioGroupContext] = createContext<Dict>({ isOptional: true })
 
-export { RadioGroupProvider, useRadioGroup }
+export { RadioGroupProvider, useRadioGroupContext }

package/src/radio/radio.tsx

@@ -4,7 +4,7 @@ import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
-import { useRadioGroup } from './context'
+import { useRadioGroupContext } from './context'
 import { RadioProps, RadioStyleProps } from './radio.types'
 
 const RadioControl = styled.spanBox`
@@ -59,7 +59,7 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
 		onChange: groupOnChange,
 		value: groupValue,
 		...radioGroupProps
-	} = useRadioGroup() ?? {}
+	} = useRadioGroupContext() ?? {}
 	const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined
 
 	const mergedProps = { ...radioGroupProps, ...props }

package/src/spinner/consts.ts

@@ -2,20 +2,16 @@ import { Dict } from '../utils'
 
 export const spinnerPositionMapping = {
 	bottom: {
-		container: { flexDirection: 'column' },
-		circle: { mb: 1 }
+		container: { flexDirection: 'column' }
 	},
 	left: {
-		container: { flexDirection: 'row-reverse' },
-		circle: { ml: 1 }
+		container: { flexDirection: 'row-reverse' }
 	},
 	right: {
-		container: { flexDirection: 'row' },
-		circle: { mr: 1 }
+		container: { flexDirection: 'row' }
 	},
 	top: {
-		container: { flexDirection: 'column-reverse' },
-		circle: { mt: 1 }
+		container: { flexDirection: 'column-reverse' }
 	}
 }
 

package/src/spinner/spinner.tsx

@@ -45,6 +45,7 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
 		<Box
 			center
 			className={cs('vui-spinner', className)}
+			gap={1}
 			ref={ref}
 			transitionDuration="fast"
 			{...styles.container}
@@ -55,7 +56,6 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
 				animation={`vui-spin ${speed} linear infinite`}
 				className="vui-spinnerCircle"
 				{...styles.circle}
-				{...positionProps.circle}
 				{...circleProps}
 			/>
 

package/src/switch/context.ts

@@ -1,6 +1,6 @@
 import { createContext } from '../utils'
 import { SwitchContext } from './switch.types'
 
-const [SwitchProvider, useSwitch] = createContext<SwitchContext>({ isOptional: true })
+const [SwitchProvider, useSwitchContext] = createContext<SwitchContext>({ isOptional: true })
 
-export { SwitchProvider, useSwitch }
+export { SwitchProvider, useSwitchContext }

package/src/switch/switchButton.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { ChangeEvent, cs, filterUndefined, FocusEvent } from '../utils'
-import { useSwitch } from './context'
+import { useSwitchContext } from './context'
 import { SwitchButtonProps } from './switch.types'
 
 const SwitchInput = styled.inputBox`
@@ -64,7 +64,7 @@ export const SwitchButtonBase = styled.spanBox`
  * Handles controlled and uncontrolled modes.
  */
 export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
-	const mergedProps = { ...useSwitch(), ...props }
+	const mergedProps = { ...useSwitchContext(), ...props }
 	const {
 		checked,
 		className,
@@ -86,7 +86,7 @@ export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
 	const { current: isControlled } = useRef(checked !== undefined)
 	const [isChecked, setIsChecked] = useState(checked ?? defaultChecked)
 	const [isFocused, setIsFocused] = useState(false)
-	const styles = useStyleConfig('Switch', mergedProps)
+	const styles = useStyleConfig('Switch', useSwitchContext())
 	const { thumb: thumbStyles, track: trackStyles, ...buttonStyles } = styles.button
 
 	useEffect(() => {

package/src/switch/switchLabel.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
-import { useSwitch } from './context'
+import { cs } from '../utils'
+import { useSwitchContext } from './context'
 
 /** Displays label text within the Switch component. */
 export const SwitchLabel = vui<'span', TProps>((props, ref) => {
-	const styles = useStyleConfig('Switch', { ...useSwitch(), ...props })
+	const { className, ...rest } = props
+	const styles = useStyleConfig('Switch', useSwitchContext())
 
-	return <T className="vui-switchLabel" display="flex" ref={ref} {...styles.label} {...props} />
+	return <T className={cs('vui-switchLabel', className)} display="flex" ref={ref} {...styles.label} {...rest} />
 })
 
 SwitchLabel.displayName = 'SwitchLabel'

package/src/tag/context.ts

@@ -1,5 +1,5 @@
 import { createContext, Dict } from '../utils'
 
-const [TagProvider, useTag] = createContext<Dict>({ isOptional: true })
+const [TagProvider, useTagContext] = createContext<Dict>({ isOptional: true })
 
-export { TagProvider, useTag }
+export { TagProvider, useTagContext }

package/src/tag/tagButton.tsx

@@ -2,17 +2,19 @@ import React from 'react'
 
 import Button, { ButtonProps } from '../button'
 import { useStyleConfig, vui } from '../core'
-import { useTag } from './context'
+import { cs } from '../utils'
+import { useTagContext } from './context'
 
 /** Displays a button within the Tag. */
 export const TagButton = vui<'button', ButtonProps>((props, ref) => {
-	const mergedProps = { ...useTag(), ...props }
-	const styles = useStyleConfig('Tag', mergedProps)
+	const { className, ...rest } = props
+	const mergedProps = { ...useTagContext(), ...props }
+	const styles = useStyleConfig('Tag', useTagContext())
 
 	return (
 		<Button
 			borderColor="transparent"
-			className="vui-tagButton"
+			className={cs('vui-tagButton', className)}
 			colorScheme={mergedProps.colorScheme}
 			disabled={mergedProps.disabled}
 			hoverBorderColor="transparent"
@@ -21,7 +23,7 @@ export const TagButton = vui<'button', ButtonProps>((props, ref) => {
 			ref={ref}
 			variant="text"
 			{...styles.button}
-			{...props}
+			{...rest}
 		/>
 	)
 })

package/src/tag/tagIcon.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
-import { useTag } from './context'
+import { cs } from '../utils'
+import { useTagContext } from './context'
 
 /** Displays an icon within the Tag. */
 export const TagIcon = vui<'svg', IconProps>((props, ref) => {
-	const styles = useStyleConfig('Tag', { ...useTag(), ...props })
+	const { className, ...rest } = props
+	const styles = useStyleConfig('Tag', useTagContext())
 
-	return <Icon className="vui-tagIcon" ref={ref} {...styles.icon} {...props} />
+	return <Icon className={cs('vui-tagIcon', className)} ref={ref} {...styles.icon} {...rest} />
 })
 
 TagIcon.displayName = 'TagIcon'

package/src/tag/tagText.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
-import { useTag } from './context'
+import { cs } from '../utils'
+import { useTagContext } from './context'
 
 /** Displays text within the Tag. */
 export const TagText = vui<'span', TProps>((props, ref) => {
-	const styles = useStyleConfig('Tag', { ...useTag(), ...props })
+	const { className, ...rest } = props
+	const styles = useStyleConfig('Tag', useTagContext())
 
-	return <T className="vui-tagText" fontSize="inherit" ref={ref} {...styles.text} {...props} />
+	return <T className={cs('vui-tagText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
 })
 
 TagText.displayName = 'TagText'

package/src/textarea/textarea.tsx

@@ -116,7 +116,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
 			/>
 
 			{showCount && (
-				<T color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
+				<T className="vui-textareaCount" color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
 					{count} / {maxLength}
 				</T>
 			)}

package/src/utils/react.ts

@@ -1,6 +1,15 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-import React, { Dispatch, RefObject, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
+import React, {
+	DependencyList,
+	Dispatch,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+	useState
+} from 'react'
 
 import { isArray, isFunction } from './assertion'
 import { runIfFn } from './function'
@@ -60,12 +69,12 @@ export function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]) {
 
 // TODO: Bring it from UI-Utils
 /** Returns given callback with a stable reference, but keeps it updated internally. */
-export function useCallbackRef<T extends AnyFunction>(callback?: T) {
+export function useCallbackRef<T extends AnyFunction>(callback?: T, deps: DependencyList = []) {
 	const ref = useRef(callback)
 
 	ref.current = callback
 
-	return useCallback(((...args) => ref.current?.(...args)) as T, [])
+	return useCallback(((...args) => ref.current?.(...args)) as T, deps)
 }
 
 const defaultEvents = ['mousedown', 'touchstart']