{ "name": "directional-menu", "type": "registry:component", "title": "Directional Menu", "description": "Mega menu with directional content transitions using GSAP", "dependencies": [ "gsap", "lucide-react" ], "registryDependencies": [], "exportName": "DirectionalMenu", "exportKind": "default", "tier": "free", "version": "1.1.0", "changelog": [ { "version": "1.1.0", "date": "2026-07-21", "summary": "Added prefers-reduced-motion support: mega menu open/close panel animations use a reduced-motion-safe fade instead of the full height/slide tween", "breaking": false }, { "version": "1.0.0", "date": "2026-06-04", "summary": "Initial release", "breaking": false } ], "files": [ { "path": "index.jsx", "type": "registry:component", "target": "src/components/effects/directional-menu/index.jsx", "content": "// Built using Hyperiux Vault: https://vault.hyperiux.com\n\n\"use client\";\n\nimport { DirectionalMegaMenu } from \"./DirectionalMegaMenu\";\nimport { Menu1 } from \"./Menu1\";\nimport { Menu2 } from \"./Menu2\";\nimport { Menu3 } from \"./Menu3\";\nimport { MobileDirectionalMenu } from \"./MobileDirectionalMenu\";\n\nconst menuItems = [\n {\n label: \"Products\",\n customContent: ,\n },\n {\n label: \"Solutions\",\n customContent: ,\n },\n {\n label: \"Developers\",\n customContent: ,\n },\n {\n label: \"About\",\n href: \"#\",\n },\n];\n\nexport default function DirectionalMenu() {\n return (\n
\n {/* Navbar */}\n
\n \n \n
\n\n {/* Hero Section */}\n
\n
\n {/* Heading */}\n

\n Directional Menu\n

\n\n

\n Interact with the navigation above to see smooth transitions,\n motion, and details crafted for a more immersive experience.\n

\n {/* Buttons */}\n
\n \n\n \n
\n
\n
\n
\n );\n}\n" }, { "path": "DirectionalMegaMenu.jsx", "type": "registry:component", "target": "src/components/effects/directional-menu/DirectionalMegaMenu.jsx", "content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport gsap from \"gsap\";\nimport { ChevronDown } from \"lucide-react\";\n\nconst DEFAULT_ANIMATION = {\n contentFadeDelay: 0.06,\n contentFadeDuration: 0.18,\n distance: 56,\n duration: 0.26,\n ease: \"power2.out\",\n fade: true,\n heightDuration: 0.22,\n heightEase: \"power2.out\",\n};\n\nconst DEFAULT_TRANSITION_DIRECTION = 1;\nconst NO_INDEX = null;\n\nconst useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nconst hasDropdownContent = (item) => Boolean(item?.customContent);\n\nconst getPaneHeight = (element) => {\n if (!element) {\n return 0;\n }\n\n return element.offsetHeight || element.scrollHeight || 0;\n};\n\nconst prefersReducedMotion = () =>\n typeof window !== \"undefined\" &&\n window.matchMedia?.(\"(prefers-reduced-motion: reduce)\")?.matches === true;\n\nconst REDUCED_MOTION_FADE_DURATION = 0.16;\n\nexport function DirectionalMegaMenu({\n items = [],\n className = \"\",\n navClassName = \"\",\n navItemClassName = \"\",\n activeClassName = \"text-white\",\n inactiveClassName = \"text-white\",\n panelClassName = \"\",\n contentWrapperClassName = \"\",\n initialIndex = NO_INDEX,\n closeDelay = 180,\n animation = {},\n panelGap = 0,\n menuTop = \"\",\n}) {\n // Animation config\n const config = useMemo(\n () => ({\n contentFadeDelay: animation.contentFadeDelay ?? DEFAULT_ANIMATION.contentFadeDelay,\n contentFadeDuration:\n animation.contentFadeDuration ??\n \n DEFAULT_ANIMATION.contentFadeDuration,\n distance: animation.distance ?? DEFAULT_ANIMATION.distance,\n duration: animation.duration ?? DEFAULT_ANIMATION.duration,\n ease: animation.ease ?? DEFAULT_ANIMATION.ease,\n fade: animation.fade ?? DEFAULT_ANIMATION.fade,\n heightDuration:\n animation.heightDuration ?? DEFAULT_ANIMATION.heightDuration,\n heightEase: animation.heightEase ?? DEFAULT_ANIMATION.heightEase,\n }),\n [animation]\n );\n\n // State and refs\n const [isOpen, setIsOpen] = useState(initialIndex !== NO_INDEX);\n const [currentIndex, setCurrentIndex] = useState(initialIndex);\n const [nextIndex, setNextIndex] = useState(NO_INDEX);\n const [highlightedIndex, setHighlightedIndex] = useState(initialIndex);\n\n const panelRef = useRef(null);\n const viewportRef = useRef(null);\n const currentPaneRef = useRef(null);\n const nextPaneRef = useRef(null);\n const menuPanelRef = useRef(null);\n const closeTimerRef = useRef(null);\n const isAnimatingRef = useRef(false);\n const queuedIndexRef = useRef(NO_INDEX);\n const hasOpenedOnceRef = useRef(initialIndex !== NO_INDEX);\n const visualIndexRef = useRef(initialIndex);\n const transitionDirectionRef = useRef(DEFAULT_TRANSITION_DIRECTION);\n\n const clearCloseTimer = () => {\n if (!closeTimerRef.current) {\n return;\n }\n\n clearTimeout(closeTimerRef.current);\n closeTimerRef.current = null;\n };\n\n const resetMenuState = () => {\n setIsOpen(false);\n setCurrentIndex(NO_INDEX);\n setNextIndex(NO_INDEX);\n setHighlightedIndex(NO_INDEX);\n isAnimatingRef.current = false;\n queuedIndexRef.current = NO_INDEX;\n hasOpenedOnceRef.current = false;\n visualIndexRef.current = NO_INDEX;\n transitionDirectionRef.current = DEFAULT_TRANSITION_DIRECTION;\n };\n\n const killPanelTweens = () => {\n gsap.killTweensOf([\n menuPanelRef.current,\n panelRef.current,\n viewportRef.current,\n currentPaneRef.current,\n nextPaneRef.current,\n ]);\n };\n\n const restoreMenuPanel = () => {\n if (!menuPanelRef.current) {\n return;\n }\n\n gsap.killTweensOf(menuPanelRef.current);\n gsap.set(menuPanelRef.current, {\n opacity: 1,\n height: \"auto\",\n });\n };\n\n const closeMenu = () => {\n clearCloseTimer();\n\n if (!menuPanelRef.current) {\n resetMenuState();\n return;\n }\n\n killPanelTweens();\n\n if (prefersReducedMotion()) {\n gsap.to(menuPanelRef.current, {\n opacity: 0,\n duration: REDUCED_MOTION_FADE_DURATION,\n ease: \"power2.out\",\n onComplete: () => {\n gsap.set(menuPanelRef.current, {\n height: 0,\n });\n resetMenuState();\n },\n });\n return;\n }\n\n gsap.to(menuPanelRef.current, {\n opacity: 0,\n height: 0,\n duration: config.heightDuration,\n ease: config.heightEase,\n onComplete: resetMenuState,\n });\n };\n\n const scheduleClose = () => {\n clearCloseTimer();\n closeTimerRef.current = setTimeout(() => {\n closeMenu();\n }, closeDelay);\n };\n\n const openMenuAt = (index) => {\n const item = items[index];\n\n if (!item || !hasDropdownContent(item)) {\n return;\n }\n\n restoreMenuPanel();\n setIsOpen(true);\n setCurrentIndex(index);\n setNextIndex(NO_INDEX);\n setHighlightedIndex(index);\n\n queuedIndexRef.current = NO_INDEX;\n isAnimatingRef.current = false;\n hasOpenedOnceRef.current = false;\n visualIndexRef.current = index;\n transitionDirectionRef.current = DEFAULT_TRANSITION_DIRECTION;\n };\n\n const requestSwitch = (index) => {\n const item = items[index];\n\n if (!item) {\n return;\n }\n\n clearCloseTimer();\n restoreMenuPanel();\n setHighlightedIndex(index);\n\n if (!hasDropdownContent(item)) {\n setHighlightedIndex(NO_INDEX);\n\n if (isOpen) {\n closeMenu();\n }\n\n return;\n }\n\n if (!isOpen || currentIndex === NO_INDEX) {\n openMenuAt(index);\n return;\n }\n\n if (index === currentIndex && nextIndex === NO_INDEX) {\n visualIndexRef.current = index;\n return;\n }\n\n if (index === nextIndex) {\n visualIndexRef.current = index;\n return;\n }\n\n const baseIndex =\n queuedIndexRef.current !== NO_INDEX\n ? queuedIndexRef.current\n : nextIndex !== NO_INDEX\n ? nextIndex\n : visualIndexRef.current !== NO_INDEX\n ? visualIndexRef.current\n : currentIndex;\n\n const direction = index > baseIndex ? 1 : -1;\n\n if (isAnimatingRef.current) {\n queuedIndexRef.current = index;\n visualIndexRef.current = index;\n transitionDirectionRef.current = direction;\n return;\n }\n\n visualIndexRef.current = index;\n transitionDirectionRef.current = direction;\n setNextIndex(index);\n };\n\n const onWrapperMouseLeave = () => {\n scheduleClose();\n };\n\n const onItemEnter = (index) => {\n const item = items[index];\n\n if (!hasDropdownContent(item)) {\n clearCloseTimer();\n setHighlightedIndex(NO_INDEX);\n\n if (isOpen) {\n closeMenu();\n }\n\n return;\n }\n\n requestSwitch(index);\n };\n\n // Initial panel open\n useIsomorphicLayoutEffect(() => {\n if (!isOpen || currentIndex === NO_INDEX || !panelRef.current || !viewportRef.current) {\n return;\n }\n\n if (!currentPaneRef.current) {\n return;\n }\n\n gsap.killTweensOf([menuPanelRef.current, panelRef.current, viewportRef.current]);\n\n const contentHeight = getPaneHeight(currentPaneRef.current);\n\n if (!hasOpenedOnceRef.current) {\n if (prefersReducedMotion()) {\n gsap.set(menuPanelRef.current, {\n height: \"auto\",\n opacity: 0,\n });\n\n gsap.set(viewportRef.current, {\n height: contentHeight,\n opacity: 1,\n });\n\n gsap.to(menuPanelRef.current, {\n opacity: 1,\n duration: REDUCED_MOTION_FADE_DURATION,\n ease: \"power2.out\",\n onComplete: () => {\n hasOpenedOnceRef.current = true;\n },\n });\n return;\n }\n\n gsap.set(menuPanelRef.current, {\n height: 0,\n opacity: 1,\n });\n\n gsap.set(viewportRef.current, {\n height: contentHeight,\n opacity: 0,\n });\n\n const timeline = gsap.timeline({\n onComplete: () => {\n hasOpenedOnceRef.current = true;\n gsap.set(viewportRef.current, { height: contentHeight, opacity: 1 });\n },\n });\n\n timeline\n .to(\n menuPanelRef.current,\n {\n height: \"auto\",\n duration: config.heightDuration,\n ease: config.heightEase,\n },\n 0\n )\n .to(\n viewportRef.current,\n {\n opacity: 1,\n duration: config.contentFadeDuration,\n ease: \"power2.out\",\n },\n config.contentFadeDelay\n );\n\n return;\n }\n\n gsap.set(viewportRef.current, {\n height: contentHeight,\n });\n }, [\n config.contentFadeDelay,\n config.contentFadeDuration,\n config.heightDuration,\n config.heightEase,\n currentIndex,\n isOpen,\n ]);\n\n // Sync static panel height\n useIsomorphicLayoutEffect(() => {\n if (currentIndex === NO_INDEX || nextIndex !== NO_INDEX) {\n return;\n }\n\n if (!currentPaneRef.current || !viewportRef.current) {\n return;\n }\n\n const height = getPaneHeight(currentPaneRef.current);\n gsap.set(viewportRef.current, { height });\n }, [currentIndex, nextIndex]);\n\n // Animate panel switch\n useIsomorphicLayoutEffect(() => {\n if (nextIndex === NO_INDEX) {\n return;\n }\n\n if (!currentPaneRef.current || !nextPaneRef.current || !viewportRef.current) {\n return;\n }\n\n const currentElement = currentPaneRef.current;\n const nextElement = nextPaneRef.current;\n const currentHeight = getPaneHeight(currentElement);\n const nextHeight = getPaneHeight(nextElement);\n const targetIndex = nextIndex;\n const direction = transitionDirectionRef.current;\n const distance = config.distance;\n\n isAnimatingRef.current = true;\n\n gsap.killTweensOf([currentElement, nextElement, viewportRef.current]);\n\n if (prefersReducedMotion()) {\n gsap.set(currentElement, {\n position: \"absolute\",\n inset: 0,\n x: 0,\n opacity: 0,\n zIndex: 1,\n pointerEvents: \"none\",\n });\n\n gsap.set(nextElement, {\n position: \"absolute\",\n inset: 0,\n x: 0,\n opacity: 1,\n zIndex: 2,\n pointerEvents: \"none\",\n });\n\n gsap.set(viewportRef.current, {\n height: nextHeight,\n });\n\n setCurrentIndex(targetIndex);\n setNextIndex(NO_INDEX);\n isAnimatingRef.current = false;\n visualIndexRef.current = targetIndex;\n\n const queuedIndex = queuedIndexRef.current;\n queuedIndexRef.current = NO_INDEX;\n\n if (\n queuedIndex !== NO_INDEX &&\n queuedIndex !== targetIndex &&\n items[queuedIndex] &&\n hasDropdownContent(items[queuedIndex])\n ) {\n requestSwitch(queuedIndex);\n }\n\n return;\n }\n\n gsap.set(currentElement, {\n position: \"absolute\",\n inset: 0,\n x: 0,\n opacity: 1,\n zIndex: 1,\n pointerEvents: \"none\",\n });\n\n gsap.set(nextElement, {\n position: \"absolute\",\n inset: 0,\n x: direction > 0 ? distance : -distance,\n opacity: config.fade ? 0 : 1,\n zIndex: 2,\n pointerEvents: \"none\",\n });\n\n gsap.set(viewportRef.current, {\n height: currentHeight,\n });\n\n const timeline = gsap.timeline({\n onComplete: () => {\n setCurrentIndex(targetIndex);\n setNextIndex(NO_INDEX);\n isAnimatingRef.current = false;\n visualIndexRef.current = targetIndex;\n\n const queuedIndex = queuedIndexRef.current;\n queuedIndexRef.current = NO_INDEX;\n\n if (\n queuedIndex !== NO_INDEX &&\n queuedIndex !== targetIndex &&\n items[queuedIndex] &&\n hasDropdownContent(items[queuedIndex])\n ) {\n requestSwitch(queuedIndex);\n }\n },\n });\n\n timeline\n .to(\n viewportRef.current,\n {\n height: nextHeight,\n duration: config.heightDuration,\n ease: config.heightEase,\n },\n 0\n )\n .to(\n currentElement,\n {\n x: direction > 0 ? -distance : distance,\n opacity: config.fade ? 0 : 1,\n duration: config.duration,\n ease: config.ease,\n },\n 0\n )\n .to(\n nextElement,\n {\n x: 0,\n opacity: 1,\n duration: config.duration,\n ease: config.ease,\n },\n 0\n );\n }, [config.distance, config.duration, config.ease, config.fade, config.heightDuration, config.heightEase, items, nextIndex]);\n\n // Cleanup\n useEffect(() => {\n const panel = panelRef.current;\n const viewport = viewportRef.current;\n const currentPane = currentPaneRef.current;\n const nextPane = nextPaneRef.current;\n\n return () => {\n clearCloseTimer();\n gsap.killTweensOf(panel);\n gsap.killTweensOf(viewport);\n gsap.killTweensOf([currentPane, nextPane]);\n };\n }, []);\n\n return (\n \n \n
\n {items.map((item, index) => {\n const isActive = highlightedIndex === index;\n\n return (\n onItemEnter(index)}\n className={`relative flex cursor-pointer items-center gap-1 text-sm font-medium text-white transition-colors duration-300 hover:text-white motion-reduce:text-white motion-reduce:transition-none max-[1025px]:text-lg max-md:text-sm ${navItemClassName} ${isActive ? activeClassName : inactiveClassName\n }`}\n >\n {item.label}\n\n {hasDropdownContent(item) && (\n \n )}\n \n );\n })}\n
\n \n\n {isOpen && currentIndex !== NO_INDEX && hasDropdownContent(items[currentIndex]) && (\n
\n \n \n \n \n {items[currentIndex]?.customContent || null}\n
\n\n {nextIndex !== NO_INDEX && hasDropdownContent(items[nextIndex]) && (\n \n {items[nextIndex]?.customContent || null}\n \n )}\n \n \n \n \n )}\n \n );\n}\n" }, { "path": "Menu1.jsx", "type": "registry:component", "target": "src/components/effects/directional-menu/Menu1.jsx", "content": "\"use client\";\n\nconst PRODUCT_LINKS = [\n { label: \"Overview\", href: \"#\" },\n { label: \"Pricing\", href: \"#\" },\n { label: \"Integrations\", href: \"#\" },\n { label: \"Documentation\", href: \"#\" },\n];\n\nconst PREVIEW_IMAGES = [\n {\n alt: \"Dashboard preview\",\n heightClassName: \"h-54 max-[1025px]:h-60 max-md:h-40\",\n src: \"https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-09.jpg\",\n },\n {\n alt: \"Product showcase\",\n heightClassName: \"h-54 max-[1025px]:h-60 max-md:h-40\",\n src: \"https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-07.jpg\",\n },\n];\n\nexport function Menu1() {\n return (\n
\n
\n
\n

\n Product Navigation\n

\n

\n Explore the product suite\n

\n
\n\n
\n {PRODUCT_LINKS.map((item) => (\n \n
{item.label}
\n
\n Learn more about {item.label.toLowerCase()}.\n
\n \n ))}\n
\n
\n\n
\n {PREVIEW_IMAGES.map((image) => (\n \n \n
\n ))}\n
\n \n );\n}\n" }, { "path": "Menu2.jsx", "type": "registry:component", "target": "src/components/effects/directional-menu/Menu2.jsx", "content": "\"use client\";\n\nconst SOLUTION_BLOCKS = [\n {\n title: \"Startups\",\n description:\n \"Launch faster with flexible infrastructure, simple onboarding, and scalable workflows.\",\n href: \"#\",\n },\n {\n title: \"Enterprise\",\n description:\n \"Bring governance, performance, and operational control to complex digital systems.\",\n href: \"#\",\n },\n {\n title: \"Agencies\",\n description:\n \"Build repeatable client delivery with modular systems, collaboration, and speed.\",\n href: \"#\",\n },\n];\n\nexport function Menu2() {\n return (\n
\n
\n

\n Solutions\n

\n

\n Built for different teams\n

\n
\n\n
\n {SOLUTION_BLOCKS.map((block) => (\n \n

{block.title}

\n

\n {block.description}\n

\n \n ))}\n
\n
\n );\n}\n" }, { "path": "Menu3.jsx", "type": "registry:component", "target": "src/components/effects/directional-menu/Menu3.jsx", "content": "\"use client\";\n\nconst LINK_GROUPS = [\n {\n heading: \"Documentation\",\n links: [\n { label: \"API Reference\", href: \"#\" },\n { label: \"Guides\", href: \"#\" },\n { label: \"Examples\", href: \"#\" },\n ],\n },\n {\n heading: \"Resources\",\n links: [\n { label: \"Changelog\", href: \"#\" },\n { label: \"Community\", href: \"#\" },\n { label: \"Support\", href: \"#\" },\n ],\n },\n {\n heading: \"Company\",\n links: [\n { label: \"About\", href: \"#\" },\n { label: \"Careers\", href: \"#\" },\n { label: \"Contact\", href: \"#\" },\n ],\n },\n];\n\nexport function Menu3() {\n return (\n
\n {LINK_GROUPS.map((group) => (\n
\n

\n {group.heading}\n

\n\n
\n {group.links.map((link) => (\n \n {link.label}\n \n ))}\n
\n
\n ))}\n
\n );\n}\n" }, { "path": "MobileDirectionalMenu.jsx", "type": "registry:component", "target": "src/components/effects/directional-menu/MobileDirectionalMenu.jsx", "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { ChevronDown, Menu, X } from \"lucide-react\";\nimport { useFocusTrap } from \"./useFocusTrap\";\n\nconst hasDropdownContent = (item) => Boolean(item?.customContent);\n\nexport function MobileDirectionalMenu({ items = [] }) {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(null);\n\n const containerRef = useRef(null);\n const toggleButtonRef = useRef(null);\n\n const closeMenu = () => {\n setIsMenuOpen(false);\n setActiveIndex(null);\n };\n\n // Trap focus across the toggle + panel while open, restore it on close.\n useFocusTrap({\n active: isMenuOpen,\n containerRef,\n initialFocusRef: toggleButtonRef,\n onEscape: closeMenu,\n });\n\n const onToggleMenu = () => {\n setIsMenuOpen((currentValue) => {\n const nextValue = !currentValue;\n\n if (!nextValue) {\n setActiveIndex(null);\n }\n\n return nextValue;\n });\n };\n\n const onToggleSection = (index) => {\n setActiveIndex((currentValue) => (currentValue === index ? null : index));\n };\n\n return (\n \n \n \n );\n}\n" }, { "path": "useFocusTrap.js", "type": "registry:component", "target": "src/components/effects/directional-menu/useFocusTrap.js", "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nconst FOCUSABLE_SELECTOR = [\n \"a[href]\",\n \"button:not([disabled])\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(\",\");\n\nconst isVisible = (element) => {\n if (!element || element.hidden) {\n return false;\n }\n\n const style = window.getComputedStyle(element);\n\n if (style.visibility === \"hidden\" || style.visibility === \"collapse\") {\n return false;\n }\n\n return element.getClientRects().length > 0;\n};\n\nconst getFocusableElements = (container) => {\n if (!container) {\n return [];\n }\n\n return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(\n isVisible\n );\n};\n\n/**\n * Keeps keyboard focus inside `containerRef` while `active` is true.\n *\n * - Captures the element focused before opening and restores focus to it on\n * close (so the trigger button gets focus back).\n * - Moves focus into the menu on open (to `initialFocusRef` when provided,\n * otherwise the first focusable element).\n * - Wraps Tab / Shift+Tab around the menu's focusable elements.\n * - Calls `onEscape` when the Escape key is pressed.\n */\nexport function useFocusTrap({\n active,\n containerRef,\n initialFocusRef,\n onEscape,\n}) {\n const onEscapeRef = useRef(onEscape);\n onEscapeRef.current = onEscape;\n\n useEffect(() => {\n if (!active) {\n return;\n }\n\n const container = containerRef.current;\n\n if (!container) {\n return;\n }\n\n const previouslyFocused =\n document.activeElement instanceof HTMLElement\n ? document.activeElement\n : null;\n\n const focusInitial = () => {\n const target =\n initialFocusRef?.current ??\n getFocusableElements(container)[0] ??\n container;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n if (target === container && !container.hasAttribute(\"tabindex\")) {\n container.setAttribute(\"tabindex\", \"-1\");\n }\n\n target.focus();\n };\n\n // Defer focus so it lands after the menu has mounted / started animating in.\n const focusFrame = requestAnimationFrame(focusInitial);\n\n const onKeyDown = (event) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n onEscapeRef.current?.();\n return;\n }\n\n if (event.key !== \"Tab\") {\n return;\n }\n\n const focusable = getFocusableElements(container);\n\n if (!focusable.length) {\n event.preventDefault();\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n const activeElement = document.activeElement;\n\n if (event.shiftKey) {\n if (activeElement === first || !container.contains(activeElement)) {\n event.preventDefault();\n last.focus();\n }\n\n return;\n }\n\n if (activeElement === last || !container.contains(activeElement)) {\n event.preventDefault();\n first.focus();\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => {\n cancelAnimationFrame(focusFrame);\n document.removeEventListener(\"keydown\", onKeyDown);\n\n if (previouslyFocused && document.contains(previouslyFocused)) {\n previouslyFocused.focus();\n }\n };\n }, [active, containerRef, initialFocusRef]);\n}\n" } ] }