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

package/components/Dialog/Dialog.tsx

@@ -21,40 +21,40 @@ export const Dialog: FC<DialogProps> = ({
 }) => {
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
 	const triggerRef = useRef<Element | null>(null)
+	const onCloseRef = useRef<() => void>(onClose)
 
 	useEffect(() => {
-		dialogRef?.current?.scrollTo?.(0, 0)
-
-		if (isOpen) {
-			triggerRef.current = document.activeElement
+		onCloseRef.current = onClose
+	}, [onClose])
 
-			dialogRef?.current?.showModal?.()
+	useEffect(() => {
+		dialogRef?.current?.scrollTo?.(0, 0)
 
-			const dialog = dialogRef.current
+		if (!isOpen) return
 
-			const handleCancel = (event: Event): void => {
-				event.preventDefault()
-				onClose()
-			}
+		triggerRef.current = document.activeElement
+		document.documentElement.style.overflow = "hidden"
 
-			dialog?.addEventListener("cancel", handleCancel)
+		if (!dialogRef.current?.open) {
+			dialogRef?.current?.showModal?.()
+		}
 
-			return (): void => {
-				dialog?.removeEventListener("cancel", handleCancel)
+		return (): void => {
+			document.documentElement.style.overflow = ""
 
-				const trigger = triggerRef.current
-				if (trigger && trigger instanceof HTMLElement) {
-					trigger.focus()
-				}
-				triggerRef.current = null
+			const trigger = triggerRef.current
+			if (trigger && trigger instanceof HTMLElement) {
+				trigger.focus()
 			}
-		} else {
-			dialogRef?.current?.close?.()
+			triggerRef.current = null
 		}
-
-		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>): void => {
+		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"