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

package/dist/main.js

@@ -15,6 +15,8 @@ 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 utils = require('@react-aria/utils');
+var designSystemUsePress = require('@mirohq/design-system-use-press');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 function _interopNamespaceDefault(e) {
@@ -479,16 +481,25 @@ const ScrollableContent = ({
 const DropdownContext = React.createContext({});
 const DropdownProvider = ({
   children,
+  open: rootOpen,
   ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownContext.Provider,
-  {
-    value: {
-      ...restProps
-    },
-    children
-  }
-);
+}) => {
+  const [open, setOpen] = React.useState(rootOpen);
+  const triggerRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownContext.Provider,
+    {
+      value: {
+        ...restProps,
+        rootOpen,
+        open,
+        setOpen,
+        triggerRef
+      },
+      children
+    }
+  );
+};
 const useDropdownContext = () => React.useContext(DropdownContext);
 
 const Content = React.forwardRef(
@@ -505,10 +516,11 @@ const Content = React.forwardRef(
     containerSpacing = "medium",
     overflow = "visible",
     maxHeight,
+    onInteractOutside,
     children,
     ...restProps
   }, forwardRef) => {
-    const { direction } = useDropdownContext();
+    const { direction, triggerRef } = useDropdownContext();
     const preventScrollOnFocus = (ref) => {
       if (ref === null || "_autoScrollPrevented" in ref.focus) {
         return;
@@ -541,6 +553,12 @@ const Content = React.forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
+        onInteractOutside: (e) => {
+          if (e.target === triggerRef.current) {
+            e.preventDefault();
+          }
+          onInteractOutside == null ? void 0 : onInteractOutside(e);
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {
@@ -746,17 +764,51 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
   }
 });
 
-const Trigger = React.forwardRef(({ asChild = false, onClick, ...restProps }, forwardRef) => {
+const Trigger = React.forwardRef(({ asChild = false, ...restProps }, forwardRef) => {
   const ref = React.useRef(null);
+  const { setOpen, rootOpen, triggerRef } = useDropdownContext();
+  const { pressProps } = designSystemUsePress.usePress({
+    onPress: () => {
+      if (rootOpen === void 0) {
+        setOpen((open) => !designSystemUtils.booleanify(open));
+      }
+    }
+  });
+  const elementProps = utils.mergeProps(restProps, pressProps);
+  const onClickHandler = React.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__ */ jsxRuntime.jsx(
     StyledTrigger,
     {
-      ...restProps,
-      onClick: (e) => {
-        designSystemUtils.handleVirtualClick(e, ref);
-        onClick == null ? void 0 : onClick(e);
+      ...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);
       },
-      ref: designSystemUtils.mergeRefs([ref, forwardRef]),
+      ref: designSystemUtils.mergeRefs([ref, triggerRef, forwardRef]),
       unstyled: !asChild,
       asChild
     }
@@ -911,36 +963,48 @@ const Root = ({
   defaultOpen = false,
   direction,
   interactOutside = false,
-  open,
   onOpen,
   onClose,
   ...restProps
 }) => {
   const { ignoreNextTooltip } = designSystemBaseTooltip.useBaseTooltipContext();
+  const { rootOpen, open, setOpen } = useDropdownContext();
   const prevOpen = designSystemUsePrevious.usePrevious(open);
   React.useEffect(() => {
-    if (prevOpen === true && open === false) {
-      ignoreNextTooltip();
+    if (prevOpen !== open) {
+      if (open === true) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        if (prevOpen === true) {
+          ignoreNextTooltip();
+        }
+        onClose == null ? void 0 : onClose();
+      }
     }
-  }, [ignoreNextTooltip, open, prevOpen]);
+  }, [open, prevOpen, onOpen, onClose, ignoreNextTooltip]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDropdownMenu__namespace.Root,
     {
       ...restProps,
       dir: direction,
       modal: interactOutside,
-      open,
+      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
+        )
+      ),
       defaultOpen,
-      onOpenChange: (newOpen) => {
-        if (!newOpen && open === void 0) {
-          ignoreNextTooltip();
-        }
-        newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
-      }
+      onOpenChange: setOpen
     }
   );
 };
-const DropdownMenu = ({ direction = "ltr", ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
+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 }) }) });
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
 DropdownMenu.Hotkey = Hotkey;