mendix · rahmanunver · Nov 6, 2024
@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added a configurable clipping strategy option.
+
+### Fixed
+
+-   We fixed an issue where popup menu would not overflow the parent widget.
+
 ## [3.6.1] - 2024-09-18
 
 ### Fixed

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

@@ -109,6 +109,14 @@
                         <enumerationValue key="bottom">Bottom</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="clippingStrategy" type="enumeration" defaultValue="absolute">
+                    <caption>Clipping strategy</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="absolute">Absolute</enumerationValue>
+                        <enumerationValue key="fixed">Fixed</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Development">
                 <property key="menuToggle" type="boolean" defaultValue="false">

@@ -40,7 +40,8 @@ describe("Menu", () => {
             { itemType: "divider", caption: dynamicValue("Caption"), styleClass: "defaultStyle" }
         ],
         customItems: [customItemProps],
-        onItemClick: jest.fn()
+        onItemClick: jest.fn(),
+        clippingStrategy: "absolute"
     };
 
     it("renders menu", () => {

@@ -4,7 +4,13 @@ import { PopupContext } from "../components/PopupContext";
 import { usePopup } from "../hooks/usePopup";
 
 export function MenuWithContext(props: MenuProps): ReactElement {
-    const popup = usePopup({ open: true, onOpenChange: jest.fn(), placement: props.position, trigger: props.trigger });
+    const popup = usePopup({
+        open: true,
+        onOpenChange: jest.fn(),
+        placement: props.position,
+        trigger: props.trigger,
+        clippingStrategy: props.clippingStrategy
+    });
 
     return (
         <PopupContext.Provider value={popup}>

@@ -32,7 +32,8 @@ describe("Popup Menu", () => {
             basicItemProps,
             { itemType: "divider", caption: dynamicValue("Caption"), styleClass: "defaultStyle" }
         ],
-        customItems: [customItemProps]
+        customItems: [customItemProps],
+        clippingStrategy: "absolute"
     };
 
     it("renders popup menu", () => {

@@ -4,7 +4,7 @@ import { PopupTrigger } from "../components/PopupTrigger";
 import { usePopup } from "../hooks/usePopup";
 
 export function PopupTriggerWithContext(props: PropsWithChildren): ReactElement {
-    const popup = usePopup({ open: true, onOpenChange: jest.fn(), trigger: "onclick" });
+    const popup = usePopup({ open: true, onOpenChange: jest.fn(), trigger: "onclick", clippingStrategy: "absolute" });
 
     return (
         <PopupContext.Provider value={popup}>

@@ -5,7 +5,7 @@ import { usePopup } from "../hooks/usePopup";
 describe("usePopup", () => {
     it("somethign", () => {
         const popup = renderHook(() => {
-            return usePopup({ open: false, onOpenChange: jest.fn(), trigger: "onclick" });
+            return usePopup({ open: false, onOpenChange: jest.fn(), trigger: "onclick", clippingStrategy: "absolute" });
         });
 
         expect(popup.result.current.open).toBe(false);

@@ -16,7 +16,13 @@ export function PopupMenu(props: PopupMenuProps): ReactElement {
     const preview = !!props.preview;
     const [visibility, setVisibility] = useState(preview && props.menuToggle);
     const open = visibility;
-    const popup = usePopup({ open, onOpenChange: setVisibility, placement: props.position, trigger: props.trigger });
+    const popup = usePopup({
+        open,
+        onOpenChange: setVisibility,
+        placement: props.position,
+        trigger: props.trigger,
+        clippingStrategy: props.clippingStrategy
+    });
 
     const handleOnClickItem = useCallback((itemAction?: ActionValue): void => {
         setVisibility(false);

@@ -14,13 +14,14 @@ import {
     UseInteractionsReturn,
     useRole
 } from "@floating-ui/react";
-import { TriggerEnum } from "../../typings/PopupMenuProps";
+import { TriggerEnum, ClippingStrategyEnum } from "../../typings/PopupMenuProps";
 
 interface PopupOptions {
     placement?: Placement;
     modal?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    clippingStrategy?: ClippingStrategyEnum;
     trigger?: TriggerEnum;
 }
 
@@ -38,11 +39,13 @@ export function usePopup({
     modal,
     open,
     onOpenChange: setOpen,
-    trigger
+    trigger,
+    clippingStrategy
 }: PopupOptions = {}): UsePopupReturn {
     const { context, floatingStyles, refs } = useFloating({
         middleware: [offset(5), flip(), shift()],
         onOpenChange: setOpen,
+        strategy: clippingStrategy,
         open,
         placement,
         whileElementsMounted: autoUpdate

@@ -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.6.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="PopupMenu" version="3.6.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="PopupMenu.xml" />
         </widgetFiles>

@@ -30,6 +30,8 @@ export type HoverCloseOnEnum = "onClickOutside" | "onHoverLeave";
 
 export type PositionEnum = "left" | "right" | "top" | "bottom";
 
+export type ClippingStrategyEnum = "absolute" | "fixed";
+
 export interface BasicItemsPreviewType {
     itemType: ItemTypeEnum;
     caption: string;
@@ -56,6 +58,7 @@ export interface PopupMenuContainerProps {
     trigger: TriggerEnum;
     hoverCloseOn: HoverCloseOnEnum;
     position: PositionEnum;
+    clippingStrategy: ClippingStrategyEnum;
     menuToggle: boolean;
 }
 
@@ -76,5 +79,6 @@ export interface PopupMenuPreviewProps {
     trigger: TriggerEnum;
     hoverCloseOn: HoverCloseOnEnum;
     position: PositionEnum;
+    clippingStrategy: ClippingStrategyEnum;
     menuToggle: boolean;
 }