@heliosgraphics/ui 2.0.0-alpha.95 → 2.0.0-alpha.96

package/components/Dialog/Dialog.tsx

@@ -21,26 +21,25 @@ export const Dialog: FC<DialogProps> = ({
 }) => {
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
 	const triggerRef = useRef<Element | null>(null)
+	const onCloseRef = useRef<() => void>(onClose)
+
+	useEffect(() => {
+		onCloseRef.current = onClose
+	}, [onClose])
 
 	useEffect(() => {
 		dialogRef?.current?.scrollTo?.(0, 0)
 
 		if (isOpen) {
 			triggerRef.current = document.activeElement
+			document.documentElement.style.overflow = "hidden"
 
-			dialogRef?.current?.showModal?.()
-
-			const dialog = dialogRef.current
-
-			const handleCancel = (event: Event): void => {
-				event.preventDefault()
-				onClose()
+			if (!dialogRef.current?.open) {
+				dialogRef?.current?.showModal?.()
 			}
 
-			dialog?.addEventListener("cancel", handleCancel)
-
 			return (): void => {
-				dialog?.removeEventListener("cancel", handleCancel)
+				document.documentElement.style.overflow = ""
 
 				const trigger = triggerRef.current
 				if (trigger && trigger instanceof HTMLElement) {
@@ -48,13 +47,14 @@ export const Dialog: FC<DialogProps> = ({
 				}
 				triggerRef.current = null
 			}
-		} else {
-			dialogRef?.current?.close?.()
 		}
-
-		return undefined
 	}, [isOpen])
 
+	const onCancel = (event: React.SyntheticEvent<HTMLDialogElement>): void => {
+		event.preventDefault()
+		onCloseRef.current()
+	}
+
 	if (!isOpen) return null
 
 	const onDialogClose = (event: MouseEvent<HTMLDialogElement>): boolean | void | Promise<void> => {
@@ -73,7 +73,14 @@ export const Dialog: FC<DialogProps> = ({
 	})
 
 	return (
-		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose} role={role} data-ui-component="Dialog">
+		<dialog
+			ref={dialogRef}
+			className={dialogClasses}
+			onClick={onDialogClose}
+			onCancel={onCancel}
+			role={role}
+			data-ui-component="Dialog"
+		>
 			{!!title && (
 				<Flex isBetween={true} isYCentered={true} padding={8} className={dialogFlexClasses}>
 					<Heading level={5} fontWeight="medium">
@@ -84,7 +91,9 @@ export const Dialog: FC<DialogProps> = ({
 					</ButtonGroup>
 				</Flex>
 			)}
-			{isOpen && <div className={dialogContentClasses}>{children}</div>}
+			<div className={dialogContentClasses}>{children}</div>
 		</dialog>
 	)
 }
+
+Dialog.displayName = "Dialog"

package/components/Donut/Donut.tsx

@@ -59,3 +59,5 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 		</Flex>
 	)
 }
+
+Donut.displayName = "Donut"

package/components/Dot/Dot.tsx

@@ -42,3 +42,5 @@ export const Dot: FC<DotProps> = ({ colorAccent, size = 8, color = "blue" }) =>
 		</div>
 	)
 }
+
+Dot.displayName = "Dot"

package/components/Dropdown/Dropdown.module.css

@@ -5,6 +5,11 @@
 	user-select: none;
 }
 
+.dropdownOpen [data-ui-component="Icon"] {
+	transition: transform 96ms ease-in-out;
+	transform: rotate(180deg);
+}
+
 .dropdownDisabled {
 	cursor: not-allowed;
 	pointer-events: none;

package/components/Dropdown/Dropdown.tsx

@@ -1,22 +1,12 @@
 "use client"
 
-import {
-	useEffect,
-	useMemo,
-	useState,
-	useRef,
-	cloneElement,
-	Children as ReactChildren,
-	type ReactElement,
-	type FC,
-} from "react"
+import { useEffect, useMemo, useState, useRef, type FC } from "react"
 import { ANIMATION_FAST } from "../../constants/animations"
 import { getClasses } from "@heliosgraphics/utils"
 import { ResultList } from "../shared/ResultList"
 import styles from "./Dropdown.module.css"
-import type { MouseEvent, ReactNode } from "react"
+import type { KeyboardEvent, MouseEvent } from "react"
 import type { DropdownProps } from "./Dropdown.types"
-import type { HeliosIconType } from "../../types/icons"
 
 export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, position = "bottom-left" }) => {
 	const hoverStateRef = useRef<boolean>(false)
@@ -55,6 +45,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		[styles.dropdownBottomRight]: position === "bottom-right",
 		[styles.dropdownTopLeft]: position === "top-left",
 		[styles.dropdownTopRight]: position === "top-right",
+		[styles.dropdownOpen]: isVisible,
 	})
 
 	const mouseEnter = (_event: MouseEvent<HTMLDivElement>): void => {
@@ -72,20 +63,15 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		}, ANIMATION_FAST)
 	}
 
-	const renderChildren = ReactChildren.map(
-		children as ReactElement<{ children: ReactNode; icon: HeliosIconType }>,
-		(child: ReactElement<{ children: ReactNode; icon: HeliosIconType }>) => {
-			const caretProps = {
-				...(child?.props?.icon === "caret-down" && isVisible && { icon: "caret-up" as HeliosIconType }),
-				...(child?.props?.icon === "chevron-down" && isVisible && { icon: "chevron-up" as HeliosIconType }),
-			}
-
-			return cloneElement(child, { ...child.props, ...caretProps })
-		},
-	)
-
 	const onSetVisible = (): void => setVisible(!isVisible)
 
+	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault()
+			onSetVisible()
+		}
+	}
+
 	const navClasses: string = getClasses(styles.dropdown__nav, isVisible && styles.dropdown__navActive)
 
 	const itemsWithClose = useMemo(
@@ -106,8 +92,15 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 
 	return (
 		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} data-ui-component="Dropdown">
-			<div onClick={onSetVisible} aria-expanded={isVisible} aria-haspopup="listbox">
-				{renderChildren}
+			<div
+				role="button"
+				tabIndex={0}
+				onClick={onSetVisible}
+				onKeyDown={onKeyDown}
+				aria-expanded={isVisible}
+				aria-haspopup="listbox"
+			>
+				{children}
 			</div>
 			<nav
 				className={navClasses}
@@ -120,3 +113,5 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		</div>
 	)
 }
+
+Dropdown.displayName = "Dropdown"

package/components/Fieldset/Fieldset.tsx

@@ -10,3 +10,5 @@ export const Fieldset: FC<FieldsetProps> = ({ children, legend }) => {
 		</fieldset>
 	)
 }
+
+Fieldset.displayName = "Fieldset"

package/components/Flex/Flex.meta.ts

@@ -25,6 +25,7 @@ export const meta: HeliosAttributeMeta<FlexBaseProps> = {
 	isBetween: { type: "boolean", isOptional: true },
 	isCentered: { type: "boolean", isOptional: true },
 	isColumn: { type: "boolean", isOptional: true },
+	isFullHeight: { type: "boolean", isOptional: true },
 	isFullWidth: { type: "boolean", isOptional: true },
 	isInline: { type: "boolean", isOptional: true },
 	isNoWrap: { type: "boolean", isOptional: true },

package/components/Flex/Flex.tsx

@@ -1,15 +1,35 @@
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
-import type { FC } from "react"
+import type { FC, KeyboardEvent } from "react"
 
 export const Flex: FC<FlexProps> = (props) => {
 	const { ref, ...restProps } = props
 	const flexClasses: string = getFlexUtility(restProps)
 	const safeProps = getSafeFlexProps(restProps)
 
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+		if (restProps.onClick && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault()
+			restProps.onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+		}
+	}
+
+	const a11yProps = restProps.onClick
+		? { role: (restProps.role ?? "button") as string, tabIndex: restProps.tabIndex ?? 0, onKeyDown: handleKeyDown }
+		: {}
+
 	return (
-		<div {...safeProps} className={flexClasses} onClick={restProps.onClick} ref={ref}>
+		<div
+			{...safeProps}
+			className={flexClasses}
+			onClick={restProps.onClick}
+			ref={ref}
+			data-ui-component="Flex"
+			{...a11yProps}
+		>
 			{restProps.children}
 		</div>
 	)
 }
+
+Flex.displayName = "Flex"

package/components/Flex/Flex.types.ts

@@ -14,6 +14,7 @@ export interface FlexBaseProps {
 	isBetween?: boolean
 	isCentered?: boolean
 	isColumn?: boolean
+	isFullHeight?: boolean
 	isFullWidth?: boolean
 	isInline?: boolean
 	isNoWrap?: boolean

package/components/Flex/Flex.utils.spec.ts

@@ -40,6 +40,9 @@ describe("getFlexUtility", () => {
 	it("Generates without duplicated classes", () =>
 		expect(getFlexUtility(MOCK_FLEX_DUPLICATE)).toEqual(MOCK_FLEX_DUPLICATE_CLASSES))
 
+	it("Generates xAlign center class", () =>
+		expect(getFlexUtility({ children: null, xAlign: "center" })).toEqual("flex flex-x-center"))
+
 	const MOCK_FLEX_RESPONSIVE_CLASSES = `flex mobile:p-0 tablet:p-8 p-16`
 	const MOCK_FLEX_RESPONSIVE: FlexProps = {
 		children: null,
@@ -60,7 +63,7 @@ describe("getFlexUtility", () => {
 })
 
 describe("getSafeFlexProps", () => {
-	const MOCK_FLEX_ATTRIBUTES: unknown = {
+	const MOCK_FLEX_ATTRIBUTES: Record<string, unknown> = {
 		children: null,
 		className: "xo",
 		draggable: true,

package/components/Flex/Flex.utils.ts

@@ -21,10 +21,12 @@ export const getFlexUtility = (props?: FlexProps): string => {
 	if (props.yAlign === "start") flexClasses.add("align-flex-start")
 	if (props.yAlign === "end") flexClasses.add("align-flex-end")
 	if (props.xAlign === "start") flexClasses.add("justify-flex-start")
+	if (props.xAlign === "center") flexClasses.add("flex-x-center")
 	if (props.xAlign === "end") flexClasses.add("justify-flex-end")
 	if (props.isBetween) flexClasses.add("space-between")
 	if (props.isAround) flexClasses.add("space-around")
 	if (props.onClick) flexClasses.add("cursor-pointer")
+	if (props.isFullHeight) flexClasses.add("hp-100")
 	if (props.isFullWidth) flexClasses.add("wp-100")
 	if (props.isNoWrap) flexClasses.add("nowrap")
 	if (props.elevation === "small") flexClasses.add("elevation-sm")
@@ -128,7 +130,7 @@ export const getRadius = (radiusValue?: ResponsiveRadiusType): string => {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getSafeFlexProps = (props: any): Partial<FlexProps> => {
+export const getSafeFlexProps = (props: Record<string, any>): Record<string, unknown> => {
 	const {
 		gap: _gap,
 		isAround: _isAround,
@@ -136,6 +138,7 @@ export const getSafeFlexProps = (props: any): Partial<FlexProps> => {
 		isCentered: _isCentered,
 		isColumn: _isColumn,
 		isColumnCentered: _isColumnCentered,
+		isFullHeight: _isFullHeight,
 		isFullWidth: _isFullWidth,
 		isInline: _isInline,
 		isStretch: _isStretch,

package/components/Grid/Grid.tsx

@@ -13,3 +13,5 @@ export const Grid: FC<GridProps> = ({ columns, children }) => {
 		</div>
 	)
 }
+
+Grid.displayName = "Grid"

package/components/Heading/Heading.meta.ts

@@ -15,4 +15,9 @@ export const meta: HeliosAttributeMeta<HeadingBaseProps> = {
 	level: {
 		type: "0 | 1 | 2 | 3 | 4 | 5 | 6",
 	},
+	lineHeight: {
+		type: "number",
+		isOptional: true,
+		description: "Overrides the default line-height",
+	},
 }

package/components/Heading/Heading.tsx

@@ -12,7 +12,7 @@ import type { HeadingProps } from "./Heading.types"
 import type { FC, CSSProperties } from "react"
 
 export const Heading: FC<HeadingProps> = (props) => {
-	const { level, lineClamp, style, className, ...rest } = props
+	const { level, lineClamp, lineHeight, style, className, ...rest } = props
 
 	const headingClasses: string = getClasses(className, styles.heading, {
 		[styles.headingPrimary]: props.emphasis === "primary",
@@ -32,8 +32,12 @@ export const Heading: FC<HeadingProps> = (props) => {
 			}
 		: undefined
 
+	const lineHeightStyle: CSSProperties | undefined = lineHeight !== undefined ? { lineHeight } : undefined
+
 	const mergedStyle: CSSProperties | undefined =
-		style || lineClampStyle ? { ...(style || {}), ...(lineClampStyle || {}) } : undefined
+		style || lineClampStyle || lineHeightStyle
+			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
+			: undefined
 
 	const allProps: Omit<HeadingProps, "level"> = {
 		...rest,
@@ -44,20 +48,22 @@ export const Heading: FC<HeadingProps> = (props) => {
 
 	switch (level) {
 		case 0:
-			return <H0 {...allProps} />
+			return <H0 {...allProps} data-ui-component="Heading" />
 		case 1:
-			return <H1 {...allProps} />
+			return <H1 {...allProps} data-ui-component="Heading" />
 		case 2:
-			return <H2 {...allProps} />
+			return <H2 {...allProps} data-ui-component="Heading" />
 		case 3:
-			return <H3 {...allProps} />
+			return <H3 {...allProps} data-ui-component="Heading" />
 		case 4:
-			return <H4 {...allProps} />
+			return <H4 {...allProps} data-ui-component="Heading" />
 		case 5:
-			return <H5 {...allProps} />
+			return <H5 {...allProps} data-ui-component="Heading" />
 		case 6:
-			return <H6 {...allProps} />
+			return <H6 {...allProps} data-ui-component="Heading" />
 		default:
 			return null
 	}
 }
+
+Heading.displayName = "Heading"

package/components/Heading/Heading.types.ts

@@ -3,6 +3,7 @@ import type { TextBaseProps } from "../Text/Text.types"
 
 export interface HeadingBaseProps {
 	level: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	lineHeight?: number
 }
 
 export type HeadingProps = HeadingBaseProps & Omit<TextBaseProps, "type"> & HTMLAttributes<HTMLHeadingElement>

package/components/Heading/components/H0/H0.tsx

@@ -8,3 +8,5 @@ export const H0: FC<H0Props> = (props) => {
 
 	return <h1 {...props} className={h0Classes} data-ui-component="Heading.H0" />
 }
+
+H0.displayName = "H0"

package/components/Heading/components/H1/H1.tsx

@@ -5,3 +5,5 @@ import type { H1Props } from "./H1.types"
 export const H1: FC<H1Props> = (props) => {
 	return <h1 {...props} className={getClasses("h1", props.className)} data-ui-component="Heading.H1" />
 }
+
+H1.displayName = "H1"

package/components/Heading/components/H2/H2.tsx

@@ -5,3 +5,5 @@ import type { H2Props } from "./H2.types"
 export const H2: FC<H2Props> = (props) => {
 	return <h2 {...props} className={getClasses("h2", props.className)} data-ui-component="Heading.H2" />
 }
+
+H2.displayName = "H2"

package/components/Heading/components/H3/H3.tsx

@@ -5,3 +5,5 @@ import type { H3Props } from "./H3.types"
 export const H3: FC<H3Props> = (props) => {
 	return <h3 {...props} className={getClasses("h3", props.className)} data-ui-component="Heading.H3" />
 }
+
+H3.displayName = "H3"

package/components/Heading/components/H4/H4.tsx

@@ -5,3 +5,5 @@ import type { H4Props } from "./H4.types"
 export const H4: FC<H4Props> = (props) => {
 	return <h4 {...props} className={getClasses("h4", props.className)} data-ui-component="Heading.H4" />
 }
+
+H4.displayName = "H4"

package/components/Heading/components/H5/H5.tsx

@@ -5,3 +5,5 @@ import type { H5Props } from "./H5.types"
 export const H5: FC<H5Props> = (props) => {
 	return <h5 {...props} className={getClasses("h5", props.className)} data-ui-component="Heading.H5" />
 }
+
+H5.displayName = "H5"

package/components/Heading/components/H6/H6.tsx

@@ -5,3 +5,5 @@ import type { H6Props } from "./H6.types"
 export const H6: FC<H6Props> = (props) => {
 	return <h6 {...props} className={getClasses("h6", props.className)} data-ui-component="Heading.H6" />
 }
+
+H6.displayName = "H6"

package/components/Icon/Icon.tsx

@@ -28,3 +28,5 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 		/>
 	)
 }
+
+Icon.displayName = "Icon"

package/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useId, type FC } from "react"
+import { useId, forwardRef } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import { Button } from "../Button"
 import { ButtonGroup } from "../ButtonGroup"
@@ -13,104 +13,112 @@ import styles from "./Input.module.css"
 import type { InputProps } from "./Input.types"
 import type { ResultItem } from "../shared/ResultList"
 
-export const Input: FC<InputProps> = ({
-	className,
-	helperText,
-	id,
-	isDisabled,
-	autoComplete,
-	autoFocus,
-	isLabelHidden,
-	isLoading,
-	isRequired,
-	label,
-	maxLength,
-	name,
-	onBlur,
-	onChange,
-	onClear,
-	onFocus,
-	onKeyDown,
-	onKeyUp,
-	placeholder,
-	results,
-	showResults,
-	type = "text",
-	value,
-}) => {
-	const generatedId: string = useId()
-	const htmlFor: string = id || generatedId
-	const helperId: string = `${htmlFor}-helper`
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+	(
+		{
+			className,
+			helperText,
+			id,
+			isDisabled,
+			autoComplete,
+			autoFocus,
+			isLabelHidden,
+			isLoading,
+			isRequired,
+			label,
+			maxLength,
+			name,
+			onBlur,
+			onChange,
+			onClear,
+			onFocus,
+			onKeyDown,
+			onKeyUp,
+			placeholder,
+			results,
+			showResults,
+			type = "text",
+			value,
+		},
+		ref,
+	) => {
+		const generatedId: string = useId()
+		const htmlFor: string = id || generatedId
+		const helperId: string = `${htmlFor}-helper`
 
-	const filteredItems: Array<ResultItem> =
-		results
-			?.filter((item) => {
-				const lowerCaseItem: string = item.name.toLowerCase()
-				const lowerCaseFilter: string | undefined = value?.toLowerCase()
+		const filteredItems: Array<ResultItem> =
+			results
+				?.filter((item) => {
+					const lowerCaseItem: string = item.name.toLowerCase()
+					const lowerCaseFilter: string | undefined = value?.toLowerCase()
 
-				return lowerCaseFilter && lowerCaseItem.includes(lowerCaseFilter)
-			})
-			.filter(Boolean) || []
+					return lowerCaseFilter && lowerCaseItem.includes(lowerCaseFilter)
+				})
+				.filter(Boolean) || []
 
-	const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
+		const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
 
-	const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
-		[styles.inputDisabled]: isDisabled,
-		[styles.inputShowingResults]: showingResults,
-	})
+		const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
+			[styles.inputDisabled]: isDisabled,
+			[styles.inputShowingResults]: showingResults,
+		})
 
-	return (
-		<div className={inputClasses} data-ui-component="Input">
-			<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
-			<Flex className="grow-1">
-				{onClear && !!value && (
-					<ButtonGroup className={styles.input__clear}>
-						<Button
-							value="Clear"
-							size="tiny"
-							intent="neutral"
-							icon="x"
-							onClick={onClear}
-							isIconOnly={true}
-							isRounded={true}
-						/>
-					</ButtonGroup>
-				)}
-				<input
-					className={styles.input__input}
-					disabled={isDisabled}
-					autoComplete={autoComplete}
-					autoFocus={autoFocus}
-					id={htmlFor}
-					maxLength={maxLength}
-					name={name}
-					onBlur={onBlur}
-					type={type}
-					onChange={onChange}
-					onFocus={onFocus}
-					onKeyDown={onKeyDown}
-					onKeyUp={onKeyUp}
-					placeholder={placeholder}
-					required={isRequired}
-					value={value}
-					aria-describedby={helperText ? helperId : undefined}
-				/>
-				{isLoading && (
-					<div className={styles.input__loading}>
-						<Loading size={20} />
+		return (
+			<div className={inputClasses} data-ui-component="Input">
+				<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
+				<Flex className="grow-1">
+					{onClear && !!value && (
+						<ButtonGroup className={styles.input__clear}>
+							<Button
+								value="Clear"
+								size="tiny"
+								intent="neutral"
+								icon="x"
+								onClick={onClear}
+								isIconOnly={true}
+								isRounded={true}
+							/>
+						</ButtonGroup>
+					)}
+					<input
+						ref={ref}
+						className={styles.input__input}
+						disabled={isDisabled}
+						autoComplete={autoComplete}
+						autoFocus={autoFocus}
+						id={htmlFor}
+						maxLength={maxLength}
+						name={name}
+						onBlur={onBlur}
+						type={type}
+						onChange={onChange}
+						onFocus={onFocus}
+						onKeyDown={onKeyDown}
+						onKeyUp={onKeyUp}
+						placeholder={placeholder}
+						required={isRequired}
+						value={value}
+						aria-describedby={helperText ? helperId : undefined}
+					/>
+					{isLoading && (
+						<div className={styles.input__loading}>
+							<Loading size={20} />
+						</div>
+					)}
+				</Flex>
+				{showingResults && (
+					<div className={styles.input__results}>
+						<ResultList items={filteredItems} />
 					</div>
 				)}
-			</Flex>
-			{showingResults && (
-				<div className={styles.input__results}>
-					<ResultList items={filteredItems} />
-				</div>
-			)}
-			{!!helperText && (
-				<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
-					{helperText}
-				</Text>
-			)}
-		</div>
-	)
-}
+				{!!helperText && (
+					<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
+						{helperText}
+					</Text>
+				)}
+			</div>
+		)
+	},
+)
+
+Input.displayName = "Input"

package/components/Layout/Layout.tsx

@@ -29,3 +29,5 @@ export const Layout: FC<LayoutProps> = (props) => {
 		</LayoutProvider>
 	)
 }
+
+Layout.displayName = "Layout"