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

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/package.json

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