@radix-ui/react-navigation-menu
Advanced tools
@radix-ui/react-navigation-menu - npm Package Compare versions
Comparing version 1.1.5-rc.10 to 1.2.0-rc.1
@@ -1,13 +0,25 @@ | ||
| import * as React from "react"; | ||
| import * as Radix from "@radix-ui/react-primitive"; | ||
| import { Primitive } from "@radix-ui/react-primitive"; | ||
| import { DismissableLayer } from "@radix-ui/react-dismissable-layer"; | ||
| import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden"; | ||
| import { Scope } from "@radix-ui/react-context"; | ||
| type Orientation = 'vertical' | 'horizontal'; | ||
| type Direction = 'ltr' | 'rtl'; | ||
| export const createNavigationMenuScope: import("@radix-ui/react-context").CreateScope; | ||
| type NavigationMenuElement = React.ElementRef<typeof Primitive.nav>; | ||
| type PrimitiveNavProps = Radix.ComponentPropsWithoutRef<typeof Primitive.nav>; | ||
| export interface NavigationMenuProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, PrimitiveNavProps { | ||
| import * as React from 'react'; | ||
| import * as Radix from '@radix-ui/react-primitive'; | ||
| import { Primitive } from '@radix-ui/react-primitive'; | ||
| import { DismissableLayer } from '@radix-ui/react-dismissable-layer'; | ||
| import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden'; | ||
| import { Scope as Scope$1 } from '@radix-ui/react-context'; | ||
| declare type Scope<C = any> = { | ||
| [scopeName: string]: React.Context<C>[]; | ||
| } | undefined; | ||
| declare type ScopeHook = (scope: Scope) => { | ||
| [__scopeProp: string]: Scope; | ||
| }; | ||
| interface CreateScope { | ||
| scopeName: string; | ||
| (): ScopeHook; | ||
| } | ||
| declare type Orientation = 'vertical' | 'horizontal'; | ||
| declare type Direction = 'ltr' | 'rtl'; | ||
| declare const createNavigationMenuScope: CreateScope; | ||
| declare type NavigationMenuElement = React.ElementRef<typeof Primitive.nav>; | ||
| declare type PrimitiveNavProps = Radix.ComponentPropsWithoutRef<typeof Primitive.nav>; | ||
| interface NavigationMenuProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, PrimitiveNavProps { | ||
| value?: string; | ||
@@ -29,5 +41,5 @@ defaultValue?: string; | ||
| } | ||
| export const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>; | ||
| type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>; | ||
| export interface NavigationMenuSubProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, PrimitiveDivProps { | ||
| declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>; | ||
| declare type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>; | ||
| interface NavigationMenuSubProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, PrimitiveDivProps { | ||
| value?: string; | ||
@@ -38,6 +50,6 @@ defaultValue?: string; | ||
| } | ||
| export const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>; | ||
| interface NavigationMenuProviderPrivateProps { | ||
| isRootMenu: boolean; | ||
| scope: Scope; | ||
| scope: Scope$1; | ||
| children: React.ReactNode; | ||
@@ -57,24 +69,24 @@ orientation: Orientation; | ||
| } | ||
| type PrimitiveUnorderedListProps = Radix.ComponentPropsWithoutRef<typeof Primitive.ul>; | ||
| export interface NavigationMenuListProps extends PrimitiveUnorderedListProps { | ||
| declare type PrimitiveUnorderedListProps = Radix.ComponentPropsWithoutRef<typeof Primitive.ul>; | ||
| interface NavigationMenuListProps extends PrimitiveUnorderedListProps { | ||
| } | ||
| export const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>; | ||
| type FocusProxyElement = React.ElementRef<typeof VisuallyHiddenPrimitive.Root>; | ||
| type PrimitiveListItemProps = Radix.ComponentPropsWithoutRef<typeof Primitive.li>; | ||
| export interface NavigationMenuItemProps extends PrimitiveListItemProps { | ||
| declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>; | ||
| declare type FocusProxyElement = React.ElementRef<typeof VisuallyHiddenPrimitive.Root>; | ||
| declare type PrimitiveListItemProps = Radix.ComponentPropsWithoutRef<typeof Primitive.li>; | ||
| interface NavigationMenuItemProps extends PrimitiveListItemProps { | ||
| value?: string; | ||
| } | ||
| export const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>; | ||
| type NavigationMenuTriggerElement = React.ElementRef<typeof Primitive.button>; | ||
| type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>; | ||
| export interface NavigationMenuTriggerProps extends PrimitiveButtonProps { | ||
| declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>; | ||
| declare type NavigationMenuTriggerElement = React.ElementRef<typeof Primitive.button>; | ||
| declare type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>; | ||
| interface NavigationMenuTriggerProps extends PrimitiveButtonProps { | ||
| } | ||
| export const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>; | ||
| type PrimitiveLinkProps = Radix.ComponentPropsWithoutRef<typeof Primitive.a>; | ||
| export interface NavigationMenuLinkProps extends Omit<PrimitiveLinkProps, 'onSelect'> { | ||
| declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>; | ||
| declare type PrimitiveLinkProps = Radix.ComponentPropsWithoutRef<typeof Primitive.a>; | ||
| interface NavigationMenuLinkProps extends Omit<PrimitiveLinkProps, 'onSelect'> { | ||
| active?: boolean; | ||
| onSelect?: (event: Event) => void; | ||
| } | ||
| export const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>; | ||
| export interface NavigationMenuIndicatorProps extends NavigationMenuIndicatorImplProps { | ||
| declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>; | ||
| interface NavigationMenuIndicatorProps extends NavigationMenuIndicatorImplProps { | ||
| /** | ||
@@ -86,6 +98,6 @@ * Used to force mounting when more control is needed. Useful when | ||
| } | ||
| export const NavigationMenuIndicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>; | ||
| interface NavigationMenuIndicatorImplProps extends PrimitiveDivProps { | ||
| } | ||
| export interface NavigationMenuContentProps extends Omit<NavigationMenuContentImplProps, keyof NavigationMenuContentImplPrivateProps> { | ||
| interface NavigationMenuContentProps extends Omit<NavigationMenuContentImplProps, keyof NavigationMenuContentImplPrivateProps> { | ||
| /** | ||
@@ -97,4 +109,4 @@ * Used to force mounting when more control is needed. Useful when | ||
| } | ||
| export const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>; | ||
| type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>; | ||
| declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>; | ||
| interface NavigationMenuContentImplPrivateProps { | ||
@@ -110,3 +122,3 @@ value: string; | ||
| } | ||
| export interface NavigationMenuViewportProps extends Omit<NavigationMenuViewportImplProps, 'children' | 'activeContentValue'> { | ||
| interface NavigationMenuViewportProps extends Omit<NavigationMenuViewportImplProps, 'children' | 'activeContentValue'> { | ||
| /** | ||
@@ -118,15 +130,15 @@ * Used to force mounting when more control is needed. Useful when | ||
| } | ||
| export const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>; | ||
| interface NavigationMenuViewportImplProps extends PrimitiveDivProps { | ||
| } | ||
| export const Root: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>; | ||
| export const Sub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>; | ||
| export const List: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>; | ||
| export const Item: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>; | ||
| export const Trigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>; | ||
| export const Link: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>; | ||
| export const Indicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>; | ||
| export const Content: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>; | ||
| export const Viewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const Root: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>; | ||
| declare const Sub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const List: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>; | ||
| declare const Item: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>; | ||
| declare const Trigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>; | ||
| declare const Link: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>; | ||
| declare const Indicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const Content: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>; | ||
| declare const Viewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>; | ||
| //# sourceMappingURL=index.d.ts.map | ||
| export { Content, Indicator, Item, Link, List, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuSub, type NavigationMenuSubProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, Root, Sub, Trigger, Viewport, createNavigationMenuScope }; |
1557
dist/index.js
@@ -1,904 +0,813 @@ | ||
| var $6jHCS$babelruntimehelpersextends = require("@babel/runtime/helpers/extends"); | ||
| var $6jHCS$react = require("react"); | ||
| var $6jHCS$reactdom = require("react-dom"); | ||
| var $6jHCS$radixuireactcontext = require("@radix-ui/react-context"); | ||
| var $6jHCS$radixuiprimitive = require("@radix-ui/primitive"); | ||
| var $6jHCS$radixuireactprimitive = require("@radix-ui/react-primitive"); | ||
| var $6jHCS$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state"); | ||
| var $6jHCS$radixuireactcomposerefs = require("@radix-ui/react-compose-refs"); | ||
| var $6jHCS$radixuireactdirection = require("@radix-ui/react-direction"); | ||
| var $6jHCS$radixuireactpresence = require("@radix-ui/react-presence"); | ||
| var $6jHCS$radixuireactid = require("@radix-ui/react-id"); | ||
| var $6jHCS$radixuireactcollection = require("@radix-ui/react-collection"); | ||
| var $6jHCS$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer"); | ||
| var $6jHCS$radixuireactuseprevious = require("@radix-ui/react-use-previous"); | ||
| var $6jHCS$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect"); | ||
| var $6jHCS$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref"); | ||
| var $6jHCS$radixuireactvisuallyhidden = require("@radix-ui/react-visually-hidden"); | ||
| "use strict"; | ||
| (() => { | ||
| var __create = Object.create; | ||
| var __defProp = Object.defineProperty; | ||
| var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
| var __getOwnPropNames = Object.getOwnPropertyNames; | ||
| var __getProtoOf = Object.getPrototypeOf; | ||
| var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
| var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { | ||
| get: (a, b) => (typeof require !== "undefined" ? require : a)[b] | ||
| }) : x)(function(x) { | ||
| if (typeof require !== "undefined") return require.apply(this, arguments); | ||
| throw Error('Dynamic require of "' + x + '" is not supported'); | ||
| }); | ||
| var __copyProps = (to, from, except, desc) => { | ||
| if (from && typeof from === "object" || typeof from === "function") { | ||
| for (let key of __getOwnPropNames(from)) | ||
| if (!__hasOwnProp.call(to, key) && key !== except) | ||
| __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
| } | ||
| return to; | ||
| }; | ||
| var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
| // If the importer is in node compatibility mode or this is not an ESM | ||
| // file that has been converted to a CommonJS file using a Babel- | ||
| // compatible transform (i.e. "__esModule" has not been set), then set | ||
| // "default" to the CommonJS "module.exports" for node compatibility. | ||
| isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
| mod | ||
| )); | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| function $parcel$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| $parcel$export(module.exports, "createNavigationMenuScope", () => $7f73b938b73b5118$export$fb8ea5af8c9fcdf0); | ||
| $parcel$export(module.exports, "NavigationMenu", () => $7f73b938b73b5118$export$5b2278cf1e8bcae2); | ||
| $parcel$export(module.exports, "NavigationMenuSub", () => $7f73b938b73b5118$export$5958edd6c4ee7c79); | ||
| $parcel$export(module.exports, "NavigationMenuList", () => $7f73b938b73b5118$export$c361068a95fd2286); | ||
| $parcel$export(module.exports, "NavigationMenuItem", () => $7f73b938b73b5118$export$ffdbb83a2de845c2); | ||
| $parcel$export(module.exports, "NavigationMenuTrigger", () => $7f73b938b73b5118$export$37fe8002734d8f2); | ||
| $parcel$export(module.exports, "NavigationMenuLink", () => $7f73b938b73b5118$export$6893bf21536567da); | ||
| $parcel$export(module.exports, "NavigationMenuIndicator", () => $7f73b938b73b5118$export$8ddb526647c0d8fb); | ||
| $parcel$export(module.exports, "NavigationMenuContent", () => $7f73b938b73b5118$export$38e00e996c2f93f7); | ||
| $parcel$export(module.exports, "NavigationMenuViewport", () => $7f73b938b73b5118$export$ee880b97cc6d44a5); | ||
| $parcel$export(module.exports, "Root", () => $7f73b938b73b5118$export$be92b6f5f03c0fe9); | ||
| $parcel$export(module.exports, "Sub", () => $7f73b938b73b5118$export$d7a01e11500dfb6f); | ||
| $parcel$export(module.exports, "List", () => $7f73b938b73b5118$export$54c2e3dc7acea9f5); | ||
| $parcel$export(module.exports, "Item", () => $7f73b938b73b5118$export$6d08773d2e66f8f2); | ||
| $parcel$export(module.exports, "Trigger", () => $7f73b938b73b5118$export$41fb9f06171c75f4); | ||
| $parcel$export(module.exports, "Link", () => $7f73b938b73b5118$export$a6c7ac8248d6e38a); | ||
| $parcel$export(module.exports, "Indicator", () => $7f73b938b73b5118$export$adb584737d712b70); | ||
| $parcel$export(module.exports, "Content", () => $7f73b938b73b5118$export$7c6e2c02157bb7d2); | ||
| $parcel$export(module.exports, "Viewport", () => $7f73b938b73b5118$export$d5c6c08dc2d3ca7); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenu | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$NAVIGATION_MENU_NAME = 'NavigationMenu'; | ||
| const [$7f73b938b73b5118$var$Collection, $7f73b938b73b5118$var$useCollection, $7f73b938b73b5118$var$createCollectionScope] = $6jHCS$radixuireactcollection.createCollection($7f73b938b73b5118$var$NAVIGATION_MENU_NAME); | ||
| const [$7f73b938b73b5118$var$FocusGroupCollection, $7f73b938b73b5118$var$useFocusGroupCollection, $7f73b938b73b5118$var$createFocusGroupCollectionScope] = $6jHCS$radixuireactcollection.createCollection($7f73b938b73b5118$var$NAVIGATION_MENU_NAME); | ||
| const [$7f73b938b73b5118$var$createNavigationMenuContext, $7f73b938b73b5118$export$fb8ea5af8c9fcdf0] = $6jHCS$radixuireactcontext.createContextScope($7f73b938b73b5118$var$NAVIGATION_MENU_NAME, [ | ||
| $7f73b938b73b5118$var$createCollectionScope, | ||
| $7f73b938b73b5118$var$createFocusGroupCollectionScope | ||
| ]); | ||
| const [$7f73b938b73b5118$var$NavigationMenuProviderImpl, $7f73b938b73b5118$var$useNavigationMenuContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$NAVIGATION_MENU_NAME); | ||
| const [$7f73b938b73b5118$var$ViewportContentProvider, $7f73b938b73b5118$var$useViewportContentContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$NAVIGATION_MENU_NAME); | ||
| const $7f73b938b73b5118$export$5b2278cf1e8bcae2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , delayDuration: delayDuration = 200 , skipDelayDuration: skipDelayDuration = 300 , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props; | ||
| const [navigationMenu, setNavigationMenu] = $6jHCS$react.useState(null); | ||
| const composedRef = $6jHCS$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setNavigationMenu(node) | ||
| ); | ||
| const direction = $6jHCS$radixuireactdirection.useDirection(dir); | ||
| const openTimerRef = $6jHCS$react.useRef(0); | ||
| const closeTimerRef = $6jHCS$react.useRef(0); | ||
| const skipDelayTimerRef = $6jHCS$react.useRef(0); | ||
| const [isOpenDelayed, setIsOpenDelayed] = $6jHCS$react.useState(true); | ||
| const [value1 = '', setValue] = $6jHCS$radixuireactusecontrollablestate.useControllableState({ | ||
| // packages/react/navigation-menu/src/NavigationMenu.tsx | ||
| var React = __toESM(__require("react")); | ||
| var import_react_dom = __toESM(__require("react-dom")); | ||
| var import_react_context = __require("@radix-ui/react-context"); | ||
| var import_primitive = __require("@radix-ui/primitive"); | ||
| var import_react_primitive = __require("@radix-ui/react-primitive"); | ||
| var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state"); | ||
| var import_react_compose_refs = __require("@radix-ui/react-compose-refs"); | ||
| var import_react_direction = __require("@radix-ui/react-direction"); | ||
| var import_react_presence = __require("@radix-ui/react-presence"); | ||
| var import_react_id = __require("@radix-ui/react-id"); | ||
| var import_react_collection = __require("@radix-ui/react-collection"); | ||
| var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer"); | ||
| var import_react_use_previous = __require("@radix-ui/react-use-previous"); | ||
| var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect"); | ||
| var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref"); | ||
| var VisuallyHiddenPrimitive = __toESM(__require("@radix-ui/react-visually-hidden")); | ||
| var import_jsx_runtime = __require("react/jsx-runtime"); | ||
| var NAVIGATION_MENU_NAME = "NavigationMenu"; | ||
| var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME); | ||
| var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME); | ||
| var [createNavigationMenuContext, createNavigationMenuScope] = (0, import_react_context.createContextScope)( | ||
| NAVIGATION_MENU_NAME, | ||
| [createCollectionScope, createFocusGroupCollectionScope] | ||
| ); | ||
| var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME); | ||
| var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME); | ||
| var NavigationMenu = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { | ||
| __scopeNavigationMenu, | ||
| value: valueProp, | ||
| onValueChange, | ||
| defaultValue, | ||
| delayDuration = 200, | ||
| skipDelayDuration = 300, | ||
| orientation = "horizontal", | ||
| dir, | ||
| ...NavigationMenuProps | ||
| } = props; | ||
| const [navigationMenu, setNavigationMenu] = React.useState(null); | ||
| const composedRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setNavigationMenu(node)); | ||
| const direction = (0, import_react_direction.useDirection)(dir); | ||
| const openTimerRef = React.useRef(0); | ||
| const closeTimerRef = React.useRef(0); | ||
| const skipDelayTimerRef = React.useRef(0); | ||
| const [isOpenDelayed, setIsOpenDelayed] = React.useState(true); | ||
| const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({ | ||
| prop: valueProp, | ||
| onChange: (value)=>{ | ||
| const isOpen = value !== ''; | ||
| const hasSkipDelayDuration = skipDelayDuration > 0; | ||
| if (isOpen) { | ||
| window.clearTimeout(skipDelayTimerRef.current); | ||
| if (hasSkipDelayDuration) setIsOpenDelayed(false); | ||
| } else { | ||
| window.clearTimeout(skipDelayTimerRef.current); | ||
| skipDelayTimerRef.current = window.setTimeout(()=>setIsOpenDelayed(true) | ||
| , skipDelayDuration); | ||
| } | ||
| onValueChange === null || onValueChange === void 0 || onValueChange(value); | ||
| onChange: (value2) => { | ||
| const isOpen = value2 !== ""; | ||
| const hasSkipDelayDuration = skipDelayDuration > 0; | ||
| if (isOpen) { | ||
| window.clearTimeout(skipDelayTimerRef.current); | ||
| if (hasSkipDelayDuration) setIsOpenDelayed(false); | ||
| } else { | ||
| window.clearTimeout(skipDelayTimerRef.current); | ||
| skipDelayTimerRef.current = window.setTimeout( | ||
| () => setIsOpenDelayed(true), | ||
| skipDelayDuration | ||
| ); | ||
| } | ||
| onValueChange?.(value2); | ||
| }, | ||
| defaultProp: defaultValue | ||
| }); | ||
| const startCloseTimer = $6jHCS$react.useCallback(()=>{ | ||
| }); | ||
| const startCloseTimer = React.useCallback(() => { | ||
| window.clearTimeout(closeTimerRef.current); | ||
| closeTimerRef.current = window.setTimeout(()=>setValue('') | ||
| , 150); | ||
| }, [ | ||
| setValue | ||
| ]); | ||
| const handleOpen = $6jHCS$react.useCallback((itemValue)=>{ | ||
| window.clearTimeout(closeTimerRef.current); | ||
| setValue(itemValue); | ||
| }, [ | ||
| setValue | ||
| ]); | ||
| const handleDelayedOpen = $6jHCS$react.useCallback((itemValue)=>{ | ||
| const isOpenItem = value1 === itemValue; | ||
| if (isOpenItem) // If the item is already open (e.g. we're transitioning from the content to the trigger) | ||
| // then we want to clear the close timer immediately. | ||
| window.clearTimeout(closeTimerRef.current); | ||
| else openTimerRef.current = window.setTimeout(()=>{ | ||
| closeTimerRef.current = window.setTimeout(() => setValue(""), 150); | ||
| }, [setValue]); | ||
| const handleOpen = React.useCallback( | ||
| (itemValue) => { | ||
| window.clearTimeout(closeTimerRef.current); | ||
| setValue(itemValue); | ||
| }, | ||
| [setValue] | ||
| ); | ||
| const handleDelayedOpen = React.useCallback( | ||
| (itemValue) => { | ||
| const isOpenItem = value === itemValue; | ||
| if (isOpenItem) { | ||
| window.clearTimeout(closeTimerRef.current); | ||
| setValue(itemValue); | ||
| }, delayDuration); | ||
| }, [ | ||
| value1, | ||
| setValue, | ||
| delayDuration | ||
| ]); | ||
| $6jHCS$react.useEffect(()=>{ | ||
| return ()=>{ | ||
| window.clearTimeout(openTimerRef.current); | ||
| window.clearTimeout(closeTimerRef.current); | ||
| window.clearTimeout(skipDelayTimerRef.current); | ||
| } else { | ||
| openTimerRef.current = window.setTimeout(() => { | ||
| window.clearTimeout(closeTimerRef.current); | ||
| setValue(itemValue); | ||
| }, delayDuration); | ||
| } | ||
| }, | ||
| [value, setValue, delayDuration] | ||
| ); | ||
| React.useEffect(() => { | ||
| return () => { | ||
| window.clearTimeout(openTimerRef.current); | ||
| window.clearTimeout(closeTimerRef.current); | ||
| window.clearTimeout(skipDelayTimerRef.current); | ||
| }; | ||
| }, []); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuProvider, { | ||
| scope: __scopeNavigationMenu, | ||
| isRootMenu: true, | ||
| value: value1, | ||
| dir: direction, | ||
| orientation: orientation, | ||
| rootNavigationMenu: navigationMenu, | ||
| onTriggerEnter: (itemValue)=>{ | ||
| }, []); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| NavigationMenuProvider, | ||
| { | ||
| scope: __scopeNavigationMenu, | ||
| isRootMenu: true, | ||
| value, | ||
| dir: direction, | ||
| orientation, | ||
| rootNavigationMenu: navigationMenu, | ||
| onTriggerEnter: (itemValue) => { | ||
| window.clearTimeout(openTimerRef.current); | ||
| if (isOpenDelayed) handleDelayedOpen(itemValue); | ||
| else handleOpen(itemValue); | ||
| }, | ||
| onTriggerLeave: ()=>{ | ||
| }, | ||
| onTriggerLeave: () => { | ||
| window.clearTimeout(openTimerRef.current); | ||
| startCloseTimer(); | ||
| }, | ||
| onContentEnter: ()=>window.clearTimeout(closeTimerRef.current) | ||
| , | ||
| onContentLeave: startCloseTimer, | ||
| onItemSelect: (itemValue)=>{ | ||
| setValue((prevValue)=>prevValue === itemValue ? '' : itemValue | ||
| ); | ||
| }, | ||
| onItemDismiss: ()=>setValue('') | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.nav, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| "aria-label": "Main", | ||
| "data-orientation": orientation, | ||
| dir: direction | ||
| }, NavigationMenuProps, { | ||
| ref: composedRef | ||
| }))); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$5b2278cf1e8bcae2, { | ||
| displayName: $7f73b938b73b5118$var$NAVIGATION_MENU_NAME | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuSub | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$SUB_NAME = 'NavigationMenuSub'; | ||
| const $7f73b938b73b5118$export$5958edd6c4ee7c79 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , ...subProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$SUB_NAME, __scopeNavigationMenu); | ||
| const [value = '', setValue] = $6jHCS$radixuireactusecontrollablestate.useControllableState({ | ||
| }, | ||
| onContentEnter: () => window.clearTimeout(closeTimerRef.current), | ||
| onContentLeave: startCloseTimer, | ||
| onItemSelect: (itemValue) => { | ||
| setValue((prevValue) => prevValue === itemValue ? "" : itemValue); | ||
| }, | ||
| onItemDismiss: () => setValue(""), | ||
| children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_primitive.Primitive.nav, | ||
| { | ||
| "aria-label": "Main", | ||
| "data-orientation": orientation, | ||
| dir: direction, | ||
| ...NavigationMenuProps, | ||
| ref: composedRef | ||
| } | ||
| ) | ||
| } | ||
| ); | ||
| } | ||
| ); | ||
| NavigationMenu.displayName = NAVIGATION_MENU_NAME; | ||
| var SUB_NAME = "NavigationMenuSub"; | ||
| var NavigationMenuSub = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { | ||
| __scopeNavigationMenu, | ||
| value: valueProp, | ||
| onValueChange, | ||
| defaultValue, | ||
| orientation = "horizontal", | ||
| ...subProps | ||
| } = props; | ||
| const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu); | ||
| const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({ | ||
| prop: valueProp, | ||
| onChange: onValueChange, | ||
| defaultProp: defaultValue | ||
| }); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuProvider, { | ||
| scope: __scopeNavigationMenu, | ||
| isRootMenu: false, | ||
| value: value, | ||
| dir: context.dir, | ||
| orientation: orientation, | ||
| rootNavigationMenu: context.rootNavigationMenu, | ||
| onTriggerEnter: (itemValue)=>setValue(itemValue) | ||
| , | ||
| onItemSelect: (itemValue)=>setValue(itemValue) | ||
| , | ||
| onItemDismiss: ()=>setValue('') | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| "data-orientation": orientation | ||
| }, subProps, { | ||
| ref: forwardedRef | ||
| }))); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$5958edd6c4ee7c79, { | ||
| displayName: $7f73b938b73b5118$var$SUB_NAME | ||
| }); | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$NavigationMenuProvider = (props)=>{ | ||
| const { scope: scope , isRootMenu: isRootMenu , rootNavigationMenu: rootNavigationMenu , dir: dir , orientation: orientation , children: children , value: value , onItemSelect: onItemSelect , onItemDismiss: onItemDismiss , onTriggerEnter: onTriggerEnter , onTriggerLeave: onTriggerLeave , onContentEnter: onContentEnter , onContentLeave: onContentLeave } = props; | ||
| const [viewport, setViewport] = $6jHCS$react.useState(null); | ||
| const [viewportContent, setViewportContent] = $6jHCS$react.useState(new Map()); | ||
| const [indicatorTrack, setIndicatorTrack] = $6jHCS$react.useState(null); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuProviderImpl, { | ||
| scope: scope, | ||
| isRootMenu: isRootMenu, | ||
| rootNavigationMenu: rootNavigationMenu, | ||
| value: value, | ||
| previousValue: $6jHCS$radixuireactuseprevious.usePrevious(value), | ||
| baseId: $6jHCS$radixuireactid.useId(), | ||
| dir: dir, | ||
| orientation: orientation, | ||
| viewport: viewport, | ||
| }); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| NavigationMenuProvider, | ||
| { | ||
| scope: __scopeNavigationMenu, | ||
| isRootMenu: false, | ||
| value, | ||
| dir: context.dir, | ||
| orientation, | ||
| rootNavigationMenu: context.rootNavigationMenu, | ||
| onTriggerEnter: (itemValue) => setValue(itemValue), | ||
| onItemSelect: (itemValue) => setValue(itemValue), | ||
| onItemDismiss: () => setValue(""), | ||
| children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef }) | ||
| } | ||
| ); | ||
| } | ||
| ); | ||
| NavigationMenuSub.displayName = SUB_NAME; | ||
| var NavigationMenuProvider = (props) => { | ||
| const { | ||
| scope, | ||
| isRootMenu, | ||
| rootNavigationMenu, | ||
| dir, | ||
| orientation, | ||
| children, | ||
| value, | ||
| onItemSelect, | ||
| onItemDismiss, | ||
| onTriggerEnter, | ||
| onTriggerLeave, | ||
| onContentEnter, | ||
| onContentLeave | ||
| } = props; | ||
| const [viewport, setViewport] = React.useState(null); | ||
| const [viewportContent, setViewportContent] = React.useState(/* @__PURE__ */ new Map()); | ||
| const [indicatorTrack, setIndicatorTrack] = React.useState(null); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| NavigationMenuProviderImpl, | ||
| { | ||
| scope, | ||
| isRootMenu, | ||
| rootNavigationMenu, | ||
| value, | ||
| previousValue: (0, import_react_use_previous.usePrevious)(value), | ||
| baseId: (0, import_react_id.useId)(), | ||
| dir, | ||
| orientation, | ||
| viewport, | ||
| onViewportChange: setViewport, | ||
| indicatorTrack: indicatorTrack, | ||
| indicatorTrack, | ||
| onIndicatorTrackChange: setIndicatorTrack, | ||
| onTriggerEnter: $6jHCS$radixuireactusecallbackref.useCallbackRef(onTriggerEnter), | ||
| onTriggerLeave: $6jHCS$radixuireactusecallbackref.useCallbackRef(onTriggerLeave), | ||
| onContentEnter: $6jHCS$radixuireactusecallbackref.useCallbackRef(onContentEnter), | ||
| onContentLeave: $6jHCS$radixuireactusecallbackref.useCallbackRef(onContentLeave), | ||
| onItemSelect: $6jHCS$radixuireactusecallbackref.useCallbackRef(onItemSelect), | ||
| onItemDismiss: $6jHCS$radixuireactusecallbackref.useCallbackRef(onItemDismiss), | ||
| onViewportContentChange: $6jHCS$react.useCallback((contentValue, contentData)=>{ | ||
| setViewportContent((prevContent)=>{ | ||
| prevContent.set(contentValue, contentData); | ||
| return new Map(prevContent); | ||
| }); | ||
| onTriggerEnter: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerEnter), | ||
| onTriggerLeave: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerLeave), | ||
| onContentEnter: (0, import_react_use_callback_ref.useCallbackRef)(onContentEnter), | ||
| onContentLeave: (0, import_react_use_callback_ref.useCallbackRef)(onContentLeave), | ||
| onItemSelect: (0, import_react_use_callback_ref.useCallbackRef)(onItemSelect), | ||
| onItemDismiss: (0, import_react_use_callback_ref.useCallbackRef)(onItemDismiss), | ||
| onViewportContentChange: React.useCallback((contentValue, contentData) => { | ||
| setViewportContent((prevContent) => { | ||
| prevContent.set(contentValue, contentData); | ||
| return new Map(prevContent); | ||
| }); | ||
| }, []), | ||
| onViewportContentRemove: $6jHCS$react.useCallback((contentValue)=>{ | ||
| setViewportContent((prevContent)=>{ | ||
| if (!prevContent.has(contentValue)) return prevContent; | ||
| prevContent.delete(contentValue); | ||
| return new Map(prevContent); | ||
| }); | ||
| }, []) | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$Collection.Provider, { | ||
| scope: scope | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$ViewportContentProvider, { | ||
| scope: scope, | ||
| items: viewportContent | ||
| }, children))); | ||
| }; | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuList | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$LIST_NAME = 'NavigationMenuList'; | ||
| const $7f73b938b73b5118$export$c361068a95fd2286 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , ...listProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$LIST_NAME, __scopeNavigationMenu); | ||
| const list = /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.ul, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| "data-orientation": context.orientation | ||
| }, listProps, { | ||
| ref: forwardedRef | ||
| })); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, { | ||
| style: { | ||
| position: 'relative' | ||
| }, | ||
| ref: context.onIndicatorTrackChange | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$Collection.Slot, { | ||
| scope: __scopeNavigationMenu | ||
| }, context.isRootMenu ? /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroup, { | ||
| asChild: true | ||
| }, list) : list)); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$c361068a95fd2286, { | ||
| displayName: $7f73b938b73b5118$var$LIST_NAME | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuItem | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ITEM_NAME = 'NavigationMenuItem'; | ||
| const [$7f73b938b73b5118$var$NavigationMenuItemContextProvider, $7f73b938b73b5118$var$useNavigationMenuItemContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$ITEM_NAME); | ||
| const $7f73b938b73b5118$export$ffdbb83a2de845c2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , ...itemProps } = props; | ||
| const autoValue = $6jHCS$radixuireactid.useId(); // We need to provide an initial deterministic value as `useId` will return | ||
| // empty string on the first render and we don't want to match our internal "closed" value. | ||
| const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE'; | ||
| const contentRef = $6jHCS$react.useRef(null); | ||
| const triggerRef = $6jHCS$react.useRef(null); | ||
| const focusProxyRef = $6jHCS$react.useRef(null); | ||
| const restoreContentTabOrderRef = $6jHCS$react.useRef(()=>{}); | ||
| const wasEscapeCloseRef = $6jHCS$react.useRef(false); | ||
| const handleContentEntry = $6jHCS$react.useCallback((side = 'start')=>{ | ||
| onViewportContentRemove: React.useCallback((contentValue) => { | ||
| setViewportContent((prevContent) => { | ||
| if (!prevContent.has(contentValue)) return prevContent; | ||
| prevContent.delete(contentValue); | ||
| return new Map(prevContent); | ||
| }); | ||
| }, []), | ||
| children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentProvider, { scope, items: viewportContent, children }) }) | ||
| } | ||
| ); | ||
| }; | ||
| var LIST_NAME = "NavigationMenuList"; | ||
| var NavigationMenuList = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, ...listProps } = props; | ||
| const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu); | ||
| const list = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef }); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { style: { position: "relative" }, ref: context.onIndicatorTrackChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeNavigationMenu, children: context.isRootMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: list }) : list }) }); | ||
| } | ||
| ); | ||
| NavigationMenuList.displayName = LIST_NAME; | ||
| var ITEM_NAME = "NavigationMenuItem"; | ||
| var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME); | ||
| var NavigationMenuItem = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props; | ||
| const autoValue = (0, import_react_id.useId)(); | ||
| const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE"; | ||
| const contentRef = React.useRef(null); | ||
| const triggerRef = React.useRef(null); | ||
| const focusProxyRef = React.useRef(null); | ||
| const restoreContentTabOrderRef = React.useRef(() => { | ||
| }); | ||
| const wasEscapeCloseRef = React.useRef(false); | ||
| const handleContentEntry = React.useCallback((side = "start") => { | ||
| if (contentRef.current) { | ||
| restoreContentTabOrderRef.current(); | ||
| const candidates = $7f73b938b73b5118$var$getTabbableCandidates(contentRef.current); | ||
| if (candidates.length) $7f73b938b73b5118$var$focusFirst(side === 'start' ? candidates : candidates.reverse()); | ||
| restoreContentTabOrderRef.current(); | ||
| const candidates = getTabbableCandidates(contentRef.current); | ||
| if (candidates.length) focusFirst(side === "start" ? candidates : candidates.reverse()); | ||
| } | ||
| }, []); | ||
| const handleContentExit = $6jHCS$react.useCallback(()=>{ | ||
| }, []); | ||
| const handleContentExit = React.useCallback(() => { | ||
| if (contentRef.current) { | ||
| const candidates = $7f73b938b73b5118$var$getTabbableCandidates(contentRef.current); | ||
| if (candidates.length) restoreContentTabOrderRef.current = $7f73b938b73b5118$var$removeFromTabOrder(candidates); | ||
| const candidates = getTabbableCandidates(contentRef.current); | ||
| if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates); | ||
| } | ||
| }, []); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuItemContextProvider, { | ||
| scope: __scopeNavigationMenu, | ||
| value: value, | ||
| triggerRef: triggerRef, | ||
| contentRef: contentRef, | ||
| focusProxyRef: focusProxyRef, | ||
| wasEscapeCloseRef: wasEscapeCloseRef, | ||
| onEntryKeyDown: handleContentEntry, | ||
| onFocusProxyEnter: handleContentEntry, | ||
| onRootContentClose: handleContentExit, | ||
| onContentFocusOutside: handleContentExit | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.li, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, itemProps, { | ||
| ref: forwardedRef | ||
| }))); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$ffdbb83a2de845c2, { | ||
| displayName: $7f73b938b73b5118$var$ITEM_NAME | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuTrigger | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$TRIGGER_NAME = 'NavigationMenuTrigger'; | ||
| const $7f73b938b73b5118$export$37fe8002734d8f2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , disabled: disabled , ...triggerProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$TRIGGER_NAME, props.__scopeNavigationMenu); | ||
| const itemContext = $7f73b938b73b5118$var$useNavigationMenuItemContext($7f73b938b73b5118$var$TRIGGER_NAME, props.__scopeNavigationMenu); | ||
| const ref = $6jHCS$react.useRef(null); | ||
| const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(ref, itemContext.triggerRef, forwardedRef); | ||
| const triggerId = $7f73b938b73b5118$var$makeTriggerId(context.baseId, itemContext.value); | ||
| const contentId = $7f73b938b73b5118$var$makeContentId(context.baseId, itemContext.value); | ||
| const hasPointerMoveOpenedRef = $6jHCS$react.useRef(false); | ||
| const wasClickCloseRef = $6jHCS$react.useRef(false); | ||
| }, []); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| NavigationMenuItemContextProvider, | ||
| { | ||
| scope: __scopeNavigationMenu, | ||
| value, | ||
| triggerRef, | ||
| contentRef, | ||
| focusProxyRef, | ||
| wasEscapeCloseRef, | ||
| onEntryKeyDown: handleContentEntry, | ||
| onFocusProxyEnter: handleContentEntry, | ||
| onRootContentClose: handleContentExit, | ||
| onContentFocusOutside: handleContentExit, | ||
| children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.li, { ...itemProps, ref: forwardedRef }) | ||
| } | ||
| ); | ||
| } | ||
| ); | ||
| NavigationMenuItem.displayName = ITEM_NAME; | ||
| var TRIGGER_NAME = "NavigationMenuTrigger"; | ||
| var NavigationMenuTrigger = React.forwardRef((props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, disabled, ...triggerProps } = props; | ||
| const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu); | ||
| const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu); | ||
| const ref = React.useRef(null); | ||
| const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, itemContext.triggerRef, forwardedRef); | ||
| const triggerId = makeTriggerId(context.baseId, itemContext.value); | ||
| const contentId = makeContentId(context.baseId, itemContext.value); | ||
| const hasPointerMoveOpenedRef = React.useRef(false); | ||
| const wasClickCloseRef = React.useRef(false); | ||
| const open = itemContext.value === context.value; | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$react.Fragment, null, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$Collection.ItemSlot, { | ||
| scope: __scopeNavigationMenu, | ||
| value: itemContext.value | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupItem, { | ||
| asChild: true | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| id: triggerId, | ||
| disabled: disabled, | ||
| "data-disabled": disabled ? '' : undefined, | ||
| "data-state": $7f73b938b73b5118$var$getOpenState(open), | ||
| "aria-expanded": open, | ||
| "aria-controls": contentId | ||
| }, triggerProps, { | ||
| ref: composedRefs, | ||
| onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerEnter, ()=>{ | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ | ||
| /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeNavigationMenu, value: itemContext.value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_primitive.Primitive.button, | ||
| { | ||
| id: triggerId, | ||
| disabled, | ||
| "data-disabled": disabled ? "" : void 0, | ||
| "data-state": getOpenState(open), | ||
| "aria-expanded": open, | ||
| "aria-controls": contentId, | ||
| ...triggerProps, | ||
| ref: composedRefs, | ||
| onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => { | ||
| wasClickCloseRef.current = false; | ||
| itemContext.wasEscapeCloseRef.current = false; | ||
| }), | ||
| onPointerMove: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerMove, $7f73b938b73b5118$var$whenMouse(()=>{ | ||
| if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current) return; | ||
| context.onTriggerEnter(itemContext.value); | ||
| hasPointerMoveOpenedRef.current = true; | ||
| })), | ||
| onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $7f73b938b73b5118$var$whenMouse(()=>{ | ||
| if (disabled) return; | ||
| context.onTriggerLeave(); | ||
| hasPointerMoveOpenedRef.current = false; | ||
| })), | ||
| onClick: $6jHCS$radixuiprimitive.composeEventHandlers(props.onClick, ()=>{ | ||
| }), | ||
| onPointerMove: (0, import_primitive.composeEventHandlers)( | ||
| props.onPointerMove, | ||
| whenMouse(() => { | ||
| if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current) | ||
| return; | ||
| context.onTriggerEnter(itemContext.value); | ||
| hasPointerMoveOpenedRef.current = true; | ||
| }) | ||
| ), | ||
| onPointerLeave: (0, import_primitive.composeEventHandlers)( | ||
| props.onPointerLeave, | ||
| whenMouse(() => { | ||
| if (disabled) return; | ||
| context.onTriggerLeave(); | ||
| hasPointerMoveOpenedRef.current = false; | ||
| }) | ||
| ), | ||
| onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => { | ||
| context.onItemSelect(itemContext.value); | ||
| wasClickCloseRef.current = open; | ||
| }), | ||
| onKeyDown: $6jHCS$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{ | ||
| const verticalEntryKey = context.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'; | ||
| const entryKey = { | ||
| horizontal: 'ArrowDown', | ||
| vertical: verticalEntryKey | ||
| }[context.orientation]; | ||
| }), | ||
| onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { | ||
| const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight"; | ||
| const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation]; | ||
| if (open && event.key === entryKey) { | ||
| itemContext.onEntryKeyDown(); // Prevent FocusGroupItem from handling the event | ||
| event.preventDefault(); | ||
| itemContext.onEntryKeyDown(); | ||
| event.preventDefault(); | ||
| } | ||
| }) | ||
| })))), open && /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$react.Fragment, null, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactvisuallyhidden.Root, { | ||
| "aria-hidden": true, | ||
| tabIndex: 0, | ||
| ref: itemContext.focusProxyRef, | ||
| onFocus: (event)=>{ | ||
| const content = itemContext.contentRef.current; | ||
| const prevFocusedElement = event.relatedTarget; | ||
| const wasTriggerFocused = prevFocusedElement === ref.current; | ||
| const wasFocusFromContent = content === null || content === void 0 ? void 0 : content.contains(prevFocusedElement); | ||
| if (wasTriggerFocused || !wasFocusFromContent) itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end'); | ||
| }) | ||
| } | ||
| }), context.viewport && /*#__PURE__*/ $6jHCS$react.createElement("span", { | ||
| "aria-owns": contentId | ||
| }))); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$37fe8002734d8f2, { | ||
| displayName: $7f73b938b73b5118$var$TRIGGER_NAME | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuLink | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$LINK_NAME = 'NavigationMenuLink'; | ||
| const $7f73b938b73b5118$var$LINK_SELECT = 'navigationMenu.linkSelect'; | ||
| const $7f73b938b73b5118$export$6893bf21536567da = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , active: active , onSelect: onSelect , ...linkProps } = props; | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupItem, { | ||
| asChild: true | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.a, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| "data-active": active ? '' : undefined, | ||
| "aria-current": active ? 'page' : undefined | ||
| }, linkProps, { | ||
| ref: forwardedRef, | ||
| onClick: $6jHCS$radixuiprimitive.composeEventHandlers(props.onClick, (event1)=>{ | ||
| const target = event1.target; | ||
| const linkSelectEvent = new CustomEvent($7f73b938b73b5118$var$LINK_SELECT, { | ||
| ) }) }), | ||
| open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ | ||
| /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| VisuallyHiddenPrimitive.Root, | ||
| { | ||
| "aria-hidden": true, | ||
| tabIndex: 0, | ||
| ref: itemContext.focusProxyRef, | ||
| onFocus: (event) => { | ||
| const content = itemContext.contentRef.current; | ||
| const prevFocusedElement = event.relatedTarget; | ||
| const wasTriggerFocused = prevFocusedElement === ref.current; | ||
| const wasFocusFromContent = content?.contains(prevFocusedElement); | ||
| if (wasTriggerFocused || !wasFocusFromContent) { | ||
| itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end"); | ||
| } | ||
| } | ||
| } | ||
| ), | ||
| context.viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-owns": contentId }) | ||
| ] }) | ||
| ] }); | ||
| }); | ||
| NavigationMenuTrigger.displayName = TRIGGER_NAME; | ||
| var LINK_NAME = "NavigationMenuLink"; | ||
| var LINK_SELECT = "navigationMenu.linkSelect"; | ||
| var NavigationMenuLink = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props; | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_primitive.Primitive.a, | ||
| { | ||
| "data-active": active ? "" : void 0, | ||
| "aria-current": active ? "page" : void 0, | ||
| ...linkProps, | ||
| ref: forwardedRef, | ||
| onClick: (0, import_primitive.composeEventHandlers)( | ||
| props.onClick, | ||
| (event) => { | ||
| const target = event.target; | ||
| const linkSelectEvent = new CustomEvent(LINK_SELECT, { | ||
| bubbles: true, | ||
| cancelable: true | ||
| }); | ||
| target.addEventListener($7f73b938b73b5118$var$LINK_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event) | ||
| , { | ||
| once: true | ||
| }); | ||
| $6jHCS$radixuireactprimitive.dispatchDiscreteCustomEvent(target, linkSelectEvent); | ||
| if (!linkSelectEvent.defaultPrevented && !event1.metaKey) { | ||
| const rootContentDismissEvent = new CustomEvent($7f73b938b73b5118$var$ROOT_CONTENT_DISMISS, { | ||
| bubbles: true, | ||
| cancelable: true | ||
| }); | ||
| target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true }); | ||
| (0, import_react_primitive.dispatchDiscreteCustomEvent)(target, linkSelectEvent); | ||
| if (!linkSelectEvent.defaultPrevented && !event.metaKey) { | ||
| const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, { | ||
| bubbles: true, | ||
| cancelable: true | ||
| }); | ||
| $6jHCS$radixuireactprimitive.dispatchDiscreteCustomEvent(target, rootContentDismissEvent); | ||
| } | ||
| }, { | ||
| checkForDefaultPrevented: false | ||
| }) | ||
| }))); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$6893bf21536567da, { | ||
| displayName: $7f73b938b73b5118$var$LINK_NAME | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuIndicator | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$INDICATOR_NAME = 'NavigationMenuIndicator'; | ||
| const $7f73b938b73b5118$export$8ddb526647c0d8fb = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { forceMount: forceMount , ...indicatorProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$INDICATOR_NAME, props.__scopeNavigationMenu); | ||
| (0, import_react_primitive.dispatchDiscreteCustomEvent)(target, rootContentDismissEvent); | ||
| } | ||
| }, | ||
| { checkForDefaultPrevented: false } | ||
| ) | ||
| } | ||
| ) }); | ||
| } | ||
| ); | ||
| NavigationMenuLink.displayName = LINK_NAME; | ||
| var INDICATOR_NAME = "NavigationMenuIndicator"; | ||
| var NavigationMenuIndicator = React.forwardRef((props, forwardedRef) => { | ||
| const { forceMount, ...indicatorProps } = props; | ||
| const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu); | ||
| const isVisible = Boolean(context.value); | ||
| return context.indicatorTrack ? /*#__PURE__*/ ($parcel$interopDefault($6jHCS$reactdom)).createPortal(/*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactpresence.Presence, { | ||
| present: forceMount || isVisible | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuIndicatorImpl, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, indicatorProps, { | ||
| ref: forwardedRef | ||
| }))), context.indicatorTrack) : null; | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$8ddb526647c0d8fb, { | ||
| displayName: $7f73b938b73b5118$var$INDICATOR_NAME | ||
| }); | ||
| const $7f73b938b73b5118$var$NavigationMenuIndicatorImpl = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , ...indicatorProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$INDICATOR_NAME, __scopeNavigationMenu); | ||
| const getItems = $7f73b938b73b5118$var$useCollection(__scopeNavigationMenu); | ||
| const [activeTrigger, setActiveTrigger] = $6jHCS$react.useState(null); | ||
| const [position, setPosition] = $6jHCS$react.useState(null); | ||
| const isHorizontal = context.orientation === 'horizontal'; | ||
| return context.indicatorTrack ? import_react_dom.default.createPortal( | ||
| /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuIndicatorImpl, { ...indicatorProps, ref: forwardedRef }) }), | ||
| context.indicatorTrack | ||
| ) : null; | ||
| }); | ||
| NavigationMenuIndicator.displayName = INDICATOR_NAME; | ||
| var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, ...indicatorProps } = props; | ||
| const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu); | ||
| const getItems = useCollection(__scopeNavigationMenu); | ||
| const [activeTrigger, setActiveTrigger] = React.useState( | ||
| null | ||
| ); | ||
| const [position, setPosition] = React.useState(null); | ||
| const isHorizontal = context.orientation === "horizontal"; | ||
| const isVisible = Boolean(context.value); | ||
| $6jHCS$react.useEffect(()=>{ | ||
| var _items$find; | ||
| const items = getItems(); | ||
| const triggerNode = (_items$find = items.find((item)=>item.value === context.value | ||
| )) === null || _items$find === void 0 ? void 0 : _items$find.ref.current; | ||
| if (triggerNode) setActiveTrigger(triggerNode); | ||
| }, [ | ||
| getItems, | ||
| context.value | ||
| ]); | ||
| /** | ||
| * Update position when the indicator or parent track size changes | ||
| */ const handlePositionChange = ()=>{ | ||
| if (activeTrigger) setPosition({ | ||
| size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight, | ||
| offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop | ||
| React.useEffect(() => { | ||
| const items = getItems(); | ||
| const triggerNode = items.find((item) => item.value === context.value)?.ref.current; | ||
| if (triggerNode) setActiveTrigger(triggerNode); | ||
| }, [getItems, context.value]); | ||
| const handlePositionChange = () => { | ||
| if (activeTrigger) { | ||
| setPosition({ | ||
| size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight, | ||
| offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop | ||
| }); | ||
| } | ||
| }; | ||
| $7f73b938b73b5118$var$useResizeObserver(activeTrigger, handlePositionChange); | ||
| $7f73b938b73b5118$var$useResizeObserver(context.indicatorTrack, handlePositionChange); // We need to wait for the indicator position to be available before rendering to | ||
| // snap immediately into position rather than transitioning from initial | ||
| return position ? /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| useResizeObserver(activeTrigger, handlePositionChange); | ||
| useResizeObserver(context.indicatorTrack, handlePositionChange); | ||
| return position ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_primitive.Primitive.div, | ||
| { | ||
| "aria-hidden": true, | ||
| "data-state": isVisible ? 'visible' : 'hidden', | ||
| "data-orientation": context.orientation | ||
| }, indicatorProps, { | ||
| "data-state": isVisible ? "visible" : "hidden", | ||
| "data-orientation": context.orientation, | ||
| ...indicatorProps, | ||
| ref: forwardedRef, | ||
| style: { | ||
| position: 'absolute', | ||
| ...isHorizontal ? { | ||
| left: 0, | ||
| width: position.size + 'px', | ||
| transform: `translateX(${position.offset}px)` | ||
| } : { | ||
| top: 0, | ||
| height: position.size + 'px', | ||
| transform: `translateY(${position.offset}px)` | ||
| }, | ||
| ...indicatorProps.style | ||
| position: "absolute", | ||
| ...isHorizontal ? { | ||
| left: 0, | ||
| width: position.size + "px", | ||
| transform: `translateX(${position.offset}px)` | ||
| } : { | ||
| top: 0, | ||
| height: position.size + "px", | ||
| transform: `translateY(${position.offset}px)` | ||
| }, | ||
| ...indicatorProps.style | ||
| } | ||
| })) : null; | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuContent | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$CONTENT_NAME = 'NavigationMenuContent'; | ||
| const $7f73b938b73b5118$export$38e00e996c2f93f7 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { forceMount: forceMount , ...contentProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$CONTENT_NAME, props.__scopeNavigationMenu); | ||
| const itemContext = $7f73b938b73b5118$var$useNavigationMenuItemContext($7f73b938b73b5118$var$CONTENT_NAME, props.__scopeNavigationMenu); | ||
| const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(itemContext.contentRef, forwardedRef); | ||
| } | ||
| ) : null; | ||
| }); | ||
| var CONTENT_NAME = "NavigationMenuContent"; | ||
| var NavigationMenuContent = React.forwardRef((props, forwardedRef) => { | ||
| const { forceMount, ...contentProps } = props; | ||
| const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu); | ||
| const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu); | ||
| const composedRefs = (0, import_react_compose_refs.useComposedRefs)(itemContext.contentRef, forwardedRef); | ||
| const open = itemContext.value === context.value; | ||
| const commonProps = { | ||
| value: itemContext.value, | ||
| triggerRef: itemContext.triggerRef, | ||
| focusProxyRef: itemContext.focusProxyRef, | ||
| wasEscapeCloseRef: itemContext.wasEscapeCloseRef, | ||
| onContentFocusOutside: itemContext.onContentFocusOutside, | ||
| onRootContentClose: itemContext.onRootContentClose, | ||
| ...contentProps | ||
| value: itemContext.value, | ||
| triggerRef: itemContext.triggerRef, | ||
| focusProxyRef: itemContext.focusProxyRef, | ||
| wasEscapeCloseRef: itemContext.wasEscapeCloseRef, | ||
| onContentFocusOutside: itemContext.onContentFocusOutside, | ||
| onRootContentClose: itemContext.onRootContentClose, | ||
| ...contentProps | ||
| }; | ||
| return !context.viewport ? /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactpresence.Presence, { | ||
| present: forceMount || open | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuContentImpl, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| "data-state": $7f73b938b73b5118$var$getOpenState(open) | ||
| }, commonProps, { | ||
| return !context.viewport ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| NavigationMenuContentImpl, | ||
| { | ||
| "data-state": getOpenState(open), | ||
| ...commonProps, | ||
| ref: composedRefs, | ||
| onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerEnter, context.onContentEnter), | ||
| onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $7f73b938b73b5118$var$whenMouse(context.onContentLeave)), | ||
| onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter), | ||
| onPointerLeave: (0, import_primitive.composeEventHandlers)( | ||
| props.onPointerLeave, | ||
| whenMouse(context.onContentLeave) | ||
| ), | ||
| style: { | ||
| // Prevent interaction when animating out | ||
| pointerEvents: !open && context.isRootMenu ? 'none' : undefined, | ||
| ...commonProps.style | ||
| // Prevent interaction when animating out | ||
| pointerEvents: !open && context.isRootMenu ? "none" : void 0, | ||
| ...commonProps.style | ||
| } | ||
| }))) : /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$ViewportContentMounter, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| forceMount: forceMount | ||
| }, commonProps, { | ||
| ref: composedRefs | ||
| })); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$38e00e996c2f93f7, { | ||
| displayName: $7f73b938b73b5118$var$CONTENT_NAME | ||
| }); | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ViewportContentMounter = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$CONTENT_NAME, props.__scopeNavigationMenu); | ||
| const { onViewportContentChange: onViewportContentChange , onViewportContentRemove: onViewportContentRemove } = context; | ||
| $6jHCS$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
| onViewportContentChange(props.value, { | ||
| ref: forwardedRef, | ||
| ...props | ||
| }); | ||
| }, [ | ||
| props, | ||
| forwardedRef, | ||
| onViewportContentChange | ||
| ]); | ||
| $6jHCS$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
| return ()=>onViewportContentRemove(props.value) | ||
| ; | ||
| }, [ | ||
| props.value, | ||
| onViewportContentRemove | ||
| ]); // Content is proxied into the viewport | ||
| } | ||
| ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs }); | ||
| }); | ||
| NavigationMenuContent.displayName = CONTENT_NAME; | ||
| var ViewportContentMounter = React.forwardRef((props, forwardedRef) => { | ||
| const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu); | ||
| const { onViewportContentChange, onViewportContentRemove } = context; | ||
| (0, import_react_use_layout_effect.useLayoutEffect)(() => { | ||
| onViewportContentChange(props.value, { | ||
| ref: forwardedRef, | ||
| ...props | ||
| }); | ||
| }, [props, forwardedRef, onViewportContentChange]); | ||
| (0, import_react_use_layout_effect.useLayoutEffect)(() => { | ||
| return () => onViewportContentRemove(props.value); | ||
| }, [props.value, onViewportContentRemove]); | ||
| return null; | ||
| }); | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'; | ||
| const $7f73b938b73b5118$var$NavigationMenuContentImpl = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , triggerRef: triggerRef , focusProxyRef: focusProxyRef , wasEscapeCloseRef: wasEscapeCloseRef , onRootContentClose: onRootContentClose , onContentFocusOutside: onContentFocusOutside , ...contentProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$CONTENT_NAME, __scopeNavigationMenu); | ||
| const ref = $6jHCS$react.useRef(null); | ||
| const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(ref, forwardedRef); | ||
| const triggerId = $7f73b938b73b5118$var$makeTriggerId(context.baseId, value); | ||
| const contentId = $7f73b938b73b5118$var$makeContentId(context.baseId, value); | ||
| const getItems = $7f73b938b73b5118$var$useCollection(__scopeNavigationMenu); | ||
| const prevMotionAttributeRef = $6jHCS$react.useRef(null); | ||
| const { onItemDismiss: onItemDismiss } = context; | ||
| $6jHCS$react.useEffect(()=>{ | ||
| const content = ref.current; // Bubble dismiss to the root content node and focus its trigger | ||
| if (context.isRootMenu && content) { | ||
| const handleClose = ()=>{ | ||
| var _triggerRef$current; | ||
| onItemDismiss(); | ||
| onRootContentClose(); | ||
| if (content.contains(document.activeElement)) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus(); | ||
| }; | ||
| content.addEventListener($7f73b938b73b5118$var$ROOT_CONTENT_DISMISS, handleClose); | ||
| return ()=>content.removeEventListener($7f73b938b73b5118$var$ROOT_CONTENT_DISMISS, handleClose) | ||
| ; | ||
| }); | ||
| var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss"; | ||
| var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => { | ||
| const { | ||
| __scopeNavigationMenu, | ||
| value, | ||
| triggerRef, | ||
| focusProxyRef, | ||
| wasEscapeCloseRef, | ||
| onRootContentClose, | ||
| onContentFocusOutside, | ||
| ...contentProps | ||
| } = props; | ||
| const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu); | ||
| const ref = React.useRef(null); | ||
| const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef); | ||
| const triggerId = makeTriggerId(context.baseId, value); | ||
| const contentId = makeContentId(context.baseId, value); | ||
| const getItems = useCollection(__scopeNavigationMenu); | ||
| const prevMotionAttributeRef = React.useRef(null); | ||
| const { onItemDismiss } = context; | ||
| React.useEffect(() => { | ||
| const content = ref.current; | ||
| if (context.isRootMenu && content) { | ||
| const handleClose = () => { | ||
| onItemDismiss(); | ||
| onRootContentClose(); | ||
| if (content.contains(document.activeElement)) triggerRef.current?.focus(); | ||
| }; | ||
| content.addEventListener(ROOT_CONTENT_DISMISS, handleClose); | ||
| return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose); | ||
| } | ||
| }, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]); | ||
| const motionAttribute = React.useMemo(() => { | ||
| const items = getItems(); | ||
| const values = items.map((item) => item.value); | ||
| if (context.dir === "rtl") values.reverse(); | ||
| const index = values.indexOf(context.value); | ||
| const prevIndex = values.indexOf(context.previousValue); | ||
| const isSelected = value === context.value; | ||
| const wasSelected = prevIndex === values.indexOf(value); | ||
| if (!isSelected && !wasSelected) return prevMotionAttributeRef.current; | ||
| const attribute = (() => { | ||
| if (index !== prevIndex) { | ||
| if (isSelected && prevIndex !== -1) return index > prevIndex ? "from-end" : "from-start"; | ||
| if (wasSelected && index !== -1) return index > prevIndex ? "to-start" : "to-end"; | ||
| } | ||
| }, [ | ||
| context.isRootMenu, | ||
| props.value, | ||
| triggerRef, | ||
| onItemDismiss, | ||
| onRootContentClose | ||
| ]); | ||
| const motionAttribute = $6jHCS$react.useMemo(()=>{ | ||
| const items = getItems(); | ||
| const values = items.map((item)=>item.value | ||
| ); | ||
| if (context.dir === 'rtl') values.reverse(); | ||
| const index = values.indexOf(context.value); | ||
| const prevIndex = values.indexOf(context.previousValue); | ||
| const isSelected = value === context.value; | ||
| const wasSelected = prevIndex === values.indexOf(value); // We only want to update selected and the last selected content | ||
| // this avoids animations being interrupted outside of that range | ||
| if (!isSelected && !wasSelected) return prevMotionAttributeRef.current; | ||
| const attribute = (()=>{ | ||
| // Don't provide a direction on the initial open | ||
| if (index !== prevIndex) { | ||
| // If we're moving to this item from another | ||
| if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start'; // If we're leaving this item for another | ||
| if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end'; | ||
| } // Otherwise we're entering from closed or leaving the list | ||
| // entirely and should not animate in any direction | ||
| return null; | ||
| })(); | ||
| prevMotionAttributeRef.current = attribute; | ||
| return attribute; | ||
| }, [ | ||
| context.previousValue, | ||
| context.value, | ||
| context.dir, | ||
| getItems, | ||
| value | ||
| ]); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroup, { | ||
| asChild: true | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactdismissablelayer.DismissableLayer, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| return null; | ||
| })(); | ||
| prevMotionAttributeRef.current = attribute; | ||
| return attribute; | ||
| }, [context.previousValue, context.value, context.dir, getItems, value]); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_dismissable_layer.DismissableLayer, | ||
| { | ||
| id: contentId, | ||
| "aria-labelledby": triggerId, | ||
| "data-motion": motionAttribute, | ||
| "data-orientation": context.orientation | ||
| }, contentProps, { | ||
| "data-orientation": context.orientation, | ||
| ...contentProps, | ||
| ref: composedRefs, | ||
| disableOutsidePointerEvents: false, | ||
| onDismiss: ()=>{ | ||
| var _ref$current; | ||
| const rootContentDismissEvent = new Event($7f73b938b73b5118$var$ROOT_CONTENT_DISMISS, { | ||
| bubbles: true, | ||
| cancelable: true | ||
| }); | ||
| (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.dispatchEvent(rootContentDismissEvent); | ||
| onDismiss: () => { | ||
| const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, { | ||
| bubbles: true, | ||
| cancelable: true | ||
| }); | ||
| ref.current?.dispatchEvent(rootContentDismissEvent); | ||
| }, | ||
| onFocusOutside: $6jHCS$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>{ | ||
| var _context$rootNavigati; | ||
| onContentFocusOutside(); | ||
| const target = event.target; // Only dismiss content when focus moves outside of the menu | ||
| if ((_context$rootNavigati = context.rootNavigationMenu) !== null && _context$rootNavigati !== void 0 && _context$rootNavigati.contains(target)) event.preventDefault(); | ||
| onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => { | ||
| onContentFocusOutside(); | ||
| const target = event.target; | ||
| if (context.rootNavigationMenu?.contains(target)) event.preventDefault(); | ||
| }), | ||
| onPointerDownOutside: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerDownOutside, (event)=>{ | ||
| var _context$viewport; | ||
| const target = event.target; | ||
| const isTrigger = getItems().some((item)=>{ | ||
| var _item$ref$current; | ||
| return (_item$ref$current = item.ref.current) === null || _item$ref$current === void 0 ? void 0 : _item$ref$current.contains(target); | ||
| }); | ||
| const isRootViewport = context.isRootMenu && ((_context$viewport = context.viewport) === null || _context$viewport === void 0 ? void 0 : _context$viewport.contains(target)); | ||
| if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault(); | ||
| onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => { | ||
| const target = event.target; | ||
| const isTrigger = getItems().some((item) => item.ref.current?.contains(target)); | ||
| const isRootViewport = context.isRootMenu && context.viewport?.contains(target); | ||
| if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault(); | ||
| }), | ||
| onKeyDown: $6jHCS$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{ | ||
| const isMetaKey = event.altKey || event.ctrlKey || event.metaKey; | ||
| const isTabKey = event.key === 'Tab' && !isMetaKey; | ||
| if (isTabKey) { | ||
| const candidates = $7f73b938b73b5118$var$getTabbableCandidates(event.currentTarget); | ||
| const focusedElement = document.activeElement; | ||
| const index = candidates.findIndex((candidate)=>candidate === focusedElement | ||
| ); | ||
| const isMovingBackwards = event.shiftKey; | ||
| const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length); | ||
| if ($7f73b938b73b5118$var$focusFirst(nextCandidates)) // prevent browser tab keydown because we've handled focus | ||
| event.preventDefault(); | ||
| else { | ||
| var _focusProxyRef$curren; | ||
| // If we can't focus that means we're at the edges | ||
| // so focus the proxy and let browser handle | ||
| // tab/shift+tab keypress on the proxy instead | ||
| (_focusProxyRef$curren = focusProxyRef.current) === null || _focusProxyRef$curren === void 0 || _focusProxyRef$curren.focus(); | ||
| } | ||
| onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { | ||
| const isMetaKey = event.altKey || event.ctrlKey || event.metaKey; | ||
| const isTabKey = event.key === "Tab" && !isMetaKey; | ||
| if (isTabKey) { | ||
| const candidates = getTabbableCandidates(event.currentTarget); | ||
| const focusedElement = document.activeElement; | ||
| const index = candidates.findIndex((candidate) => candidate === focusedElement); | ||
| const isMovingBackwards = event.shiftKey; | ||
| const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length); | ||
| if (focusFirst(nextCandidates)) { | ||
| event.preventDefault(); | ||
| } else { | ||
| focusProxyRef.current?.focus(); | ||
| } | ||
| } | ||
| }), | ||
| onEscapeKeyDown: $6jHCS$radixuiprimitive.composeEventHandlers(props.onEscapeKeyDown, (event)=>{ | ||
| // prevent the dropdown from reopening | ||
| // after the escape key has been pressed | ||
| wasEscapeCloseRef.current = true; | ||
| onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(props.onEscapeKeyDown, (event) => { | ||
| wasEscapeCloseRef.current = true; | ||
| }) | ||
| }))); | ||
| }); | ||
| /* ------------------------------------------------------------------------------------------------- | ||
| * NavigationMenuViewport | ||
| * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$VIEWPORT_NAME = 'NavigationMenuViewport'; | ||
| const $7f73b938b73b5118$export$ee880b97cc6d44a5 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { forceMount: forceMount , ...viewportProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$VIEWPORT_NAME, props.__scopeNavigationMenu); | ||
| } | ||
| ) }); | ||
| }); | ||
| var VIEWPORT_NAME = "NavigationMenuViewport"; | ||
| var NavigationMenuViewport = React.forwardRef((props, forwardedRef) => { | ||
| const { forceMount, ...viewportProps } = props; | ||
| const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu); | ||
| const open = Boolean(context.value); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactpresence.Presence, { | ||
| present: forceMount || open | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuViewportImpl, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, viewportProps, { | ||
| ref: forwardedRef | ||
| }))); | ||
| }); | ||
| /*#__PURE__*/ Object.assign($7f73b938b73b5118$export$ee880b97cc6d44a5, { | ||
| displayName: $7f73b938b73b5118$var$VIEWPORT_NAME | ||
| }); | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$NavigationMenuViewportImpl = /*#__PURE__*/ $6jHCS$react.forwardRef((props1, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , children: children , ...viewportImplProps } = props1; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$VIEWPORT_NAME, __scopeNavigationMenu); | ||
| const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.onViewportChange); | ||
| const viewportContentContext = $7f73b938b73b5118$var$useViewportContentContext($7f73b938b73b5118$var$CONTENT_NAME, props1.__scopeNavigationMenu); | ||
| const [size, setSize] = $6jHCS$react.useState(null); | ||
| const [content, setContent] = $6jHCS$react.useState(null); | ||
| const viewportWidth = size ? (size === null || size === void 0 ? void 0 : size.width) + 'px' : undefined; | ||
| const viewportHeight = size ? (size === null || size === void 0 ? void 0 : size.height) + 'px' : undefined; | ||
| const open = Boolean(context.value); // We persist the last active content value as the viewport may be animating out | ||
| // and we want the content to remain mounted for the lifecycle of the viewport. | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuViewportImpl, { ...viewportProps, ref: forwardedRef }) }); | ||
| }); | ||
| NavigationMenuViewport.displayName = VIEWPORT_NAME; | ||
| var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, children, ...viewportImplProps } = props; | ||
| const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu); | ||
| const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.onViewportChange); | ||
| const viewportContentContext = useViewportContentContext( | ||
| CONTENT_NAME, | ||
| props.__scopeNavigationMenu | ||
| ); | ||
| const [size, setSize] = React.useState(null); | ||
| const [content, setContent] = React.useState(null); | ||
| const viewportWidth = size ? size?.width + "px" : void 0; | ||
| const viewportHeight = size ? size?.height + "px" : void 0; | ||
| const open = Boolean(context.value); | ||
| const activeContentValue = open ? context.value : context.previousValue; | ||
| /** | ||
| * Update viewport size to match the active content node. | ||
| * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform. | ||
| * For example, if content animates in from `scale(0.5)` the dimensions would be anything | ||
| * from `0.5` to `1` of the intended size. | ||
| */ const handleSizeChange = ()=>{ | ||
| if (content) setSize({ | ||
| width: content.offsetWidth, | ||
| height: content.offsetHeight | ||
| }); | ||
| const handleSizeChange = () => { | ||
| if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight }); | ||
| }; | ||
| $7f73b938b73b5118$var$useResizeObserver(content, handleSizeChange); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| "data-state": $7f73b938b73b5118$var$getOpenState(open), | ||
| "data-orientation": context.orientation | ||
| }, viewportImplProps, { | ||
| useResizeObserver(content, handleSizeChange); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_primitive.Primitive.div, | ||
| { | ||
| "data-state": getOpenState(open), | ||
| "data-orientation": context.orientation, | ||
| ...viewportImplProps, | ||
| ref: composedRefs, | ||
| style: { | ||
| // Prevent interaction when animating out | ||
| pointerEvents: !open && context.isRootMenu ? 'none' : undefined, | ||
| ['--radix-navigation-menu-viewport-width']: viewportWidth, | ||
| ['--radix-navigation-menu-viewport-height']: viewportHeight, | ||
| ...viewportImplProps.style | ||
| // Prevent interaction when animating out | ||
| pointerEvents: !open && context.isRootMenu ? "none" : void 0, | ||
| ["--radix-navigation-menu-viewport-width"]: viewportWidth, | ||
| ["--radix-navigation-menu-viewport-height"]: viewportHeight, | ||
| ...viewportImplProps.style | ||
| }, | ||
| onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props1.onPointerEnter, context.onContentEnter), | ||
| onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props1.onPointerLeave, $7f73b938b73b5118$var$whenMouse(context.onContentLeave)) | ||
| }), Array.from(viewportContentContext.items).map(([value, { ref: ref , forceMount: forceMount , ...props }])=>{ | ||
| const isActive = activeContentValue === value; | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactpresence.Presence, { | ||
| key: value, | ||
| present: forceMount || isActive | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuContentImpl, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, props, { | ||
| ref: $6jHCS$radixuireactcomposerefs.composeRefs(ref, (node)=>{ | ||
| // We only want to update the stored node when another is available | ||
| // as we need to smoothly transition between them. | ||
| onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter), | ||
| onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, whenMouse(context.onContentLeave)), | ||
| children: Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props2 }]) => { | ||
| const isActive = activeContentValue === value; | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isActive, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| NavigationMenuContentImpl, | ||
| { | ||
| ...props2, | ||
| ref: (0, import_react_compose_refs.composeRefs)(ref, (node) => { | ||
| if (isActive && node) setContent(node); | ||
| }) | ||
| }))); | ||
| })); | ||
| }); | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$FOCUS_GROUP_NAME = 'FocusGroup'; | ||
| const $7f73b938b73b5118$var$FocusGroup = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , ...groupProps } = props; | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$FOCUS_GROUP_NAME, __scopeNavigationMenu); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupCollection.Provider, { | ||
| scope: __scopeNavigationMenu | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupCollection.Slot, { | ||
| scope: __scopeNavigationMenu | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({ | ||
| dir: context.dir | ||
| }, groupProps, { | ||
| ref: forwardedRef | ||
| })))); | ||
| }); | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ARROW_KEYS = [ | ||
| 'ArrowRight', | ||
| 'ArrowLeft', | ||
| 'ArrowUp', | ||
| 'ArrowDown' | ||
| ]; | ||
| const $7f73b938b73b5118$var$FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem'; | ||
| const $7f73b938b73b5118$var$FocusGroupItem = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{ | ||
| const { __scopeNavigationMenu: __scopeNavigationMenu , ...groupProps } = props; | ||
| const getItems = $7f73b938b73b5118$var$useFocusGroupCollection(__scopeNavigationMenu); | ||
| const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu); | ||
| return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$FocusGroupCollection.ItemSlot, { | ||
| scope: __scopeNavigationMenu | ||
| }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({}, groupProps, { | ||
| ref: forwardedRef, | ||
| onKeyDown: $6jHCS$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{ | ||
| const isFocusNavigationKey = [ | ||
| 'Home', | ||
| 'End', | ||
| ...$7f73b938b73b5118$var$ARROW_KEYS | ||
| ].includes(event.key); | ||
| }) | ||
| } | ||
| ) }, value); | ||
| }) | ||
| } | ||
| ); | ||
| }); | ||
| var FOCUS_GROUP_NAME = "FocusGroup"; | ||
| var FocusGroup = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, ...groupProps } = props; | ||
| const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Provider, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Slot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { dir: context.dir, ...groupProps, ref: forwardedRef }) }) }); | ||
| } | ||
| ); | ||
| var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"]; | ||
| var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem"; | ||
| var FocusGroupItem = React.forwardRef( | ||
| (props, forwardedRef) => { | ||
| const { __scopeNavigationMenu, ...groupProps } = props; | ||
| const getItems = useFocusGroupCollection(__scopeNavigationMenu); | ||
| const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu); | ||
| return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.ItemSlot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
| import_react_primitive.Primitive.button, | ||
| { | ||
| ...groupProps, | ||
| ref: forwardedRef, | ||
| onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { | ||
| const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key); | ||
| if (isFocusNavigationKey) { | ||
| let candidateNodes = getItems().map((item)=>item.ref.current | ||
| ); | ||
| const prevItemKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'; | ||
| const prevKeys = [ | ||
| prevItemKey, | ||
| 'ArrowUp', | ||
| 'End' | ||
| ]; | ||
| if (prevKeys.includes(event.key)) candidateNodes.reverse(); | ||
| if ($7f73b938b73b5118$var$ARROW_KEYS.includes(event.key)) { | ||
| const currentIndex = candidateNodes.indexOf(event.currentTarget); | ||
| candidateNodes = candidateNodes.slice(currentIndex + 1); | ||
| } | ||
| /** | ||
| * Imperative focus during keydown is risky so we prevent React's batching updates | ||
| * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332 | ||
| */ setTimeout(()=>$7f73b938b73b5118$var$focusFirst(candidateNodes) | ||
| ); // Prevent page scroll while navigating | ||
| event.preventDefault(); | ||
| let candidateNodes = getItems().map((item) => item.ref.current); | ||
| const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft"; | ||
| const prevKeys = [prevItemKey, "ArrowUp", "End"]; | ||
| if (prevKeys.includes(event.key)) candidateNodes.reverse(); | ||
| if (ARROW_KEYS.includes(event.key)) { | ||
| const currentIndex = candidateNodes.indexOf(event.currentTarget); | ||
| candidateNodes = candidateNodes.slice(currentIndex + 1); | ||
| } | ||
| setTimeout(() => focusFirst(candidateNodes)); | ||
| event.preventDefault(); | ||
| } | ||
| }) | ||
| }))); | ||
| }); | ||
| /** | ||
| * Returns a list of potential tabbable candidates. | ||
| * | ||
| * NOTE: This is only a close approximation. For example it doesn't take into account cases like when | ||
| * elements are not visible. This cannot be worked out easily by just reading a property, but rather | ||
| * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately. | ||
| * | ||
| * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker | ||
| * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1 | ||
| */ function $7f73b938b73b5118$var$getTabbableCandidates(container) { | ||
| }) | ||
| } | ||
| ) }); | ||
| } | ||
| ); | ||
| function getTabbableCandidates(container) { | ||
| const nodes = []; | ||
| const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode: (node)=>{ | ||
| const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'; | ||
| if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the | ||
| // runtime's understanding of tabbability, so this automatically accounts | ||
| // for any kind of element that could be tabbed to. | ||
| return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; | ||
| } | ||
| acceptNode: (node) => { | ||
| const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden"; | ||
| if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; | ||
| return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; | ||
| } | ||
| }); | ||
| while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it | ||
| // hinders accessibility to have tab order different from visual order. | ||
| while (walker.nextNode()) nodes.push(walker.currentNode); | ||
| return nodes; | ||
| } | ||
| function $7f73b938b73b5118$var$focusFirst(candidates) { | ||
| } | ||
| function focusFirst(candidates) { | ||
| const previouslyFocusedElement = document.activeElement; | ||
| return candidates.some((candidate)=>{ | ||
| // if focus is already where we want to go, we don't want to keep going through the candidates | ||
| if (candidate === previouslyFocusedElement) return true; | ||
| candidate.focus(); | ||
| return document.activeElement !== previouslyFocusedElement; | ||
| return candidates.some((candidate) => { | ||
| if (candidate === previouslyFocusedElement) return true; | ||
| candidate.focus(); | ||
| return document.activeElement !== previouslyFocusedElement; | ||
| }); | ||
| } | ||
| function $7f73b938b73b5118$var$removeFromTabOrder(candidates) { | ||
| candidates.forEach((candidate)=>{ | ||
| candidate.dataset.tabindex = candidate.getAttribute('tabindex') || ''; | ||
| candidate.setAttribute('tabindex', '-1'); | ||
| } | ||
| function removeFromTabOrder(candidates) { | ||
| candidates.forEach((candidate) => { | ||
| candidate.dataset.tabindex = candidate.getAttribute("tabindex") || ""; | ||
| candidate.setAttribute("tabindex", "-1"); | ||
| }); | ||
| return ()=>{ | ||
| candidates.forEach((candidate)=>{ | ||
| const prevTabIndex = candidate.dataset.tabindex; | ||
| candidate.setAttribute('tabindex', prevTabIndex); | ||
| return () => { | ||
| candidates.forEach((candidate) => { | ||
| const prevTabIndex = candidate.dataset.tabindex; | ||
| candidate.setAttribute("tabindex", prevTabIndex); | ||
| }); | ||
| }; | ||
| } | ||
| function useResizeObserver(element, onResize) { | ||
| const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize); | ||
| (0, import_react_use_layout_effect.useLayoutEffect)(() => { | ||
| let rAF = 0; | ||
| if (element) { | ||
| const resizeObserver = new ResizeObserver(() => { | ||
| cancelAnimationFrame(rAF); | ||
| rAF = window.requestAnimationFrame(handleResize); | ||
| }); | ||
| }; | ||
| } | ||
| function $7f73b938b73b5118$var$useResizeObserver(element, onResize) { | ||
| const handleResize = $6jHCS$radixuireactusecallbackref.useCallbackRef(onResize); | ||
| $6jHCS$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
| let rAF = 0; | ||
| if (element) { | ||
| /** | ||
| * Resize Observer will throw an often benign error that says `ResizeObserver loop | ||
| * completed with undelivered notifications`. This means that ResizeObserver was not | ||
| * able to deliver all observations within a single animation frame, so we use | ||
| * `requestAnimationFrame` to ensure we don't deliver unnecessary observations. | ||
| * Further reading: https://github.com/WICG/resize-observer/issues/38 | ||
| */ const resizeObserver = new ResizeObserver(()=>{ | ||
| cancelAnimationFrame(rAF); | ||
| rAF = window.requestAnimationFrame(handleResize); | ||
| }); | ||
| resizeObserver.observe(element); | ||
| return ()=>{ | ||
| window.cancelAnimationFrame(rAF); | ||
| resizeObserver.unobserve(element); | ||
| }; | ||
| } | ||
| }, [ | ||
| element, | ||
| handleResize | ||
| ]); | ||
| } | ||
| function $7f73b938b73b5118$var$getOpenState(open) { | ||
| return open ? 'open' : 'closed'; | ||
| } | ||
| function $7f73b938b73b5118$var$makeTriggerId(baseId, value) { | ||
| resizeObserver.observe(element); | ||
| return () => { | ||
| window.cancelAnimationFrame(rAF); | ||
| resizeObserver.unobserve(element); | ||
| }; | ||
| } | ||
| }, [element, handleResize]); | ||
| } | ||
| function getOpenState(open) { | ||
| return open ? "open" : "closed"; | ||
| } | ||
| function makeTriggerId(baseId, value) { | ||
| return `${baseId}-trigger-${value}`; | ||
| } | ||
| function $7f73b938b73b5118$var$makeContentId(baseId, value) { | ||
| } | ||
| function makeContentId(baseId, value) { | ||
| return `${baseId}-content-${value}`; | ||
| } | ||
| function $7f73b938b73b5118$var$whenMouse(handler) { | ||
| return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined | ||
| ; | ||
| } | ||
| /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$export$be92b6f5f03c0fe9 = $7f73b938b73b5118$export$5b2278cf1e8bcae2; | ||
| const $7f73b938b73b5118$export$d7a01e11500dfb6f = $7f73b938b73b5118$export$5958edd6c4ee7c79; | ||
| const $7f73b938b73b5118$export$54c2e3dc7acea9f5 = $7f73b938b73b5118$export$c361068a95fd2286; | ||
| const $7f73b938b73b5118$export$6d08773d2e66f8f2 = $7f73b938b73b5118$export$ffdbb83a2de845c2; | ||
| const $7f73b938b73b5118$export$41fb9f06171c75f4 = $7f73b938b73b5118$export$37fe8002734d8f2; | ||
| const $7f73b938b73b5118$export$a6c7ac8248d6e38a = $7f73b938b73b5118$export$6893bf21536567da; | ||
| const $7f73b938b73b5118$export$adb584737d712b70 = $7f73b938b73b5118$export$8ddb526647c0d8fb; | ||
| const $7f73b938b73b5118$export$7c6e2c02157bb7d2 = $7f73b938b73b5118$export$38e00e996c2f93f7; | ||
| const $7f73b938b73b5118$export$d5c6c08dc2d3ca7 = $7f73b938b73b5118$export$ee880b97cc6d44a5; | ||
| } | ||
| function whenMouse(handler) { | ||
| return (event) => event.pointerType === "mouse" ? handler(event) : void 0; | ||
| } | ||
| var Root2 = NavigationMenu; | ||
| var Sub = NavigationMenuSub; | ||
| var List = NavigationMenuList; | ||
| var Item = NavigationMenuItem; | ||
| var Trigger = NavigationMenuTrigger; | ||
| var Link = NavigationMenuLink; | ||
| var Indicator = NavigationMenuIndicator; | ||
| var Content = NavigationMenuContent; | ||
| var Viewport = NavigationMenuViewport; | ||
| })(); | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@radix-ui/react-navigation-menu", | ||
| "version": "1.1.5-rc.10", | ||
| "version": "1.2.0-rc.1", | ||
| "license": "MIT", | ||
@@ -31,17 +31,16 @@ "exports": { | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.13.10", | ||
| "@radix-ui/primitive": "1.0.1", | ||
| "@radix-ui/react-collection": "1.0.3", | ||
| "@radix-ui/react-compose-refs": "1.0.1", | ||
| "@radix-ui/react-context": "1.0.1", | ||
| "@radix-ui/react-direction": "1.0.1", | ||
| "@radix-ui/react-dismissable-layer": "1.0.6-rc.6", | ||
| "@radix-ui/react-id": "1.0.1", | ||
| "@radix-ui/react-presence": "1.0.1", | ||
| "@radix-ui/react-primitive": "1.0.3", | ||
| "@radix-ui/react-use-callback-ref": "1.0.1", | ||
| "@radix-ui/react-use-controllable-state": "1.0.1", | ||
| "@radix-ui/react-use-layout-effect": "1.0.1", | ||
| "@radix-ui/react-use-previous": "1.0.1", | ||
| "@radix-ui/react-visually-hidden": "1.0.3" | ||
| "@radix-ui/primitive": "1.1.0-rc.1", | ||
| "@radix-ui/react-collection": "1.1.0-rc.1", | ||
| "@radix-ui/react-compose-refs": "1.1.0-rc.1", | ||
| "@radix-ui/react-context": "1.1.0-rc.1", | ||
| "@radix-ui/react-direction": "1.1.0-rc.1", | ||
| "@radix-ui/react-dismissable-layer": "1.1.0-rc.1", | ||
| "@radix-ui/react-id": "1.1.0-rc.1", | ||
| "@radix-ui/react-presence": "1.1.0-rc.1", | ||
| "@radix-ui/react-primitive": "1.1.0-rc.1", | ||
| "@radix-ui/react-use-callback-ref": "1.1.0-rc.1", | ||
| "@radix-ui/react-use-controllable-state": "1.1.0-rc.1", | ||
| "@radix-ui/react-use-layout-effect": "1.1.0-rc.1", | ||
| "@radix-ui/react-use-previous": "1.1.0-rc.1", | ||
| "@radix-ui/react-visually-hidden": "1.1.0-rc.1" | ||
| }, | ||
@@ -48,0 +47,0 @@ "peerDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-5.26%
18
Worsened metrics
- Total package byte prevSize
- decreased by-25.62%
225769
- Number of package files
- decreased by-11.11%
8
- Lines of code
- decreased by-6.2%
1754
- Number of low supply chain risk alerts
- increased byInfinity%
3
Dependency changes
+ Added@radix-ui/primitive@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-collection@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-compose-refs@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-context@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-direction@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-dismissable-layer@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-id@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-presence@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-primitive@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-slot@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-use-callback-ref@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-use-controllable-state@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-use-escape-keydown@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-use-layout-effect@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-use-previous@1.1.0-rc.1(transitive)
+ Added@radix-ui/react-visually-hidden@1.1.0-rc.1(transitive)
- Removed@babel/runtime@^7.13.10
- Removed@babel/runtime@7.25.6(transitive)
- Removed@radix-ui/primitive@1.0.1(transitive)
- Removed@radix-ui/react-collection@1.0.3(transitive)
- Removed@radix-ui/react-compose-refs@1.0.1(transitive)
- Removed@radix-ui/react-context@1.0.1(transitive)
- Removed@radix-ui/react-direction@1.0.1(transitive)
- Removed@radix-ui/react-dismissable-layer@1.0.6-rc.6(transitive)
- Removed@radix-ui/react-id@1.0.1(transitive)
- Removed@radix-ui/react-presence@1.0.1(transitive)
- Removed@radix-ui/react-primitive@1.0.3(transitive)
- Removed@radix-ui/react-slot@1.0.2(transitive)
- Removed@radix-ui/react-use-callback-ref@1.0.1(transitive)
- Removed@radix-ui/react-use-controllable-state@1.0.1(transitive)
- Removed@radix-ui/react-use-escape-keydown@1.0.4-rc.6(transitive)
- Removed@radix-ui/react-use-layout-effect@1.0.1(transitive)
- Removed@radix-ui/react-use-previous@1.0.1(transitive)
- Removed@radix-ui/react-visually-hidden@1.0.3(transitive)
- Removedregenerator-runtime@0.14.1(transitive)