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

Co-authored-by: Rahman <rahmanunver@gmail.com>

Author: Carter-Moorse

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/__tests__/Menu.spec.tsx

@@ -34,6 +34,7 @@ describe("Menu", () => {
         menuTrigger: createElement("button", null, "Trigger"),
         advancedMode: false,
         hoverCloseOn: "onClickOutside",
+        clickCloseOn: "onClickAnywhere",
         position: "bottom",
         basicItems: [
             basicItemProps,

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

@@ -28,6 +28,7 @@ describe("Popup Menu", () => {
         advancedMode: false,
         position: "bottom",
         hoverCloseOn: "onHoverLeave",
+        clickCloseOn: "onClickAnywhere",
         basicItems: [
             basicItemProps,
             { itemType: "divider", caption: dynamicValue("Caption"), styleClass: "defaultStyle" }

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

@@ -19,10 +19,13 @@ export function PopupMenu(props: PopupMenuContainerProps): 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/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;