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

package/components/Dialog/Dialog.module.css

@@ -12,23 +12,49 @@
 	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
 	touch-action: pan-y;
 	transform: translateX(-50%);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-lg) ease-in-out,
+		transform var(--speed-lg) ease-in-out,
+		overlay var(--speed-lg) ease-in-out allow-discrete,
+		display var(--speed-lg) ease-in-out allow-discrete;
 }
 
-.dialogNarrow {
-	width: 420px;
+.dialog[open] {
+	opacity: 1;
+	transform: translateX(-50%);
 }
 
-.dialog:not(.dialogCentered) {
-	animation: dialogFadeIn var(--speed-lg) ease-in-out;
+@starting-style {
+	.dialog[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(6px);
+	}
+}
+
+.dialogNarrow {
+	width: 420px;
 }
 
 .dialogCentered {
 	top: 50%;
 
-	animation: dialogCenterFadeIn var(--speed-lg) ease-in-out;
 	transform: translateX(-50%) translateY(-50%);
 }
 
+.dialogCentered[open] {
+	opacity: 1;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+@starting-style {
+	.dialogCentered[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(calc(-50% + 6px));
+	}
+}
+
 .dialog__content {
 	position: relative;
 	z-index: var(--z-index-1);
@@ -48,9 +74,24 @@
 .dialog::backdrop {
 	--ui-bg-backdrop: rgba(80, 80, 80, 0.5);
 
-	animation: backdropFadeIn var(--speed-sm) ease-in-out;
 	background-color: var(--ui-bg-backdrop);
 	backdrop-filter: blur(2px);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		overlay var(--speed-sm) ease-in-out allow-discrete,
+		display var(--speed-sm) ease-in-out allow-discrete;
+}
+
+.dialog[open]::backdrop {
+	opacity: 1;
+}
+
+@starting-style {
+	.dialog[open]::backdrop {
+		opacity: 0;
+	}
 }
 
 @media (max-width: 576px) {
@@ -68,34 +109,3 @@
 		width: calc(100% - 16px);
 	}
 }
-
-@keyframes dialogFadeIn {
-	0% {
-		opacity: 0;
-		transform: translateX(-50%) translateY(6px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(-50%) translateY(0);
-	}
-}
-
-@keyframes dialogCenterFadeIn {
-	0% {
-		opacity: 0;
-		transform: translateX(-50%) translateY(calc(-50% + 6px));
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(-50%) translateY(-50%);
-	}
-}
-
-@keyframes backdropFadeIn {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}

package/components/Dialog/Dialog.tsx

@@ -9,53 +9,25 @@ import { Flex } from "../Flex"
 import { getClasses } from "@heliosgraphics/utils"
 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)
 
-	const resetScroll = (): void => {
-		globalThis?.requestAnimationFrame(() => {
-			document.body.setAttribute(ATTRIBUTE_SCROLL, "")
-			dialogRef?.current?.scrollTo?.(0, 0)
-		})
-	}
-
-	const resetDocumentStyle = (scrollPosition: number): void => {
-		globalThis?.requestAnimationFrame(() => {
-			document.body.style.position = ""
-			document.body.style.height = ""
-			document.body.style.top = ""
-			document.body.classList.remove(POSITION_FIXED_CLASS)
-
-			return globalThis?.scrollTo?.(0, scrollPosition)
-		})
-	}
-
-	useEffect(() => {
-		return (): void => {
-			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
-			const scrollPosition: number = parseInt(localPos) ?? 0
-
-			resetDocumentStyle(scrollPosition)
-			resetScroll()
-		}
-	}, [title, isOpen])
-
 	useEffect(() => {
 		dialogRef?.current?.scrollTo?.(0, 0)
 
 		if (isOpen) {
 			triggerRef.current = document.activeElement
 
-			const localPosition: number = document?.documentElement?.scrollTop ?? 0
-
-			document.body.classList.add(POSITION_FIXED_CLASS)
-			document.body.style.top = `-${localPosition}px`
-			document.body.setAttribute(ATTRIBUTE_SCROLL, localPosition.toString())
-
 			dialogRef?.current?.showModal?.()
 
 			const dialog = dialogRef.current
@@ -76,14 +48,7 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 				}
 				triggerRef.current = null
 			}
-		} else if (!dialogRef?.current) {
-			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
-			const scrollPosition: number = parseInt(localPos) ?? 0
-
-			document.body.classList.remove(POSITION_FIXED_CLASS)
-
-			resetDocumentStyle(scrollPosition)
-
+		} else {
 			dialogRef?.current?.close?.()
 		}
 
@@ -108,7 +73,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

@@ -1,3 +1,4 @@
+import { getClasses } from "@heliosgraphics/utils"
 import { getDonutBorderSize } from "./Donut.utils"
 import { Flex } from "../Flex"
 import styles from "./Donut.module.css"
@@ -12,18 +13,14 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 	const dashSize = 100 - percentage
 	const donutColor: string = `hsl(var(--${color}-hue), var(--${color}-saturation), 50%)`
 
+	const donutClasses: string = getClasses(styles.donut, "relative")
 	const donutContainerStyle: object = {
 		height: size + "px",
 		width: size + "px",
 	}
 
 	return (
-		<Flex
-			style={donutContainerStyle}
-			className={`${styles.donut} relative`}
-			isCentered={true}
-			data-ui-component="Donut"
-		>
+		<Flex style={donutContainerStyle} className={donutClasses} isCentered={true} data-ui-component="Donut">
 			<Flex className="absolute top-0 left-0 z-50" style={donutContainerStyle} isCentered={true}>
 				{children}
 			</Flex>
@@ -36,6 +33,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.module.css

@@ -48,30 +48,40 @@
 	position: absolute;
 	z-index: var(--z-index-8);
 
+	display: none;
 	min-width: 240px;
 	opacity: 0;
 
 	transition:
+		display 96ms ease-in-out allow-discrete,
 		transform 96ms ease-in-out,
 		opacity 96ms ease-in-out;
 	pointer-events: none;
 }
 
-.dropdown__nav.dropdown__navActive {
-	opacity: 1 !important;
+.dropdown__navActive {
+	display: block;
+	opacity: 1;
 
-	transform: translateY(0) !important;
+	transform: translateY(0);
 
 	pointer-events: all;
-}
 
-@keyframes dropdownFade {
-	0% {
+	@starting-style {
 		opacity: 0;
-		/* transform: translateY(-8px); */
 	}
-	100% {
-		opacity: 1;
-		/* transform: translateY(0); */
+}
+
+.dropdownBottomLeft .dropdown__navActive,
+.dropdownBottomRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(-6px);
+	}
+}
+
+.dropdownTopLeft .dropdown__navActive,
+.dropdownTopRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(6px);
 	}
 }

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)
 	}
@@ -81,9 +86,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 
 	const onSetVisible = (): void => setVisible(!isVisible)
 
-	const navClasses: string = getClasses(styles.dropdown__nav, {
-		[styles.dropdown__navActive]: isVisible,
-	})
+	const navClasses: string = getClasses(styles.dropdown__nav, isVisible && styles.dropdown__navActive)
 
 	const itemsWithClose = useMemo(
 		() =>

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 },

package/components/Flex/Flex.tsx

@@ -1,8 +1,8 @@
-import { memo } from "react"
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
+import type { FC } from "react"
 
-export const Flex = memo((props: FlexProps) => {
+export const Flex: FC<FlexProps> = (props) => {
 	const { ref, ...restProps } = props
 	const flexClasses: string = getFlexUtility(restProps)
 	const safeProps = getSafeFlexProps(restProps)
@@ -12,4 +12,4 @@ export const Flex = memo((props: FlexProps) => {
 			{restProps.children}
 		</div>
 	)
-})
+}

package/components/Flex/Flex.types.ts

@@ -8,7 +8,7 @@ export type ResponsiveRadiusType = HeliosRadiusType | [HeliosRadiusType, HeliosR
 export interface FlexBaseProps {
 	className?: string
 	elevation?: "small" | "medium" | "large"
-	gap?: HeliosScaleType
+	gap?: ResponsiveScaleType
 	grow?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
 	isAround?: boolean
 	isBetween?: boolean
@@ -23,6 +23,8 @@ export interface FlexBaseProps {
 	isYCentered?: boolean
 	onClick?: MouseEventHandler<HTMLDivElement>
 	padding?: ResponsiveScaleType
+	paddingBlock?: ResponsiveScaleType
+	paddingInline?: ResponsiveScaleType
 	paddingX?: HeliosScaleType
 	paddingY?: HeliosScaleType
 	ref?: Ref<HTMLDivElement>

package/components/Flex/Flex.utils.ts

@@ -42,7 +42,21 @@ export const getFlexUtility = (props?: FlexProps): string => {
 		flexClasses.add(responsivePadding)
 	}
 
-	if (props.gap) flexClasses.add(`gap-${props.gap}`)
+	if (props.gap) {
+		const responsiveGap: string = getResponsiveScale(props.gap, "gap")
+		flexClasses.add(responsiveGap)
+	}
+
+	if (props.paddingBlock) {
+		const responsivePaddingBlock: string = getResponsiveScale(props.paddingBlock, "py")
+		flexClasses.add(responsivePaddingBlock)
+	}
+
+	if (props.paddingInline) {
+		const responsivePaddingInline: string = getResponsiveScale(props.paddingInline, "px")
+		flexClasses.add(responsivePaddingInline)
+	}
+
 	if (props.paddingY) flexClasses.add(`py-${props.paddingY}`)
 	if (props.paddingX) flexClasses.add(`px-${props.paddingX}`)
 
@@ -54,6 +68,25 @@ export const getFlexUtility = (props?: FlexProps): string => {
 	return Array.from(flexClasses).join(" ")
 }
 
+export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string = "p"): string => {
+	if (!value) return ""
+
+	const isArray: boolean = Boolean(value && value instanceof Array)
+	const classes = new Set<string>()
+
+	if (!isArray) return `${prefix}-${value}`
+
+	for (let index: number = 0; index < 3; index++) {
+		const element = (value as [HeliosScaleType, HeliosScaleType, HeliosScaleType])[index]
+
+		if (index === 0) classes.add(`mobile:${prefix}-${element ?? 0}`)
+		if (index === 1) classes.add(`tablet:${prefix}-${element ?? 0}`)
+		if (index === 2) classes.add(`${prefix}-${element ?? 0}`)
+	}
+
+	return Array.from(classes).join(" ")
+}
+
 export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 	if (!paddingValue) return ""
 
@@ -111,6 +144,8 @@ export const getSafeFlexProps = (props: any): Partial<FlexProps> => {
 		isXCentered: _isXCentered,
 		isYCentered: _isYCentered,
 		padding: _padding,
+		paddingBlock: _paddingBlock,
+		paddingInline: _paddingInline,
 		paddingX: _paddingX,
 		paddingY: _paddingY,
 		withBackground: _withBackground,

package/components/Flex/index.ts

@@ -1,6 +1,4 @@
 import { Flex } from "./Flex"
 
-Flex.displayName = "Flex"
-
 export { Flex }
 export type { FlexProps, ResponsiveRadiusType } from "./Flex.types"

package/components/Heading/Heading.tsx

@@ -9,9 +9,9 @@ import { H5 } from "./components/H5"
 import { H6 } from "./components/H6"
 import styles from "./Heading.module.css"
 import type { HeadingProps } from "./Heading.types"
-import { memo, type FC, type CSSProperties } from "react"
+import type { FC, CSSProperties } from "react"
 
-export const Heading: FC<HeadingProps> = memo((props) => {
+export const Heading: FC<HeadingProps> = (props) => {
 	const { level, lineClamp, style, className, ...rest } = props
 
 	const headingClasses: string = getClasses(className, styles.heading, {
@@ -60,4 +60,4 @@ export const Heading: FC<HeadingProps> = memo((props) => {
 		default:
 			return null
 	}
-})
+}

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

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H1Props } from "./H1.types"
 
 export const H1: FC<H1Props> = (props) => {
-	return <h1 {...props} className={`h1 ${props.className}`} data-ui-component="Heading.H1" />
+	return <h1 {...props} className={getClasses("h1", props.className)} data-ui-component="Heading.H1" />
 }

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

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H2Props } from "./H2.types"
 
 export const H2: FC<H2Props> = (props) => {
-	return <h2 {...props} className={`h2 ${props.className}`} data-ui-component="Heading.H2" />
+	return <h2 {...props} className={getClasses("h2", props.className)} data-ui-component="Heading.H2" />
 }

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

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H3Props } from "./H3.types"
 
 export const H3: FC<H3Props> = (props) => {
-	return <h3 {...props} className={`h3 ${props.className}`} data-ui-component="Heading.H3" />
+	return <h3 {...props} className={getClasses("h3", props.className)} data-ui-component="Heading.H3" />
 }

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

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H4Props } from "./H4.types"
 
 export const H4: FC<H4Props> = (props) => {
-	return <h4 {...props} className={`h4 ${props.className}`} data-ui-component="Heading.H4" />
+	return <h4 {...props} className={getClasses("h4", props.className)} data-ui-component="Heading.H4" />
 }

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

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H5Props } from "./H5.types"
 
 export const H5: FC<H5Props> = (props) => {
-	return <h5 {...props} className={`h5 ${props.className}`} data-ui-component="Heading.H5" />
+	return <h5 {...props} className={getClasses("h5", props.className)} data-ui-component="Heading.H5" />
 }

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

@@ -1,6 +1,7 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H6Props } from "./H6.types"
 
 export const H6: FC<H6Props> = (props) => {
-	return <h6 {...props} className={`h6 ${props.className}`} data-ui-component="Heading.H6" />
+	return <h6 {...props} className={getClasses("h6", props.className)} data-ui-component="Heading.H6" />
 }

package/components/Icon/Icon.tsx

@@ -1,10 +1,10 @@
 import { getClasses } from "@heliosgraphics/utils"
 import { icons } from "@heliosgraphics/icons"
 import styles from "./Icon.module.css"
-import { memo, type FC } from "react"
+import type { FC } from "react"
 import type { IconProps } from "./Icon.types"
 
-export const Icon: FC<IconProps> = memo(({ icon, className, emphasis, size }) => {
+export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 	const iconSizeStyle = {
 		height: size + "px",
 		minHeight: size + "px",
@@ -27,4 +27,4 @@ export const Icon: FC<IconProps> = memo(({ icon, className, emphasis, size }) =>
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)
-})
+}

package/components/Input/Input.tsx

@@ -14,7 +14,9 @@ import type { InputProps } from "./Input.types"
 import type { ResultItem } from "../shared/ResultList"
 
 export const Input: FC<InputProps> = ({
+	className,
 	helperText,
+	id,
 	isDisabled,
 	autoComplete,
 	autoFocus,
@@ -36,7 +38,8 @@ export const Input: FC<InputProps> = ({
 	type = "text",
 	value,
 }) => {
-	const htmlFor: string = useId()
+	const generatedId: string = useId()
+	const htmlFor: string = id || generatedId
 	const helperId: string = `${htmlFor}-helper`
 
 	const filteredItems: Array<ResultItem> =
@@ -51,7 +54,7 @@ export const Input: FC<InputProps> = ({
 
 	const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
 
-	const inputClasses: string = getClasses(styles.input, "relative flex flex-column", {
+	const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
 		[styles.inputDisabled]: isDisabled,
 		[styles.inputShowingResults]: showingResults,
 	})

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
 import styles from "./LayoutAsideContent.module.css"

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
 import styles from "./LayoutAsideFooter.module.css"

package/components/Loading/Loading.tsx

@@ -1,9 +1,12 @@
+"use client"
+
 import { getClasses } from "@heliosgraphics/utils"
+import { useId, type FC } from "react"
 import styles from "./Loading.module.css"
-import { memo, type FC } from "react"
 import type { LoadingProps } from "./Loading.types"
 
-export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) => {
+export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
+	const titleId: string = useId()
 	const rSize = size / 2
 	const cSize = rSize + 2
 	const dashSize = size + cSize
@@ -24,9 +27,10 @@ export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) =>
 			height={size + 4}
 			width={size + 4}
 			role="status"
-			aria-label="Loading"
+			aria-labelledby={titleId}
 			data-ui-component="Loading"
 		>
+			<title id={titleId}>Loading</title>
 			<circle
 				fill="none"
 				strokeWidth={4}
@@ -48,4 +52,4 @@ export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) =>
 			/>
 		</svg>
 	)
-})
+}

package/components/Masonry/Masonry.meta.ts

@@ -19,10 +19,6 @@ export const meta: HeliosAttributeMeta<MasonryBaseProps> = {
 		type: "[number, number, number]",
 	},
 	gap: {
-		type: "[number, number, number]",
-	},
-	useBalancedLayout: {
-		type: "boolean",
-		isOptional: true,
+		type: "[HeliosScaleType, HeliosScaleType, HeliosScaleType]",
 	},
 }