@heliosgraphics/ui 2.0.0-alpha.93 → 2.0.0-alpha.94

package/components/Breadcrumb/Breadcrumb.tsx

@@ -8,30 +8,32 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
 	if (!items?.length) return null
 
 	return (
-		<Flex isYCentered={true} gap={2} isWrapped={true} data-ui-component="Breadcrumb">
-			{items?.map((item, index) => {
-				const isLast: boolean = Boolean(index + 1 === items?.length)
-				const AComponent: ElementType = item.as || "a"
+		<nav aria-label="Breadcrumb" data-ui-component="Breadcrumb">
+			<Flex isYCentered={true} gap={2} isWrapped={true}>
+				{items?.map((item, index) => {
+					const isLast: boolean = Boolean(index + 1 === items?.length)
+					const AComponent: ElementType = item.as || "a"
 
-				return (
-					<Fragment key={item.href ?? item.name}>
-						<AComponent
-							href={item.href}
-							onClick={item.onClick}
-							{...(item.isActive && { "aria-current": "page" as const })}
-						>
-							<Text
-								type="div"
-								fontStyle={item?.isActive ? "italic" : "normal"}
-								emphasis={item.isActive ? "secondary" : "primary"}
+					return (
+						<Fragment key={item.href ?? item.name}>
+							<AComponent
+								href={item.href}
+								onClick={item.onClick}
+								{...(item.isActive && { "aria-current": "page" as const })}
 							>
-								{item.name}
-							</Text>
-						</AComponent>
-						{!isLast && <Icon icon="arrow-right" size={12} emphasis="tertiary" aria-hidden={true} />}
-					</Fragment>
-				)
-			})}
-		</Flex>
+								<Text
+									type="div"
+									fontStyle={item?.isActive ? "italic" : "normal"}
+									emphasis={item.isActive ? "secondary" : "primary"}
+								>
+									{item.name}
+								</Text>
+							</AComponent>
+							{!isLast && <Icon icon="arrow-right" size={12} emphasis="tertiary" aria-hidden={true} />}
+						</Fragment>
+					)
+				})}
+			</Flex>
+		</nav>
 	)
 }

package/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import { Flex } from "../Flex"
 import { Icon } from "../Icon"
 import { Loading } from "../Loading"
 import { Text } from "../Text"
-import { useState, useId, memo, type KeyboardEvent, type MouseEvent, type FC, useMemo } from "react"
+import { useState, useId, type KeyboardEvent, type MouseEvent, type FC, useMemo } from "react"
 import { getColorClasses } from "../../utils/colors"
 import { INTENTION_COLOR_MAP } from "../../constants/intentions"
 import type { HeliosIconType } from "../../types/icons"
@@ -25,181 +25,179 @@ const BUTTON_ICON_LABEL_SIZE: Record<string, number> = {
 	normal: 16,
 }
 
-export const Button: FC<ButtonProps> = memo(
-	({
-		accept,
-		appearance,
-		badge,
-		badgeIcon,
-		color,
-		flair,
-		icon,
-		iconLeft,
-		iconRight,
-		intent = "neutral",
-		isDisabled,
-		isIconOnly,
-		isLoading,
-		isRounded,
-		multiple,
-		onChange,
-		onClick,
-		role = "button",
-		size = "normal",
-		tabIndex,
-		type = "button",
-		value,
-		...restProps
-	}) => {
-		const [isActive, setIsActive] = useState<boolean>(false)
-
-		const buttonId = useId()
-		const isIconOnlyLoading: boolean = !!isIconOnly && !!isLoading
-
-		const localIconLeft: HeliosIconType | undefined = icon || iconLeft
-		const localIconRight: HeliosIconType | undefined = iconRight
-
-		const consideredColor: HeliosColorType = color ? color : INTENTION_COLOR_MAP[intent]
-		const consideredAppearance: HeliosAppearanceType = useMemo(
-			() => (appearance ? appearance : consideredColor === "gray" ? "light" : "dark"),
-			[appearance, consideredColor],
-		)
-
-		const colorClasses = getColorClasses(consideredColor, consideredAppearance)
-		const buttonClasses = getClasses(styles.button, "relative cursor-pointer", ...colorClasses, {
-			[styles.buttonLight]: consideredAppearance === "light",
-
-			[styles.buttonActive]: isActive,
-			[styles.buttonDisabled]: isDisabled,
-			[styles.buttonLoading]: isLoading,
-
-			[styles.buttonRounded]: isRounded,
-			[styles.buttonRound]: !isRounded && size !== "tiny",
-			[styles.buttonRoundTiny]: !isRounded && size === "tiny",
-
-			[styles.buttonSizeNormal]: !size || size === "normal",
-			[styles.buttonSizeSmall]: size === "small",
-			[styles.buttonSizeTiny]: size === "tiny",
-
-			[styles.buttonWithIconLeft]: localIconLeft,
-			[styles.buttonWithIconRight]: localIconRight,
-			[styles.buttonIconOnly]: isIconOnly,
-			[styles.buttonIconOnlyLoading]: isIconOnlyLoading,
-		})
-
-		const buttonIconLeftClasses = getClasses("relative", styles.button__icon, {
-			[styles.button__iconLeft]: localIconLeft,
-		})
-
-		const buttonIconRightClasses = getClasses("relative", styles.button__icon, {
-			[styles.button__iconRight]: localIconRight,
-			[styles.button__iconRightLoading]: isLoading,
-		})
-
-		const buttonLoadingSize: 10 | 20 = size && size !== "normal" ? 10 : 20
-		const isFileType: boolean = type === "file"
-		const showFileLabel: boolean = isFileType && !isIconOnly
-
-		const baseInputClasses = getClasses(styles.button__baseElement, "sans fw-medium", {
-			tiny: size === "tiny" || size === "small",
-			"small ": size === "normal",
-			"radius-max": isRounded,
-			[styles.button__baseElementNormal]: size === "normal" && !isIconOnly,
-			[styles.button__baseElementSmall]: size === "small" && !isIconOnly,
-			[styles.button__baseElementTiny]: size === "tiny" && !isIconOnly,
-		})
-
-		const buttonLabelClasses: string = getClasses(baseInputClasses, styles.button__label)
-		const buttonInputClasses: string = getClasses(baseInputClasses, styles.button__input, {
-			[styles.button__inputFile]: isFileType,
-		})
-
-		const handleClick = (event: MouseEvent<HTMLDivElement>): void => {
-			if (isDisabled || isLoading) {
-				event.preventDefault()
-				return
-			}
-
-			onClick?.(event)
-		}
-
-		const handleKeyUp = (): void => {
-			setIsActive(false)
-		}
-
-		const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
-			if (event.key !== "Enter" && event.key !== " ") return
+export const Button: FC<ButtonProps> = ({
+	accept,
+	appearance,
+	badge,
+	badgeIcon,
+	color,
+	flair,
+	icon,
+	iconLeft,
+	iconRight,
+	intent = "neutral",
+	isDisabled,
+	isIconOnly,
+	isLoading,
+	isRounded,
+	multiple,
+	onChange,
+	onClick,
+	role = "button",
+	size = "normal",
+	tabIndex,
+	type = "button",
+	value,
+	...restProps
+}) => {
+	const [isActive, setIsActive] = useState<boolean>(false)
+
+	const buttonId = useId()
+	const isIconOnlyLoading: boolean = !!isIconOnly && !!isLoading
+
+	const localIconLeft: HeliosIconType | undefined = icon || iconLeft
+	const localIconRight: HeliosIconType | undefined = iconRight
+
+	const consideredColor: HeliosColorType = color ? color : INTENTION_COLOR_MAP[intent]
+	const consideredAppearance: HeliosAppearanceType = useMemo(
+		() => (appearance ? appearance : consideredColor === "gray" ? "light" : "dark"),
+		[appearance, consideredColor],
+	)
+
+	const colorClasses = getColorClasses(consideredColor, consideredAppearance)
+	const buttonClasses = getClasses(styles.button, "relative cursor-pointer", ...colorClasses, {
+		[styles.buttonLight]: consideredAppearance === "light",
+
+		[styles.buttonActive]: isActive,
+		[styles.buttonDisabled]: isDisabled,
+		[styles.buttonLoading]: isLoading,
+
+		[styles.buttonRounded]: isRounded,
+		[styles.buttonRound]: !isRounded && size !== "tiny",
+		[styles.buttonRoundTiny]: !isRounded && size === "tiny",
+
+		[styles.buttonSizeNormal]: !size || size === "normal",
+		[styles.buttonSizeSmall]: size === "small",
+		[styles.buttonSizeTiny]: size === "tiny",
+
+		[styles.buttonWithIconLeft]: localIconLeft,
+		[styles.buttonWithIconRight]: localIconRight,
+		[styles.buttonIconOnly]: isIconOnly,
+		[styles.buttonIconOnlyLoading]: isIconOnlyLoading,
+	})
+
+	const buttonIconLeftClasses = getClasses("relative", styles.button__icon, {
+		[styles.button__iconLeft]: localIconLeft,
+	})
+
+	const buttonIconRightClasses = getClasses("relative", styles.button__icon, {
+		[styles.button__iconRight]: localIconRight,
+		[styles.button__iconRightLoading]: isLoading,
+	})
+
+	const buttonLoadingSize: 10 | 20 = size && size !== "normal" ? 10 : 20
+	const isFileType: boolean = type === "file"
+	const showFileLabel: boolean = isFileType && !isIconOnly
+
+	const baseInputClasses = getClasses(styles.button__baseElement, "sans fw-medium", {
+		tiny: size === "tiny" || size === "small",
+		"small ": size === "normal",
+		"radius-max": isRounded,
+		[styles.button__baseElementNormal]: size === "normal" && !isIconOnly,
+		[styles.button__baseElementSmall]: size === "small" && !isIconOnly,
+		[styles.button__baseElementTiny]: size === "tiny" && !isIconOnly,
+	})
+
+	const buttonLabelClasses: string = getClasses(baseInputClasses, styles.button__label)
+	const buttonInputClasses: string = getClasses(baseInputClasses, styles.button__input, {
+		[styles.button__inputFile]: isFileType,
+	})
+
+	const handleClick = (event: MouseEvent<HTMLDivElement>): void => {
+		if (isDisabled || isLoading) {
 			event.preventDefault()
-
-			if (isDisabled || isLoading || !buttonId) return
-
-			setIsActive(true)
-			document.getElementById(buttonId)?.click()
+			return
 		}
 
-		return (
-			<Flex
-				className={buttonClasses}
-				isInline={true}
-				isCentered={true}
-				onKeyDown={handleKeyDown}
-				onKeyUp={handleKeyUp}
-				data-ui-component="Button"
-				data-ui-size={size}
+		onClick?.(event)
+	}
+
+	const handleKeyUp = (): void => {
+		setIsActive(false)
+	}
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (event.key !== "Enter" && event.key !== " ") return
+		event.preventDefault()
+
+		if (isDisabled || isLoading || !buttonId) return
+
+		setIsActive(true)
+		document.getElementById(buttonId)?.click()
+	}
+
+	return (
+		<Flex
+			className={buttonClasses}
+			isInline={true}
+			isCentered={true}
+			onKeyDown={handleKeyDown}
+			onKeyUp={handleKeyUp}
+			data-ui-component="Button"
+			data-ui-size={size}
+			aria-disabled={isDisabled || isLoading}
+			aria-busy={isLoading}
+			aria-label={isIconOnly ? value : undefined}
+			tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
+			role={role}
+			{...(onClick && { onClick: handleClick })}
+			{...restProps}
+		>
+			{localIconLeft && !isIconOnlyLoading && (
+				<Flex className={buttonIconLeftClasses}>
+					<Icon icon={localIconLeft} size={BUTTON_ICON_SIZE[size] || 24} />
+				</Flex>
+			)}
+			<input
+				id={buttonId}
 				aria-disabled={isDisabled || isLoading}
-				aria-busy={isLoading}
-				aria-label={isIconOnly ? value : undefined}
-				tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
-				role={role}
-				{...(onClick && { onClick: handleClick })}
-				{...restProps}
-			>
-				{localIconLeft && !isIconOnlyLoading && (
-					<Flex className={buttonIconLeftClasses}>
-						<Icon icon={localIconLeft} size={BUTTON_ICON_SIZE[size] || 24} />
-					</Flex>
-				)}
-				<input
-					id={buttonId}
-					aria-disabled={isDisabled || isLoading}
-					disabled={isDisabled || isLoading}
-					type={type}
-					className={buttonInputClasses}
-					accept={accept}
-					multiple={multiple}
-					tabIndex={-1}
-					onChange={onChange}
-					defaultValue={isIconOnly || isFileType ? "" : value}
-				/>
-				{showFileLabel && (
-					<label htmlFor={buttonId} className={buttonLabelClasses}>
-						{value}
-					</label>
-				)}
-				{isLoading && <Loading size={buttonLoadingSize} className={styles.button__loading} />}
-				{localIconRight && !isIconOnlyLoading && (
-					<Flex className={buttonIconRightClasses}>
-						<Icon icon={localIconRight} size={BUTTON_ICON_SIZE[size] || 24} />
-					</Flex>
-				)}
-				{!!flair && (
-					<Flex className={styles.button__flair} isCentered={true}>
-						<Text type={size !== "normal" ? "micro" : "tiny"} fontFamily="mono">
-							{flair}
+				disabled={isDisabled || isLoading}
+				type={type}
+				className={buttonInputClasses}
+				accept={accept}
+				multiple={multiple}
+				tabIndex={-1}
+				onChange={onChange}
+				defaultValue={isIconOnly || isFileType ? "" : value}
+			/>
+			{showFileLabel && (
+				<label htmlFor={buttonId} className={buttonLabelClasses}>
+					{value}
+				</label>
+			)}
+			{isLoading && <Loading size={buttonLoadingSize} className={styles.button__loading} />}
+			{localIconRight && !isIconOnlyLoading && (
+				<Flex className={buttonIconRightClasses}>
+					<Icon icon={localIconRight} size={BUTTON_ICON_SIZE[size] || 24} />
+				</Flex>
+			)}
+			{!!flair && (
+				<Flex className={styles.button__flair} isCentered={true}>
+					<Text type={size !== "normal" ? "micro" : "tiny"} fontFamily="mono">
+						{flair}
+					</Text>
+				</Flex>
+			)}
+			{(!!badge || !!badgeIcon) && (
+				<Flex className={styles.button__badge} isCentered={true} gap={2}>
+					{badgeIcon && <Icon icon={badgeIcon} size={BUTTON_ICON_LABEL_SIZE[size] || 16} />}
+					{badge && (
+						<Text type="tiny" fontFamily="mono" emphasis="inherit">
+							{badge}
 						</Text>
-					</Flex>
-				)}
-				{(!!badge || !!badgeIcon) && (
-					<Flex className={styles.button__badge} isCentered={true} gap={2}>
-						{badgeIcon && <Icon icon={badgeIcon} size={BUTTON_ICON_LABEL_SIZE[size] || 16} />}
-						{badge && (
-							<Text type="tiny" fontFamily="mono" emphasis="inherit">
-								{badge}
-							</Text>
-						)}
-					</Flex>
-				)}
-			</Flex>
-		)
-	},
-)
+					)}
+				</Flex>
+			)}
+		</Flex>
+	)
+}

package/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useId, memo } from "react"
+import { useId } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
@@ -10,66 +10,60 @@ import styles from "./Checkbox.module.css"
 import type { FC } from "react"
 import type { CheckboxProps } from "./Checkbox.types"
 
-export const Checkbox: FC<CheckboxProps> = memo(
-	({
-		color = "gray",
-		isChecked,
-		isVertical,
-		isLabelHidden = false,
-		isSmall,
-		description,
-		isDisabled,
-		isRequired,
-		onChange,
-		label,
-	}) => {
-		const checkboxId: string = useId()
+export const Checkbox: FC<CheckboxProps> = ({
+	color = "gray",
+	isChecked,
+	isVertical,
+	isLabelHidden = false,
+	isSmall,
+	description,
+	isDisabled,
+	isRequired,
+	onChange,
+	label,
+}) => {
+	const checkboxId: string = useId()
 
-		const colorClasses = getColorClasses(color, "dark")
-		const checkboxClasses = getClasses(styles.checkbox, ...colorClasses, {
-			[styles.checkboxDisabled]: isDisabled,
-			[styles.checkboxSmall]: isSmall,
-		})
+	const colorClasses = getColorClasses(color, "dark")
+	const checkboxClasses = getClasses(styles.checkbox, ...colorClasses, {
+		[styles.checkboxDisabled]: isDisabled,
+		[styles.checkboxSmall]: isSmall,
+	})
 
-		const checkboxLabelClasses = getClasses(styles.checkbox__checkboxLabel, "flex gap-4", {
-			"flex-x-center flex-column": isVertical,
-			"flex-y-center": !isVertical,
-		})
+	const checkboxLabelClasses = getClasses(styles.checkbox__checkboxLabel, "flex gap-4", {
+		"flex-x-center flex-column": isVertical,
+		"flex-y-center": !isVertical,
+	})
 
-		return (
-			<div className={checkboxClasses} data-ui-component="Checkbox">
-				<label className={checkboxLabelClasses} htmlFor={checkboxId}>
-					<span className={styles.checkbox__mark}>
-						<input
-							type="checkbox"
-							checked={isChecked}
-							onChange={onChange}
-							disabled={isDisabled}
-							required={isRequired}
-							aria-label={isLabelHidden ? label : undefined}
-							id={checkboxId}
-						/>
-						<Icon icon="check" size={isSmall ? 14 : 18} className={styles.checkbox__checkboxIcon} />
-						<div className={styles.checkbox__checkboxMark} />
-					</span>
-					{!isLabelHidden && (
-						<Flex isColumn={true}>
-							<Text
-								type={isSmall ? "tiny" : "small"}
-								fontWeight="medium"
-								emphasis={isDisabled ? "tertiary" : "inherit"}
-							>
-								{label}
+	return (
+		<div className={checkboxClasses} data-ui-component="Checkbox">
+			<label className={checkboxLabelClasses} htmlFor={checkboxId}>
+				<span className={styles.checkbox__mark}>
+					<input
+						type="checkbox"
+						checked={isChecked}
+						onChange={onChange}
+						disabled={isDisabled}
+						required={isRequired}
+						aria-label={isLabelHidden ? label : undefined}
+						id={checkboxId}
+					/>
+					<Icon icon="check" size={isSmall ? 14 : 18} className={styles.checkbox__checkboxIcon} />
+					<div className={styles.checkbox__checkboxMark} />
+				</span>
+				{!isLabelHidden && (
+					<Flex isColumn={true}>
+						<Text type={isSmall ? "tiny" : "small"} fontWeight="medium" emphasis={isDisabled ? "tertiary" : "inherit"}>
+							{label}
+						</Text>
+						{description && (
+							<Text type="tiny" emphasis="secondary">
+								{description}
 							</Text>
-							{description && (
-								<Text type="tiny" emphasis="secondary">
-									{description}
-								</Text>
-							)}
-						</Flex>
-					)}
-				</label>
-			</div>
-		)
-	},
-)
+						)}
+					</Flex>
+				)}
+			</label>
+		</div>
+	)
+}

package/components/Confirm/Confirm.tsx

@@ -24,7 +24,7 @@ export const Confirm: FC<ConfirmProps> = ({
 	)
 
 	return (
-		<Dialog title={title} onClose={onCancel} isOpen={isOpen} isCentered={true}>
+		<Dialog title={title} onClose={onCancel} isOpen={isOpen} isCentered={true} role="alertdialog">
 			<Flex gap={12} isColumn={true} data-ui-component="Confirm">
 				{!!description && <Text type="paragraph">{description}</Text>}
 				<ButtonGroup align={buttonGroupAlign}>

package/components/Dialog/Dialog.meta.ts

@@ -37,6 +37,10 @@ export const meta: HeliosAttributeMeta<DialogBaseProps> = {
 	onClose: {
 		type: "(_?: unknown) => Promise<void> | void",
 	},
+	role: {
+		type: '"dialog" | "alertdialog"',
+		isOptional: true,
+	},
 	title: {
 		type: "string",
 		isOptional: true,

package/components/Dialog/Dialog.tsx

@@ -12,7 +12,16 @@ import type { DialogProps } from "./Dialog.types"
 const ATTRIBUTE_SCROLL = "data-scroll" as const
 const POSITION_FIXED_CLASS = "fixed" as const
 
-export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isCentered, onClose, noPadding }) => {
+export const Dialog: FC<DialogProps> = ({
+	title,
+	children,
+	isNarrow,
+	isOpen,
+	isCentered,
+	onClose,
+	noPadding,
+	role,
+}) => {
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
 	const triggerRef = useRef<Element | null>(null)
 
@@ -108,7 +117,7 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 	})
 
 	return (
-		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose} data-ui-component="Dialog">
+		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose} role={role} data-ui-component="Dialog">
 			{!!title && (
 				<Flex isBetween={true} isYCentered={true} padding={8} className={dialogFlexClasses}>
 					<Heading level={5} fontWeight="medium">

package/components/Dialog/Dialog.types.ts

@@ -6,6 +6,7 @@ export interface DialogBaseProps {
 	isOpen?: boolean
 	noPadding?: boolean
 	onClose: (_?: unknown) => Promise<void> | void
+	role?: "dialog" | "alertdialog"
 	title?: string
 }
 

package/components/Donut/Donut.tsx

@@ -36,6 +36,7 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 				role="img"
 				aria-label={`Donut chart: ${percentage}%`}
 			>
+				<title>{`${percentage}%`}</title>
 				<circle
 					fill="none"
 					strokeWidth={borderSize}

package/components/Dropdown/Dropdown.tsx

@@ -22,6 +22,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 	const hoverStateRef = useRef<boolean>(false)
 	const resultListRef = useRef<HTMLOListElement | null>(null)
 	const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+	const isMountedRef = useRef<boolean>(true)
 
 	const [isVisible, setVisible] = useState<boolean>(false)
 	const [isHovering, setHovering] = useState<boolean>(false)
@@ -34,8 +35,12 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 	}, [isVisible, items?.length])
 
 	useEffect(() => {
+		isMountedRef.current = true
+
 		return (): void => {
+			isMountedRef.current = false
 			if (hideTimeoutRef.current) globalThis.clearTimeout(hideTimeoutRef.current)
+			hideTimeoutRef.current = null
 		}
 	}, [])
 
@@ -62,7 +67,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 	const mouseLeave = (_event: MouseEvent<HTMLDivElement>): void => {
 		setHovering(false)
 		hideTimeoutRef.current = setTimeout(() => {
-			if (!hoverStateRef.current) setVisible(false)
+			if (isMountedRef.current && !hoverStateRef.current) setVisible(false)
 			hideTimeoutRef.current = null
 		}, ANIMATION_FAST)
 	}

package/components/Flex/Flex.meta.ts

@@ -34,6 +34,8 @@ export const meta: HeliosAttributeMeta<FlexBaseProps> = {
 	isYCentered: { type: "boolean", isOptional: true },
 	onClick: { type: "HeliosOnClickType", isOptional: true },
 	padding: { type: "ResponsiveScaleType", isOptional: true },
+	paddingBlock: { type: "ResponsiveScaleType", isOptional: true },
+	paddingInline: { type: "ResponsiveScaleType", isOptional: true },
 	paddingX: { type: "HeliosScale", isOptional: true },
 	paddingY: { type: "HeliosScale", isOptional: true },
 	ref: { type: "RefObject<HTMLDivElement>", isOptional: true },