@heliosgraphics/ui 2.0.1-alpha.2 → 2.0.1-alpha.4

package/components/Dropdown/Dropdown.module.css

@@ -5,7 +5,9 @@
 	user-select: none;
 }
 
-.dropdownOpen [data-ui-component="Icon"] {
+.dropdownOpen .dropdown__activator [data-ui-icon="caret-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="arrow-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="chevron-down"] {
 	transition: transform 96ms ease-in-out;
 	transform: rotate(180deg);
 }
@@ -53,40 +55,19 @@
 	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__navActive {
-	display: block;
-	opacity: 1;
+.dropdown__nav.dropdown__navActive {
+	opacity: 1 !important;
 
-	transform: translateY(0);
+	transform: translateY(0) !important;
 
 	pointer-events: all;
-
-	@starting-style {
-		opacity: 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

@@ -95,6 +95,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 			<div
 				role="button"
 				tabIndex={0}
+				className={styles.dropdown__activator}
 				onClick={onSetVisible}
 				onKeyDown={onKeyDown}
 				aria-expanded={isVisible}

package/components/Icon/Icon.tsx

@@ -24,6 +24,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			style={iconSizeStyle}
 			aria-hidden={true}
 			data-ui-component="Icon"
+			data-ui-icon={icon}
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)

package/components/Masonry/Masonry.tsx

@@ -1,6 +1,5 @@
-"use client"
-
-import { type FC, useId, useInsertionEffect } from "react"
+import { Children, type FC } from "react"
+import { Masonry as Plock } from "react-plock"
 import type { MasonryProps } from "./Masonry.types"
 
 export const Masonry: FC<MasonryProps> = ({
@@ -9,40 +8,21 @@ export const Masonry: FC<MasonryProps> = ({
 	gap = [2, 4, 6],
 	breakpoints = [0, 640, 960],
 }) => {
-	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])
-
 	if (!children) return null
 
+	const items = Children.toArray(children)
+	const numericGap = gap.map((g) => (g === "px" ? 1 : g)) as Array<number>
+
 	return (
-		<div className={id} data-ui-component="Masonry">
-			{children}
-		</div>
+		<Plock
+			items={items}
+			config={{
+				columns,
+				gap: numericGap,
+				media: breakpoints,
+			}}
+			render={(item, index) => <div key={index}>{item}</div>}
+		/>
 	)
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.2",
+	"version": "2.0.1-alpha.4",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -45,7 +45,8 @@
 		"@heliosgraphics/utils": "^6.0.0-alpha.9",
 		"marked": "^17.0.3",
 		"marked-linkify-it": "^3.1.14",
-		"marked-xhtml": "^1.0.14"
+		"marked-xhtml": "^1.0.14",
+		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",

package/{components/Markdown/Markdown.utils.spec.ts → utils/markdown.spec.ts}

@@ -1,5 +1,5 @@
 import { it, describe, expect } from "bun:test"
-import { renderMarkdown } from "./Markdown.utils"
+import { renderMarkdown } from "./markdown"
 
 describe("markdown", () => {
 	describe("renderMarkdown", () => {