diff --git a/.yarn/versions/98967128.yml b/.yarn/versions/98967128.yml new file mode 100644 index 0000000000..e435071de6 --- /dev/null +++ b/.yarn/versions/98967128.yml @@ -0,0 +1,3 @@ +releases: + "@radix-ui/react-navigation-menu": minor + primitives: minor diff --git a/packages/react/navigation-menu/src/NavigationMenu.stories.tsx b/packages/react/navigation-menu/src/NavigationMenu.stories.tsx index e8badc91e2..908ae64c93 100644 --- a/packages/react/navigation-menu/src/NavigationMenu.stories.tsx +++ b/packages/react/navigation-menu/src/NavigationMenu.stories.tsx @@ -86,6 +86,16 @@ export const CustomDurations = () => {

Custom (2000ms to move from one trigger to another)

+ +

Close delay duration

+

Default (150ms)

+ + +

Custom (500ms)

+ + +

Custom (1000ms)

+ ); }; diff --git a/packages/react/navigation-menu/src/NavigationMenu.tsx b/packages/react/navigation-menu/src/NavigationMenu.tsx index e450ce8dba..82af412482 100644 --- a/packages/react/navigation-menu/src/NavigationMenu.tsx +++ b/packages/react/navigation-menu/src/NavigationMenu.tsx @@ -95,6 +95,11 @@ interface NavigationMenuProps * @defaultValue 300 */ skipDelayDuration?: number; + /** + * The delay before closing menu when the pointer leaves trigger or content area. + * @defaultValue 150 + */ + closeDelayDuration?: number; } const NavigationMenu = React.forwardRef( @@ -106,6 +111,7 @@ const NavigationMenu = React.forwardRef { window.clearTimeout(closeTimerRef.current); - closeTimerRef.current = window.setTimeout(() => setValue(''), 150); + closeTimerRef.current = window.setTimeout(() => setValue(''), closeDelayDuration); }, [setValue]); const handleOpen = React.useCallback(