@navikt/ds-react 7.2.0 → 7.3.0

package/esm/overlays/floating/Floating.utils.d.ts

@@ -1,8 +1,6 @@
 import type { Middleware, Placement } from "@floating-ui/react-dom";
-declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
-declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
-type Side = (typeof SIDE_OPTIONS)[number];
-type Align = (typeof ALIGN_OPTIONS)[number];
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
 type Measurable = {
     getBoundingClientRect(): DOMRect;
 };
@@ -13,6 +11,6 @@ declare function transformOrigin(options: {
     arrowWidth: number;
     arrowHeight: number;
 }): Middleware;
-declare function getSideAndAlignFromPlacement(placement: Placement): readonly ["left" | "right" | "top" | "bottom", "center" | "start" | "end"];
+declare function getSideAndAlignFromPlacement(placement: Placement): readonly [Side, Align];
 export { getSideAndAlignFromPlacement, transformOrigin };
 export type { Side, Align, Measurable };

package/esm/overlays/floating/Floating.utils.js

@@ -1,5 +1,3 @@
-const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
-const ALIGN_OPTIONS = ["start", "center", "end"];
 /**
  * `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
  */

package/esm/overlays/floating/Floating.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Floating.utils.js","sourceRoot":"","sources":["../../../src/overlays/floating/Floating.utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Floating.utils.js","sourceRoot":"","sources":["../../../src/overlays/floating/Floating.utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,SAAS,eAAe,CAAC,OAGxB;IACC,OAAO;QACL,IAAI,EAAE,iBAAiB;QACvB,OAAO;QACP,EAAE,CAAC,IAAI;;YACL,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;YAElD,MAAM,iBAAiB,GAAG,CAAA,MAAA,cAAc,CAAC,KAAK,0CAAE,YAAY,MAAK,CAAC,CAAC;YACnE,MAAM,aAAa,GAAG,iBAAiB,CAAC;YACxC,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;YAC1D,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;YAE5D,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,4BAA4B,CAAC,SAAS,CAAC,CAAC;YAC1E,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,CAC9D,WAAW,CACZ,CAAC;YAEF,MAAM,YAAY,GAAG,CAAC,MAAA,MAAA,cAAc,CAAC,KAAK,0CAAE,CAAC,mCAAI,CAAC,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC;YACrE,MAAM,YAAY,GAAG,CAAC,MAAA,MAAA,cAAc,CAAC,KAAK,0CAAE,CAAC,mCAAI,CAAC,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC;YAEtE,IAAI,CAAC,GAAG,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,EAAE,CAAC;YAEX,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;gBAC5B,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC;gBACvD,CAAC,GAAG,GAAG,CAAC,WAAW,IAAI,CAAC;YAC1B,CAAC;iBAAM,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;gBAChC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC;gBACvD,CAAC,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,WAAW,IAAI,CAAC;YACjD,CAAC;iBAAM,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;gBAClC,CAAC,GAAG,GAAG,CAAC,WAAW,IAAI,CAAC;gBACxB,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC;YACzD,CAAC;iBAAM,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;gBACjC,CAAC,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,WAAW,IAAI,CAAC;gBAC9C,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC;YACzD,CAAC;YACD,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,CAAC;KACF,CAAC;AACJ,CAAC;AAED,SAAS,4BAA4B,CAAC,SAAoB;IACxD,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtD,OAAO,CAAC,IAAY,EAAE,KAAc,CAAU,CAAC;AACjD,CAAC;AAED,OAAO,EAAE,4BAA4B,EAAE,eAAe,EAAE,CAAC"}

package/esm/overlays/floating-menu/Menu.d.ts

@@ -21,7 +21,7 @@ interface MenuComponent extends React.FC<MenuProps> {
     CheckboxItem: typeof MenuCheckboxItem;
     RadioGroup: typeof MenuRadioGroup;
     RadioItem: typeof MenuRadioItem;
-    Separator: typeof MenuSeparator;
+    Divider: typeof MenuDivider;
     Sub: typeof MenuSub;
     SubTrigger: typeof MenuSubTrigger;
     SubContent: typeof MenuSubContent;
@@ -30,9 +30,8 @@ interface MenuComponent extends React.FC<MenuProps> {
 declare const Menu: MenuComponent;
 type MenuAnchorProps = React.ComponentPropsWithoutRef<typeof Floating.Anchor>;
 declare const MenuAnchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuContentProps extends MenuContentInternalTypeProps {
-}
-declare const MenuContent: React.ForwardRefExoticComponent<MenuContentProps & React.RefAttributes<HTMLDivElement>>;
+type MenuContentProps = MenuContentInternalTypeProps;
+declare const MenuContent: React.ForwardRefExoticComponent<MenuContentInternalTypeProps & React.RefAttributes<HTMLDivElement>>;
 type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
 type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;
 type MenuContentInternalPrivateProps = {
@@ -51,9 +50,9 @@ interface MenuContentInternalProps extends MenuContentInternalPrivateProps, Omit
     onPointerDownOutside?: DismissableLayerProps["onPointerDownOutside"];
     onFocusOutside?: DismissableLayerProps["onFocusOutside"];
     onInteractOutside?: DismissableLayerProps["onInteractOutside"];
+    safeZone?: DismissableLayerProps["safeZone"];
 }
-interface MenuContentInternalTypeProps extends Omit<MenuContentInternalProps, keyof MenuContentInternalPrivateProps> {
-}
+type MenuContentInternalTypeProps = Omit<MenuContentInternalProps, keyof MenuContentInternalPrivateProps>;
 type MenuItemElement = MenuItemInternalElement;
 interface MenuItemProps extends Omit<MenuItemInternalProps, "onSelect"> {
     onSelect?: (event: Event) => void;
@@ -63,9 +62,8 @@ type MenuItemInternalElement = SlottedDivElementRef;
 interface MenuItemInternalProps extends SlottedDivProps {
     disabled?: boolean;
 }
-interface MenuGroupProps extends SlottedDivProps {
-}
-declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+type MenuGroupProps = SlottedDivProps;
+declare const MenuGroup: React.ForwardRefExoticComponent<SlottedDivProps & React.RefAttributes<HTMLDivElement>>;
 type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
 type MenuPortalProps = PortalProps & {
     children: React.ReactElement;
@@ -76,9 +74,8 @@ interface MenuRadioGroupProps extends MenuGroupProps {
     onValueChange?: (value: string) => void;
 }
 declare const MenuRadioGroup: React.ForwardRefExoticComponent<MenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuItemIndicatorProps extends SlottedDivProps {
-}
-declare const MenuItemIndicator: React.ForwardRefExoticComponent<MenuItemIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+type MenuItemIndicatorProps = SlottedDivProps;
+declare const MenuItemIndicator: React.ForwardRefExoticComponent<SlottedDivProps & React.RefAttributes<HTMLDivElement>>;
 interface MenuRadioItemProps extends MenuItemProps {
     value: string;
 }
@@ -88,19 +85,16 @@ interface MenuCheckboxItemProps extends MenuItemProps {
     onCheckedChange?: (checked: boolean) => void;
 }
 declare const MenuCheckboxItem: React.ForwardRefExoticComponent<MenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuSeparatorProps extends SlottedDivProps {
-}
-declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+type MenuDividerProps = SlottedDivProps;
+declare const MenuDivider: React.ForwardRefExoticComponent<SlottedDivProps & React.RefAttributes<HTMLDivElement>>;
 interface MenuSubProps {
     children?: React.ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
 declare const MenuSub: React.FC<MenuSubProps>;
-interface MenuSubTriggerProps extends MenuItemInternalProps {
-}
-declare const MenuSubTrigger: React.ForwardRefExoticComponent<MenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuSubContentProps extends Omit<MenuContentInternalProps, keyof MenuContentInternalPrivateProps | "onCloseAutoFocus" | "onEntryFocus" | "side" | "align"> {
-}
+type MenuSubTriggerProps = MenuItemInternalProps;
+declare const MenuSubTrigger: React.ForwardRefExoticComponent<MenuItemInternalProps & React.RefAttributes<HTMLDivElement>>;
+type MenuSubContentProps = Omit<MenuContentInternalProps, keyof MenuContentInternalPrivateProps | "onCloseAutoFocus" | "onEntryFocus" | "side" | "align">;
 declare const MenuSubContent: React.ForwardRefExoticComponent<MenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
-export { Menu, MenuAnchor, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuItemIndicator, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, type MenuAnchorProps, type MenuCheckboxItemProps, type MenuContentProps, type MenuGroupProps, type MenuItemElement, type MenuItemIndicatorProps, type MenuPortalProps, type MenuProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSeparatorProps, type MenuSubContentProps, type MenuSubProps, type MenuSubTriggerProps, };
+export { Menu, MenuAnchor, MenuCheckboxItem, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuItemIndicator, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubContent, MenuSubTrigger, type MenuAnchorProps, type MenuCheckboxItemProps, type MenuContentProps, type MenuDividerProps, type MenuGroupProps, type MenuItemElement, type MenuItemIndicatorProps, type MenuPortalProps, type MenuProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubContentProps, type MenuSubProps, type MenuSubTriggerProps, };

package/esm/overlays/floating-menu/Menu.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { Portal } from "../../portal/index.js";
 import { composeEventHandlers } from "../../util/composeEventHandlers.js";
@@ -24,9 +24,6 @@ import { SlottedDivElement, } from "./parts/SlottedDivElement.js";
 /* -------------------------------------------------------------------------- */
 /*                                  Constants                                 */
 /* -------------------------------------------------------------------------- */
-const SELECTION_KEYS = ["Enter", " "];
-const SUB_OPEN_KEYS = [...SELECTION_KEYS, "ArrowRight"];
-const SUB_CLOSE_KEYS = ["ArrowLeft"];
 const FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 const LAST_KEYS = ["ArrowUp", "PageDown", "End"];
 const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
@@ -84,10 +81,6 @@ const Menu = MenuRoot;
 const MenuAnchor = forwardRef((props, forwardedRef) => {
     return React.createElement(Floating.Anchor, Object.assign({}, props, { ref: forwardedRef }));
 });
-const [MenuContentProvider, useMenuContentContext] = createContext({
-    providerName: "MenuContentProvider",
-    hookName: "useMenuContentContext",
-});
 const MenuContent = React.forwardRef((props, ref) => {
     const descendants = useMenuDescendants();
     const rootContext = useMenuRootContext();
@@ -110,97 +103,56 @@ const MenuRootContentModal = forwardRef((props, ref) => {
         onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkForDefaultPrevented: false }), onDismiss: () => context.onOpenChange(false) })));
 });
 const MenuContentInternal = forwardRef((_a, forwardedRef) => {
-    var { onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEntryFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss } = _a, rest = __rest(_a, ["onOpenAutoFocus", "onCloseAutoFocus", "disableOutsidePointerEvents", "onEntryFocus", "onEscapeKeyDown", "onPointerDownOutside", "onFocusOutside", "onInteractOutside", "onDismiss"]);
+    var { onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEntryFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, safeZone } = _a, rest = __rest(_a, ["onOpenAutoFocus", "onCloseAutoFocus", "disableOutsidePointerEvents", "onEntryFocus", "onEscapeKeyDown", "onPointerDownOutside", "onFocusOutside", "onInteractOutside", "onDismiss", "safeZone"]);
     const descendants = useMenuDescendantsContext();
     const context = useMenuContext();
     const rootContext = useMenuRootContext();
     const contentRef = useRef(null);
     const composedRefs = useMergeRefs(forwardedRef, contentRef, context.onContentChange);
-    const pointerGraceTimerRef = React.useRef(0);
-    const pointerGraceIntentRef = React.useRef(null);
-    const pointerDirRef = React.useRef("right");
-    const lastPointerXRef = React.useRef(0);
-    const isPointerMovingToSubmenu = React.useCallback((event) => {
-        var _a, _b;
-        const isMovingTowards = pointerDirRef.current === ((_a = pointerGraceIntentRef.current) === null || _a === void 0 ? void 0 : _a.side);
-        return (isMovingTowards &&
-            isPointerInGraceArea(event, (_b = pointerGraceIntentRef.current) === null || _b === void 0 ? void 0 : _b.area));
-    }, []);
-    return (React.createElement(MenuContentProvider, { onItemEnter: React.useCallback((event) => {
-            if (isPointerMovingToSubmenu(event))
-                event.preventDefault();
-        }, [isPointerMovingToSubmenu]), onItemLeave: React.useCallback((event) => {
+    return (React.createElement(FocusScope, { onMountHandler: composeEventHandlers(onOpenAutoFocus, (event) => {
             var _a;
-            if (isPointerMovingToSubmenu(event))
-                return;
-            /**
-             * Resets focus from current active item to content area
-             * This is to prevent focus from being stuck on an item when we move pointer outside the menu or onto a disabled item
-             */
-            (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, [isPointerMovingToSubmenu]), onPointerLeaveTrigger: React.useCallback((event) => {
-            if (isPointerMovingToSubmenu(event))
-                event.preventDefault();
-        }, [isPointerMovingToSubmenu]), pointerGraceTimerRef: pointerGraceTimerRef, onPointerGraceIntentChange: React.useCallback((intent) => {
-            pointerGraceIntentRef.current = intent;
-        }, []) },
-        React.createElement(FocusScope, { onMountHandler: composeEventHandlers(onOpenAutoFocus, (event) => {
-                var _a;
-                // when opening, explicitly focus the content area only and leave
-                // `onEntryFocus` in  control of focusing first item
-                event.preventDefault();
-                (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-            }), onUnmountHandler: onCloseAutoFocus },
-            React.createElement(DismissableLayer, { asChild: true, disableOutsidePointerEvents: disableOutsidePointerEvents, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside, onDismiss: onDismiss },
-                React.createElement(RovingFocus, { asChild: true, descendants: descendants, onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
-                        // only focus first item when using keyboard
-                        if (!rootContext.isUsingKeyboardRef.current)
-                            event.preventDefault();
-                    }) },
-                    React.createElement(Floating.Content, Object.assign({ role: "menu", "aria-orientation": "vertical", "data-state": getOpenState(context.open), "data-aksel-menu-content": "", dir: "ltr" }, rest, { ref: composedRefs, style: Object.assign({ outline: "none" }, rest.style), onKeyDown: composeEventHandlers(rest.onKeyDown, (event) => {
-                            var _a, _b, _c, _d;
-                            // submenu key events bubble through portals. We only care about keys in this menu.
-                            const target = event.target;
-                            const isKeyDownInside = target.closest("[data-aksel-menu-content]") ===
-                                event.currentTarget;
-                            if (isKeyDownInside) {
-                                // menus should not be navigated using tab key so we prevent it
-                                if (event.key === "Tab")
-                                    event.preventDefault();
-                            }
-                            // focus first/last item based on key pressed
-                            const content = contentRef.current;
-                            if (event.target !== content)
-                                return;
-                            if (!FIRST_LAST_KEYS.includes(event.key))
-                                return;
-                            event.preventDefault();
-                            if (LAST_KEYS.includes(event.key)) {
-                                (_b = (_a = descendants.lastEnabled()) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.focus();
-                                return;
-                            }
-                            (_d = (_c = descendants.firstEnabled()) === null || _c === void 0 ? void 0 : _c.node) === null || _d === void 0 ? void 0 : _d.focus();
-                        }), onPointerMove: composeEventHandlers(rest.onPointerMove, whenMouse((event) => {
-                            const target = event.target;
-                            const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
-                            // We don't use `event.movementX` for this check because Safari will
-                            // always return `0` on a pointer event.
-                            if (event.currentTarget.contains(target) &&
-                                pointerXHasChanged) {
-                                const newDir = event.clientX > lastPointerXRef.current
-                                    ? "right"
-                                    : "left";
-                                pointerDirRef.current = newDir;
-                                lastPointerXRef.current = event.clientX;
-                            }
-                        })) })))))));
+            // when opening, explicitly focus the content area only and leave
+            // `onEntryFocus` in  control of focusing first item
+            event.preventDefault();
+            (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }), onUnmountHandler: onCloseAutoFocus },
+        React.createElement(DismissableLayer, { asChild: true, disableOutsidePointerEvents: disableOutsidePointerEvents, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside, onDismiss: onDismiss, safeZone: safeZone },
+            React.createElement(RovingFocus, { asChild: true, descendants: descendants, onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
+                    // only focus first item when using keyboard
+                    if (!rootContext.isUsingKeyboardRef.current)
+                        event.preventDefault();
+                }) },
+                React.createElement(Floating.Content, Object.assign({ role: "menu", "aria-orientation": "vertical", "data-state": getOpenState(context.open), "data-aksel-menu-content": "", dir: "ltr" }, rest, { ref: composedRefs, style: Object.assign({ outline: "none" }, rest.style), onKeyDown: composeEventHandlers(rest.onKeyDown, (event) => {
+                        var _a, _b, _c, _d;
+                        // submenu key events bubble through portals. We only care about keys in this menu.
+                        const target = event.target;
+                        const isKeyDownInside = target.closest("[data-aksel-menu-content]") ===
+                            event.currentTarget;
+                        if (isKeyDownInside) {
+                            // menus should not be navigated using tab key so we prevent it
+                            if (event.key === "Tab")
+                                event.preventDefault();
+                        }
+                        // focus first/last item based on key pressed
+                        const content = contentRef.current;
+                        if (event.target !== content)
+                            return;
+                        if (!FIRST_LAST_KEYS.includes(event.key))
+                            return;
+                        event.preventDefault();
+                        if (LAST_KEYS.includes(event.key)) {
+                            (_b = (_a = descendants.lastEnabled()) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.focus();
+                            return;
+                        }
+                        (_d = (_c = descendants.firstEnabled()) === null || _c === void 0 ? void 0 : _c.node) === null || _d === void 0 ? void 0 : _d.focus();
+                    }) }))))));
 });
 /* -------------------------------------------------------------------------- */
 /*                                  Menu item                                 */
 /* -------------------------------------------------------------------------- */
 const ITEM_SELECT_EVENT = "menu.itemSelect";
 const MenuItem = forwardRef((_a, forwardedRef) => {
-    var { disabled = false, onSelect, onClick, onPointerUp, onPointerDown, onKeyDown } = _a, rest = __rest(_a, ["disabled", "onSelect", "onClick", "onPointerUp", "onPointerDown", "onKeyDown"]);
+    var { disabled = false, onSelect, onClick, onPointerUp, onPointerDown, onKeyDown, onKeyUp } = _a, rest = __rest(_a, ["disabled", "onSelect", "onClick", "onPointerUp", "onPointerDown", "onKeyDown", "onKeyUp"]);
     const ref = useRef(null);
     const rootContext = useMenuRootContext();
     const composedRefs = useMergeRefs(forwardedRef, ref);
@@ -225,8 +177,32 @@ const MenuItem = forwardRef((_a, forwardedRef) => {
                 rootContext.onClose();
             }
         }
+        else if (!disabled && menuItem) {
+            rootContext.onClose();
+        }
+    };
+    const handleKey = (event, key) => {
+        if (disabled || event.repeat) {
+            return;
+        }
+        if (key === event.key) {
+            event.currentTarget.click();
+            /**
+             * We prevent default browser behaviour for selection keys as they should only trigger
+             * selection.
+             * - Prevents space from scrolling the page.
+             * - If keydown causes focus to move, prevents keydown from firing on the new target.
+             */
+            event.preventDefault();
+        }
     };
-    return (React.createElement(MenuItemInternal, Object.assign({}, rest, { tabIndex: disabled ? -1 : 0, ref: composedRefs, disabled: disabled, onClick: composeEventHandlers(onClick, handleSelect), onPointerDown: composeEventHandlers(onPointerDown, () => {
+    return (React.createElement(MenuItemInternal, Object.assign({}, rest, { tabIndex: disabled ? -1 : 0, ref: composedRefs, disabled: disabled, onClick: composeEventHandlers(onClick, handleSelect, {
+            /**
+             * Nextjs prevents default on click when using Link component, so we have to force click-event
+             * https://github.com/vercel/next.js/blob/77dcd4c66a35d0e8ef639bda4d05873bd3c0f52d/packages/next/src/client/link.tsx#L211
+             */
+            checkForDefaultPrevented: false,
+        }), onPointerDown: composeEventHandlers(onPointerDown, () => {
             isPointerDownRef.current = true;
         }, { checkForDefaultPrevented: false }), onPointerUp: composeEventHandlers(onPointerUp, (event) => {
             var _a;
@@ -235,26 +211,19 @@ const MenuItem = forwardRef((_a, forwardedRef) => {
             // prevent Firefox from getting stuck in text selection mode when the menu closes.
             if (!isPointerDownRef.current)
                 (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.click();
-        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (disabled) {
-                return;
-            }
-            if (SELECTION_KEYS.includes(event.key)) {
-                event.currentTarget.click();
-                /**
-                 * We prevent default browser behaviour for selection keys as they should only trigger
-                 * selection.
-                 * - Prevents space from scrolling the page.
-                 * - If keydown causes focus to move, prevents keydown from firing on the new target.
-                 */
-                event.preventDefault();
-            }
-        }) })));
+        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => handleKey(event, "Enter")), onKeyUp: composeEventHandlers(onKeyUp, (event) => handleKey(event, " ")) })));
 });
 const MenuItemInternal = forwardRef((_a, forwardedRef) => {
     var { disabled = false, onPointerMove, onPointerLeave } = _a, rest = __rest(_a, ["disabled", "onPointerMove", "onPointerLeave"]);
-    const { register } = useMenuDescendant({ disabled });
-    const contentContext = useMenuContentContext();
+    const context = useMenuContext();
+    const { register } = useMenuDescendant({
+        disabled,
+        closeMenu: () => {
+            rest["data-submenu-trigger"] &&
+                context.open &&
+                context.onOpenChange(false);
+        },
+    });
     const ref = useRef(null);
     const composedRefs = useMergeRefs(forwardedRef, ref, register);
     return (React.createElement(SlottedDivElement, Object.assign({ role: "menuitem", "aria-disabled": disabled || undefined, "data-disabled": disabled ? "" : undefined, tabIndex: -1 }, rest, { style: Object.assign({ userSelect: "none" }, rest === null || rest === void 0 ? void 0 : rest.style), ref: composedRefs, 
@@ -264,20 +233,18 @@ const MenuItemInternal = forwardRef((_a, forwardedRef) => {
          * This is mostly to handle edgecases where the user uses mouse and keyboard together.
          */
         onPointerMove: composeEventHandlers(onPointerMove, whenMouse((event) => {
+            var _a;
             if (disabled) {
                 /**
                  * In the edgecase the focus is still stuck on a previous item, we make sure to reset it
                  * even when the disabled item can't be focused itself to reset it.
                  */
-                contentContext.onItemLeave(event);
+                (_a = context.content) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                contentContext.onItemEnter(event);
-                if (!event.defaultPrevented) {
-                    event.currentTarget.focus();
-                }
+                event.currentTarget.focus();
             }
-        })), onPointerLeave: composeEventHandlers(onPointerLeave, whenMouse(contentContext.onItemLeave)) })));
+        })), onPointerLeave: composeEventHandlers(onPointerLeave, whenMouse(() => { var _a; return (_a = context.content) === null || _a === void 0 ? void 0 : _a.focus(); })) })));
 });
 const MenuGroup = forwardRef((props, ref) => {
     return React.createElement(SlottedDivElement, Object.assign({ role: "group" }, props, { ref: ref }));
@@ -330,7 +297,7 @@ const MenuCheckboxItem = forwardRef((_a, forwardedRef) => {
     return (React.createElement(MenuItemIndicatorProvider, { state: checked },
         React.createElement(MenuItem, Object.assign({ role: "menuitemcheckbox", "aria-checked": isIndeterminate(checked) ? "mixed" : checked }, rest, { ref: forwardedRef, "data-state": getCheckedState(checked), onSelect: composeEventHandlers(onSelect, () => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(isIndeterminate(checked) ? true : !checked), { checkForDefaultPrevented: false }) }))));
 });
-const MenuSeparator = forwardRef((props, ref) => {
+const MenuDivider = forwardRef((props, ref) => {
     return (React.createElement(SlottedDivElement, Object.assign({ role: "separator", "aria-orientation": "horizontal" }, props, { ref: ref })));
 });
 const [MenuSubProvider, useMenuSubContext] = createContext({
@@ -339,6 +306,7 @@ const [MenuSubProvider, useMenuSubContext] = createContext({
 });
 const MenuSub = ({ children, onOpenChange, open = false, }) => {
     const parentMenuContext = useMenuContext();
+    const { values } = useMenuDescendantsContext();
     const [trigger, setTrigger] = useState(null);
     const [content, setContent] = useState(null);
     const handleOpenChange = useCallbackRef(onOpenChange);
@@ -350,100 +318,51 @@ const MenuSub = ({ children, onOpenChange, open = false, }) => {
         return () => handleOpenChange(false);
     }, [parentMenuContext.open, handleOpenChange]);
     return (React.createElement(Floating, null,
-        React.createElement(MenuProvider, { open: open, onOpenChange: handleOpenChange, content: content, onContentChange: setContent },
+        React.createElement(MenuProvider, { open: open, onOpenChange: (_open) => {
+                handleOpenChange(_open);
+                if (_open) {
+                    /* Makes sure to close all adjacent submenus if they are open */
+                    values().forEach((descendant) => {
+                        if (descendant.node !== trigger) {
+                            descendant.closeMenu();
+                        }
+                    });
+                }
+            }, content: content, onContentChange: setContent },
             React.createElement(MenuSubProvider, { contentId: useId(), triggerId: useId(), trigger: trigger, onTriggerChange: setTrigger }, children))));
 };
 const MenuSubTrigger = forwardRef((props, forwardedRef) => {
     const context = useMenuContext();
     const subContext = useMenuSubContext();
-    const contentContext = useMenuContentContext();
-    const openTimerRef = useRef(null);
-    const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
     const composedRefs = useMergeRefs(forwardedRef, subContext.onTriggerChange);
-    const clearOpenTimer = useCallback(() => {
-        if (openTimerRef.current) {
-            window.clearTimeout(openTimerRef.current);
+    const handleKey = (event, keys) => {
+        var _a;
+        if (props.disabled) {
+            return;
         }
-        openTimerRef.current = null;
-    }, []);
-    React.useEffect(() => clearOpenTimer, [clearOpenTimer]);
-    React.useEffect(() => {
-        const pointerGraceTimer = pointerGraceTimerRef.current;
-        return () => {
-            window.clearTimeout(pointerGraceTimer);
-            onPointerGraceIntentChange(null);
-        };
-    }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+        if (keys.includes(event.key)) {
+            context.onOpenChange(true);
+            // The trigger may hold focus if opened via pointer interaction
+            // so we ensure content is given focus again when switching to keyboard.
+            (_a = context.content) === null || _a === void 0 ? void 0 : _a.focus();
+            // prevent window from scrolling
+            event.preventDefault();
+        }
+    };
     return (React.createElement(MenuAnchor, { asChild: true },
-        React.createElement(MenuItemInternal, Object.assign({ id: subContext.triggerId, "aria-haspopup": "menu", "aria-expanded": context.open, "aria-controls": subContext.contentId, "data-state": getOpenState(context.open) }, props, { ref: composedRefs, 
-            /**
-             * onClick is added to solve edgecase where the user clicks the trigger,
-             * but the focus is outside browser-window or viewport at first.
-             */
-            onClick: (event) => {
-                var _a;
-                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
-                if (props.disabled || event.defaultPrevented)
-                    return;
-                event.currentTarget.focus();
-                if (!context.open)
-                    context.onOpenChange(true);
-            }, onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
-                if (event.defaultPrevented)
-                    return;
-                if (!props.disabled && !context.open && !openTimerRef.current) {
-                    contentContext.onPointerGraceIntentChange(null);
-                    openTimerRef.current = window.setTimeout(() => {
-                        context.onOpenChange(true);
-                        clearOpenTimer();
-                    }, 100);
-                }
-            })), onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse((event) => {
-                var _a, _b;
-                clearOpenTimer();
-                const contentRect = (_a = context.content) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                if (contentRect) {
-                    const side = (_b = context.content) === null || _b === void 0 ? void 0 : _b.dataset.side;
-                    const rightSide = side === "right";
-                    const bleed = rightSide ? -5 : +5;
-                    const contentNearEdge = contentRect[rightSide ? "left" : "right"];
-                    const contentFarEdge = contentRect[rightSide ? "right" : "left"];
-                    contentContext.onPointerGraceIntentChange({
-                        area: [
-                            // Apply a bleed on clientX to ensure that our exit point is
-                            // consistently within polygon bounds
-                            { x: event.clientX + bleed, y: event.clientY },
-                            { x: contentNearEdge, y: contentRect.top },
-                            { x: contentFarEdge, y: contentRect.top },
-                            { x: contentFarEdge, y: contentRect.bottom },
-                            { x: contentNearEdge, y: contentRect.bottom },
-                        ],
-                        side,
-                    });
-                    window.clearTimeout(pointerGraceTimerRef.current);
-                    pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
-                }
-                else {
-                    contentContext.onPointerLeaveTrigger(event);
-                    if (event.defaultPrevented)
-                        return;
-                    // There's 100ms where the user may leave an item before the submenu was opened.
-                    contentContext.onPointerGraceIntentChange(null);
-                }
-            })), onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+        React.createElement(MenuItemInternal, Object.assign({ id: subContext.triggerId, "aria-haspopup": "menu", "aria-expanded": context.open, "aria-controls": subContext.contentId, "data-state": getOpenState(context.open) }, props, { ref: composedRefs, "data-submenu-trigger": true, onClick: (event) => {
                 var _a;
-                if (props.disabled) {
+                if (props.disabled || event.defaultPrevented) {
                     return;
                 }
-                if (SUB_OPEN_KEYS.includes(event.key)) {
-                    context.onOpenChange(true);
-                    // The trigger may hold focus if opened via pointer interaction
-                    // so we ensure content is given focus again when switching to keyboard.
-                    (_a = context.content) === null || _a === void 0 ? void 0 : _a.focus();
-                    // prevent window from scrolling
-                    event.preventDefault();
-                }
-            }) }))));
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                /*
+                 * Solves edgecase where the user clicks the trigger,
+                 * but the focus is outside browser-window or viewport at first.
+                 */
+                event.currentTarget.focus();
+                context.onOpenChange(!context.open);
+            }, onKeyDown: composeEventHandlers(props.onKeyDown, (event) => handleKey(event, ["Enter", "ArrowRight"])), onKeyUp: composeEventHandlers(props.onKeyUp, (event) => handleKey(event, [" "])) }))));
 });
 const MenuSubContent = forwardRef((props, forwardedRef) => {
     const descendants = useMenuDescendants();
@@ -461,14 +380,8 @@ const MenuSubContent = forwardRef((props, forwardedRef) => {
                 }
                 event.preventDefault();
             }, 
-            // The menu might close because of focusing another menu item in the parent menu. We
-            // don't want it to refocus the trigger in that case so we handle trigger focus ourselves.
-            onCloseAutoFocus: (event) => event.preventDefault(), onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
-                // We prevent closing when the trigger is focused to avoid triggering a re-open animation
-                // on pointer interaction.
-                if (event.target !== subContext.trigger)
-                    context.onOpenChange(false);
-            }), onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
+            /* Since we manually focus Subtrigger, we prevent use of auto-focus */
+            onCloseAutoFocus: (event) => event.preventDefault(), onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
                 rootContext.onClose();
                 // Ensure pressing escape in submenu doesn't escape full screen mode
                 event.preventDefault();
@@ -476,7 +389,7 @@ const MenuSubContent = forwardRef((props, forwardedRef) => {
                 var _a, _b;
                 // Submenu key events bubble through portals. We only care about keys in this menu.
                 const isKeyDownInside = event.currentTarget.contains(event.target);
-                let isCloseKey = SUB_CLOSE_KEYS.includes(event.key);
+                let isCloseKey = event.key === "ArrowLeft";
                 /* When submenu opens to the left, we allow closing it with ArrowRight */
                 if (((_a = context.content) === null || _a === void 0 ? void 0 : _a.dataset.side) === "left") {
                     isCloseKey = isCloseKey || event.key === "ArrowRight";
@@ -506,30 +419,6 @@ function getCheckedState(checked) {
             ? "checked"
             : "unchecked";
 }
-/**
- * Determine if a point is inside of a polygon.
- */
-function isPointInPolygon(point, polygon) {
-    const { x, y } = point;
-    let inside = false;
-    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-        const xi = polygon[i].x;
-        const yi = polygon[i].y;
-        const xj = polygon[j].x;
-        const yj = polygon[j].y;
-        // prettier-ignore
-        const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
-        if (intersect)
-            inside = !inside;
-    }
-    return inside;
-}
-function isPointerInGraceArea(event, area) {
-    if (!area)
-        return false;
-    const cursorPos = { x: event.clientX, y: event.clientY };
-    return isPointInPolygon(cursorPos, area);
-}
 function whenMouse(handler) {
     return (event) => event.pointerType === "mouse" ? handler(event) : undefined;
 }
@@ -542,10 +431,10 @@ Menu.Item = MenuItem;
 Menu.CheckboxItem = MenuCheckboxItem;
 Menu.RadioGroup = MenuRadioGroup;
 Menu.RadioItem = MenuRadioItem;
-Menu.Separator = MenuSeparator;
+Menu.Divider = MenuDivider;
 Menu.Sub = MenuSub;
 Menu.SubTrigger = MenuSubTrigger;
 Menu.SubContent = MenuSubContent;
 Menu.ItemIndicator = MenuItemIndicator;
-export { Menu, MenuAnchor, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuItemIndicator, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, };
+export { Menu, MenuAnchor, MenuCheckboxItem, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuItemIndicator, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubContent, MenuSubTrigger, };
 //# sourceMappingURL=Menu.js.map