@mirohq/design-system-dropdown-menu 5.3.2-dropdown-on-pointerup.3 → 5.3.2

package/dist/module.js

@@ -5,7 +5,7 @@ import { Portal as Portal$1 } from '@radix-ui/react-dropdown-menu';
 import { BaseTooltipProvider, useBaseTooltipContext } from '@mirohq/design-system-base-tooltip';
 import { usePrevious } from '@mirohq/design-system-use-previous';
 import { IconProhibit, IconCheckMark, IconMinus, IconChevronRight } from '@mirohq/design-system-icons';
-import { addPropsToChildren, booleanify, mergeRefs } from '@mirohq/design-system-utils';
+import { addPropsToChildren, booleanify, mergeRefs, handleVirtualClick } from '@mirohq/design-system-utils';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled, theme } from '@mirohq/design-system-stitches';
 import { focus, animations } from '@mirohq/design-system-styles';
@@ -14,8 +14,6 @@ import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
 import { useAriaDisabled as useAriaDisabled$1 } from '@mirohq/design-system-use-aria-disabled';
 import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { styles, Thumb } from '@mirohq/design-system-base-switch';
-import { mergeProps } from '@react-aria/utils';
-import { usePress } from '@mirohq/design-system-use-press';
 import { styles as styles$1, isIconComponent } from '@mirohq/design-system-base-icon';
 
 const Context$1 = createContext({
@@ -461,25 +459,16 @@ const ScrollableContent = ({
 const DropdownContext = createContext({});
 const DropdownProvider = ({
   children,
-  open: rootOpen,
   ...restProps
-}) => {
-  const [open, setOpen] = useState(rootOpen);
-  const triggerRef = useRef(null);
-  return /* @__PURE__ */ jsx(
-    DropdownContext.Provider,
-    {
-      value: {
-        ...restProps,
-        rootOpen,
-        open,
-        setOpen,
-        triggerRef
-      },
-      children
-    }
-  );
-};
+}) => /* @__PURE__ */ jsx(
+  DropdownContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
 const useDropdownContext = () => useContext(DropdownContext);
 
 const Content = React.forwardRef(
@@ -496,11 +485,10 @@ const Content = React.forwardRef(
     containerSpacing = "medium",
     overflow = "visible",
     maxHeight,
-    onInteractOutside,
     children,
     ...restProps
   }, forwardRef) => {
-    const { direction, triggerRef } = useDropdownContext();
+    const { direction } = useDropdownContext();
     const preventScrollOnFocus = (ref) => {
       if (ref === null || "_autoScrollPrevented" in ref.focus) {
         return;
@@ -533,12 +521,6 @@ const Content = React.forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
-        onInteractOutside: (e) => {
-          if (e.target === triggerRef.current) {
-            e.preventDefault();
-          }
-          onInteractOutside == null ? void 0 : onInteractOutside(e);
-        },
         children: /* @__PURE__ */ jsx(
           ScrollableContent,
           {
@@ -744,51 +726,17 @@ const StyledTrigger = styled(RadixDropdownMenu.Trigger, {
   }
 });
 
-const Trigger = React.forwardRef(({ asChild = false, ...restProps }, forwardRef) => {
+const Trigger = React.forwardRef(({ asChild = false, onClick, ...restProps }, forwardRef) => {
   const ref = useRef(null);
-  const { setOpen, rootOpen, triggerRef } = useDropdownContext();
-  const { pressProps } = usePress({
-    onPress: () => {
-      if (rootOpen === void 0) {
-        setOpen((open) => !booleanify(open));
-      }
-    }
-  });
-  const elementProps = mergeProps(restProps, pressProps);
-  const onClickHandler = useCallback(
-    (e) => {
-      var _a, _b;
-      if ((e == null ? void 0 : e.nativeEvent) === void 0) {
-        console.error(
-          "DropdownMenu.Trigger onClick expected a MouseEvent but got different one. It usually happens due to a element used asChild with a different onClick interface.\n" + "Event: ".concat(JSON.stringify(e, null, 2))
-        );
-        (_a = restProps.onClick) == null ? void 0 : _a.call(restProps, e);
-        return;
-      }
-      (_b = elementProps.onClick) == null ? void 0 : _b.call(elementProps, e);
-    },
-    [restProps, elementProps]
-  );
   return /* @__PURE__ */ jsx(
     StyledTrigger,
     {
-      ...elementProps,
-      onPointerDown: (e) => {
-        var _a;
-        if (process.env.NODE_ENV === "test") {
-          onClickHandler(e);
-        }
-        (_a = elementProps.onPointerDown) == null ? void 0 : _a.call(elementProps, e);
-      },
-      onClick: onClickHandler,
-      onKeyDown: (e) => {
-        var _a;
-        if (!/^(Arrow|Tab|Escape)/.test(e.key)) {
-          e.preventDefault();
-        }
-        (_a = elementProps.onKeyDown) == null ? void 0 : _a.call(elementProps, e);
+      ...restProps,
+      onClick: (e) => {
+        handleVirtualClick(e, ref);
+        onClick == null ? void 0 : onClick(e);
       },
-      ref: mergeRefs([ref, triggerRef, forwardRef]),
+      ref: mergeRefs([ref, forwardRef]),
       unstyled: !asChild,
       asChild
     }
@@ -943,48 +891,36 @@ const Root = ({
   defaultOpen = false,
   direction,
   interactOutside = false,
+  open,
   onOpen,
   onClose,
   ...restProps
 }) => {
   const { ignoreNextTooltip } = useBaseTooltipContext();
-  const { rootOpen, open, setOpen } = useDropdownContext();
   const prevOpen = usePrevious(open);
   useEffect(() => {
-    if (prevOpen !== open) {
-      if (open === true) {
-        onOpen == null ? void 0 : onOpen();
-      } else {
-        if (prevOpen === true) {
-          ignoreNextTooltip();
-        }
-        onClose == null ? void 0 : onClose();
-      }
+    if (prevOpen === true && open === false) {
+      ignoreNextTooltip();
     }
-  }, [open, prevOpen, onOpen, onClose, ignoreNextTooltip]);
+  }, [ignoreNextTooltip, open, prevOpen]);
   return /* @__PURE__ */ jsx(
     RadixDropdownMenu.Root,
     {
       ...restProps,
       dir: direction,
       modal: interactOutside,
-      open: (
-        // use the root open state if it is defined
-        rootOpen != null ? rootOpen : defaultOpen && (prevOpen === void 0 || prevOpen === open) ? (
-          // only use defaultOpen in the first render then use the context open state
-          // if the open state is the same as the previous one, it is most likely a re-render and we should still use the defaultOpen
-          void 0
-        ) : (
-          // otherwise, use the user open state
-          open
-        )
-      ),
+      open,
       defaultOpen,
-      onOpenChange: setOpen
+      onOpenChange: (newOpen) => {
+        if (!newOpen && open === void 0) {
+          ignoreNextTooltip();
+        }
+        newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+      }
     }
   );
 };
-const DropdownMenu = ({ direction = "ltr", open, ...restProps }) => /* @__PURE__ */ jsx(DropdownProvider, { direction, open, children: /* @__PURE__ */ jsx(BaseTooltipProvider, { children: /* @__PURE__ */ jsx(Root, { direction, ...restProps }) }) });
+const DropdownMenu = ({ direction = "ltr", ...restProps }) => /* @__PURE__ */ jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsx(BaseTooltipProvider, { children: /* @__PURE__ */ jsx(Root, { direction, ...restProps }) }) });
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
 DropdownMenu.Hotkey = Hotkey;