@redneckz/wildless-cms-uni-blocks 0.14.254 → 0.14.255

package/mobile/bundle/bundle.umd.js

@@ -4755,23 +4755,12 @@
     };
     const getIconSizeStyle = (size) => (size === 'normal' ? '38' : '24');
 
-    const isHrefActive = (router) => ({ href }) => !href ? false : withoutQuery(getRouterHref(href, router)).startsWith(withoutQuery(href));
-    const getRouterHref = (href, router) => isURL(href) ? router.href : router.pathname;
-
-    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
-
-    function useActiveRoute(items = []) {
-        const router = useRouter();
-        const activeIndex = items.findIndex(isTopItemActive(router));
-        return [activeIndex, items[activeIndex]];
-    }
+    const CloseButton = JSX(({ className, onClose }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-2xs bg-transparent border-none', className), onClick: onClose, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", type: "button", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
     const StickyBottomMenuBurger = JSX(({ isActive, onClick }) => (jsxs("button", { className: style(isActive ? 'text-primary-main' : 'text-primary-text', `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`), onClick: onClick, type: "button", children: [jsx(Icon, { className: "w-6 h-6", name: "BurgerIcon", iconVersion: isActive ? 'color' : 'black' }), "\u041C\u0435\u043D\u044E"] })));
 
     const StickyBottomMenuItem = JSX(({ isActive, item, onClick }) => {
-        const link = useLink({ isRemote: true });
-        const { href, onClick: handleClick } = link({ href: item?.href, onClick });
-        return (jsxs("a", { className: style(isActive ? 'text-primary-main' : 'text-primary-text', `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`), href: href, target: "_self", title: item?.title || '', onClick: handleClick, children: [jsx(Icon, { className: "w-6 h-6", name: item?.icon?.icon, iconVersion: isActive ? 'color' : 'black' }), item?.title || ''] }));
+        return (jsxs("div", { className: style(isActive ? 'text-primary-main' : 'text-primary-text', `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`), title: item?.title || '', onClick: onClick, children: [jsx(Icon, { className: "w-6 h-6", name: item?.icon?.icon, iconVersion: isActive ? 'color' : 'black' }), item?.title || ''] }));
     });
 
     const isDialogOpen = (id, dialogs) => Boolean(dialogs.find((item) => item.id === id, id));
@@ -4815,7 +4804,16 @@
         return dialogs;
     };
 
-    const CloseButton = JSX(({ className, onClose }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-2xs bg-transparent border-none', className), onClick: onClose, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", type: "button", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
+    const isHrefActive = (router) => ({ href }) => !href ? false : withoutQuery(getRouterHref(href, router)).startsWith(withoutQuery(href));
+    const getRouterHref = (href, router) => isURL(href) ? router.href : router.pathname;
+
+    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
+
+    function useActiveRoute(items = []) {
+        const router = useRouter();
+        const activeIndex = items.findIndex(isTopItemActive(router));
+        return [activeIndex, items[activeIndex]];
+    }
 
     const Dialog = JSX(({ className, head, children, onClose }) => {
         const { close } = useDialogManager();
@@ -4878,16 +4876,69 @@
     };
 
     const EMPTY_MENU = [];
+    // eslint-disable-next-line max-lines-per-function
     const StickyBottomMenu = UniBlock(({ sticky, ...rest }) => {
         const { menuItems = EMPTY_MENU } = sticky ?? {};
         const [isBurgerMenuDialogOpen, { toggle, close }] = useBurgerMenuDialog(rest.options?.page?.sitemap ?? {});
-        const [, activeItem] = useActiveRoute(menuItems);
+        const popup = usePopupManager();
         const middleIdx = Math.floor(menuItems.length / 2);
         const leftItems = menuItems.slice(0, middleIdx);
         const rightItems = menuItems.slice(middleIdx);
-        return (jsx(BlockWrapper, { className: "h-[74px] z-[100] relative", defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "ml-auto container bg-white flex justify-center shadow-blue-gray", children: [leftItems.map(renderMenuItem(activeItem, close)), jsx(StickyBottomMenuBurger, { isActive: isBurgerMenuDialogOpen, onClick: toggle }), rightItems.map(renderMenuItem(activeItem, close))] }) }));
+        const [activeIndex, setActiveIndex] = useState(-1);
+        const [currentItemPosition, setCurrentItemPosition] = useState('');
+        const [popupState, { setFalse: setPopupClosed, setTrue: setPopupOpened }] = useBool();
+        const closePopup = useCallback(() => {
+            setPopupClosed();
+            setActiveIndex(-1);
+            setCurrentItemPosition('');
+            popup.close();
+        }, [popup]);
+        const menuRef = useRef(null);
+        const popupRef = useOutsideClick(closePopup);
+        const openPopup = useCallback((index, itemsPosition) => {
+            setPopupOpened();
+            close();
+            const menuDimensions = menuRef?.current?.getBoundingClientRect();
+            popup.open(jsxs("div", { onClick: (e) => e.stopPropagation(), className: "sticky py-xl top-0 rounded-t-3xl bg-white z-10", children: [jsxs("div", { className: "container px-xl text-center text-h3", children: [itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title, jsx(CloseButton, { className: "absolute top-0 right-0", onClose: closePopup })] }), jsx("div", { className: "bg-white text-l h-[70vh] overflow-y-auto no-scrollbar", ref: popupRef })] }), {
+                top: -Math.max(globalThis.document?.documentElement?.clientHeight || 0, globalThis.innerHeight || 0) *
+                    0.7 -
+                    56,
+                left: menuDimensions?.left || 0,
+                width: menuDimensions?.width,
+            });
+        }, [close, popup]);
+        const handleMenuItemClick = useCallback((index, itemsPosition) => {
+            setCurrentItemPosition(itemsPosition);
+            setActiveIndex(index);
+            openPopup(index, itemsPosition);
+        }, [openPopup]);
+        useEffect(() => {
+            if (!popupRef.current) {
+                return;
+            }
+            if (!popupRef.current.shadowRoot) {
+                popupRef.current?.attachShadow({ mode: 'open' });
+            }
+            const shadowRoot = popupRef.current.shadowRoot;
+            if (!shadowRoot) {
+                return;
+            }
+            if (currentItemPosition === 'left') {
+                shadowRoot.innerHTML = leftItems[activeIndex]?.__html || '';
+            }
+            else {
+                shadowRoot.innerHTML = rightItems[activeIndex]?.__html || '';
+            }
+        }, [activeIndex, currentItemPosition, popupState]);
+        return (jsx(BlockWrapper, { className: "h-[74px] z-[100] relative", defaultPadding: "p-0", ...rest, children: jsxs("div", { ref: menuRef, className: "ml-auto container bg-white flex justify-center shadow-blue-gray", children: [leftItems.map(renderMenuItem(handleMenuItemClick, 'left', { activeIndex, currentItemPosition })), jsx(StickyBottomMenuBurger, { isActive: isBurgerMenuDialogOpen, onClick: toggle }), rightItems.map(renderMenuItem(handleMenuItemClick, 'right', { activeIndex, currentItemPosition }))] }) }));
     });
-    const renderMenuItem = (activeItem, close) => (_, i) => (jsx(StickyBottomMenuItem, { isActive: _ === activeItem, item: _, onClick: close }, _.href || String(i)));
+    const renderMenuItem = (handleMenuItemClick, itemsPosition, currentActiveItem) => (_, i, arr) => {
+        return (jsx(StickyBottomMenuItem, { item: _, isActive: arr[currentActiveItem.activeIndex]?.title === _?.title &&
+                currentActiveItem.currentItemPosition === itemsPosition, onClick: (e) => {
+                e.stopPropagation();
+                handleMenuItemClick(i, itemsPosition);
+            } }, _.title || String(i)));
+    };
 
     const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
     const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType }) => {
@@ -5479,7 +5530,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.253";
+    const packageVersion = "0.14.254";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;