@heliosgraphics/ui 2.0.1-alpha.6 → 2.0.1-alpha.8

package/components/Icon/Icon.module.css

@@ -7,16 +7,20 @@
 	width: 100%;
 
 	fill: currentcolor;
+	stroke: currentcolor;
 }
 
 .iconPrimary svg {
 	fill: var(--ui-text-primary);
+	stroke: var(--ui-text-primary);
 }
 
 .iconSecondary svg {
 	fill: var(--ui-text-secondary);
+	stroke: var(--ui-text-secondary);
 }
 
 .iconTertiary svg {
 	fill: var(--ui-text-tertiary);
+	stroke: var(--ui-text-tertiary);
 }

package/components/Markdown/Markdown.meta.ts

@@ -16,6 +16,11 @@ export const meta: HeliosAttributeMeta<MarkdownProps> = {
 		isOptional: true,
 		description: "Children to render inside the markdown wrapper",
 	},
+	allowLinks: {
+		type: "boolean",
+		isOptional: true,
+		description: "Preserves markdown links and auto-linked URLs in sanitized output",
+	},
 	isNonSelectable: {
 		type: "boolean",
 		isOptional: true,

package/components/Markdown/Markdown.tsx

@@ -4,7 +4,7 @@ import styles from "./Markdown.module.css"
 import type { FC } from "react"
 import type { MarkdownProps } from "./Markdown.types"
 
-export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable }) => {
+export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable, allowLinks }) => {
 	if (!text && !children) return null
 
 	const markdownClasses: string = getClasses(styles.markdown, {
@@ -12,7 +12,7 @@ export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable })
 	})
 
 	if (text) {
-		const innerHTML = { __html: renderMarkdown(text) }
+		const innerHTML = { __html: renderMarkdown(text, { allowLinks }) }
 
 		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
 	}

package/components/Markdown/Markdown.types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react"
 
 export interface MarkdownProps {
+	allowLinks?: boolean
 	children?: ReactNode
 	isNonSelectable?: boolean
 	text?: string

package/hooks/useIntersection.tsx

@@ -6,9 +6,17 @@ export const useIntersection = (ref: RefObject<HTMLElement>): boolean => {
 	const [isIntersecting, setIntersecting] = useState<boolean>(false)
 
 	useEffect(() => {
-		if (!ref?.current) return
+		if (!ref?.current) {
+			setIntersecting(false)
+			return
+		}
 
-		const observer = new IntersectionObserver(([entry]) => setIntersecting(!!entry?.isIntersecting))
+		if (typeof globalThis.IntersectionObserver !== "function") {
+			setIntersecting(false)
+			return
+		}
+
+		const observer = new globalThis.IntersectionObserver(([entry]) => setIntersecting(!!entry?.isIntersecting))
 
 		observer.observe(ref.current)
 

package/hooks/useResizeObserver.tsx

@@ -18,7 +18,14 @@ export const useResizeObserver = (): readonly [(element: HTMLDivElement | null)
 		}
 
 		if (element) {
-			resizeObserverRef.current = new ResizeObserver((entries) => {
+			const rect = element.getBoundingClientRect()
+			setWidth(rect.width)
+
+			if (typeof globalThis.ResizeObserver !== "function") {
+				return
+			}
+
+			resizeObserverRef.current = new globalThis.ResizeObserver((entries) => {
 				if (entries[0]) {
 					const entryWidth = entries[0].contentRect.width
 					setWidth(entryWidth)
@@ -26,9 +33,6 @@ export const useResizeObserver = (): readonly [(element: HTMLDivElement | null)
 			})
 
 			resizeObserverRef.current.observe(element)
-
-			const rect = element.getBoundingClientRect()
-			setWidth(rect.width)
 		} else {
 			setWidth(0)
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.6",
+	"version": "2.0.1-alpha.8",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -40,10 +40,10 @@
 		"ts:watch": "tsc --noEmit --incremental --watch"
 	},
 	"dependencies": {
-		"@heliosgraphics/css": "^1.0.0-alpha.5",
-		"@heliosgraphics/icons": "^1.0.0-alpha.11",
-		"@heliosgraphics/utils": "^6.0.0-alpha.9",
-		"marked": "^17.0.3",
+		"@heliosgraphics/css": "^1.0.0-alpha.9",
+		"@heliosgraphics/icons": "^1.0.0-alpha.14",
+		"@heliosgraphics/utils": "^6.0.0-alpha.15",
+		"marked": "^17.0.5",
 		"marked-linkify-it": "^3.1.14",
 		"marked-xhtml": "^1.0.14",
 		"react-plock": "^3.6.1"
@@ -51,13 +51,13 @@
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"esbuild": "^0.27.3",
+		"esbuild": "^0.28.0",
 		"esbuild-css-modules-plugin": "^3.1.5",
 		"glob": "^13.0.6",
-		"jsdom": "^28.1.0",
-		"next": "^16.1.6",
+		"jsdom": "^29.0.1",
+		"next": "^16.2.2",
 		"prettier": "^3.8.1",
-		"typescript": "^5.9.3"
+		"typescript": "^6.0.2"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",

package/utils/markdown.spec.ts

@@ -5,6 +5,10 @@ describe("markdown", () => {
 	describe("renderMarkdown", () => {
 		const SAMPLE = `Hello\n\nHey`
 		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
+		const LINK_SAMPLE = `[x](https://example.com)`
+		const LINK_SAMPLE_OUTPUT = `<p><a href="https://example.com">x</a></p>\n`
+		const BARE_URL_SAMPLE = `Visit https://example.com/path for details.`
+		const BARE_URL_SAMPLE_OUTPUT = `<p>Visit <a href="https://example.com/path">https://example.com/path</a> for details.</p>\n`
 		const MALICIOUS_SAMPLE = `Hello <script>alert(1)</script> **world**`
 		const MALICIOUS_SAMPLE_OUTPUT = `<p>Hello  <strong>world</strong></p>`
 		const MALICIOUS_LINK_SAMPLE = `[x](data:text/html,<script>alert(1)</script>)`
@@ -14,6 +18,19 @@ describe("markdown", () => {
 
 		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
 
+		it("keeps explicit markdown links when links are allowed", () => {
+			expect(renderMarkdown(LINK_SAMPLE, { allowLinks: true })).toEqual(LINK_SAMPLE_OUTPUT)
+		})
+
+		it("autolinks bare urls when links are allowed", () => {
+			expect(renderMarkdown(BARE_URL_SAMPLE, { allowLinks: true })).toEqual(BARE_URL_SAMPLE_OUTPUT)
+		})
+
+		it("keeps links disabled by default", () => {
+			expect(renderMarkdown(LINK_SAMPLE)).toEqual(`<p>x</p>\n`)
+			expect(renderMarkdown(BARE_URL_SAMPLE)).toEqual(`<p>Visit https://example.com/path for details.</p>\n`)
+		})
+
 		it("strips unsafe html from markdown output", () => {
 			const result = renderMarkdown(MALICIOUS_SAMPLE)
 
@@ -23,13 +40,19 @@ describe("markdown", () => {
 		})
 
 		it("strips unsafe link protocols without leaving broken markup", () => {
-			const result = renderMarkdown(MALICIOUS_LINK_SAMPLE)
+			const result = renderMarkdown(MALICIOUS_LINK_SAMPLE, { allowLinks: true })
 
 			expect(result).toEqual(MALICIOUS_LINK_SAMPLE_OUTPUT)
 			expect(result).not.toContain("data:")
 			expect(result).not.toContain("<script")
 		})
 
+		it("does not autolink urls inside inline code", () => {
+			const result = renderMarkdown("`https://example.com`", { allowLinks: true })
+
+			expect(result).toEqual(`<p><code>https://example.com</code></p>\n`)
+		})
+
 		it("removes inline event handler attributes from raw html", () => {
 			const result = renderMarkdown(MALICIOUS_EVENT_HANDLER_SAMPLE)
 

package/utils/markdown.ts

@@ -6,6 +6,10 @@ import { sanitizeText } from "@heliosgraphics/utils"
 const marked = new Marked({ breaks: true, gfm: true })
 const SAFE_MARKDOWN_LINK_PATTERN: RegExp = /^(?:https?:|mailto:|tel:|\/|#)/i
 
+export interface RenderMarkdownOptions {
+	allowLinks?: boolean
+}
+
 marked.use(markedXhtml())
 marked.use(markedLinkifyIt())
 
@@ -15,9 +19,9 @@ const stripUnsafeMarkdownLinks = (html: string): string => {
 	})
 }
 
-export const renderMarkdown = (text: string): string => {
+export const renderMarkdown = (text: string, options: RenderMarkdownOptions = {}): string => {
 	const renderedMarkdown: string = marked.parse(text) as string
-	const sanitizedMarkdown: string = sanitizeText(stripUnsafeMarkdownLinks(renderedMarkdown))
+	const sanitizedMarkdown: string = sanitizeText(stripUnsafeMarkdownLinks(renderedMarkdown), options)
 
 	return renderedMarkdown.endsWith("\n") ? `${sanitizedMarkdown}\n` : sanitizedMarkdown
 }