@redneckz/wildless-cms-uni-blocks 0.14.361 → 0.14.363

package/bin/migration-scripts/0.14.325.js

@@ -47,5 +47,4 @@ function adjustCalculatorBusinessDeposit(block, oldType, newType) {
       tabs: navs.map((_) => ({ text: _.title, icon: _.icon, type: 'group' })),
     };
   }
-  deleteProp(block, 'anchor');
 }

package/bin/migration-scripts/0.14.328.js

@@ -39,5 +39,4 @@ function adjustCalculatorBusinessDeposit(block) {
       tabs: navs.map((_) => ({ text: _.title, icon: _.icon, type: 'group' })),
     };
   }
-  deleteProp(block, 'anchor');
 }

package/bundle/ProjectSettings.d.ts

@@ -2,6 +2,7 @@ export interface ProjectSettings {
     ASSIST_PROJECT_ID?: string;
     CHAT_BOT?: string;
     CDN?: string;
+    /** @deprecated */
     BASE_PATH?: string;
     YANDEX_MAP_API_KEY?: string;
     YANDEX_METRIKA_ID?: string;

package/bundle/bundle.umd.js

@@ -297,6 +297,7 @@
     const isHash = (href) => Boolean(href?.startsWith('#'));
     const withoutQuery = (href) => (href || '').replace(/\?.*/, '').replace(/\/$/, '');
     const joinPath = (...path) => path.filter(Boolean).join('/').replace(/\/+/g, '/');
+    const hasPrefix = (href, prefix) => prefix && href && href.startsWith(prefix);
 
     var url = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -304,12 +305,13 @@
         isLocalURL: isLocalURL,
         isHash: isHash,
         withoutQuery: withoutQuery,
-        joinPath: joinPath
+        joinPath: joinPath,
+        hasPrefix: hasPrefix
     });
 
     const PREFIX_API = '/api/';
     const FILE_STORAGE_API = `${PREFIX_API}v1/storage`;
-    const adjustHref = (router) => (href, basePath = projectSettings.BASE_PATH) => {
+    const adjustHref = (router) => (href, basePath) => {
         if ([
             !href,
             isURL(href),
@@ -324,7 +326,6 @@
         const isRelativeToBase = href?.startsWith('/');
         return joinPath(hasPrefix(href, basePath) ? '' : basePath, isRelativeToBase ? '/' : dirname(router.pathname), href);
     };
-    const hasPrefix = (href, prefix) => prefix && href && href.startsWith(prefix);
 
     const isOnlyDigits = (str) => str && !/\D/.test(str);
 
@@ -429,6 +430,29 @@
         closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
     });
 
+    const adjustBase = (href, basePath = '') => href.replace(basePath, '');
+
+    const env = new Proxy({
+        _: {},
+        setup(_) {
+            this._ = _;
+        },
+    }, {
+        get(target, p) {
+            return target._[p] || target[p];
+        },
+    });
+
+    function getBasePath() {
+        try {
+            const [, first] = new URL(env.SITE_URL ?? '').pathname.split('/');
+            return `/${first}`;
+        }
+        catch (_) {
+            return '';
+        }
+    }
+
     /* eslint-disable @typescript-eslint/ban-types */
     const handlerDecorator = (handler) => {
         return handlerDecorator._impl(handler);
@@ -439,18 +463,25 @@
     };
 
     function useLink(params = {}) {
-        const { isRemote, basePath } = params;
+        const { compatibleMode } = params;
+        const basePath = getBasePath();
         const router = useRouter();
         const { closeAll } = useDialogManager();
-        return (props) => ({
-            ...props,
-            href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
-            'aria-label': props.text,
-            onClick: handlerDecorator(handleHref(props)),
-        });
+        return (props) => {
+            //? basePath should ends WITH "/" or be EMPTY string
+            const href = adjustHref(router)(props.href, compatibleMode ? '' : appendSlash(basePath));
+            return {
+                ...props,
+                href,
+                'aria-label': props.text,
+                onClick: handlerDecorator(handleHref({ ...props, href })),
+            };
+        };
         function handleHref({ href, target, onClick }) {
             return (ev) => {
                 onClick && onClick(ev);
+                //? basePath should ends WITH "/"
+                const isRemote = !hasPrefix(href, appendSlash(basePath) || '/');
                 if (!href || isRemote || !isLocalURL(href, target)) {
                     // Default routing
                     return;
@@ -458,7 +489,8 @@
                 closeAll();
                 // Client routing
                 ev?.preventDefault();
-                router.push(href);
+                //? basePath should ends WITHOUT "/" or be EMPTY string
+                router.push(adjustBase(href, basePath));
             };
         }
     }
@@ -3318,8 +3350,8 @@
                     .map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
-    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, onClick, data, children }) => {
-        const link = useLink({ isRemote });
+    const LinkWrapper = JSX(({ className = '', href, target, compatibleMode = false, onClick, data, children }) => {
+        const link = useLink({ compatibleMode: compatibleMode });
         const linkProps = link({ href, target, onClick });
         const Tag = href ? 'a' : 'div';
         return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), role: href ? 'link' : 'none', ...getAspectsAttributes(data), children: children }));
@@ -3616,7 +3648,7 @@
     const DepositoryFilter = JSX(({ field, onClearFilter, filtrationState }) => (jsxs("div", { className: "grid grid-cols-12 mb-3xl space-x-xl", children: [jsx(SearchInput, { className: "col-span-4 mt-auto", placeholder: "\u041F\u043E\u0438\u0441\u043A", ...field('query') }), jsx(DatePicker, { className: "col-span-3", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u043E\u0442", maxDate: filtrationState.endDate, ...field('startDate') }), jsx(DatePicker, { className: "col-span-3", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u0434\u043E", minDate: filtrationState.startDate, ...field('endDate') }), jsx("div", { className: "col-span-2 mt-auto", children: jsx(Button, { type: "reset", className: "w-full", version: "secondary", onClick: onClearFilter, children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C" }) })] })));
 
     const DepositoryItem = ({ title, timestamp, publicId }) => {
-        const link = useLink({ basePath: '/' });
+        const link = useLink();
         const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
         return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-2", children: timestamp ? (jsx(Text, { size: "text-m", "font-weight": "font-light", children: formatDate(timestamp) })) : null }), jsx("div", { className: "col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
     };
@@ -3870,28 +3902,30 @@
         return currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
     };
 
-    const LinkList = JSX(({ className = '', items, basePath }) => {
-        const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
-        const link = useLink({ isRemote: isAnotherPortal, basePath });
+    const LinkList = JSX(({ className = '', items }) => {
+        const link = useLink({ compatibleMode: true });
         return (jsx("ul", { className: style('flex flex-col gap-s w-full', className), children: items?.map(renderLinkListItem(link)) }));
     });
-    const renderLinkListItem = (link) => (item, i) => {
-        const { text, dataFooter, ...linkProps } = item;
-        const { href, target, onClick } = link(linkProps);
-        return (jsx("li", { className: "list-none", children: jsx("a", { className: "hover:text-primary-main font-light", role: "link", href: href, target: target || '_self', onClick: onClick, ...getAspectsAttributes(dataFooter), children: text ? text : null }) }, `list_item_${String(i)}`));
+    const renderLinkListItem = (link) => ({ dataFooter, ...linkProps }, i) => {
+        const { text, href, target, onClick } = link(linkProps);
+        if (!text) {
+            return null;
+        }
+        return (jsx("li", { className: "list-none", children: jsx("a", { className: "hover:text-primary-main font-light", role: "link", href: href, target: target || '_self', onClick: onClick, ...getAspectsAttributes(dataFooter), children: text ? text : null }) }, String(i)));
     };
 
+    const isVisibleItem = (areaKeys) => (_) => !_.displayArea || areaKeys.includes(_.displayArea.toLowerCase());
+
     const FOOTER_AREA_KEYS = ['all', 'footer'];
     const Sitemap = JSX(({ className, topItems }) => {
-        const link = useLink({ isRemote: true });
-        return (jsx("div", { role: "menu", className: style('w-full flex items-start justify-between flex-col md:flex-row gap-y-m lg:order-2', className), children: topItems?.filter(isVisibleItem$1).map(link).map(renderColumn) }));
+        const link = useLink({ compatibleMode: true });
+        return (jsx("div", { role: "menu", className: style('w-full flex items-start justify-between flex-col md:flex-row gap-y-m lg:order-2', className), children: topItems?.filter(isVisibleItem(FOOTER_AREA_KEYS)).map(link).map(renderColumn) }));
     });
     const renderColumn = (menuItem, index) => {
         const { text, items = [], href, target = '_self', onClick, dataFooter } = menuItem;
-        const visibleSubItems = items.filter(isVisibleItem$1);
-        return (jsxs("div", { role: "menuitem", className: "flex flex-col gap-s w-full @md:w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target, onClick: onClick, ...getAspectsAttributes(dataFooter), children: text }), visibleSubItems ? jsx(LinkList, { items: visibleSubItems, basePath: appendSlash(href) }) : null] }, String(index)));
+        const visibleSubItems = items.filter(isVisibleItem(FOOTER_AREA_KEYS));
+        return (jsxs("div", { role: "menuitem", className: "flex flex-col gap-s w-full @md:w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target, onClick: onClick, ...getAspectsAttributes(dataFooter), children: text }), visibleSubItems ? jsx(LinkList, { items: visibleSubItems }) : null] }, String(index)));
     };
-    const isVisibleItem$1 = (_) => !_.displayArea || FOOTER_AREA_KEYS.includes(_.displayArea.toLowerCase());
 
     const Contacts = JSX(({ className = '', items = [] }) => items?.length ? (jsx("div", { className: style('space-y-m', className), children: items.map(renderContactsGroup) })) : null);
     const renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
@@ -4140,12 +4174,13 @@
 
     const renderLogoSearchBar = (sitemap, LEFT_COL_WIDTH = '') => {
         const { logo } = sitemap ?? {};
-        const { dataFooter, ...logoProps } = logo ?? {};
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { dataHeader, dataFooter, ...logoProps } = logo ?? {};
         return (jsxs("div", { className: "flex items-stretch gap-3xl", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logoProps, data: dataFooter }), jsx(SearchBar$1, { className: "grow", ...sitemap })] }));
     };
 
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
-        const link = useLink({ isRemote: true });
+        const link = useLink();
         const { href, target, text, onClick } = link(rest);
         return (jsx("a", { className: `text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
@@ -4193,19 +4228,36 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px] space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(LinkButton, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), data: getAspectsWithInclude(data, region?.key), children: buttonText }) })) : null] }) }));
     });
 
-    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);
+    const isHrefActive = (router, strict = false) => ({ href }) => {
+        if (!href) {
+            return false;
+        }
+        const routerHref = withoutQuery(getRouterHref(href, router));
+        return strict ? routerHref === withoutQuery(href) : routerHref.startsWith(withoutQuery(href));
+    };
+    const getRouterHref = (href, router) => {
+        const basePath = getBasePath();
+        return isURL(href) ? router.href : joinPath(basePath, router.pathname);
+    };
 
     function useActiveRoute(items = []) {
         const router = useRouter();
-        const activeIndex = items.findIndex(isTopItemActive(router));
+        const isTopItemActive = isHrefActive(router);
+        const isTopItemActiveStrict = isHrefActive(router, true);
+        let activeIndex = -1;
+        for (const [i, item] of items.entries()) {
+            if (isTopItemActive(item)) {
+                activeIndex = i;
+                if (isTopItemActiveStrict(item)) {
+                    break;
+                }
+            }
+        }
         return [activeIndex, items[activeIndex]];
     }
 
     const TopItem = JSX(({ className = '', active, flat, children, data, ...rest }) => {
-        const link = useLink({ isRemote: true });
+        const link = useLink({ compatibleMode: true });
         const { href, target, text, onClick } = link(rest);
         return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, ...getAspectsAttributes(data), children: jsx("span", { suppressHydrationWarning: true, className: getTextStyle$1(active, flat), children: text || children }) }));
     });
@@ -4233,11 +4285,7 @@
         return (jsxs("div", { className: "flex gap-s items-center", children: [icon ? jsx(Img, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text }) })) : null] }));
     });
 
-    const renderRegion = (data, onChangeLocation) => (region) => {
-        return region.name ? (jsx(LinkWrapper, { isRemote: true, href: `/branches/${region.slug}`, className: "mb-xs sm:mb-2xs hover:text-primary-hover", onClick: () => {
-                onChangeLocation && onChangeLocation(region);
-            }, data: getAspectsWithInclude(data, region.name), children: jsx(Text, { size: "text-l", font: "font-light", children: region.name }) }, String(region.id))) : null;
-    };
+    const renderRegion = (data, onChangeLocation) => (region) => region.name ? (jsx(LinkWrapper, { compatibleMode: true, href: `/branches/${region.slug}`, className: "mb-xs sm:mb-2xs hover:text-primary-hover", onClick: () => onChangeLocation?.(region), data: getAspectsWithInclude(data, region.name), children: jsx(Text, { size: "text-l", font: "font-light", children: region.name }) }, String(region.id))) : null;
 
     const renderRegionGroup = (onChangeLocation, data) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-2xl w-56", children: [jsx("div", { className: "mb-s", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(data, onChangeLocation))] }, letter));
 
@@ -4249,7 +4297,7 @@
     const SEARCH_TERM_MIN_LENGTH = 3;
     const LocationDialog = JSX(({ foreignOffices, branches }) => {
         const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
-        const link = useLink({ isRemote: true });
+        const link = useLink({ compatibleMode: true });
         const { href } = link({ href: `/branches/${currentLocation.slug}` });
         const [query, setQuery] = useState('');
         const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
@@ -4259,7 +4307,7 @@
             selectCurrentLocation(region);
             close();
         }, []);
-        return (jsxs(Dialog, { className: "pb-20", head: jsxs("div", { children: [jsx(Text, { size: "text-h4", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B" }), currentLocation ? (jsx("div", { className: "mb-s", children: jsxs(Paragraph, { size: "text-l", color: "text-primary-text", children: ["\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:", jsx(LinkWrapper, { isRemote: true, href: href, className: "inline mx-2xs text-primary-main", children: currentLocation.name })] }) })) : null, jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+        return (jsxs(Dialog, { className: "pb-20", head: jsxs("div", { children: [jsx(Text, { size: "text-h4", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B" }), currentLocation ? (jsx("div", { className: "mb-s", children: jsxs(Paragraph, { size: "text-l", color: "text-primary-text", children: ["\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:", jsx(LinkWrapper, { href: href, compatibleMode: true, className: "inline mx-2xs text-primary-main", children: currentLocation.name })] }) })) : null, jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
                         .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
                         .map(renderRegion(branches?.dataSelect, handleChangeLocation)) })) : (jsx("div", { className: "columns-1 sm:columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation, branches?.dataSelect)) })), renderForeignOffices(foreignOffices)] }));
     });
@@ -4296,26 +4344,17 @@
     });
 
     const DropdownMenu = JSX(({ className = '', items, activeItem, ariaLabel }) => {
-        const link = useLink();
-        const [isVisible, setVisible] = useState(false);
-        const handleToggle = useCallback(() => setVisible((_) => !_), []);
-        const handleClickOutside = useCallback(() => setVisible(false), []);
-        const ref = useOutsideClick(handleClickOutside);
-        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: handleToggle, children: Array(3)
+        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)
                         .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', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => {
-                        const { text, ...linkProps } = item;
-                        const { href, target, onClick } = link(linkProps);
-                        return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', item === activeItem ? 'text-primary-main' : ''), href: href, target: target, onClick: onClick, role: "menuitem", children: text }, href || 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", { className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56', 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({ compatibleMode: true });
+        const { text, href, target, onClick } = link(rest);
+        return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', isActive ? 'text-primary-main' : ''), href: href, target: target, onClick: onClick, role: "menuitem", ...getAspectsAttributes(rest?.data), children: text }));
     });
-
-    const findActiveSubItem = (router) => (items = []) => {
-        const possibleActiveSubItems = items?.filter(isHrefActive(router));
-        return possibleActiveSubItems?.length
-            ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-            : undefined;
-    };
 
     const getNS = (_) => globalThis[_];
     const initializeExternalNS = (namespaceName, url) => {
@@ -4413,9 +4452,9 @@
     });
 
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, data, ...rest }) => {
-        const link = useLink();
+        const link = useLink({ compatibleMode: true });
         const { href, target, text, onClick } = link(rest);
-        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, ...getAspectsAttributes(data), onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
+        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, ...getAspectsAttributes(data), children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
     });
     const getTextStyle = (active = false) => style('font-sans text-l font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
@@ -4443,24 +4482,19 @@
         return text ? (jsx(LinkButton, { className: style('py-s font-light whitespace-nowrap', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), ...rest, children: text })) : null;
     });
 
-    const HEADER_AREA_KEYS = ['all', 'header'];
-    const isVisibleItem = (item) => !item.displayArea || HEADER_AREA_KEYS.includes(item.displayArea.toLowerCase());
-
     const HeaderSubMenu = JSX(({ subItems = [], version, internetBankButton, dropdownMenuAriaLabel, chatBotAriaLabel }) => {
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const router = useRouter();
-        const visibleSubItems = useMemo(() => subItems.filter(isVisibleItem), [subItems]);
-        const activeSubItem = findActiveSubItem(router)(subItems);
-        const [visibleItemsCount, setVisibleItemsCount] = useState(visibleSubItems.length);
-        const dropDownMenuItems = visibleSubItems.slice(visibleItemsCount);
+        const [, activeSubItem] = useActiveRoute(subItems);
+        const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+        const dropDownMenuItems = subItems.slice(visibleItemsCount);
         const subItemsListRef = useRef(null);
         const observerOptions = { rootRef: subItemsListRef };
-        const subItemsVisibilityHandlers = useMemo(() => visibleSubItems.map((_, index) => (isIntersecting) => {
+        const subItemsVisibilityHandlers = useMemo(() => subItems.map((_, index) => (isIntersecting) => {
             setVisibleItemsCount(isIntersecting
                 ? handleIntersectionActivation(index)
                 : handleIntersectionDeactivation(index));
-        }), [visibleSubItems]);
-        return (jsxs("nav", { className: "relative mt-s flex items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl", role: "menu", children: visibleSubItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "relative w-auto z-40", items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsxs("div", { className: "flex gap-s", children: [projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "ml-4xl", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] })] }));
+        }), [subItems]);
+        return (jsxs("nav", { className: "relative mt-s flex items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "relative w-auto z-40", items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsxs("div", { className: "flex gap-s", children: [projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "ml-4xl", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -4469,13 +4503,15 @@
         'bg-white': 'primary',
         transparent: 'transparent',
     };
+    const HEADER_AREA_KEYS = ['all', 'header'];
     const Header = UniBlock(({ className, bgColor = 'bg-white', logo: customLogo, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], portal, ...rest }) => {
         const sitemap = rest.options?.page?.sitemap ?? {};
         const { topItems, logo } = sitemap;
-        const { dataHeader, ...logoProps } = logo ?? {};
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
         const [, activeTopItem] = useActiveRoute(topItems);
         const { internetBankButton } = portal || {};
-        return (jsx(BlockWrapper, { tag: "header", className: style('pt-3xl px-20', activeTopItem?.items?.length ? 'pb-m' : 'pb-lg', className), defaultPadding: "", version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: customLogo ?? logoProps, data: dataHeader }), topItems?.filter(isVisibleItem).map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, data: _.dataHeader, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", ...sitemap })] }), jsx("div", { className: style('mt-xl h-px bg-main-divider', getVersionStyle(version)) }), activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, version: version, internetBankButton: internetBankButton })) : null] }) }));
+        return (jsx(BlockWrapper, { tag: "header", className: style('pt-3xl px-20', activeTopItem?.items?.length ? 'pb-m' : 'pb-lg', className), defaultPadding: "", version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: customLogo ?? logoProps, data: dataHeader }), topItems?.filter(isVisibleItem(HEADER_AREA_KEYS)).map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, data: _.dataHeader, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", ...sitemap })] }), jsx("div", { className: style('mt-xl h-px bg-main-divider', getVersionStyle(version)) }), activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem?.items?.filter(isVisibleItem(HEADER_AREA_KEYS)), version: version, internetBankButton: internetBankButton })) : null] }) }));
     });
     const getVersionStyle = (version) => (version === 'transparent' ? 'opacity-30' : '');
 
@@ -5686,8 +5722,18 @@
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: items?.length || 0,
         });
+        useEffect(() => scrollToSelected(containerRef.current, items), []);
         return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
+    const scrollToSelected = (container, items) => {
+        const selectedIndex = items.findIndex((_) => _?.selected);
+        if (container && selectedIndex > 1) {
+            container.scrollTo({
+                left: selectedIndex * getItemWidth(container)(items.length),
+                behavior: 'smooth',
+            });
+        }
+    };
 
     const renderTabs = ({ tabsMode, ...props }) => {
         switch (tabsMode) {
@@ -6265,7 +6311,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.360";
+    const packageVersion = "0.14.362";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;