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

package/components/Dialog/Dialog.tsx

@@ -30,23 +30,23 @@ export const Dialog: FC<DialogProps> = ({
 	useEffect(() => {
 		dialogRef?.current?.scrollTo?.(0, 0)
 
-		if (isOpen) {
-			triggerRef.current = document.activeElement
-			document.documentElement.style.overflow = "hidden"
+		if (!isOpen) return
 
-			if (!dialogRef.current?.open) {
-				dialogRef?.current?.showModal?.()
-			}
+		triggerRef.current = document.activeElement
+		document.documentElement.style.overflow = "hidden"
+
+		if (!dialogRef.current?.open) {
+			dialogRef?.current?.showModal?.()
+		}
 
-			return (): void => {
-				document.documentElement.style.overflow = ""
+		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()
 			}
+			triggerRef.current = null
 		}
 	}, [isOpen])
 

package/components/Flex/Flex.tsx

@@ -7,7 +7,7 @@ export const Flex: FC<FlexProps> = (props) => {
 	const flexClasses: string = getFlexUtility(restProps)
 	const safeProps = getSafeFlexProps(restProps)
 
-	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+	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>)

package/components/Masonry/Masonry.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { type FC, useMemo } from "react"
+import { type FC, useId, useInsertionEffect } from "react"
 import type { MasonryProps } from "./Masonry.types"
 
 export const Masonry: FC<MasonryProps> = ({
@@ -9,32 +9,40 @@ export const Masonry: FC<MasonryProps> = ({
 	gap = [2, 4, 6],
 	breakpoints = [0, 640, 960],
 }) => {
-	const id: string = useMemo(() => `masonry-${Math.random().toString(36).slice(2, 8)}`, [])
-
-	if (!children) return null
-
-	const mediaStyles = `
-		.${id} { column-count: ${columns[0]}; column-gap: ${gap[0]}px; }
-		.${id} > * { break-inside: avoid; margin-bottom: ${gap[0]}px; }
-
-		@media (min-width: ${breakpoints[1]}px) {
-			.${id} { column-count: ${columns[1]}; column-gap: ${gap[1]}px; }
-			.${id} > * { margin-bottom: ${gap[1]}px; }
+	const reactId = useId()
+	const id = `masonry${reactId.replace(/:/g, "")}`
+
+	useInsertionEffect(() => {
+		const style = document.createElement("style")
+
+		style.dataset["masonryId"] = id
+		style.textContent = `
+			.${id} { column-count: ${columns[0]}; column-gap: ${gap[0]}px; }
+			.${id} > * { break-inside: avoid; margin-bottom: ${gap[0]}px; }
+
+			@media (min-width: ${breakpoints[1]}px) {
+				.${id} { column-count: ${columns[1]}; column-gap: ${gap[1]}px; }
+				.${id} > * { margin-bottom: ${gap[1]}px; }
+			}
+
+			@media (min-width: ${breakpoints[2]}px) {
+				.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
+				.${id} > * { margin-bottom: ${gap[2]}px; }
+			}
+		`
+		document.head.appendChild(style)
+
+		return (): void => {
+			style.remove()
 		}
+	}, [id, columns, gap, breakpoints])
 
-		@media (min-width: ${breakpoints[2]}px) {
-			.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
-			.${id} > * { margin-bottom: ${gap[2]}px; }
-		}
-	`
+	if (!children) return null
 
 	return (
-		<>
-			<style dangerouslySetInnerHTML={{ __html: mediaStyles }} />
-			<div className={id} data-ui-component="Masonry">
-				{children}
-			</div>
-		</>
+		<div className={id} data-ui-component="Masonry">
+			{children}
+		</div>
 	)
 }
 

package/hooks/useResizeObserver.tsx

@@ -20,8 +20,8 @@ export const useResizeObserver = (): readonly [(element: HTMLDivElement | null)
 		if (element) {
 			resizeObserverRef.current = new ResizeObserver((entries) => {
 				if (entries[0]) {
-					const width = entries[0].contentRect.width
-					setWidth(width)
+					const entryWidth = entries[0].contentRect.width
+					setWidth(entryWidth)
 				}
 			})
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.96",
+	"version": "2.0.0-alpha.98",
 	"type": "module",
 	"sideEffects": [
 		"*.css",