diff --git a/packages/core/src/menubar/menubar-menu.tsx b/packages/core/src/menubar/menubar-menu.tsx index bffc4e11..79885368 100644 --- a/packages/core/src/menubar/menubar-menu.tsx +++ b/packages/core/src/menubar/menubar-menu.tsx @@ -4,8 +4,7 @@ import { ParentProps, createUniqueId, splitProps } from "solid-js"; import { MenuRoot, MenuRootOptions } from "../menu"; import { useMenubarContext } from "./menubar-context"; -export interface MenubarMenuOptions extends MenuRootOptions { -} +export interface MenubarMenuOptions extends MenuRootOptions {} export interface MenubarMenuProps extends ParentProps {} diff --git a/packages/core/src/menubar/menubar-root.tsx b/packages/core/src/menubar/menubar-root.tsx index 9d79a707..ca398b56 100644 --- a/packages/core/src/menubar/menubar-root.tsx +++ b/packages/core/src/menubar/menubar-root.tsx @@ -15,6 +15,7 @@ import { } from "@kobalte/utils"; import { Accessor, + Setter, ValidComponent, createEffect, createMemo, @@ -22,7 +23,6 @@ import { createUniqueId, onCleanup, splitProps, - Setter, } from "solid-js"; import { isServer } from "solid-js/web"; @@ -113,7 +113,7 @@ export function MenubarRoot( value: () => local.autoFocusMenu, defaultValue: () => false, onChange: local.onAutoFocusMenuChange, - }) + }); const context: MenubarContextValue = { dataset, diff --git a/packages/core/src/navigation-menu/index.tsx b/packages/core/src/navigation-menu/index.tsx index 2aa92f10..db3b7c14 100644 --- a/packages/core/src/navigation-menu/index.tsx +++ b/packages/core/src/navigation-menu/index.tsx @@ -79,6 +79,13 @@ import { type SeparatorRootProps as NavigationMenuSeparatorProps, type SeparatorRootRenderProps as NavigationMenuSeparatorRenderProps, } from "../separator"; +import { + NavigationMenuContent as Content, + type NavigationMenuContentCommonProps, + type NavigationMenuContentOptions, + type NavigationMenuContentProps, + type NavigationMenuContentRenderProps, +} from "./navigation-menu-content"; import { NavigationMenuMenu as Menu, type NavigationMenuMenuOptions, @@ -93,18 +100,11 @@ import { } from "./navigation-menu-root"; import { NavigationMenuTrigger as Trigger, - type NavigationMenuTriggerOptions, type NavigationMenuTriggerCommonProps, - type NavigationMenuTriggerRenderProps, + type NavigationMenuTriggerOptions, type NavigationMenuTriggerProps, + type NavigationMenuTriggerRenderProps, } from "./navigation-menu-trigger"; -import { - NavigationMenuContent as Content, - type NavigationMenuContentCommonProps, - type NavigationMenuContentOptions, - type NavigationMenuContentProps, - type NavigationMenuContentRenderProps, -} from "./navigation-menu-content"; export type { NavigationMenuRootOptions, diff --git a/packages/core/src/navigation-menu/navigation-menu-content.tsx b/packages/core/src/navigation-menu/navigation-menu-content.tsx index 682db9f7..44f5d605 100644 --- a/packages/core/src/navigation-menu/navigation-menu-content.tsx +++ b/packages/core/src/navigation-menu/navigation-menu-content.tsx @@ -1,18 +1,26 @@ import { callHandler } from "@kobalte/utils"; -import { Component, ValidComponent, splitProps, JSX } from "solid-js"; +import { Component, JSX, ValidComponent, splitProps } from "solid-js"; -import { MenuContent, MenuContentCommonProps, MenuContentOptions, MenuContentRenderProps } from "../menu"; +import { + MenuContent, + MenuContentCommonProps, + MenuContentOptions, + MenuContentRenderProps, +} from "../menu"; +import { useMenuContext } from "../menu/menu-context"; import { PolymorphicProps } from "../polymorphic"; import { useNavigationMenuContext } from "./navigation-menu-context"; -import { useMenuContext } from "../menu/menu-context"; export interface NavigationMenuContentOptions extends MenuContentOptions {} -export interface NavigationMenuContentCommonProps extends MenuContentCommonProps { +export interface NavigationMenuContentCommonProps + extends MenuContentCommonProps { onPointerEnter: JSX.EventHandlerUnion; onPointerLeave: JSX.EventHandlerUnion; } -export interface NavigationMenuContentRenderProps extends MenuContentRenderProps, NavigationMenuContentCommonProps {} +export interface NavigationMenuContentRenderProps + extends MenuContentRenderProps, + NavigationMenuContentCommonProps {} export type NavigationMenuContentProps = NavigationMenuContentOptions & Partial; @@ -22,9 +30,12 @@ export function NavigationMenuContent( ) { const context = useNavigationMenuContext(); const menuContext = useMenuContext(); - - const [local, others] = splitProps(props as NavigationMenuContentProps, ["onPointerEnter", "onPointerLeave"]); - + + const [local, others] = splitProps(props as NavigationMenuContentProps, [ + "onPointerEnter", + "onPointerLeave", + ]); + const onPointerEnter: JSX.EventHandlerUnion = ( e, ) => { @@ -37,18 +48,20 @@ export function NavigationMenuContent( e, ) => { callHandler(e, local.onPointerLeave); - + context.startLeaveTimer(); - + menuContext.close(true); }; return ( > + Component< + Omit + > > - onPointerEnter={onPointerEnter} - onPointerLeave={onPointerLeave} + onPointerEnter={onPointerEnter} + onPointerLeave={onPointerLeave} {...others} /> ); diff --git a/packages/core/src/navigation-menu/navigation-menu-context.tsx b/packages/core/src/navigation-menu/navigation-menu-context.tsx index 580e5ece..19d82f3c 100644 --- a/packages/core/src/navigation-menu/navigation-menu-context.tsx +++ b/packages/core/src/navigation-menu/navigation-menu-context.tsx @@ -1,4 +1,4 @@ -import { Accessor, createContext, Setter, useContext } from "solid-js"; +import { Accessor, Setter, createContext, useContext } from "solid-js"; export interface NavigationMenuContextValue { delayDuration: Accessor; @@ -9,7 +9,8 @@ export interface NavigationMenuContextValue { cancelLeaveTimer: () => void; } -export const NavigationMenuContext = createContext(); +export const NavigationMenuContext = + createContext(); export function useOptionalNavigationMenuContext() { return useContext(NavigationMenuContext); diff --git a/packages/core/src/navigation-menu/navigation-menu-menu.tsx b/packages/core/src/navigation-menu/navigation-menu-menu.tsx index 6199e42d..c144f974 100644 --- a/packages/core/src/navigation-menu/navigation-menu-menu.tsx +++ b/packages/core/src/navigation-menu/navigation-menu-menu.tsx @@ -2,8 +2,7 @@ import { MenubarMenuOptions, MenubarMenuProps } from "../menubar"; import { MenubarMenu } from "../menubar/menubar-menu"; import { useNavigationMenuContext } from "./navigation-menu-context"; -export interface NavigationMenuMenuOptions extends MenubarMenuOptions { -} +export interface NavigationMenuMenuOptions extends MenubarMenuOptions {} export interface NavigationMenuMenuProps extends MenubarMenuProps {} diff --git a/packages/core/src/navigation-menu/navigation-menu-root.tsx b/packages/core/src/navigation-menu/navigation-menu-root.tsx index 69ac100b..70437c61 100644 --- a/packages/core/src/navigation-menu/navigation-menu-root.tsx +++ b/packages/core/src/navigation-menu/navigation-menu-root.tsx @@ -1,28 +1,41 @@ import { callHandler, mergeDefaultProps } from "@kobalte/utils"; -import { ValidComponent, splitProps, Component, createSignal, JSX } from "solid-js"; -import { MenubarRootCommonProps, MenubarRootOptions, MenubarRootRenderProps } from "../menubar"; +import { + Component, + JSX, + ValidComponent, + createSignal, + splitProps, +} from "solid-js"; +import { + MenubarRootCommonProps, + MenubarRootOptions, + MenubarRootRenderProps, +} from "../menubar"; import { MenubarRoot } from "../menubar/menubar-root"; import { PolymorphicProps } from "../polymorphic"; -import { NavigationMenuContext, NavigationMenuContextValue } from "./navigation-menu-context"; +import { + NavigationMenuContext, + NavigationMenuContextValue, +} from "./navigation-menu-context"; export interface NavigationMenuRootOptions extends MenubarRootOptions { /** - * Delay before the menu opens on hover (default 200). - */ + * Delay before the menu opens on hover (default 200). + */ delayDuration?: number; - + /** - * Open immediately if hovered again within delay (default 300). - */ + * Open immediately if hovered again within delay (default 300). + */ skipDelayDuration?: number; } -export interface NavigationMenuRootCommonProps extends MenubarRootCommonProps { -} +export interface NavigationMenuRootCommonProps extends MenubarRootCommonProps {} -export interface NavigationMenuRootRenderProps extends NavigationMenuRootCommonProps, MenubarRootRenderProps { -} +export interface NavigationMenuRootRenderProps + extends NavigationMenuRootCommonProps, + MenubarRootRenderProps {} export type NavigationMenuRootProps = NavigationMenuRootOptions & Partial; @@ -45,11 +58,11 @@ export function NavigationMenuRoot( "delayDuration", "skipDelayDuration", ]); - + const [autoFocusMenu, setAutoFocusMenu] = createSignal(false); - + let timeoutId: number | undefined; - + const context: NavigationMenuContextValue = { delayDuration: () => local.delayDuration, skipDelayDuration: () => local.skipDelayDuration, @@ -67,9 +80,13 @@ export function NavigationMenuRoot( return ( - >> + + > + > autoFocusMenu={autoFocusMenu()} - onAutoFocusMenuChange={setAutoFocusMenu} + onAutoFocusMenuChange={setAutoFocusMenu} {...others} /> diff --git a/packages/core/src/navigation-menu/navigation-menu-trigger.tsx b/packages/core/src/navigation-menu/navigation-menu-trigger.tsx index 99e18da6..88fe1e13 100644 --- a/packages/core/src/navigation-menu/navigation-menu-trigger.tsx +++ b/packages/core/src/navigation-menu/navigation-menu-trigger.tsx @@ -1,5 +1,5 @@ import { callHandler } from "@kobalte/utils"; -import { Component, JSX, splitProps, ValidComponent } from "solid-js"; +import { Component, JSX, ValidComponent, splitProps } from "solid-js"; import { MenuTrigger, @@ -9,20 +9,21 @@ import { MenuTriggerRenderProps, } from "../menu"; import { useMenuContext, useOptionalMenuContext } from "../menu/menu-context"; +import { useMenubarContext } from "../menubar/menubar-context"; import { PolymorphicProps } from "../polymorphic"; import { useNavigationMenuContext } from "./navigation-menu-context"; -import { useMenubarContext } from "../menubar/menubar-context"; export interface NavigationMenuTriggerOptions extends MenuTriggerOptions {} -export interface NavigationMenuTriggerCommonProps extends MenuTriggerCommonProps { +export interface NavigationMenuTriggerCommonProps + extends MenuTriggerCommonProps { onPointerEnter: JSX.EventHandlerUnion; onPointerLeave: JSX.EventHandlerUnion; } export interface NavigationMenuTriggerRenderProps - extends NavigationMenuTriggerCommonProps, MenuTriggerRenderProps { -} + extends NavigationMenuTriggerCommonProps, + MenuTriggerRenderProps {} export type NavigationMenuTriggerProps = NavigationMenuTriggerOptions & Partial; @@ -33,27 +34,30 @@ export type NavigationMenuTriggerProps = NavigationMenuTriggerOptions & export function NavigationMenuTrigger( props: PolymorphicProps, ) { - const context = useNavigationMenuContext();\ + const context = useNavigationMenuContext(); const menuContext = useMenuContext(); - - const [local, others] = splitProps(props as NavigationMenuTriggerProps, ["onPointerEnter", "onPointerLeave", "onClick"]); - + + const [local, others] = splitProps(props as NavigationMenuTriggerProps, [ + "onPointerEnter", + "onPointerLeave", + "onClick", + ]); + let timeoutId: number | undefined; - + const onClick: JSX.EventHandlerUnion = (e) => { callHandler(e, local.onClick); if (timeoutId) clearTimeout(timeoutId); }; - - + const onPointerEnter: JSX.EventHandlerUnion = ( e, ) => { callHandler(e, local.onPointerEnter); - + context.cancelLeaveTimer(); - + timeoutId = window.setTimeout(() => { menuContext.open(true); context.setAutoFocusMenu(true); @@ -64,10 +68,21 @@ export function NavigationMenuTrigger( e, ) => { callHandler(e, local.onPointerLeave); - + context.startLeaveTimer(); if (timeoutId) clearTimeout(timeoutId); }; - return >> onClick={onClick} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave} {...others} />; + return ( + + > + > + onClick={onClick} + onPointerEnter={onPointerEnter} + onPointerLeave={onPointerLeave} + {...others} + /> + ); }