@wix/site-ui 1.30.0 → 1.31.0

package/dist/Menu/index.js

@@ -1,7 +1,346 @@
-import { jsx } from "react/jsx-runtime";
-import { Menu } from "@base-ui/react/menu";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { MenuBackdrop_MenuBackdrop, MenuGroupLabel_MenuGroupLabel, MenuLinkItem_MenuLinkItem, MenuArrow_MenuArrow, MenuItem_MenuItem, MenuPopup_MenuPopup, MenuPositioner_MenuPositioner, MenuRadioItem_MenuRadioItem, MenuSubmenuTrigger_MenuSubmenuTrigger, MenuSubmenuRoot, MenuGroup_MenuGroup, findRootOwnerId, useMenuRootContext, MenuStore, MenuPortal_MenuPortal, useContextMenuRootContext, MenuCheckboxItemIndicator_MenuCheckboxItemIndicator, MenuCheckboxItem_MenuCheckboxItem, useMenuPositionerContext, MenuRadioItemIndicator_MenuRadioItemIndicator, MenuRadioGroup_MenuRadioGroup, MenuRoot_MenuRoot } from "../6882.js";
+import { usePopupViewport } from "../8171.js";
+import { EMPTY_OBJECT, mergeProps, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { ownerDocument } from "../9829.js";
+import { fastComponentRef } from "../5992.js";
+import { useBaseUiId } from "../6046.js";
+import { useCompositeRootContext } from "../8724.js";
+import { useFloatingParentNodeId, useFloatingTree, useFloatingNodeId, FloatingTreeStore } from "../285.js";
+import { useTriggerDataForwarding } from "../8106.js";
+import { useButton } from "../9189.js";
+import { useTimeout } from "../42.js";
+import { useStableCallback } from "../7541.js";
+import { contains } from "../4549.js";
+import { getPseudoElementBounds } from "../7373.js";
+import { triggerHover, cancelOpen } from "../2418.js";
+import { safePolygon, useHoverReferenceInteraction } from "../3670.js";
+import { useClick } from "../5864.js";
+import { useFocus } from "../904.js";
+import { useTriggerFocusGuards } from "../7871.js";
+import { FocusGuard_FocusGuard, pressableTriggerOpenStateMapping } from "../4388.js";
+import { CompositeItem } from "../951.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { useMenubarContext } from "../7564.js";
+import { createChangeEventDetails } from "../4768.js";
+import { Separator } from "../9635.js";
 import * as __rspack_external_react from "react";
+let MenuViewportCssVars_MenuViewportCssVars = /*#__PURE__*/ function(MenuViewportCssVars) {
+    MenuViewportCssVars["popupWidth"] = "--popup-width";
+    MenuViewportCssVars["popupHeight"] = "--popup-height";
+    return MenuViewportCssVars;
+}({});
+const stateAttributesMapping = {
+    activationDirection: (value)=>value ? {
+            'data-activation-direction': value
+        } : null
+};
+const MenuViewport_MenuViewport = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, children, ...elementProps } = componentProps;
+    const { store } = useMenuRootContext();
+    const { side } = useMenuPositionerContext();
+    const instantType = store.useState('instantType');
+    const { children: childrenToRender, state: viewportState } = usePopupViewport({
+        store,
+        side,
+        cssVars: MenuViewportCssVars_MenuViewportCssVars,
+        children
+    });
+    const state = {
+        activationDirection: viewportState.activationDirection,
+        transitioning: viewportState.transitioning,
+        instant: instantType
+    };
+    return useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            elementProps,
+            {
+                children: childrenToRender
+            }
+        ],
+        stateAttributesMapping: stateAttributesMapping
+    });
+});
+if ("production" !== process.env.NODE_ENV) MenuViewport_MenuViewport.displayName = "MenuViewport";
+function useMixedToggleClickHandler(params) {
+    const { enabled = true, mouseDownAction, open } = params;
+    const ignoreClickRef = __rspack_external_react.useRef(false);
+    return __rspack_external_react.useMemo(()=>{
+        if (!enabled) return EMPTY_OBJECT;
+        return {
+            onMouseDown: (event)=>{
+                if ('open' === mouseDownAction && !open || 'close' === mouseDownAction && open) {
+                    ignoreClickRef.current = true;
+                    ownerDocument(event.currentTarget).addEventListener('click', ()=>{
+                        ignoreClickRef.current = false;
+                    }, {
+                        once: true
+                    });
+                }
+            },
+            onClick: (event)=>{
+                if (ignoreClickRef.current) {
+                    ignoreClickRef.current = false;
+                    event.preventBaseUIHandler();
+                }
+            }
+        };
+    }, [
+        enabled,
+        mouseDownAction,
+        open
+    ]);
+}
+const BOUNDARY_OFFSET = 2;
+const MenuTrigger_MenuTrigger = fastComponentRef(function(componentProps, forwardedRef) {
+    const { render, className, style, disabled: disabledProp = false, nativeButton = true, id: idProp, openOnHover: openOnHoverProp, delay = 100, closeDelay = 0, handle, payload, ...elementProps } = componentProps;
+    const rootContext = useMenuRootContext(true);
+    const store = handle?.store ?? rootContext?.store;
+    if (!store) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : esm_formatErrorMessage(85));
+    const thisTriggerId = useBaseUiId(idProp);
+    const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
+    const floatingRootContext = store.useState('floatingRootContext');
+    const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+    const popupId = store.useState('triggerPopupId', thisTriggerId);
+    const triggerElementRef = __rspack_external_react.useRef(null);
+    const parent = useMenuParent();
+    const compositeRootContext = useCompositeRootContext(true);
+    const floatingTreeRootFromContext = useFloatingTree();
+    const floatingTreeRoot = __rspack_external_react.useMemo(()=>floatingTreeRootFromContext ?? new FloatingTreeStore(), [
+        floatingTreeRootFromContext
+    ]);
+    const floatingNodeId = useFloatingNodeId(floatingTreeRoot);
+    const floatingParentNodeId = useFloatingParentNodeId();
+    const { registerTrigger, isMountedByThisTrigger } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+        payload,
+        closeDelay,
+        parent,
+        floatingTreeRoot,
+        floatingNodeId,
+        floatingParentNodeId,
+        keyboardEventRelay: compositeRootContext?.relayKeyboardEvent
+    });
+    const isInMenubar = 'menubar' === parent.type;
+    const rootDisabled = store.useState('disabled');
+    const disabled = disabledProp || rootDisabled || isInMenubar && parent.context.disabled;
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        native: nativeButton
+    });
+    __rspack_external_react.useEffect(()=>{
+        if (!isOpenedByThisTrigger && void 0 === parent.type) store.context.allowMouseUpTriggerRef.current = false;
+    }, [
+        store,
+        isOpenedByThisTrigger,
+        parent.type
+    ]);
+    const triggerRef = __rspack_external_react.useRef(null);
+    const allowMouseUpTriggerTimeout = useTimeout();
+    const handleDocumentMouseUp = useStableCallback((mouseEvent)=>{
+        if (!triggerRef.current) return;
+        allowMouseUpTriggerTimeout.clear();
+        store.context.allowMouseUpTriggerRef.current = false;
+        const mouseUpTarget = mouseEvent.target;
+        if (contains(triggerRef.current, mouseUpTarget) || contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) return;
+        if (null != mouseUpTarget && findRootOwnerId(mouseUpTarget) === store.select('rootId')) return;
+        const bounds = getPseudoElementBounds(triggerRef.current);
+        if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) return;
+        floatingTreeRoot.events.emit('close', {
+            domEvent: mouseEvent,
+            reason: cancelOpen
+        });
+    });
+    __rspack_external_react.useEffect(()=>{
+        if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === triggerHover) {
+            const doc = ownerDocument(triggerRef.current);
+            doc.addEventListener('mouseup', handleDocumentMouseUp, {
+                once: true
+            });
+        }
+    }, [
+        isOpenedByThisTrigger,
+        handleDocumentMouseUp,
+        store
+    ]);
+    const parentMenubarHasSubmenuOpen = isInMenubar && parent.context.hasSubmenuOpen;
+    const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen;
+    const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
+        enabled: openOnHover && !disabled && 'context-menu' !== parent.type && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+        handleClose: safePolygon({
+            blockPointerEvents: !isInMenubar
+        }),
+        mouseOnly: true,
+        move: false,
+        restMs: void 0 === parent.type ? delay : void 0,
+        delay: {
+            close: closeDelay
+        },
+        triggerElementRef,
+        externalTree: floatingTreeRoot,
+        isActiveTrigger: isTriggerActive,
+        isClosing: ()=>'ending' === store.select('transitionStatus')
+    });
+    const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
+    const click = useClick(floatingRootContext, {
+        enabled: !disabled && 'context-menu' !== parent.type,
+        event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
+        toggle: true,
+        ignoreMouse: false,
+        stickIfOpen: void 0 === parent.type ? stickIfOpen : false
+    });
+    const focus = useFocus(floatingRootContext, {
+        enabled: !disabled && parentMenubarHasSubmenuOpen
+    });
+    const mixedToggleHandlers = useMixedToggleClickHandler({
+        open: isOpenedByThisTrigger,
+        enabled: isInMenubar,
+        mouseDownAction: 'open'
+    });
+    const localInteractionProps = __rspack_external_react.useMemo(()=>mergeProps(focus.reference, click.reference), [
+        focus.reference,
+        click.reference
+    ]);
+    const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+    const { preFocusGuardRef, handlePreFocusGuardFocus, handleFocusTargetFocus } = useTriggerFocusGuards(store, triggerElementRef);
+    const state = {
+        disabled,
+        open: isOpenedByThisTrigger
+    };
+    const ref = [
+        triggerRef,
+        forwardedRef,
+        buttonRef,
+        registerTrigger,
+        triggerElementRef
+    ];
+    const props = [
+        localInteractionProps,
+        hoverProps ?? EMPTY_OBJECT,
+        rootTriggerProps,
+        {
+            'aria-haspopup': 'menu',
+            'aria-controls': popupId,
+            id: thisTriggerId,
+            onMouseDown: (event)=>{
+                if (store.select('open')) return;
+                allowMouseUpTriggerTimeout.start(200, ()=>{
+                    store.context.allowMouseUpTriggerRef.current = true;
+                });
+                const doc = ownerDocument(event.currentTarget);
+                doc.addEventListener('mouseup', handleDocumentMouseUp, {
+                    once: true
+                });
+            }
+        },
+        isInMenubar ? {
+            role: 'menuitem'
+        } : {},
+        mixedToggleHandlers,
+        elementProps,
+        getButtonProps
+    ];
+    const element = useRenderElement('button', componentProps, {
+        enabled: !isInMenubar,
+        stateAttributesMapping: pressableTriggerOpenStateMapping,
+        state,
+        ref,
+        props
+    });
+    if (isInMenubar) return /*#__PURE__*/ jsx(CompositeItem, {
+        tag: "button",
+        render: render,
+        className: className,
+        style: style,
+        state: state,
+        refs: ref,
+        props: props,
+        stateAttributesMapping: pressableTriggerOpenStateMapping
+    });
+    if (isOpenedByThisTrigger) return /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                ref: preFocusGuardRef,
+                onFocus: handlePreFocusGuardFocus
+            }, `${thisTriggerId}-pre-focus-guard`),
+            /*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
+                children: element
+            }, thisTriggerId),
+            /*#__PURE__*/ jsx(FocusGuard_FocusGuard, {
+                ref: store.context.triggerFocusTargetRef,
+                onFocus: handleFocusTargetFocus
+            }, `${thisTriggerId}-post-focus-guard`)
+        ]
+    });
+    return /*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
+        children: element
+    }, thisTriggerId);
+});
+if ("production" !== process.env.NODE_ENV) MenuTrigger_MenuTrigger.displayName = "MenuTrigger";
+function useStickIfOpen(open, openReason) {
+    const stickIfOpenTimeout = useTimeout();
+    const [stickIfOpen, setStickIfOpen] = __rspack_external_react.useState(false);
+    useIsoLayoutEffect(()=>{
+        if (open && 'trigger-hover' === openReason) {
+            setStickIfOpen(true);
+            stickIfOpenTimeout.start(500, ()=>{
+                setStickIfOpen(false);
+            });
+        } else if (!open) {
+            stickIfOpenTimeout.clear();
+            setStickIfOpen(false);
+        }
+    }, [
+        open,
+        openReason,
+        stickIfOpenTimeout
+    ]);
+    return stickIfOpen;
+}
+function useMenuParent() {
+    const contextMenuContext = useContextMenuRootContext(true);
+    const parentContext = useMenuRootContext(true);
+    const menubarContext = useMenubarContext(true);
+    const parent = __rspack_external_react.useMemo(()=>{
+        if (menubarContext) return {
+            type: 'menubar',
+            context: menubarContext
+        };
+        if (contextMenuContext && !parentContext) return {
+            type: 'context-menu',
+            context: contextMenuContext
+        };
+        return {
+            type: void 0
+        };
+    }, [
+        contextMenuContext,
+        parentContext,
+        menubarContext
+    ]);
+    return parent;
+}
+class MenuHandle {
+    constructor(){
+        this.store = new MenuStore();
+    }
+    open(triggerId) {
+        const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : void 0;
+        if (triggerId && !triggerElement) throw new Error("production" !== process.env.NODE_ENV ? `Base UI: MenuHandle.open: No trigger found with id "${triggerId}".` : esm_formatErrorMessage(83, triggerId));
+        this.store.setOpen(true, createChangeEventDetails('imperative-action', void 0, triggerElement));
+    }
+    close() {
+        this.store.setOpen(false, createChangeEventDetails('imperative-action', void 0, void 0));
+    }
+    get isOpen() {
+        return this.store.select('open');
+    }
+}
+function createMenuHandle() {
+    return new MenuHandle();
+}
 const Menu_module = {
     trigger: "trigger-OltV1Y",
     groupLabel: "groupLabel-_L41zu",
@@ -9,88 +348,88 @@ const Menu_module = {
     item: "item-toMw6N",
     linkItem: "linkItem-UZphBs"
 };
-const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Arrow, {
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuArrow_MenuArrow, {
         ref: ref,
         className: clsx(Menu_module.arrow, className),
         ...props
     }));
-const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Backdrop, {
+const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuBackdrop_MenuBackdrop, {
         ref: ref,
         className: clsx(Menu_module.backdrop, className),
         ...props
     }));
-const CheckboxItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.CheckboxItem, {
+const CheckboxItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuCheckboxItem_MenuCheckboxItem, {
         ref: ref,
         className: clsx(Menu_module.checkboxItem, className),
         ...props
     }));
-const CheckboxItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.CheckboxItemIndicator, {
+const CheckboxItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuCheckboxItemIndicator_MenuCheckboxItemIndicator, {
         ref: ref,
         className: clsx(Menu_module.checkboxItemIndicator, className),
         ...props
     }));
-const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Group, {
+const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuGroup_MenuGroup, {
         ref: ref,
         className: clsx(Menu_module.group, className),
         ...props
     }));
-const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.GroupLabel, {
+const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuGroupLabel_MenuGroupLabel, {
         ref: ref,
         className: clsx(Menu_module.groupLabel, className),
         ...props
     }));
-const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Item, {
+const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuItem_MenuItem, {
         ref: ref,
         className: clsx(Menu_module.item, className),
         ...props
     }));
-const LinkItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.LinkItem, {
+const LinkItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuLinkItem_MenuLinkItem, {
         ref: ref,
         className: clsx(Menu_module.linkItem, className),
         ...props
     }));
-const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Popup, {
+const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuPopup_MenuPopup, {
         ref: ref,
         className: clsx(Menu_module.popup, className),
         ...props
     }));
-const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Positioner, {
+const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuPositioner_MenuPositioner, {
         ref: ref,
         className: clsx(Menu_module.positioner, className),
         ...props
     }));
-const RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.RadioGroup, {
+const RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuRadioGroup_MenuRadioGroup, {
         ref: ref,
         className: clsx(Menu_module.radioGroup, className),
         ...props
     }));
-const RadioItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.RadioItem, {
+const RadioItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuRadioItem_MenuRadioItem, {
         ref: ref,
         className: clsx(Menu_module.radioItem, className),
         ...props
     }));
-const RadioItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.RadioItemIndicator, {
+const RadioItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuRadioItemIndicator_MenuRadioItemIndicator, {
         ref: ref,
         className: clsx(Menu_module.radioItemIndicator, className),
         ...props
     }));
-const SubmenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.SubmenuTrigger, {
+const SubmenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuSubmenuTrigger_MenuSubmenuTrigger, {
         ref: ref,
         className: clsx(Menu_module.submenuTrigger, className),
         ...props
     }));
-const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Viewport, {
+const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuViewport_MenuViewport, {
         ref: ref,
         className: clsx(Menu_module.viewport, className),
         ...props
     }));
 function Trigger({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Menu.Trigger, {
+    return /*#__PURE__*/ jsx(MenuTrigger_MenuTrigger, {
         ...props,
         className: clsx(Menu_module.trigger, className)
     });
 }
-const Menu_Menu = {
+const Menu = {
     Arrow: Arrow,
     Backdrop: Backdrop,
     CheckboxItem: CheckboxItem,
@@ -106,12 +445,12 @@ const Menu_Menu = {
     RadioItemIndicator: RadioItemIndicator,
     SubmenuTrigger: SubmenuTrigger,
     Viewport: Viewport,
-    Root: Menu.Root,
+    Root: MenuRoot_MenuRoot,
     Trigger: Trigger,
-    SubmenuRoot: Menu.SubmenuRoot,
-    Portal: Menu.Portal,
-    Separator: Menu.Separator,
-    Handle: Menu.Handle,
-    createHandle: Menu.createHandle
+    SubmenuRoot: MenuSubmenuRoot,
+    Portal: MenuPortal_MenuPortal,
+    Separator: Separator,
+    Handle: MenuHandle,
+    createHandle: createMenuHandle
 };
-export { Menu_Menu as Menu };
+export { Menu };