[WC-2583]: Popup Hover leave (#1170)

Author: leonardomendix

packages/pluggableWidgets/popup-menu-web/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added a new 'Close on' setting to customize the popup's closing behavior, allowing it to close when clicked or hovered outside the popup.
+
+### Breaking changes
+
+-   The default behavior for closing a popup set to open on 'hover' is now 'hover leave'.
+
 ## [3.5.3] - 2024-01-08
 
 ### Fixed

packages/pluggableWidgets/popup-menu-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mendix/popup-menu-web",
   "widgetName": "PopupMenu",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "license": "Apache-2.0",
   "repository": {

packages/pluggableWidgets/popup-menu-web/src/PopupMenu.editorConfig.ts

@@ -81,6 +81,10 @@ export function getProperties(
         transformGroupsIntoTabs(defaultProperties);
     }
 
+    if (values.trigger !== "onhover") {
+        hidePropertyIn(defaultProperties, values, "hoverCloseOn");
+    }
+
     return defaultProperties;
 }
 

packages/pluggableWidgets/popup-menu-web/src/PopupMenu.xml

@@ -91,6 +91,14 @@
                         <enumerationValue key="onhover">Hover</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="hoverCloseOn" type="enumeration" defaultValue="onHoverLeave">
+                    <caption>Close on</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="onClickOutside">Click outside</enumerationValue>
+                        <enumerationValue key="onHoverLeave">Hover leave</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="position" type="enumeration" defaultValue="bottom">
                     <caption>Menu position</caption>
                     <description>The location of the menu relative to the click area.</description>

packages/pluggableWidgets/popup-menu-web/src/__tests__/Menu.spec.ts

@@ -30,6 +30,7 @@ describe("Popup menu", () => {
         menuToggle: false,
         menuTrigger: createElement("button", null, "Trigger"),
         advancedMode: false,
+        hoverCloseOn: "onClickOutside",
         position: "bottom",
         basicItems: [
             basicItemProps,

packages/pluggableWidgets/popup-menu-web/src/__tests__/PopupMenu.spec.ts

@@ -26,6 +26,7 @@ describe("Popup menu", () => {
         menuTrigger: createElement("button", null, "Trigger"),
         advancedMode: false,
         position: "bottom",
+        hoverCloseOn: "onHoverLeave",
         basicItems: [
             basicItemProps,
             { itemType: "divider", caption: dynamicValue("Caption"), styleClass: "defaultStyle" }

packages/pluggableWidgets/popup-menu-web/src/components/PopupMenu.tsx

@@ -9,8 +9,9 @@ export interface PopupMenuProps extends PopupMenuContainerProps {
     preview?: boolean;
 }
 export function PopupMenu(props: PopupMenuProps): ReactElement {
-    const preview = !!props.preview;
-    const [visibility, setVisibility] = useState(preview && props.menuToggle);
+    const { preview: isPreview, class: className, menuToggle, menuTrigger, trigger, hoverCloseOn } = props;
+    const preview = !!isPreview;
+    const [visibility, setVisibility] = useState(preview && menuToggle);
     const triggerRef = useRef<HTMLDivElement>(null);
 
     const handleOnClickTrigger = useCallback(
@@ -22,14 +23,22 @@ export function PopupMenu(props: PopupMenuProps): ReactElement {
         [setVisibility]
     );
 
-    const handleOnHoverTrigger = useCallback(
+    const handleOnHoverEnter = useCallback(
         (e: SyntheticEvent<HTMLElement>): void => {
             e.preventDefault();
             e.stopPropagation();
             setVisibility(true);
         },
         [setVisibility]
     );
+    const handleOnHoverLeave = useCallback(
+        (e: SyntheticEvent<HTMLElement>): void => {
+            e.preventDefault();
+            e.stopPropagation();
+            setVisibility(false);
+        },
+        [setVisibility]
+    );
 
     const handleOnClickItem = useCallback((itemAction?: ActionValue): void => {
         setVisibility(false);
@@ -40,26 +49,34 @@ export function PopupMenu(props: PopupMenuProps): ReactElement {
         setVisibility(false);
     }, []);
 
-    const onHover =
-        props.trigger === "onhover" && !preview
-            ? {
-                  onPointerEnter: handleOnHoverTrigger
-              }
-            : {};
-    const onClick =
-        props.trigger === "onclick" && !preview
-            ? {
-                  onClick: handleOnClickTrigger
-              }
-            : {};
+    let eventHandlers = {};
+
+    if (!preview) {
+        if (trigger === "onhover") {
+            if (hoverCloseOn === "onHoverLeave") {
+                eventHandlers = {
+                    onPointerEnter: handleOnHoverEnter,
+                    onPointerLeave: handleOnHoverLeave
+                };
+            } else {
+                eventHandlers = {
+                    onPointerEnter: handleOnHoverEnter
+                };
+            }
+        } else if (trigger === "onclick" && !preview) {
+            eventHandlers = {
+                onClick: handleOnClickTrigger
+            };
+        }
+    }
 
     useEffect(() => {
-        setVisibility(props.menuToggle);
-    }, [props.menuToggle]);
+        setVisibility(menuToggle);
+    }, [menuToggle]);
     const open = visibility && triggerRef.current;
     return (
-        <div ref={triggerRef} className={classNames("popupmenu", props.class)} {...onHover} {...onClick}>
-            <div className={"popupmenu-trigger"}>{props.menuTrigger}</div>
+        <div ref={triggerRef} className={classNames("popupmenu", className)} {...eventHandlers}>
+            <div className={"popupmenu-trigger"}>{menuTrigger}</div>
             {open ? (
                 <Menu
                     {...props}

packages/pluggableWidgets/popup-menu-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="PopupMenu" version="3.5.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="PopupMenu" version="3.6.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="PopupMenu.xml" />
         </widgetFiles>

packages/pluggableWidgets/popup-menu-web/typings/PopupMenuProps.d.ts

@@ -26,6 +26,8 @@ export interface CustomItemsType {
 
 export type TriggerEnum = "onclick" | "onhover";
 
+export type HoverCloseOnEnum = "onClickOutside" | "onHoverLeave";
+
 export type PositionEnum = "left" | "right" | "top" | "bottom";
 
 export interface BasicItemsPreviewType {
@@ -52,6 +54,7 @@ export interface PopupMenuContainerProps {
     basicItems: BasicItemsType[];
     customItems: CustomItemsType[];
     trigger: TriggerEnum;
+    hoverCloseOn: HoverCloseOnEnum;
     position: PositionEnum;
     menuToggle: boolean;
 }
@@ -70,6 +73,7 @@ export interface PopupMenuPreviewProps {
     basicItems: BasicItemsPreviewType[];
     customItems: CustomItemsPreviewType[];
     trigger: TriggerEnum;
+    hoverCloseOn: HoverCloseOnEnum;
     position: PositionEnum;
     menuToggle: boolean;
 }