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

package/components/Textarea/Textarea.tsx

@@ -2,16 +2,17 @@
 
 import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
-import { useId, useRef, useEffect } from "react"
+import { useId, useRef, useEffect, useImperativeHandle, forwardRef } from "react"
 import { InputLabel } from "../shared/InputLabel"
 import styles from "./Textarea.module.css"
-import type { FC } from "react"
 import type { TextareaProps } from "./Textarea.types"
 
-export const Textarea: FC<TextareaProps> = (props) => {
-	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
+	const internalRef = useRef<HTMLTextAreaElement | null>(null)
 	const { autoComplete: _autoComplete, helperText: _helperText, isDisabled, isLabelHidden, ...goodProps } = props
 
+	useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement)
+
 	const htmlFor: string = useId()
 	const helperId: string = `${htmlFor}-helper`
 	const textareaClasses: string = getClasses(styles.textarea, "flex flex-column", {
@@ -19,16 +20,14 @@ export const Textarea: FC<TextareaProps> = (props) => {
 	})
 
 	const onInput = (): void => {
-		if (textareaRef?.current) {
-			textareaRef.current.style.height = "auto"
-			textareaRef.current.style.height = textareaRef.current.scrollHeight + "px"
-		}
+		if (!internalRef.current) return
+
+		internalRef.current.style.height = "auto"
+		internalRef.current.style.height = internalRef.current.scrollHeight + "px"
 	}
 
 	useEffect(() => {
-		if (textareaRef?.current) {
-			onInput()
-		}
+		onInput()
 
 		const timer: ReturnType<typeof setTimeout> = setTimeout(() => onInput(), 100)
 
@@ -49,7 +48,7 @@ export const Textarea: FC<TextareaProps> = (props) => {
 			)}
 			<textarea
 				{...goodProps}
-				ref={textareaRef}
+				ref={internalRef}
 				id={htmlFor}
 				rows={goodProps.rows ?? 4}
 				onInput={onInput}
@@ -64,4 +63,6 @@ export const Textarea: FC<TextareaProps> = (props) => {
 			)}
 		</div>
 	)
-}
+})
+
+Textarea.displayName = "Textarea"

package/components/Tile/Tile.tsx

@@ -66,3 +66,5 @@ export const Tile: FC<TileProps> = ({
 		</Flex>
 	)
 }
+
+Tile.displayName = "Tile"

package/components/Timestamp/Timestamp.tsx

@@ -17,3 +17,5 @@ export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format }) =
 		</time>
 	)
 }
+
+Timestamp.displayName = "Timestamp"

package/components/Toggle/Toggle.tsx

@@ -58,3 +58,5 @@ export const Toggle: FC<ToggleProps> = ({
 		</div>
 	)
 }
+
+Toggle.displayName = "Toggle"

package/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef, useEffect, useMemo, useState, useId, type FC } from "react"
+import { useRef, useEffect, useMemo, useId, type FC } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Tooltip.module.css"
 import type { TooltipProps, TooltipComposition, TooltipContextType } from "./Tooltip.types"
@@ -20,7 +20,6 @@ const POSITION_CLASS_MAP = {
 } as const satisfies Record<NonNullable<TooltipProps["position"]>, string | undefined>
 
 const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "bottom-center", isVisible = false }) => {
-	const [isOpen, setIsOpen] = useState<boolean>(isVisible)
 	const triggerRef = useRef<HTMLDivElement | null>(null)
 	const popoverRef = useRef<HTMLDivElement | null>(null)
 	const id: string = useId()
@@ -45,27 +44,35 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			return
 		}
 
+		const setAriaDescribedBy = (isOpen: boolean): void => {
+			if (isOpen) {
+				trigger.setAttribute("aria-describedby", tooltipId)
+			} else {
+				trigger.removeAttribute("aria-describedby")
+			}
+		}
+
 		if (isVisible) {
 			popover.showPopover()
-			setIsOpen(true)
+			setAriaDescribedBy(true)
 		}
 
 		const handleMouseEnter = (): void => {
 			popover.showPopover()
-			setIsOpen(true)
+			setAriaDescribedBy(true)
 		}
 
 		const handleMouseLeave = (): void => {
 			if (!isVisible) {
 				popover.hidePopover()
-				setIsOpen(false)
+				setAriaDescribedBy(false)
 			}
 		}
 
 		const handleKeyDown = (event: KeyboardEvent): void => {
 			if (event.key === "Escape") {
 				popover.hidePopover()
-				setIsOpen(false)
+				setAriaDescribedBy(false)
 			}
 		}
 
@@ -78,7 +85,7 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			trigger.removeEventListener("mouseleave", handleMouseLeave)
 			trigger.removeEventListener("keydown", handleKeyDown)
 		}
-	}, [isVisible])
+	}, [isVisible, tooltipId])
 
 	const contextValue: TooltipContextType = useMemo(
 		() => ({
@@ -87,9 +94,8 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			tooltipClasses,
 			anchorName,
 			tooltipId,
-			isOpen,
 		}),
-		[tooltipClasses, anchorName, tooltipId, isOpen],
+		[tooltipClasses, anchorName, tooltipId],
 	)
 
 	return (
@@ -105,3 +111,5 @@ export const Tooltip: FC<TooltipProps> & TooltipComposition = Object.assign(Tool
 	Trigger: TooltipTrigger,
 	Content: TooltipContent,
 })
+
+Tooltip.displayName = "Tooltip"

package/components/Tooltip/Tooltip.types.ts

@@ -23,7 +23,6 @@ export interface TooltipContextType {
 	tooltipClasses: string
 	anchorName: string
 	tooltipId: string
-	isOpen: boolean
 }
 
 export interface TooltipComposition {

package/components/Tooltip/components/TooltipContent/TooltipContent.tsx

@@ -23,3 +23,5 @@ export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
 		</div>
 	)
 }
+
+TooltipContent.displayName = "TooltipContent"

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx

@@ -5,13 +5,15 @@ import { useTooltipContext } from "../../Tooltip.utils"
 import type { CSSProperties, FC } from "react"
 
 export const TooltipTrigger: FC<TooltipTriggerProps> = ({ children }) => {
-	const { triggerRef, anchorName, tooltipId, isOpen } = useTooltipContext()
+	const { triggerRef, anchorName } = useTooltipContext()
 
 	const triggerStyle: CSSProperties = { anchorName } as CSSProperties
 
 	return (
-		<div ref={triggerRef} style={triggerStyle} aria-describedby={isOpen ? tooltipId : undefined}>
+		<div ref={triggerRef} style={triggerStyle}>
 			{children}
 		</div>
 	)
 }
+
+TooltipTrigger.displayName = "TooltipTrigger"

package/components/shared/InputLabel/InputLabel.tsx

@@ -16,3 +16,5 @@ export const InputLabel: FC<InputLabelProps> = ({ id, label, isDisabled, isHidde
 		</label>
 	)
 }
+
+InputLabel.displayName = "InputLabel"

package/components/shared/ResultList/ResultList.tsx

@@ -4,7 +4,7 @@ import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import type { ChangeEvent, FC } from "react"
+import type { ChangeEventHandler, FC } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
 export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
@@ -24,9 +24,9 @@ export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 				if (item.type === "separator") return <li key={itemKey} className={styles.resultList__separator} />
 
 				if (item.type === "checkbox") {
-					const onCheck = (event: ChangeEvent<HTMLInputElement>): void =>
-						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-						item.onClick?.(event as any)
+					const onCheck: ChangeEventHandler<HTMLInputElement> = (): void => {
+						item.onClick?.({} as React.MouseEvent)
+					}
 
 					return (
 						<li key={itemKey} onClick={item.onClick} className={itemClasses}>
@@ -63,3 +63,5 @@ export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 		</ol>
 	)
 }
+
+ResultList.displayName = "ResultList"

package/contexts/LayoutContext/LayoutContext.tsx

@@ -15,44 +15,37 @@ type LayoutProviderProps = PropsWithChildren<LayoutProviderBaseProps>
 
 const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 }) => {
 	const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
-	const [windowWidth, setWindowWidth] = useState<number>(0)
+	const [isWideEnough, setIsWideEnough] = useState<boolean>(false)
 	const [hasMounted, setHasMounted] = useState<boolean>(false)
 	const asideRef = useRef<HTMLElement | null>(null)
 	const isMenuVisibleRef = useRef<boolean>(false)
-	const windowWidthRef = useRef<number>(0)
-	const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	useEffect(() => {
 		isMenuVisibleRef.current = isMenuVisible
 	}, [isMenuVisible])
 
 	useEffect(() => {
-		const initialWidth = globalThis.innerWidth
-
 		setHasMounted(true)
-		setWindowWidth(initialWidth)
-		windowWidthRef.current = initialWidth
-
-		const initialMenuVisible = initialWidth >= breakpoint
 
-		setIsMenuVisible(initialMenuVisible)
-		isMenuVisibleRef.current = initialMenuVisible
+		const mql = globalThis.matchMedia(`(min-width: ${breakpoint}px)`)
 
-		const handleResize = (): void => {
-			const newWidth: number = globalThis.innerWidth
-			const wasWideEnough: boolean = windowWidthRef.current >= breakpoint
-			const isNowWideEnough: boolean = newWidth >= breakpoint
+		const handleChange = (event: MediaQueryListEvent | MediaQueryList): void => {
+			const matches = event.matches
 
-			setWindowWidth(newWidth)
-			windowWidthRef.current = newWidth
+			setIsWideEnough(matches)
 
-			if (isNowWideEnough && !wasWideEnough) {
+			if (matches) {
 				setIsMenuVisible(true)
-			} else if (!isNowWideEnough && wasWideEnough) {
+			} else {
 				setIsMenuVisible(false)
 			}
 		}
 
+		// Set initial state
+		handleChange(mql)
+
+		mql.addEventListener("change", handleChange)
+
 		const handleClickOutside = (event: MouseEvent): void => {
 			if (asideRef?.current?.contains(event.target as Node)) return
 
@@ -60,7 +53,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			const shouldIgnore: Element | null = clickedElement?.closest(`[${IGNORE_DATA_ATTRIBUTE}]`)
 
 			if (!shouldIgnore) {
-				const currentIsWideEnough: boolean = globalThis.innerWidth >= breakpoint
+				const currentIsWideEnough: boolean = mql.matches
 
 				if (!currentIsWideEnough && isMenuVisibleRef.current) {
 					setIsMenuVisible(false)
@@ -68,25 +61,14 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			}
 		}
 
-		const throttledResize = (): void => {
-			if (resizeTimerRef.current) return
-			resizeTimerRef.current = setTimeout(() => {
-				handleResize()
-				resizeTimerRef.current = null
-			}, 150)
-		}
-
-		globalThis.addEventListener("resize", throttledResize)
 		globalThis.document.addEventListener("mousedown", handleClickOutside)
 
 		return (): void => {
-			if (resizeTimerRef.current) globalThis.clearTimeout(resizeTimerRef.current)
-			globalThis.removeEventListener("resize", throttledResize)
+			mql.removeEventListener("change", handleChange)
 			globalThis.document.removeEventListener("mousedown", handleClickOutside)
 		}
 	}, [breakpoint])
 
-	const isWideEnough: boolean = hasMounted ? windowWidth >= breakpoint : false
 	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible
 
 	const onNavigationToggle = useCallback((): void => setIsMenuVisible((prev) => !prev), [])
@@ -101,9 +83,8 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			onAsideClose,
 			onNavigationToggle,
 			shouldShowNavigation,
-			windowWidth,
 		}),
-		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle, windowWidth],
+		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle],
 	)
 
 	return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -8,5 +8,4 @@ export interface LayoutContextProps {
 	onAsideClose: () => void
 	onNavigationToggle: () => void
 	shouldShowNavigation: boolean
-	windowWidth: number
 }

package/hooks/useLayoutContext.tsx

@@ -12,7 +12,6 @@ const DEFAULT_LAYOUT_CONTEXT: LayoutContextProps = {
 	onAsideClose: () => {},
 	onNavigationToggle: () => {},
 	shouldShowNavigation: true,
-	windowWidth: 0,
 }
 
 export const useLayoutContext = (): LayoutContextProps => {

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/index.ts

@@ -65,10 +65,15 @@ export type { ResultItem } from "./components/shared/ResultList"
 export type { SelectItem } from "./components/Select"
 export type { TextBaseProps, TextProps } from "./components/Text"
 
+export { useChatScroll } from "./hooks/useChatScroll"
+export { useDebounce } from "./hooks/useDebounce"
 export { useIntersection } from "./hooks/useIntersection"
+export { useInterval } from "./hooks/useInterval"
+export { useKeyPress } from "./hooks/useKeyPress"
 export { useLayoutContext } from "./hooks/useLayoutContext"
 export { usePrevious } from "./hooks/usePrevious"
 export { usePrint } from "./hooks/usePrint"
+export { useResizeObserver } from "./hooks/useResizeObserver"
 export { useTheme } from "./hooks/useTheme"
 
 export type { HeliosAppearanceType, HeliosColorType } from "./types/colors"

package/package.json

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