@wix/site-ui 1.30.0 → 1.31.0

package/dist/ContextMenu/index.js

@@ -1,7 +1,182 @@
 import { jsx } from "react/jsx-runtime";
-import { ContextMenu } from "@base-ui/react/context-menu";
 import clsx from "clsx";
+import { MenuBackdrop_MenuBackdrop, MenuPositioner_MenuPositioner, MenuGroupLabel_MenuGroupLabel, MenuPopup_MenuPopup, MenuArrow_MenuArrow, MenuRootContext, MenuItem_MenuItem, MenuLinkItem_MenuLinkItem, MenuRadioItem_MenuRadioItem, ContextMenuRootContext, MenuSubmenuTrigger_MenuSubmenuTrigger, MenuGroup_MenuGroup, findRootOwnerId, useMenuRootContext, MenuSubmenuRoot, MenuPortal_MenuPortal, useContextMenuRootContext, MenuCheckboxItemIndicator_MenuCheckboxItemIndicator, MenuCheckboxItem_MenuCheckboxItem, MenuRadioItemIndicator_MenuRadioItemIndicator, MenuRadioGroup_MenuRadioGroup, MenuRoot_MenuRoot } from "../6882.js";
+import { useTimeout } from "../42.js";
+import { createChangeEventDetails } from "../4768.js";
+import { triggerPress, cancelOpen } from "../2418.js";
+import { stopEvent } from "../6330.js";
+import { ownerDocument } from "../9829.js";
+import { addEventListener } from "../4723.js";
+import { getTarget, contains } from "../4549.js";
+import { useRenderElement } from "../8272.js";
+import { pressableTriggerOpenStateMapping } from "../4388.js";
+import { useId } from "../6046.js";
+import { Separator } from "../9635.js";
 import * as __rspack_external_react from "react";
+const LONG_PRESS_DELAY = 500;
+const ContextMenuTrigger_ContextMenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { setAnchor, actionsRef, internalBackdropRef, backdropRef, positionerRef, allowMouseUpTriggerRef, initialCursorPointRef, rootId } = useContextMenuRootContext(false);
+    const { store } = useMenuRootContext(false);
+    const open = store.useState('open');
+    const disabled = store.useState('disabled');
+    const triggerRef = __rspack_external_react.useRef(null);
+    const touchPositionRef = __rspack_external_react.useRef(null);
+    const longPressTimeout = useTimeout();
+    const allowMouseUpTimeout = useTimeout();
+    const allowMouseUpRef = __rspack_external_react.useRef(false);
+    function handleLongPress(x, y, event) {
+        const isTouchEvent = event.type.startsWith('touch');
+        initialCursorPointRef.current = {
+            x,
+            y
+        };
+        setAnchor({
+            getBoundingClientRect () {
+                return DOMRect.fromRect({
+                    width: isTouchEvent ? 10 : 0,
+                    height: isTouchEvent ? 10 : 0,
+                    x,
+                    y
+                });
+            }
+        });
+        allowMouseUpRef.current = false;
+        actionsRef.current?.setOpen(true, createChangeEventDetails(triggerPress, event));
+        allowMouseUpTimeout.start(LONG_PRESS_DELAY, ()=>{
+            allowMouseUpRef.current = true;
+        });
+    }
+    function handleContextMenu(event) {
+        if (disabled) return;
+        allowMouseUpTriggerRef.current = true;
+        stopEvent(event);
+        handleLongPress(event.clientX, event.clientY, event.nativeEvent);
+        const doc = ownerDocument(triggerRef.current);
+        addEventListener(doc, 'mouseup', (mouseEvent)=>{
+            allowMouseUpTriggerRef.current = false;
+            if (!allowMouseUpRef.current) return;
+            allowMouseUpTimeout.clear();
+            allowMouseUpRef.current = false;
+            const mouseUpTarget = getTarget(mouseEvent);
+            if (contains(positionerRef.current, mouseUpTarget)) return;
+            if (rootId && mouseUpTarget && findRootOwnerId(mouseUpTarget) === rootId) return;
+            actionsRef.current?.setOpen(false, createChangeEventDetails(cancelOpen, mouseEvent));
+        }, {
+            once: true
+        });
+    }
+    function handleTouchStart(event) {
+        if (disabled) return;
+        allowMouseUpTriggerRef.current = false;
+        if (1 === event.touches.length) {
+            event.stopPropagation();
+            const touch = event.touches[0];
+            touchPositionRef.current = {
+                x: touch.clientX,
+                y: touch.clientY
+            };
+            longPressTimeout.start(LONG_PRESS_DELAY, ()=>{
+                if (touchPositionRef.current) handleLongPress(touchPositionRef.current.x, touchPositionRef.current.y, event.nativeEvent);
+            });
+        }
+    }
+    function handleTouchMove(event) {
+        if (longPressTimeout.isStarted() && touchPositionRef.current && 1 === event.touches.length) {
+            const touch = event.touches[0];
+            const moveThreshold = 10;
+            const deltaX = Math.abs(touch.clientX - touchPositionRef.current.x);
+            const deltaY = Math.abs(touch.clientY - touchPositionRef.current.y);
+            if (deltaX > moveThreshold || deltaY > moveThreshold) longPressTimeout.clear();
+        }
+    }
+    function handleTouchEnd() {
+        longPressTimeout.clear();
+        touchPositionRef.current = null;
+    }
+    __rspack_external_react.useEffect(()=>{
+        function handleDocumentContextMenu(event) {
+            if (disabled) return;
+            const target = getTarget(event);
+            const targetElement = target;
+            if (contains(triggerRef.current, targetElement) || contains(internalBackdropRef.current, targetElement) || contains(backdropRef.current, targetElement)) event.preventDefault();
+        }
+        const doc = ownerDocument(triggerRef.current);
+        return addEventListener(doc, 'contextmenu', handleDocumentContextMenu);
+    }, [
+        backdropRef,
+        disabled,
+        internalBackdropRef
+    ]);
+    const state = {
+        open
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            triggerRef,
+            forwardedRef
+        ],
+        props: [
+            {
+                onContextMenu: handleContextMenu,
+                onTouchStart: handleTouchStart,
+                onTouchMove: handleTouchMove,
+                onTouchEnd: handleTouchEnd,
+                onTouchCancel: handleTouchEnd,
+                style: {
+                    WebkitTouchCallout: 'none'
+                }
+            },
+            elementProps
+        ],
+        stateAttributesMapping: pressableTriggerOpenStateMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) ContextMenuTrigger_ContextMenuTrigger.displayName = "ContextMenuTrigger";
+function ContextMenuRoot(props) {
+    const [anchor, setAnchor] = __rspack_external_react.useState({
+        getBoundingClientRect () {
+            return DOMRect.fromRect({
+                width: 0,
+                height: 0,
+                x: 0,
+                y: 0
+            });
+        }
+    });
+    const backdropRef = __rspack_external_react.useRef(null);
+    const internalBackdropRef = __rspack_external_react.useRef(null);
+    const actionsRef = __rspack_external_react.useRef(null);
+    const positionerRef = __rspack_external_react.useRef(null);
+    const allowMouseUpTriggerRef = __rspack_external_react.useRef(true);
+    const initialCursorPointRef = __rspack_external_react.useRef(null);
+    const id = useId();
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            anchor,
+            setAnchor,
+            actionsRef,
+            backdropRef,
+            internalBackdropRef,
+            positionerRef,
+            allowMouseUpTriggerRef,
+            initialCursorPointRef,
+            rootId: id
+        }), [
+        anchor,
+        id
+    ]);
+    return /*#__PURE__*/ jsx(ContextMenuRootContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(MenuRootContext.Provider, {
+            value: void 0,
+            children: /*#__PURE__*/ jsx(MenuRoot_MenuRoot, {
+                ...props
+            })
+        })
+    });
+}
 const ContextMenu_module = {
     popup: "popup-exWvLg",
     groupLabel: "groupLabel-nJbnHC",
@@ -11,82 +186,82 @@ const ContextMenu_module = {
     radioItem: "radioItem-GkHQXK",
     submenuTrigger: "submenuTrigger-vAkD3A"
 };
-const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Trigger, {
+const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenuTrigger_ContextMenuTrigger, {
         ref: ref,
         className: clsx(ContextMenu_module.trigger, className),
         ...props
     }));
-const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Backdrop, {
+const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuBackdrop_MenuBackdrop, {
         ref: ref,
         className: clsx(ContextMenu_module.backdrop, className),
         ...props
     }));
-const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Positioner, {
+const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuPositioner_MenuPositioner, {
         ref: ref,
         className: clsx(ContextMenu_module.positioner, className),
         ...props
     }));
-const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Popup, {
+const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuPopup_MenuPopup, {
         ref: ref,
         className: clsx(ContextMenu_module.popup, className),
         ...props
     }));
-const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Arrow, {
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuArrow_MenuArrow, {
         ref: ref,
         className: clsx(ContextMenu_module.arrow, className),
         ...props
     }));
-const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Group, {
+const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuGroup_MenuGroup, {
         ref: ref,
         className: clsx(ContextMenu_module.group, className),
         ...props
     }));
-const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.GroupLabel, {
+const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuGroupLabel_MenuGroupLabel, {
         ref: ref,
         className: clsx(ContextMenu_module.groupLabel, className),
         ...props
     }));
-const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Item, {
+const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuItem_MenuItem, {
         ref: ref,
         className: clsx(ContextMenu_module.item, className),
         ...props
     }));
-const CheckboxItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.CheckboxItem, {
+const CheckboxItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuCheckboxItem_MenuCheckboxItem, {
         ref: ref,
         className: clsx(ContextMenu_module.checkboxItem, className),
         ...props
     }));
-const CheckboxItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.CheckboxItemIndicator, {
+const CheckboxItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuCheckboxItemIndicator_MenuCheckboxItemIndicator, {
         ref: ref,
         className: clsx(ContextMenu_module.checkboxItemIndicator, className),
         ...props
     }));
-const LinkItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.LinkItem, {
+const LinkItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuLinkItem_MenuLinkItem, {
         ref: ref,
         className: clsx(ContextMenu_module.linkItem, className),
         ...props
     }));
-const RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.RadioGroup, {
+const RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuRadioGroup_MenuRadioGroup, {
         ref: ref,
         className: clsx(ContextMenu_module.radioGroup, className),
         ...props
     }));
-const RadioItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.RadioItem, {
+const RadioItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuRadioItem_MenuRadioItem, {
         ref: ref,
         className: clsx(ContextMenu_module.radioItem, className),
         ...props
     }));
-const RadioItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.RadioItemIndicator, {
+const RadioItemIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuRadioItemIndicator_MenuRadioItemIndicator, {
         ref: ref,
         className: clsx(ContextMenu_module.radioItemIndicator, className),
         ...props
     }));
-const SubmenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.SubmenuTrigger, {
+const SubmenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuSubmenuTrigger_MenuSubmenuTrigger, {
         ref: ref,
         className: clsx(ContextMenu_module.submenuTrigger, className),
         ...props
     }));
-const ContextMenu_ContextMenu = {
+const ContextMenu = {
     Trigger: Trigger,
     Backdrop: Backdrop,
     Positioner: Positioner,
@@ -102,9 +277,9 @@ const ContextMenu_ContextMenu = {
     RadioItem: RadioItem,
     RadioItemIndicator: RadioItemIndicator,
     SubmenuTrigger: SubmenuTrigger,
-    Root: ContextMenu.Root,
-    SubmenuRoot: ContextMenu.SubmenuRoot,
-    Portal: ContextMenu.Portal,
-    Separator: ContextMenu.Separator
+    Root: ContextMenuRoot,
+    SubmenuRoot: MenuSubmenuRoot,
+    Portal: MenuPortal_MenuPortal,
+    Separator: Separator
 };
-export { ContextMenu_ContextMenu as ContextMenu };
+export { ContextMenu };