feat(popup-menu-web): click close on

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

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [4.1.0] - 2024-02-11
+
+### Added
+
+- We added a new 'Close on' setting to customize the popup's closing behavior on click, allowing it to close when clicked anywhere or only outside the popup.
+
 ## [4.0.3] - 2026-02-10
 
 ### Added

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/popup-menu-web",
     "widgetName": "PopupMenu",
-    "version": "4.0.3",
+    "version": "4.1.0",
     "description": "Popup Menu widget for displaying a list of actions in a popup.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

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

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

@@ -91,6 +91,14 @@
                         <enumerationValue key="onhover">Hover</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="clickCloseOn" type="enumeration" defaultValue="onClickAnywhere">
+                    <caption>Close on</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="onClickAnywhere">Click anywhere</enumerationValue>
+                        <enumerationValue key="onClickOutside">Click outside</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="hoverCloseOn" type="enumeration" defaultValue="onHoverLeave">
                     <caption>Close on</caption>
                     <description />

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

@@ -24,10 +24,13 @@ export function PopupMenu(props: PopupMenuProps): ReactElement {
         clippingStrategy: props.clippingStrategy
     });
 
-    const handleOnClickItem = useCallback((itemAction?: ActionValue): void => {
-        setVisibility(false);
-        executeAction(itemAction);
-    }, []);
+    const handleOnClickItem = useCallback(
+        (itemAction?: ActionValue): void => {
+            if (props.clickCloseOn === "onClickAnywhere") setVisibility(false);
+            executeAction(itemAction);
+        },
+        [props.clickCloseOn]
+    );
 
     useEffect(() => {
         setVisibility(props.menuToggle);

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="4.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="PopupMenu" version="4.1.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 ClickCloseOnEnum = "onClickAnywhere" | "onClickOutside";
+
 export type HoverCloseOnEnum = "onClickOutside" | "onHoverLeave";
 
 export type PositionEnum = "left" | "right" | "top" | "bottom";
@@ -56,6 +58,7 @@ export interface PopupMenuContainerProps {
     basicItems: BasicItemsType[];
     customItems: CustomItemsType[];
     trigger: TriggerEnum;
+    clickCloseOn: ClickCloseOnEnum;
     hoverCloseOn: HoverCloseOnEnum;
     position: PositionEnum;
     clippingStrategy: ClippingStrategyEnum;
@@ -78,6 +81,7 @@ export interface PopupMenuPreviewProps {
     basicItems: BasicItemsPreviewType[];
     customItems: CustomItemsPreviewType[];
     trigger: TriggerEnum;
+    clickCloseOn: ClickCloseOnEnum;
     hoverCloseOn: HoverCloseOnEnum;
     position: PositionEnum;
     clippingStrategy: ClippingStrategyEnum;

packages/shared/charts/tsconfig.build.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/main.ts","./src/preview.ts","./src/components/chart.tsx","./src/components/chartpreview.tsx","./src/components/chartview.tsx","./src/components/chartwidget.tsx","./src/components/types.ts","./src/helpers/editorstore.ts","./src/helpers/playground-context.ts","./src/helpers/usechartcontroller.ts","./src/helpers/useeditorstore.ts","./src/hooks/useplotchartdataseries.ts","./src/hooks/useresizeobserver.ts","./src/typings/declare-svg.d.ts","./src/typings/global.d.ts","./src/typings/json-source-map.d.ts","./src/utils/aggregations.ts","./src/utils/chartstyles.ts","./src/utils/compareattrvaluesasc.ts","./src/utils/configs.ts","./src/utils/equality.ts","./src/utils/json.ts","./src/utils/preview-utils.ts","./src/utils/setupbasicseries.ts","./src/utils/themefolderconfig.ts"],"version":"5.9.2"}
+{"root":["./src/main.ts","./src/preview.ts","./src/components/chart.tsx","./src/components/chartpreview.tsx","./src/components/chartview.tsx","./src/components/chartwidget.tsx","./src/components/types.ts","./src/helpers/editorstore.ts","./src/helpers/playground-context.ts","./src/helpers/usechartcontroller.ts","./src/helpers/useeditorstore.ts","./src/hooks/useplotchartdataseries.ts","./src/hooks/useresizeobserver.ts","./src/typings/declare-svg.d.ts","./src/typings/global.d.ts","./src/typings/json-source-map.d.ts","./src/utils/aggregations.ts","./src/utils/chartstyles.ts","./src/utils/compareattrvaluesasc.ts","./src/utils/configs.ts","./src/utils/equality.ts","./src/utils/json.ts","./src/utils/preview-utils.ts","./src/utils/setupbasicseries.ts","./src/utils/themefolderconfig.ts"],"version":"5.9.3"}