@mirohq/design-system-dropdown-menu 5.3.8-dropdown-close-on-mouseup.1 → 5.3.9

package/dist/main.js

@@ -15,7 +15,6 @@ var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effe
 var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
 var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
 var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
-var designSystemUseEventListener = require('@mirohq/design-system-use-event-listener');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 function _interopNamespaceDefault(e) {
@@ -480,28 +479,16 @@ const ScrollableContent = ({
 const DropdownContext = React.createContext({});
 const DropdownProvider = ({
   children,
-  open: rootOpen,
   ...restProps
-}) => {
-  const [open, setOpen] = React.useState(rootOpen);
-  const triggerRef = React.useRef(null);
-  React.useEffect(() => {
-    setOpen(rootOpen);
-  }, [rootOpen]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownContext.Provider,
-    {
-      value: {
-        ...restProps,
-        open,
-        setOpen,
-        triggerRef,
-        rootOpen
-      },
-      children
-    }
-  );
-};
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
 const useDropdownContext = () => React.useContext(DropdownContext);
 
 const Content = React.forwardRef(
@@ -518,11 +505,10 @@ const Content = React.forwardRef(
     containerSpacing = "medium",
     overflow = "visible",
     maxHeight,
-    onFocusOutside,
     children,
     ...restProps
   }, forwardRef) => {
-    const { direction, rootOpen } = useDropdownContext();
+    const { direction } = useDropdownContext();
     const preventScrollOnFocus = (ref) => {
       if (ref === null || "_autoScrollPrevented" in ref.focus) {
         return;
@@ -541,12 +527,6 @@ const Content = React.forwardRef(
       focusWithouAutoScroll._autoScrollPrevented = true;
       ref.focus = focusWithouAutoScroll;
     };
-    const handleFocusOutside = (event) => {
-      if (rootOpen !== void 0) {
-        event.preventDefault();
-      }
-      onFocusOutside == null ? void 0 : onFocusOutside(event);
-    };
     return /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledContent,
       {
@@ -561,7 +541,6 @@ const Content = React.forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
-        onFocusOutside: handleFocusOutside,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {
@@ -767,45 +746,22 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
   }
 });
 
-const Trigger = React.forwardRef(
-  ({ asChild = false, onClick, onPointerDown, onPointerUp, ...restProps }, forwardRef) => {
-    const ref = React.useRef(null);
-    const { setOpen, triggerRef } = useDropdownContext();
-    const isPointerDownRef = React.useRef(false);
-    const handlePointerDown = (e) => {
-      isPointerDownRef.current = true;
-      onPointerDown == null ? void 0 : onPointerDown(e);
-    };
-    const handlePointerUp = (e) => {
-      onPointerUp == null ? void 0 : onPointerUp(e);
-    };
-    designSystemUseEventListener.useEventListener("pointerup", (e) => {
-      if (!isPointerDownRef.current) {
-        return;
-      }
-      isPointerDownRef.current = false;
-      const isOutsideTrigger = triggerRef.current != null && !triggerRef.current.contains(e.target);
-      if (isOutsideTrigger) {
-        setOpen(false);
-      }
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledTrigger,
-      {
-        ...restProps,
-        onClick: (e) => {
-          designSystemUtils.handleVirtualClick(e, ref);
-          onClick == null ? void 0 : onClick(e);
-        },
-        onPointerDown: handlePointerDown,
-        onPointerUp: handlePointerUp,
-        ref: designSystemUtils.mergeRefs([ref, triggerRef, forwardRef]),
-        unstyled: !asChild,
-        asChild
-      }
-    );
-  }
-);
+const Trigger = React.forwardRef(({ asChild = false, onClick, ...restProps }, forwardRef) => {
+  const ref = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledTrigger,
+    {
+      ...restProps,
+      onClick: (e) => {
+        designSystemUtils.handleVirtualClick(e, ref);
+        onClick == null ? void 0 : onClick(e);
+      },
+      ref: designSystemUtils.mergeRefs([ref, forwardRef]),
+      unstyled: !asChild,
+      asChild
+    }
+  );
+});
 
 const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   color: "$icon-neutrals-with-text",
@@ -955,47 +911,36 @@ const Root = ({
   defaultOpen = false,
   direction,
   interactOutside = false,
+  open,
   onOpen,
   onClose,
   ...restProps
 }) => {
   const { ignoreNextTooltip } = designSystemBaseTooltip.useBaseTooltipContext();
-  const { open, setOpen, rootOpen } = useDropdownContext();
   const prevOpen = designSystemUsePrevious.usePrevious(open);
   React.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]);
-  const isControlled = rootOpen !== void 0;
-  const resolvedOpen = isControlled ? open : 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 internal open state
-    open
-  );
+  }, [ignoreNextTooltip, open, prevOpen]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDropdownMenu__namespace.Root,
     {
       ...restProps,
       dir: direction,
       modal: interactOutside,
-      open: resolvedOpen,
-      defaultOpen: isControlled ? void 0 : defaultOpen,
-      onOpenChange: setOpen
+      open,
+      defaultOpen,
+      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__ */ jsxRuntime.jsx(DropdownProvider, { direction, open, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
+const DropdownMenu = ({ direction = "ltr", ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
 DropdownMenu.Hotkey = Hotkey;