@heliosgraphics/ui 2.0.0-alpha.89 → 2.0.0-alpha.91

package/components/Tabs/Tabs.tsx

@@ -1,31 +1,55 @@
 "use client"
 
-import { useState, type FC } from "react"
-import { TabsProps } from "./Tabs.types"
+import { useId, useState, type FC, type KeyboardEvent } from "react"
+import type { TabsProps } from "./Tabs.types"
 import styles from "./Tabs.module.css"
 import { Text } from "../Text"
 
 export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) => {
 	const [active, setActive] = useState(activeNumber || 0)
+	const tabsId: string = useId()
 
 	if (!items || !sections) return null
 
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number): void => {
+		if (event.key === "ArrowRight") {
+			event.preventDefault()
+			setActive((index + 1) % items.length)
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault()
+			setActive((index - 1 + items.length) % items.length)
+		}
+	}
+
 	return (
-		<div>
-			<ol className={`${styles.tabs__ol} flex gap-2`}>
-				{items.map((tab, key) => (
-					<li
-						key={key}
-						onClick={() => setActive(key)}
-						className={`${styles.tabs__ol__item} ${active === key ? styles.tabs__ol__itemActive : ""}`}
+		<div data-ui-component="Tabs">
+			<div role="tablist" className={`${styles.tabs__ol} flex gap-2`}>
+				{items.map((tab, index) => (
+					<div
+						key={tab}
+						role="tab"
+						tabIndex={active === index ? 0 : -1}
+						aria-selected={active === index}
+						aria-controls={`${tabsId}-panel-${index}`}
+						id={`${tabsId}-tab-${index}`}
+						onClick={() => setActive(index)}
+						onKeyDown={(event) => handleKeyDown(event, index)}
+						className={`${styles.tabs__ol__item} ${active === index ? styles.tabs__ol__itemActive : ""}`}
 					>
 						<Text type="small" fontWeight="medium">
 							{tab}
 						</Text>
-					</li>
+					</div>
 				))}
-			</ol>
-			<section className="tabs__section">{sections[active]}</section>
+			</div>
+			<section
+				role="tabpanel"
+				id={`${tabsId}-panel-${active}`}
+				aria-labelledby={`${tabsId}-tab-${active}`}
+				className="tabs__section"
+			>
+				{sections[active]}
+			</section>
 		</div>
 	)
 }

package/components/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { Div } from "./components/Div"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getTypographyUtility } from "./Text.utils"
 import { P } from "./components/P"
 import { Small } from "./components/Small"
@@ -30,10 +30,13 @@ export const Text: FC<TextProps> = memo((props) => {
 			}
 		: undefined
 
+	const mergedStyle: object | undefined =
+		props.style || lineClampStyle ? { ...(props.style || {}), ...(lineClampStyle || {}) } : undefined
+
 	const baseTextProps: Omit<TextProps, "type"> = {
 		onClick: props.onClick,
 		children: props.children,
-		style: lineClampStyle,
+		style: mergedStyle,
 		className: utility,
 	}
 

package/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
 import { useId, useRef, useEffect } from "react"
 import { InputLabel } from "../shared/InputLabel"
@@ -13,6 +13,7 @@ export const Textarea: FC<TextareaProps> = (props) => {
 	const { autoComplete: _autoComplete, helperText: _helperText, isDisabled, isLabelHidden, ...goodProps } = props
 
 	const htmlFor: string = useId()
+	const helperId: string = `${htmlFor}-helper`
 	const textareaClasses: string = getClasses(styles.textarea, "flex flex-column", {
 		[styles.textareaDisabled]: props.isDisabled,
 	})
@@ -24,17 +25,20 @@ export const Textarea: FC<TextareaProps> = (props) => {
 		}
 	}
 
-	// TODO no longer necessary <3
 	useEffect(() => {
 		if (textareaRef?.current) {
 			onInput()
 		}
 
-		setTimeout(() => onInput(), 100)
+		const timer: ReturnType<typeof setTimeout> = setTimeout(() => onInput(), 100)
+
+		return (): void => {
+			globalThis.clearTimeout(timer)
+		}
 	}, [props.value])
 
 	return (
-		<div className={textareaClasses}>
+		<div className={textareaClasses} data-ui-component="Textarea">
 			{!props.isLabelHidden && (
 				<InputLabel
 					id={htmlFor}
@@ -51,9 +55,10 @@ export const Textarea: FC<TextareaProps> = (props) => {
 				onInput={onInput}
 				onLoad={onInput}
 				disabled={isDisabled}
+				aria-describedby={props.helperText ? helperId : undefined}
 			/>
 			{!!props.helperText && (
-				<Text type="tiny" emphasis="tertiary" className={styles.input__helper}>
+				<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
 					{props.helperText}
 				</Text>
 			)}

package/components/Tile/Tile.tsx

@@ -1,5 +1,4 @@
-"use client"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Icon } from "../Icon"
 import { Text } from "../Text"
@@ -35,6 +34,7 @@ export const Tile: FC<TileProps> = ({
 		<Flex
 			{...(onClick && { onClick })}
 			className={tileClasses}
+			data-ui-component="Tile"
 			isCentered={true}
 			isColumn={true}
 			style={{
@@ -44,13 +44,6 @@ export const Tile: FC<TileProps> = ({
 			}}
 		>
 			<Icon icon={icon} size={size * 0.5} emphasis="inherit" />
-			{/*<svg width="100%" height="100%" viewBox={`0 0 ${size} ${size}`} className={styles.tile__background}>
-				<linearGradient id={tileId}>
-					<stop stopColor={`var(--${resolvedColor})`} offset="0%" />
-					{colorAccent && <stop stopColor={`var(--${resolvedColorAccent})`} offset="100%" />}
-				</linearGradient>
-				<rect fill={`url(#${tileId})`} x={0} y={0} width={size} height={size} rx={isRound ? size : isRounded ? 8 : 0} />
-			</svg> */}
 			{iconAccent && (
 				<Flex isCentered={true}>
 					<Icon icon={iconAccent} size={size * 1} className={styles.tile__iconAccent} />

package/components/Tile/Tile.types.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from "react"
+import type { MouseEventHandler } from "react"
 import type { HeliosIconType } from "../../types/icons"
 import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
 

package/components/Timestamp/Timestamp.meta.ts

@@ -12,7 +12,11 @@ export const meta: HeliosAttributeMeta<TimestampProps> = {
 	_status: "nominal",
 	_category: "content",
 	date: { type: "string", isOptional: true },
-	format: { type: "string", isOptional: true, default: "MMMM D, YYYY" },
+	format: {
+		type: "Intl.DateTimeFormatOptions",
+		isOptional: true,
+		default: "{ year: numeric, month: long, day: numeric }",
+	},
 	fromNow: { type: "boolean", isOptional: true },
 	text: { type: "string", isOptional: true },
 }

package/components/Timestamp/Timestamp.tsx

@@ -1,8 +1,8 @@
-import { getIsValid, formatDate, getFromNow } from "../../utils/dayjs"
+import { getIsValid, formatDate, getFromNow } from "../../utils/date"
 import type { FC } from "react"
 import type { TimestampProps } from "./Timestamp.types"
 
-export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format = "MMMM D, YYYY" }) => {
+export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format }) => {
 	const fromNowDate = getFromNow(date)
 	const isValid: boolean = getIsValid(date)
 	const parsedIsoString: string = date && isValid ? new Date(Date.parse(date))?.toISOString() : ""
@@ -11,7 +11,7 @@ export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format = "M
 	const formattedDate: string = fromNow ? fromNowDate : formatDate(date, format)
 
 	return (
-		<time dateTime={timestampDate} suppressHydrationWarning={true}>
+		<time dateTime={timestampDate} suppressHydrationWarning={true} data-ui-component="Timestamp">
 			{!!text && text}
 			{formattedDate}
 		</time>

package/components/Timestamp/Timestamp.types.ts

@@ -1,6 +1,6 @@
 export interface TimestampProps {
 	date?: string
-	format?: string
+	format?: Intl.DateTimeFormatOptions
 	fromNow?: boolean
 	text?: string
 }

package/components/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useId } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { INTENTION_COLOR_MAP } from "../../constants/intentions"
 import { Text } from "../Text"
@@ -35,7 +35,7 @@ export const Toggle: FC<ToggleProps> = ({
 	const toggleLabelClasses = getClasses(styles.toggle__toggleLabel, "flex flex-y-center gap-4 flex-wrap")
 
 	return (
-		<div className={toggleClasses}>
+		<div className={toggleClasses} data-ui-component="Toggle">
 			<label className={toggleLabelClasses} htmlFor={toggleId}>
 				<input
 					type="checkbox"

package/components/Tooltip/Tooltip.module.css

@@ -2,6 +2,7 @@
 	position: relative;
 
 	display: inline-block;
+	anchor-scope: --tooltip;
 }
 
 .tooltip {
@@ -9,10 +10,41 @@
 	z-index: 10;
 
 	max-width: 320px;
+	margin: 8px;
 	padding: 8px;
 
 	background-color: var(--ui-bg-secondary);
 	border: 0;
 	color: var(--ui-text-primary);
 	border-radius: var(--radius-sm);
+
+	position-area: bottom center;
+}
+
+.tooltipBottomLeft {
+	position-area: bottom left;
+}
+
+.tooltipBottomRight {
+	position-area: bottom right;
+}
+
+.tooltipTopCenter {
+	position-area: top center;
+}
+
+.tooltipTopLeft {
+	position-area: top left;
+}
+
+.tooltipTopRight {
+	position-area: top right;
+}
+
+.tooltipLeftCenter {
+	position-area: left center;
+}
+
+.tooltipRightCenter {
+	position-area: right center;
 }

package/components/Tooltip/Tooltip.tsx

@@ -1,19 +1,37 @@
 "use client"
 
-import { useRef, useEffect, useMemo, useState, FC } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { useRef, useEffect, useMemo, useState, useId, type FC } from "react"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Tooltip.module.css"
 import type { TooltipProps, TooltipComposition, TooltipContextType } from "./Tooltip.types"
 import { TooltipTrigger } from "./components/TooltipTrigger"
 import { TooltipContent } from "./components/TooltipContent"
 import { TooltipContext } from "./Tooltip.utils"
 
+const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string | undefined> = {
+	"bottom-center": undefined,
+	"bottom-left": styles.tooltipBottomLeft,
+	"bottom-right": styles.tooltipBottomRight,
+	"top-center": styles.tooltipTopCenter,
+	"top-left": styles.tooltipTopLeft,
+	"top-right": styles.tooltipTopRight,
+	"left-center": styles.tooltipLeftCenter,
+	"right-center": styles.tooltipRightCenter,
+}
+
 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()
+	const anchorName: string = `--tooltip-${id.replace(/:/g, "")}`
+
+	const positionClass: string | undefined = POSITION_CLASS_MAP[position]
 
-	const tooltipClasses: string = useMemo(() => getClasses(styles.tooltip, "elevation-medium"), [])
+	const tooltipClasses: string = useMemo(
+		() => getClasses(styles.tooltip, "elevation-md", positionClass),
+		[positionClass],
+	)
 
 	useEffect(() => {
 		const trigger = triggerRef.current
@@ -26,69 +44,14 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			return
 		}
 
-		const positionTooltip = (): void => {
-			if (!trigger || !popover) return
-
-			const triggerRect = trigger.getBoundingClientRect()
-			const popoverRect = popover.getBoundingClientRect()
-			const viewportWidth = globalThis.innerWidth
-			const viewportHeight = globalThis.innerHeight
-
-			let top = 0
-			let left = 0
-
-			switch (position) {
-				case "bottom-center":
-					top = triggerRect.bottom + 8
-					left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2
-					break
-				case "bottom-left":
-					top = triggerRect.bottom + 8
-					left = triggerRect.left
-					break
-				case "bottom-right":
-					top = triggerRect.bottom + 8
-					left = triggerRect.right - popoverRect.width
-					break
-				case "top-center":
-					top = triggerRect.top - popoverRect.height - 8
-					left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2
-					break
-				case "top-left":
-					top = triggerRect.top - popoverRect.height - 8
-					left = triggerRect.left
-					break
-				case "top-right":
-					top = triggerRect.top - popoverRect.height - 8
-					left = triggerRect.right - popoverRect.width
-					break
-				case "left-center":
-					top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2
-					left = triggerRect.left - popoverRect.width - 8
-					break
-				case "right-center":
-					top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2
-					left = triggerRect.right + 8
-					break
-			}
-
-			left = Math.max(10, Math.min(left, viewportWidth - popoverRect.width - 10))
-			top = Math.max(10, Math.min(top, viewportHeight - popoverRect.height - 10))
-
-			popover.style.top = `${top}px`
-			popover.style.left = `${left}px`
-		}
-
 		if (isVisible) {
 			popover.showPopover()
 			setIsOpen(true)
-			setTimeout(positionTooltip, 0)
 		}
 
 		const handleMouseEnter = (): void => {
 			popover.showPopover()
 			setIsOpen(true)
-			setTimeout(positionTooltip, 0)
 		}
 
 		const handleMouseLeave = (): void => {
@@ -109,28 +72,29 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 		trigger.addEventListener("mouseleave", handleMouseLeave)
 		trigger.addEventListener("keydown", handleKeyDown)
 
-		globalThis.addEventListener("resize", positionTooltip)
-		globalThis.addEventListener("scroll", positionTooltip, true)
-
 		return (): void => {
 			trigger.removeEventListener("mouseenter", handleMouseEnter)
 			trigger.removeEventListener("mouseleave", handleMouseLeave)
 			trigger.removeEventListener("keydown", handleKeyDown)
-			globalThis.removeEventListener("resize", positionTooltip)
-			globalThis.removeEventListener("scroll", positionTooltip, true)
 		}
-	}, [isVisible, position])
-
-	const contextValue: TooltipContextType = {
-		triggerRef,
-		popoverRef,
-		tooltipClasses,
-		isOpen,
-	}
+	}, [isVisible])
+
+	const contextValue: TooltipContextType = useMemo(
+		() => ({
+			triggerRef,
+			popoverRef,
+			tooltipClasses,
+			anchorName,
+			isOpen,
+		}),
+		[tooltipClasses, anchorName, isOpen],
+	)
 
 	return (
 		<TooltipContext.Provider value={contextValue}>
-			<div className={styles.tooltipContainer}>{children}</div>
+			<div className={styles.tooltipContainer} data-ui-component="Tooltip">
+				{children}
+			</div>
 		</TooltipContext.Provider>
 	)
 }

package/components/Tooltip/Tooltip.types.ts

@@ -21,6 +21,7 @@ export interface TooltipContextType {
 	triggerRef: RefObject<HTMLDivElement | null>
 	popoverRef: RefObject<HTMLDivElement | null>
 	tooltipClasses: string
+	anchorName: string
 	isOpen: boolean
 }
 

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

@@ -1,13 +1,15 @@
 import { Text } from "../../../Text"
 import { useTooltipContext } from "../../Tooltip.utils"
-import type { FC } from "react"
+import type { CSSProperties, FC } from "react"
 import type { TooltipContentProps } from "./TooltipContent.types"
 
 export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
-	const { popoverRef, tooltipClasses } = useTooltipContext()
+	const { popoverRef, tooltipClasses, anchorName } = useTooltipContext()
+
+	const contentStyle: CSSProperties = { positionAnchor: anchorName } as CSSProperties
 
 	return (
-		<div className={tooltipClasses} ref={popoverRef} popover="manual">
+		<div className={tooltipClasses} ref={popoverRef} popover="manual" style={contentStyle}>
 			<Text type="small">{children}</Text>
 		</div>
 	)

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

@@ -1,9 +1,15 @@
-import { TooltipTriggerProps } from "./TooltipTrigger.types"
+import type { TooltipTriggerProps } from "./TooltipTrigger.types"
 import { useTooltipContext } from "../../Tooltip.utils"
-import type { FC } from "react"
+import type { CSSProperties, FC } from "react"
 
 export const TooltipTrigger: FC<TooltipTriggerProps> = ({ children }) => {
-	const { triggerRef } = useTooltipContext()
+	const { triggerRef, anchorName } = useTooltipContext()
 
-	return <div ref={triggerRef}>{children}</div>
+	const triggerStyle: CSSProperties = { anchorName } as CSSProperties
+
+	return (
+		<div ref={triggerRef} style={triggerStyle}>
+			{children}
+		</div>
+	)
 }

package/components/shared/InputLabel/InputLabel.tsx

@@ -1,6 +1,6 @@
 import { type FC } from "react"
 import styles from "./InputLabel.module.css"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import type { InputLabelProps } from "./InputLabel.types"
 
 export const InputLabel: FC<InputLabelProps> = ({ id, label, isDisabled, isHidden }) => {

package/components/shared/ResultList/ResultList.meta.ts

@@ -13,4 +13,8 @@ export const meta: HeliosAttributeMeta<ResultListProps> = {
 		type: "boolean",
 		isOptional: true,
 	},
+	ref: {
+		type: "Ref<HTMLOListElement>",
+		isOptional: true,
+	},
 }

package/components/shared/ResultList/ResultList.tsx

@@ -1,37 +1,35 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { Checkbox } from "../../Checkbox"
 import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import { forwardRef } from "react"
 import type { ChangeEvent } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
-export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items, isHidden }, ref) => {
+export const ResultList = ({ items, isHidden, ref }: ResultListProps) => {
 	if (!items?.length || isHidden) return null
 
 	const resultListClasses: string = getClasses(styles.resultList, "elevation-lg")
 
 	return (
 		<ol className={resultListClasses} data-ui-component="ResultList" role="listbox" ref={ref}>
-			{items?.map((item, key) => {
+			{items?.map((item, index) => {
+				const itemKey: string = item.name ? `${item.name}-${index}` : `separator-${index}`
 				const itemClasses: string = getClasses("flex flex-y-center gap-5", styles.item, {
 					[styles.itemActive]: item.isActive && !item.type,
 					[styles.itemDisabled]: item.isDisabled,
 				})
 
-				// NOTE @03b8 future composit
-				if (item.type === "separator") return <li key={key} className={styles.resultList__separator} />
+				if (item.type === "separator") return <li key={itemKey} className={styles.resultList__separator} />
 
-				// NOTE @03b8 future composit
 				if (item.type === "checkbox") {
 					const onCheck = (event: ChangeEvent<HTMLInputElement>): void =>
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						item.onClick?.(event as any)
 
 					return (
-						<li key={key} onClick={item.onClick} className={itemClasses}>
+						<li key={itemKey} onClick={item.onClick} className={itemClasses}>
 							<Checkbox
 								label={item.name}
 								{...(item.description && { description: item.description })}
@@ -43,7 +41,7 @@ export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items
 				}
 
 				return (
-					<li key={key} onClick={item.onClick} className={itemClasses}>
+					<li key={itemKey} onClick={item.onClick} className={itemClasses}>
 						{item.icon && (
 							<Flex isCentered={true}>
 								<Icon icon={item.icon} size={18} />
@@ -64,4 +62,4 @@ export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items
 			})}
 		</ol>
 	)
-})
+}

package/components/shared/ResultList/ResultList.types.ts

@@ -15,4 +15,5 @@ export interface ResultItem {
 export interface ResultListProps {
 	items?: Array<ResultItem>
 	isHidden?: boolean
+	ref?: Ref<HTMLOListElement>
 }

package/constants/hooks.ts

@@ -1 +1 @@
-export const HOOKS = ["useIntersection", "usePrevious", "useLayoutContext", "useTheme"] as const
+export const HOOKS = ["useIntersection", "useLayoutContext", "usePrevious", "usePrint", "useTheme"] as const

package/contexts/LayoutContext/LayoutContext.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, createContext, useRef, useEffect } from "react"
+import { useState, createContext, useRef, useEffect, useMemo, useCallback } from "react"
 import type { FC, PropsWithChildren } from "react"
 import type { LayoutContextProps } from "./LayoutContext.types"
 
@@ -20,6 +20,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 	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
@@ -67,11 +68,20 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			}
 		}
 
-		globalThis.addEventListener("resize", handleResize)
+		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 => {
-			globalThis.removeEventListener("resize", handleResize)
+			if (resizeTimerRef.current) globalThis.clearTimeout(resizeTimerRef.current)
+			globalThis.removeEventListener("resize", throttledResize)
 			globalThis.document.removeEventListener("mousedown", handleClickOutside)
 		}
 	}, [breakpoint])
@@ -79,24 +89,24 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 	const isWideEnough: boolean = hasMounted ? windowWidth >= breakpoint : false
 	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible
 
-	const onNavigationToggle = (): void => setIsMenuVisible((prev) => !prev)
-	const onAsideClose = (): void => setIsMenuVisible(false)
-
-	return (
-		<LayoutContext.Provider
-			value={{
-				asideRef,
-				hasMounted,
-				isMenuVisible,
-				isWideEnough,
-				onAsideClose,
-				onNavigationToggle,
-				shouldShowNavigation,
-			}}
-		>
-			{children}
-		</LayoutContext.Provider>
+	const onNavigationToggle = useCallback((): void => setIsMenuVisible((prev) => !prev), [])
+	const onAsideClose = useCallback((): void => setIsMenuVisible(false), [])
+
+	const contextValue: LayoutContextProps = useMemo(
+		() => ({
+			asideRef,
+			hasMounted,
+			isMenuVisible,
+			isWideEnough,
+			onAsideClose,
+			onNavigationToggle,
+			shouldShowNavigation,
+			windowWidth,
+		}),
+		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle, windowWidth],
 	)
+
+	return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>
 }
 
 export { LayoutContext, LayoutProvider }