@radix-ui/react-navigation-menu
Advanced tools
+16
-52
@@ -8,17 +8,4 @@ import * as _radix_ui_react_context from '@radix-ui/react-context'; | ||
| declare const Orientation: { | ||
| readonly Vertical: "vertical"; | ||
| readonly Horizontal: "horizontal"; | ||
| }; | ||
| type Orientation = (typeof Orientation)[keyof typeof Orientation]; | ||
| declare const Direction: { | ||
| readonly LTR: "ltr"; | ||
| readonly RTL: "rtl"; | ||
| }; | ||
| type Direction = (typeof Direction)[keyof typeof Direction]; | ||
| declare const ActivationMode: { | ||
| readonly Automatic: "automatic"; | ||
| readonly Manual: "manual"; | ||
| }; | ||
| type ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode]; | ||
| type Orientation = 'vertical' | 'horizontal'; | ||
| type Direction = 'ltr' | 'rtl'; | ||
| declare const createNavigationMenuScope: _radix_ui_react_context.CreateScope; | ||
@@ -34,24 +21,11 @@ type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>; | ||
| /** | ||
| * The duration from when the pointer enters the trigger until the tooltip | ||
| * gets opened. When `activationMode` is `manual`, this prop is ignored. | ||
| * | ||
| * @default 200 | ||
| * The duration from when the pointer enters the trigger until the tooltip gets opened. | ||
| * @defaultValue 200 | ||
| */ | ||
| delayDuration?: number; | ||
| /** | ||
| * How much time a user has to enter another trigger without incurring a delay | ||
| * again. When `activationMode` is `manual`, this prop is ignored. | ||
| * | ||
| * @default 300 | ||
| * How much time a user has to enter another trigger without incurring a delay again. | ||
| * @defaultValue 300 | ||
| */ | ||
| skipDelayDuration?: number; | ||
| /** | ||
| * Whether an item is activated automatically or manually. | ||
| * - `"automatic"`: hovering or focusing a trigger opens its item, and moving | ||
| * away closes it after a short delay. | ||
| * - `"manual"`: clicking a trigger toggles the item; hover and focus are ignored | ||
| * | ||
| * @default "automatic" | ||
| */ | ||
| activationMode?: ActivationMode; | ||
| } | ||
@@ -65,20 +39,2 @@ declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>; | ||
| orientation?: Orientation; | ||
| /** | ||
| * Whether an item is activated automatically or manually. | ||
| * - `"automatic"`: hovering or focusing a trigger opens its item, and moving | ||
| * away closes it after a short delay. | ||
| * - `"manual"`: clicking a trigger toggles the item; hover and focus are | ||
| * ignored | ||
| * | ||
| * The default value is inherited from the parent Navigation Menu root | ||
| * component. If no value is provided to the parent, the default value is | ||
| * `"automatic"`. | ||
| */ | ||
| activationMode?: ActivationMode; | ||
| /** | ||
| * When true, clicking a sub-menu item's trigger once it's active will not deactivate it. | ||
| * | ||
| * @default true | ||
| */ | ||
| disableToggle?: boolean; | ||
| } | ||
@@ -92,3 +48,2 @@ declare const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>; | ||
| dir: Direction; | ||
| activationMode: ActivationMode; | ||
| rootNavigationMenu: NavigationMenuElement | null; | ||
@@ -165,3 +120,12 @@ value: string; | ||
| } | ||
| 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>>; | ||
| export { NavigationMenuContent as Content, NavigationMenuIndicator as Indicator, NavigationMenuItem as Item, NavigationMenuLink as Link, NavigationMenuList as 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, NavigationMenu as Root, NavigationMenuSub as Sub, NavigationMenuTrigger as Trigger, NavigationMenuViewport as Viewport, createNavigationMenuScope }; | ||
| 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 }; |
+16
-52
@@ -8,17 +8,4 @@ import * as _radix_ui_react_context from '@radix-ui/react-context'; | ||
| declare const Orientation: { | ||
| readonly Vertical: "vertical"; | ||
| readonly Horizontal: "horizontal"; | ||
| }; | ||
| type Orientation = (typeof Orientation)[keyof typeof Orientation]; | ||
| declare const Direction: { | ||
| readonly LTR: "ltr"; | ||
| readonly RTL: "rtl"; | ||
| }; | ||
| type Direction = (typeof Direction)[keyof typeof Direction]; | ||
| declare const ActivationMode: { | ||
| readonly Automatic: "automatic"; | ||
| readonly Manual: "manual"; | ||
| }; | ||
| type ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode]; | ||
| type Orientation = 'vertical' | 'horizontal'; | ||
| type Direction = 'ltr' | 'rtl'; | ||
| declare const createNavigationMenuScope: _radix_ui_react_context.CreateScope; | ||
@@ -34,24 +21,11 @@ type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>; | ||
| /** | ||
| * The duration from when the pointer enters the trigger until the tooltip | ||
| * gets opened. When `activationMode` is `manual`, this prop is ignored. | ||
| * | ||
| * @default 200 | ||
| * The duration from when the pointer enters the trigger until the tooltip gets opened. | ||
| * @defaultValue 200 | ||
| */ | ||
| delayDuration?: number; | ||
| /** | ||
| * How much time a user has to enter another trigger without incurring a delay | ||
| * again. When `activationMode` is `manual`, this prop is ignored. | ||
| * | ||
| * @default 300 | ||
| * How much time a user has to enter another trigger without incurring a delay again. | ||
| * @defaultValue 300 | ||
| */ | ||
| skipDelayDuration?: number; | ||
| /** | ||
| * Whether an item is activated automatically or manually. | ||
| * - `"automatic"`: hovering or focusing a trigger opens its item, and moving | ||
| * away closes it after a short delay. | ||
| * - `"manual"`: clicking a trigger toggles the item; hover and focus are ignored | ||
| * | ||
| * @default "automatic" | ||
| */ | ||
| activationMode?: ActivationMode; | ||
| } | ||
@@ -65,20 +39,2 @@ declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>; | ||
| orientation?: Orientation; | ||
| /** | ||
| * Whether an item is activated automatically or manually. | ||
| * - `"automatic"`: hovering or focusing a trigger opens its item, and moving | ||
| * away closes it after a short delay. | ||
| * - `"manual"`: clicking a trigger toggles the item; hover and focus are | ||
| * ignored | ||
| * | ||
| * The default value is inherited from the parent Navigation Menu root | ||
| * component. If no value is provided to the parent, the default value is | ||
| * `"automatic"`. | ||
| */ | ||
| activationMode?: ActivationMode; | ||
| /** | ||
| * When true, clicking a sub-menu item's trigger once it's active will not deactivate it. | ||
| * | ||
| * @default true | ||
| */ | ||
| disableToggle?: boolean; | ||
| } | ||
@@ -92,3 +48,2 @@ declare const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>; | ||
| dir: Direction; | ||
| activationMode: ActivationMode; | ||
| rootNavigationMenu: NavigationMenuElement | null; | ||
@@ -165,3 +120,12 @@ value: string; | ||
| } | ||
| 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>>; | ||
| export { NavigationMenuContent as Content, NavigationMenuIndicator as Indicator, NavigationMenuItem as Item, NavigationMenuLink as Link, NavigationMenuList as 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, NavigationMenu as Root, NavigationMenuSub as Sub, NavigationMenuTrigger as Trigger, NavigationMenuViewport as Viewport, createNavigationMenuScope }; | ||
| 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 }; |
+34
-71
@@ -35,7 +35,7 @@ "use strict"; | ||
| __export(index_exports, { | ||
| Content: () => NavigationMenuContent, | ||
| Indicator: () => NavigationMenuIndicator, | ||
| Item: () => NavigationMenuItem, | ||
| Link: () => NavigationMenuLink, | ||
| List: () => NavigationMenuList, | ||
| Content: () => Content, | ||
| Indicator: () => Indicator, | ||
| Item: () => Item, | ||
| Link: () => Link, | ||
| List: () => List, | ||
| NavigationMenu: () => NavigationMenu, | ||
@@ -50,6 +50,6 @@ NavigationMenuContent: () => NavigationMenuContent, | ||
| NavigationMenuViewport: () => NavigationMenuViewport, | ||
| Root: () => NavigationMenu, | ||
| Sub: () => NavigationMenuSub, | ||
| Trigger: () => NavigationMenuTrigger, | ||
| Viewport: () => NavigationMenuViewport, | ||
| Root: () => Root2, | ||
| Sub: () => Sub, | ||
| Trigger: () => Trigger, | ||
| Viewport: () => Viewport, | ||
| createNavigationMenuScope: () => createNavigationMenuScope | ||
@@ -77,14 +77,2 @@ }); | ||
| var import_jsx_runtime = require("react/jsx-runtime"); | ||
| var ActivationMode = { | ||
| Automatic: "automatic", | ||
| Manual: "manual" | ||
| }; | ||
| var Orientation = { | ||
| Vertical: "vertical", | ||
| Horizontal: "horizontal" | ||
| }; | ||
| var Direction = { | ||
| LTR: "ltr", | ||
| RTL: "rtl" | ||
| }; | ||
| var NAVIGATION_MENU_NAME = "NavigationMenu"; | ||
@@ -108,5 +96,4 @@ var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME); | ||
| skipDelayDuration = 300, | ||
| orientation = Orientation.Horizontal, | ||
| orientation = "horizontal", | ||
| dir, | ||
| activationMode = ActivationMode.Automatic, | ||
| ...NavigationMenuProps | ||
@@ -181,30 +168,14 @@ } = props; | ||
| orientation, | ||
| activationMode, | ||
| rootNavigationMenu: navigationMenu, | ||
| onTriggerEnter: (itemValue) => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| window.clearTimeout(openTimerRef.current); | ||
| if (isOpenDelayed) { | ||
| handleDelayedOpen(itemValue); | ||
| } else { | ||
| handleOpen(itemValue); | ||
| } | ||
| } | ||
| window.clearTimeout(openTimerRef.current); | ||
| if (isOpenDelayed) handleDelayedOpen(itemValue); | ||
| else handleOpen(itemValue); | ||
| }, | ||
| onTriggerLeave: () => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| window.clearTimeout(openTimerRef.current); | ||
| startCloseTimer(); | ||
| } | ||
| window.clearTimeout(openTimerRef.current); | ||
| startCloseTimer(); | ||
| }, | ||
| onContentEnter: () => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| window.clearTimeout(closeTimerRef.current); | ||
| } | ||
| }, | ||
| onContentLeave: () => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| startCloseTimer(); | ||
| } | ||
| }, | ||
| onContentEnter: () => window.clearTimeout(closeTimerRef.current), | ||
| onContentLeave: startCloseTimer, | ||
| onItemSelect: (itemValue) => { | ||
@@ -237,9 +208,6 @@ setValue((prevValue) => prevValue === itemValue ? "" : itemValue); | ||
| defaultValue, | ||
| orientation = Orientation.Horizontal, | ||
| activationMode: activationModeProp, | ||
| disableToggle = true, | ||
| orientation = "horizontal", | ||
| ...subProps | ||
| } = props; | ||
| const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu); | ||
| const activationMode = activationModeProp ?? context.activationMode; | ||
| const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({ | ||
@@ -259,12 +227,5 @@ prop: valueProp, | ||
| orientation, | ||
| activationMode, | ||
| rootNavigationMenu: context.rootNavigationMenu, | ||
| onTriggerEnter: (itemValue) => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| setValue(itemValue); | ||
| } | ||
| }, | ||
| onItemSelect: (itemValue) => { | ||
| setValue((prevValue) => disableToggle || prevValue !== itemValue ? itemValue : ""); | ||
| }, | ||
| onTriggerEnter: (itemValue) => setValue(itemValue), | ||
| onItemSelect: (itemValue) => setValue(itemValue), | ||
| onItemDismiss: () => setValue(""), | ||
@@ -283,3 +244,2 @@ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef }) | ||
| orientation, | ||
| activationMode, | ||
| children, | ||
@@ -308,3 +268,2 @@ value, | ||
| orientation, | ||
| activationMode, | ||
| viewport, | ||
@@ -442,3 +401,3 @@ onViewportChange: setViewport, | ||
| onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { | ||
| const verticalEntryKey = context.dir === Direction.RTL ? "ArrowLeft" : "ArrowRight"; | ||
| const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight"; | ||
| const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation]; | ||
@@ -528,3 +487,3 @@ if (open && event.key === entryKey) { | ||
| const [position, setPosition] = React.useState(null); | ||
| const isHorizontal = context.orientation === Orientation.Horizontal; | ||
| const isHorizontal = context.orientation === "horizontal"; | ||
| const isVisible = Boolean(context.value); | ||
@@ -656,3 +615,3 @@ React.useEffect(() => { | ||
| const values = items.map((item) => item.value); | ||
| if (context.dir === Direction.RTL) values.reverse(); | ||
| if (context.dir === "rtl") values.reverse(); | ||
| const index = values.indexOf(context.value); | ||
@@ -693,8 +652,3 @@ const prevIndex = values.indexOf(context.previousValue); | ||
| const target = event.target; | ||
| const relatedTarget = event.detail.originalEvent.relatedTarget; | ||
| const focusMovedIntoMenu = context.rootNavigationMenu?.contains(target); | ||
| const focusCameFromMenu = context.rootNavigationMenu?.contains(relatedTarget); | ||
| if (focusMovedIntoMenu || !focusCameFromMenu) { | ||
| event.preventDefault(); | ||
| } | ||
| if (context.rootNavigationMenu?.contains(target)) event.preventDefault(); | ||
| }), | ||
@@ -826,3 +780,3 @@ onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => { | ||
| let candidateNodes = getItems().map((item) => item.ref.current); | ||
| const prevItemKey = context.dir === Direction.RTL ? "ArrowRight" : "ArrowLeft"; | ||
| const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft"; | ||
| const prevKeys = [prevItemKey, "ArrowUp", "End"]; | ||
@@ -911,2 +865,11 @@ if (prevKeys.includes(event.key)) candidateNodes.reverse(); | ||
| __name(whenMouse, "whenMouse"); | ||
| 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 |
+34
-71
@@ -23,14 +23,2 @@ "use client"; | ||
| import { Fragment, jsx, jsxs } from "react/jsx-runtime"; | ||
| var ActivationMode = { | ||
| Automatic: "automatic", | ||
| Manual: "manual" | ||
| }; | ||
| var Orientation = { | ||
| Vertical: "vertical", | ||
| Horizontal: "horizontal" | ||
| }; | ||
| var Direction = { | ||
| LTR: "ltr", | ||
| RTL: "rtl" | ||
| }; | ||
| var NAVIGATION_MENU_NAME = "NavigationMenu"; | ||
@@ -54,5 +42,4 @@ var [Collection, useCollection, createCollectionScope] = createCollection(NAVIGATION_MENU_NAME); | ||
| skipDelayDuration = 300, | ||
| orientation = Orientation.Horizontal, | ||
| orientation = "horizontal", | ||
| dir, | ||
| activationMode = ActivationMode.Automatic, | ||
| ...NavigationMenuProps | ||
@@ -127,30 +114,14 @@ } = props; | ||
| orientation, | ||
| activationMode, | ||
| rootNavigationMenu: navigationMenu, | ||
| onTriggerEnter: (itemValue) => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| window.clearTimeout(openTimerRef.current); | ||
| if (isOpenDelayed) { | ||
| handleDelayedOpen(itemValue); | ||
| } else { | ||
| handleOpen(itemValue); | ||
| } | ||
| } | ||
| window.clearTimeout(openTimerRef.current); | ||
| if (isOpenDelayed) handleDelayedOpen(itemValue); | ||
| else handleOpen(itemValue); | ||
| }, | ||
| onTriggerLeave: () => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| window.clearTimeout(openTimerRef.current); | ||
| startCloseTimer(); | ||
| } | ||
| window.clearTimeout(openTimerRef.current); | ||
| startCloseTimer(); | ||
| }, | ||
| onContentEnter: () => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| window.clearTimeout(closeTimerRef.current); | ||
| } | ||
| }, | ||
| onContentLeave: () => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| startCloseTimer(); | ||
| } | ||
| }, | ||
| onContentEnter: () => window.clearTimeout(closeTimerRef.current), | ||
| onContentLeave: startCloseTimer, | ||
| onItemSelect: (itemValue) => { | ||
@@ -183,9 +154,6 @@ setValue((prevValue) => prevValue === itemValue ? "" : itemValue); | ||
| defaultValue, | ||
| orientation = Orientation.Horizontal, | ||
| activationMode: activationModeProp, | ||
| disableToggle = true, | ||
| orientation = "horizontal", | ||
| ...subProps | ||
| } = props; | ||
| const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu); | ||
| const activationMode = activationModeProp ?? context.activationMode; | ||
| const [value, setValue] = useControllableState({ | ||
@@ -205,12 +173,5 @@ prop: valueProp, | ||
| orientation, | ||
| activationMode, | ||
| rootNavigationMenu: context.rootNavigationMenu, | ||
| onTriggerEnter: (itemValue) => { | ||
| if (activationMode === ActivationMode.Automatic) { | ||
| setValue(itemValue); | ||
| } | ||
| }, | ||
| onItemSelect: (itemValue) => { | ||
| setValue((prevValue) => disableToggle || prevValue !== itemValue ? itemValue : ""); | ||
| }, | ||
| onTriggerEnter: (itemValue) => setValue(itemValue), | ||
| onItemSelect: (itemValue) => setValue(itemValue), | ||
| onItemDismiss: () => setValue(""), | ||
@@ -229,3 +190,2 @@ children: /* @__PURE__ */ jsx(Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef }) | ||
| orientation, | ||
| activationMode, | ||
| children, | ||
@@ -254,3 +214,2 @@ value, | ||
| orientation, | ||
| activationMode, | ||
| viewport, | ||
@@ -388,3 +347,3 @@ onViewportChange: setViewport, | ||
| onKeyDown: composeEventHandlers(props.onKeyDown, (event) => { | ||
| const verticalEntryKey = context.dir === Direction.RTL ? "ArrowLeft" : "ArrowRight"; | ||
| const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight"; | ||
| const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation]; | ||
@@ -474,3 +433,3 @@ if (open && event.key === entryKey) { | ||
| const [position, setPosition] = React.useState(null); | ||
| const isHorizontal = context.orientation === Orientation.Horizontal; | ||
| const isHorizontal = context.orientation === "horizontal"; | ||
| const isVisible = Boolean(context.value); | ||
@@ -602,3 +561,3 @@ React.useEffect(() => { | ||
| const values = items.map((item) => item.value); | ||
| if (context.dir === Direction.RTL) values.reverse(); | ||
| if (context.dir === "rtl") values.reverse(); | ||
| const index = values.indexOf(context.value); | ||
@@ -639,8 +598,3 @@ const prevIndex = values.indexOf(context.previousValue); | ||
| const target = event.target; | ||
| const relatedTarget = event.detail.originalEvent.relatedTarget; | ||
| const focusMovedIntoMenu = context.rootNavigationMenu?.contains(target); | ||
| const focusCameFromMenu = context.rootNavigationMenu?.contains(relatedTarget); | ||
| if (focusMovedIntoMenu || !focusCameFromMenu) { | ||
| event.preventDefault(); | ||
| } | ||
| if (context.rootNavigationMenu?.contains(target)) event.preventDefault(); | ||
| }), | ||
@@ -772,3 +726,3 @@ onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => { | ||
| let candidateNodes = getItems().map((item) => item.ref.current); | ||
| const prevItemKey = context.dir === Direction.RTL ? "ArrowRight" : "ArrowLeft"; | ||
| const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft"; | ||
| const prevKeys = [prevItemKey, "ArrowUp", "End"]; | ||
@@ -857,8 +811,17 @@ if (prevKeys.includes(event.key)) candidateNodes.reverse(); | ||
| __name(whenMouse, "whenMouse"); | ||
| 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; | ||
| export { | ||
| NavigationMenuContent as Content, | ||
| NavigationMenuIndicator as Indicator, | ||
| NavigationMenuItem as Item, | ||
| NavigationMenuLink as Link, | ||
| NavigationMenuList as List, | ||
| Content, | ||
| Indicator, | ||
| Item, | ||
| Link, | ||
| List, | ||
| NavigationMenu, | ||
@@ -873,8 +836,8 @@ NavigationMenuContent, | ||
| NavigationMenuViewport, | ||
| NavigationMenu as Root, | ||
| NavigationMenuSub as Sub, | ||
| NavigationMenuTrigger as Trigger, | ||
| NavigationMenuViewport as Viewport, | ||
| Root2 as Root, | ||
| Sub, | ||
| Trigger, | ||
| Viewport, | ||
| createNavigationMenuScope | ||
| }; | ||
| //# sourceMappingURL=index.mjs.map |
+20
-20
| { | ||
| "name": "@radix-ui/react-navigation-menu", | ||
| "version": "1.2.21", | ||
| "version": "1.2.22", | ||
| "license": "MIT", | ||
@@ -14,26 +14,26 @@ "source": "./src/index.ts", | ||
| "dependencies": { | ||
| "@radix-ui/react-collection": "1.1.15", | ||
| "@radix-ui/primitive": "1.1.7", | ||
| "@radix-ui/react-compose-refs": "1.1.4", | ||
| "@radix-ui/react-collection": "1.1.14", | ||
| "@radix-ui/react-context": "1.2.1", | ||
| "@radix-ui/react-direction": "1.1.3", | ||
| "@radix-ui/react-dismissable-layer": "1.1.18", | ||
| "@radix-ui/react-primitive": "2.1.9", | ||
| "@radix-ui/react-presence": "1.1.9", | ||
| "@radix-ui/react-use-callback-ref": "1.1.3", | ||
| "@radix-ui/react-use-controllable-state": "1.2.5", | ||
| "@radix-ui/react-use-layout-effect": "1.1.3", | ||
| "@radix-ui/react-use-previous": "1.1.3", | ||
| "@radix-ui/react-id": "1.1.3", | ||
| "@radix-ui/react-visually-hidden": "1.2.10" | ||
| "@radix-ui/react-compose-refs": "1.1.5", | ||
| "@radix-ui/react-direction": "1.1.4", | ||
| "@radix-ui/react-context": "1.2.2", | ||
| "@radix-ui/react-dismissable-layer": "1.1.19", | ||
| "@radix-ui/react-id": "1.1.4", | ||
| "@radix-ui/react-presence": "1.1.10", | ||
| "@radix-ui/react-primitive": "2.1.10", | ||
| "@radix-ui/react-use-layout-effect": "1.1.4", | ||
| "@radix-ui/react-use-controllable-state": "1.2.6", | ||
| "@radix-ui/react-use-previous": "1.1.4", | ||
| "@radix-ui/react-visually-hidden": "1.2.11", | ||
| "@radix-ui/react-use-callback-ref": "1.1.4" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^19.2.17", | ||
| "@types/react-dom": "^19.2.3", | ||
| "react": "^19.2.7", | ||
| "react-dom": "^19.2.7", | ||
| "@types/react": "^19.2.2", | ||
| "@types/react-dom": "^19.2.2", | ||
| "react": "^19.2.0", | ||
| "react-dom": "^19.2.0", | ||
| "typescript": "^5.9.3", | ||
| "@repo/builder": "0.0.0", | ||
| "@repo/test-utils": "0.0.0", | ||
| "@repo/typescript-config": "0.0.0" | ||
| "@repo/typescript-config": "0.0.0", | ||
| "@repo/test-utils": "0.0.0" | ||
| }, | ||
@@ -40,0 +40,0 @@ "peerDependencies": { |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
235750
-4.58%1816
-5.71%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated