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

package/components/Flex/Flex.utils.ts

@@ -73,7 +73,7 @@ export const getFlexUtility = (props?: FlexProps): string => {
 export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string = "p"): string => {
 	if (!value) return ""
 
-	const isArray: boolean = Boolean(value && value instanceof Array)
+	const isArray: boolean = Array.isArray(value)
 	const classes = new Set<string>()
 
 	if (!isArray) return `${prefix}-${value}`
@@ -92,7 +92,7 @@ export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string =
 export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 	if (!paddingValue) return ""
 
-	const isArray: boolean = Boolean(paddingValue && paddingValue instanceof Array)
+	const isArray: boolean = Array.isArray(paddingValue)
 	const paddingClasses = new Set<string>()
 
 	if (!isArray) return `p-${paddingValue}`
@@ -111,7 +111,7 @@ export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 export const getRadius = (radiusValue?: ResponsiveRadiusType): string => {
 	if (!radiusValue) return ""
 
-	const isArray: boolean = Boolean(radiusValue && radiusValue instanceof Array)
+	const isArray: boolean = Array.isArray(radiusValue)
 	const radiusClasses = new Set<string>()
 
 	if (!isArray) return `radius-${radiusValue}`

package/components/Heading/Heading.tsx

@@ -32,9 +32,7 @@ export const Heading: FC<HeadingProps> = (props) => {
 	const lineHeightStyle: CSSProperties | undefined = lineHeight !== undefined ? { lineHeight } : undefined
 
 	const mergedStyle: CSSProperties | undefined =
-		style || lineClampStyle || lineHeightStyle
-			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
-			: undefined
+		style || lineClampStyle || lineHeightStyle ? { ...style, ...lineClampStyle, ...lineHeightStyle } : undefined
 	const safeHeadingProps: Omit<HeadingProps, "level" | "lineClamp" | "lineHeight" | "className" | "style"> =
 		stripTypographyProps(rest)
 

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.utils.ts

@@ -3,6 +3,10 @@
 let lastLocation: string | null = null
 let isHistoryPatched: boolean = false
 
+const dispatchLocationChange = (): void => {
+	globalThis.dispatchEvent(new Event("locationchange"))
+}
+
 const getLocationKey = (): string | null => {
 	if (!globalThis?.location) return null
 
@@ -15,9 +19,6 @@ const patchHistory = (): void => {
 	isHistoryPatched = true
 
 	const { pushState, replaceState } = globalThis.history
-	const dispatchLocationChange = (): void => {
-		globalThis.dispatchEvent(new Event("locationchange"))
-	}
 
 	const pushStateWrapper = (...args: Parameters<History["pushState"]>): ReturnType<History["pushState"]> => {
 		const result = pushState.apply(globalThis.history, args as Parameters<History["pushState"]>)

package/components/Markdown/Markdown.meta.ts

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

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, allowLinks }) => {
+export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable, isLinksAllowed }) => {
 	if (!text && !children) return null
 
 	const markdownClasses: string = getClasses(styles.markdown, {
@@ -12,7 +12,7 @@ export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable, a
 	})
 
 	if (text) {
-		const innerHTML = { __html: renderMarkdown(text, { allowLinks }) }
+		const innerHTML = { __html: renderMarkdown(text, { allowLinks: !!isLinksAllowed }) }
 
 		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
 	}

package/components/Markdown/Markdown.types.ts

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

package/components/Setup/Setup.utils.ts

@@ -1,61 +0,0 @@
-import type { HeliosFixedThemeType, HeliosThemeType } from "../../types/themes"
-
-export const code = (theme: HeliosThemeType = "system", fixedTheme?: HeliosFixedThemeType): void => {
-	globalThis.__onThemeChange = function (_theme: HeliosFixedThemeType): void {}
-
-	const setTheme = (newTheme: HeliosFixedThemeType): void => {
-		globalThis.__theme = newTheme
-		document.documentElement.dataset["theme"] = newTheme
-		globalThis.__onThemeChange?.(newTheme)
-	}
-
-	const handleDocumentClick = (event: MouseEvent): void => {
-		if (event.x > 256 && globalThis.location.hash === "#ui-menu") {
-			globalThis.location.hash = "#ui"
-		}
-	}
-
-	document.addEventListener("click", handleDocumentClick)
-
-	const isLocked: boolean = fixedTheme !== undefined || theme !== "system"
-
-	if (fixedTheme !== undefined && theme !== "system") {
-		console.warn("Setup: Both theme and fixedTheme props are set. fixedTheme takes precedence, theme prop is ignored.")
-	}
-
-	if (isLocked) {
-		const lockedTheme: HeliosFixedThemeType = fixedTheme ?? (theme as HeliosFixedThemeType)
-		globalThis.__setPreferredTheme = function (_newTheme: HeliosFixedThemeType): void {}
-		setTheme(lockedTheme)
-		return
-	}
-
-	let preferredTheme: HeliosFixedThemeType | undefined
-	const darkQuery: MediaQueryList = globalThis.matchMedia("(prefers-color-scheme: dark)")
-
-	try {
-		const storedTheme: string | null = globalThis.localStorage.getItem("theme")
-		if (storedTheme === "dark" || storedTheme === "light") {
-			preferredTheme = storedTheme
-		}
-	} catch (error: unknown) {
-		console.error("failed to read theme from localStorage:", error)
-	}
-
-	globalThis.__setPreferredTheme = function (newTheme: HeliosFixedThemeType): void {
-		try {
-			setTheme(newTheme)
-			globalThis.localStorage.setItem("theme", newTheme)
-		} catch (error: unknown) {
-			console.error("failed to set theme:", error)
-		}
-	}
-
-	const handleDarkModeChange = (event: MediaQueryListEvent): void => {
-		globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
-	}
-
-	darkQuery.addEventListener("change", handleDarkModeChange)
-
-	setTheme(preferredTheme ?? (darkQuery.matches ? "dark" : "light"))
-}

package/components/Tabs/Tabs.tsx

@@ -1,19 +1,13 @@
 import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
+import { onTabKeyDown } from "./Tabs.utils"
 import styles from "./Tabs.module.css"
-import type { FC, KeyboardEvent } from "react"
+import type { FC } from "react"
 import type { TabItem, TabsProps } from "./Tabs.types"
 
 export const Tabs: FC<TabsProps> = ({ items, children }) => {
 	if (!items?.length) return null
 
-	const onKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
-		if (event.key === " " || event.key === "Enter") {
-			event.preventDefault()
-			item.onClick?.()
-		}
-	}
-
 	return (
 		<div data-ui-component="Tabs">
 			<div role="tablist" className={styles.tabs__list}>
@@ -46,7 +40,7 @@ export const Tabs: FC<TabsProps> = ({ items, children }) => {
 						<div
 							{...commonProps}
 							onClick={item.isDisabled ? undefined : item.onClick}
-							onKeyDown={(e) => onKeyDown(e, item)}
+							onKeyDown={(event) => onTabKeyDown(event, item)}
 						>
 							<Text type="small" fontWeight="medium">
 								{item.name}

package/components/Tabs/Tabs.utils.ts

@@ -0,0 +1,9 @@
+import type { KeyboardEvent } from "react"
+import type { TabItem } from "./Tabs.types"
+
+export const onTabKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
+	if (event.key === " " || event.key === "Enter") {
+		event.preventDefault()
+		item.onClick?.()
+	}
+}

package/components/Text/Text.tsx

@@ -28,7 +28,7 @@ export const Text: FC<TextProps> = (props) => {
 		: undefined
 
 	const mergedStyle: object | undefined =
-		props.style || lineClampStyle ? { ...(props.style || {}), ...(lineClampStyle || {}) } : undefined
+		props.style || lineClampStyle ? { ...props.style, ...lineClampStyle } : undefined
 
 	const baseTextProps: Omit<TextProps, "type"> = {
 		onClick: props.onClick,

package/hooks/useTheme.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from "react"
 import type { HeliosFixedThemeType } from "../types/themes"
 
+const getTheme = (): HeliosFixedThemeType => (typeof globalThis !== "undefined" ? globalThis.__theme : "light")
+
 export const useTheme = (): { theme: HeliosFixedThemeType; isDark: boolean; toggleTheme: () => void } => {
 	const [theme, setTheme] = useState<HeliosFixedThemeType | null>(null)
 
@@ -10,8 +12,6 @@ export const useTheme = (): { theme: HeliosFixedThemeType; isDark: boolean; togg
 		setTheme(getTheme())
 	}, [])
 
-	const getTheme = (): HeliosFixedThemeType => (typeof globalThis !== "undefined" ? globalThis.__theme : "light")
-
 	const toggleTheme = useCallback(() => {
 		const currentIsDark: boolean = getTheme() === "dark"
 		globalThis.__setPreferredTheme?.(currentIsDark ? "light" : "dark")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.8",
+	"version": "2.0.1-alpha.9",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -40,9 +40,9 @@
 		"ts:watch": "tsc --noEmit --incremental --watch"
 	},
 	"dependencies": {
-		"@heliosgraphics/css": "^1.0.0-alpha.9",
+		"@heliosgraphics/css": "^1.0.0-alpha.10",
 		"@heliosgraphics/icons": "^1.0.0-alpha.14",
-		"@heliosgraphics/utils": "^6.0.0-alpha.15",
+		"@heliosgraphics/utils": "^6.0.0-alpha.16",
 		"marked": "^17.0.5",
 		"marked-linkify-it": "^3.1.14",
 		"marked-xhtml": "^1.0.14",