@redneckz/wildless-cms-uni-blocks 0.14.431 → 0.14.432

package/bundle/bundle.umd.js

@@ -4380,9 +4380,31 @@
     const DropdownMenu = JSX(({ className = '', items, activeItem, ariaLabel }) => {
         const [isVisible, { setFalse, toggle }] = useBool(false);
         const ref = useOutsideClick(setFalse);
-        return (jsxs("div", { className: style(isVisible ? 'bg-white rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, children: Array(3)
+        const dropdownRef = useRef(null);
+        const changeDropdownPosition = useCallback((isOpened, buttonRef, menuRef) => {
+            if (isOpened) {
+                const dropdownRect = menuRef?.current?.getBoundingClientRect();
+                const dropdownButtonRect = buttonRef?.current?.getBoundingClientRect();
+                if (menuRef.current && dropdownRect && dropdownButtonRect) {
+                    if (dropdownRect?.right >= globalThis.innerWidth) {
+                        menuRef.current.style.left = `${globalThis.innerWidth - dropdownRect.width}px`;
+                    }
+                    else if (dropdownButtonRect?.left > dropdownRect.left) {
+                        menuRef.current.style.left = `${globalThis.innerWidth - dropdownRect.width}px`;
+                    }
+                    else {
+                        menuRef.current.style.left = '';
+                    }
+                }
+            }
+        }, [isVisible]);
+        useEventListener(globalThis, 'resize', () => changeDropdownPosition(isVisible, ref, dropdownRef));
+        useEffect(() => {
+            changeDropdownPosition(isVisible, ref, dropdownRef);
+        }, [isVisible]);
+        return (jsxs("div", { className: style(isVisible ? 'rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, children: Array(3)
                         .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40 translate-x-[-100%]', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i)))) })] }));
+                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { ref: dropdownRef, className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i)))) })] }));
     });
     const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
         const link = useLink();
@@ -6490,7 +6512,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.430";
+    const packageVersion = "0.14.431";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;