@redneckz/wildless-cms-uni-blocks 0.14.394 → 0.14.396

package/bundle/bundle.umd.js

@@ -4219,99 +4219,12 @@
         return isURL(href) ? router.href : joinPath(basePath, router.pathname);
     };
 
-    const TopItem = JSX(({ className = '', active, flat, children, data, ...rest }) => {
-        const link = useLink();
-        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 }) }));
-    });
-    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
-        ? 'rounded-md border-primary-main group-data-transparent:border-white'
-        : 'border-transparent', flat ? '' : 'px-m py-xs');
-    const getTextStyle$1 = (active = false, flat = false) => {
-        const activeFlatStyle = flat ? 'text-primary-text' : 'text-secondary-text';
-        return style('font-sans text-s font-light', active ? 'text-primary-main' : style(activeFlatStyle, 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
-    };
-
-    const groupBy = (list, keyGetter) => {
-        const result = new Map();
-        for (const item of list) {
-            const key = keyGetter(item);
-            const group = result.get(key) || [];
-            result.set(key, [...group, item]);
-        }
-        return result;
-    };
-
-    const renderForeignOffices = (foreignOffices) => foreignOffices?.length ? (jsxs("div", { className: "sm:border-t sm:border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex flex-col sm:flex-row gap-5xl", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null;
-    const ForeignOffice = JSX(({ icon, ...rest }) => {
-        const link = useLink();
-        const { text, target, href, onClick } = link(rest);
-        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) => region.name ? (jsx(LinkWrapper, { 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));
-
-    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: style(inputValidStyle, `h-12 pl-m w-full peer text-l text-black rounded-md box-border`), value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
-    });
-
-    const SEARCH_TERM_MIN_LENGTH = 3;
-    const LocationDialog = JSX(({ foreignOffices, branches }) => {
-        const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
-        const link = useLink();
-        const { href } = link({ href: `/branches/${currentLocation.slug}` });
-        const [query, setQuery] = useState('');
-        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
-        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
-        const { close } = useDialogManager();
-        const handleChangeLocation = useCallback((region) => {
-            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, { 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
-                        .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)] }));
-    });
-    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
-    const cleanUpRegions = (regions) => regions.map((region) => ({
-        ...region,
-        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
-    }));
-
-    const useLocationDialog = (props) => {
-        const { open, close } = useDialogManager();
-        return {
-            open: (options = {}) => open(jsx(LocationDialog, { ...props }), options),
-            close,
-        };
-    };
-
-    const BUTTON_SIZE_STYLE = {
-        default: 'w-6 h-6',
-        large: 'w-12 h-12',
-    };
-    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel, image, data, onClick, }) => (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit', isGrayBg && !isRounded ? 'bg-main-divider' : '', isRounded
-            ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getAspectsAttributes(data), children: jsx(Img, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
-
-    const HeaderSecondaryMenu = JSX(({ className, version, ...rest }) => {
-        const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const [currentLocation] = useLocation(rest?.branches?.default);
-        const searchDialog = useSearchDialog(rest);
-        const locationDialog = useLocationDialog(rest);
-        const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
-        const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
-        return (jsxs("div", { className: style('flex items-center gap-lg', className), role: "navigation", children: [rest?.branches?.visible ? (jsx(TopItem, { flat: true, href: "#", text: currentLocation?.name, data: getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? ''), onClick: openLocationDialog })) : null, rest?.officesAtms?.href ? jsx(TopItem, { flat: true, ...rest.officesAtms }) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: rest?.search?.ariaLabel ?? 'Поиск', onClick: openSearchDialog, data: rest?.search?.data })] }));
-    });
-
     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)
                         .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) => (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", { 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();
@@ -4319,6 +4232,14 @@
         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 BUTTON_SIZE_STYLE = {
+        default: 'w-6 h-6',
+        large: 'w-12 h-12',
+    };
+    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel, image, data, onClick, }) => (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit', isGrayBg && !isRounded ? 'bg-main-divider' : '', isRounded
+            ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getAspectsAttributes(data), children: jsx(Img, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
+
     const getNS = (_) => globalThis[_];
     const initializeExternalNS = (namespaceName, url) => {
         const script = document.getElementById(url);
@@ -4417,9 +4338,9 @@
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, data, ...rest }) => {
         const link = useLink();
         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, 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] }));
+        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$1(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');
+    const getTextStyle$1 = (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');
 
     const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
         const observerCallback = useCallback((entries) => {
@@ -4453,11 +4374,118 @@
         const subItemsListRef = useRef(null);
         const observerOptions = { rootRef: subItemsListRef };
         const subItemsVisibilityHandlers = useMemo(() => subItems.map((_, index) => (isIntersecting) => {
+            setVisibleItemsCount(isIntersecting
+                ? handleIntersectionActivation$1(index)
+                : handleIntersectionDeactivation$1(index));
+        }), [subItems]);
+        return (jsxs("nav", { className: "relative mt-s flex gap-s 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, { items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+    });
+    const handleIntersectionActivation$1 = (index) => (prev) => Math.max(prev, index + 1);
+    const handleIntersectionDeactivation$1 = (index) => (prev) => Math.min(prev, index);
+
+    const groupBy = (list, keyGetter) => {
+        const result = new Map();
+        for (const item of list) {
+            const key = keyGetter(item);
+            const group = result.get(key) || [];
+            result.set(key, [...group, item]);
+        }
+        return result;
+    };
+
+    const renderForeignOffices = (foreignOffices) => foreignOffices?.length ? (jsxs("div", { className: "sm:border-t sm:border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex flex-col sm:flex-row gap-5xl", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null;
+    const ForeignOffice = JSX(({ icon, ...rest }) => {
+        const link = useLink();
+        const { text, target, href, onClick } = link(rest);
+        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) => region.name ? (jsx(LinkWrapper, { 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));
+
+    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: style(inputValidStyle, `h-12 pl-m w-full peer text-l text-black rounded-md box-border`), value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
+    });
+
+    const SEARCH_TERM_MIN_LENGTH = 3;
+    const LocationDialog = JSX(({ foreignOffices, branches }) => {
+        const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
+        const link = useLink();
+        const { href } = link({ href: `/branches/${currentLocation.slug}` });
+        const [query, setQuery] = useState('');
+        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
+        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
+        const { close } = useDialogManager();
+        const handleChangeLocation = useCallback((region) => {
+            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, { 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
+                        .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)] }));
+    });
+    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
+    const cleanUpRegions = (regions) => regions.map((region) => ({
+        ...region,
+        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+    }));
+
+    const useLocationDialog = (props) => {
+        const { open, close } = useDialogManager();
+        return {
+            open: (options = {}) => open(jsx(LocationDialog, { ...props }), options),
+            close,
+        };
+    };
+
+    const TopItem = JSX(({ className = '', active, flat, children, data, ...rest }) => {
+        const link = useLink();
+        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(active, flat), children: text || children }) }));
+    });
+    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
+        ? 'rounded-md border-primary-main group-data-transparent:border-white'
+        : 'border-transparent', flat ? '' : 'px-m py-xs');
+    const getTextStyle = (active = false, flat = false) => {
+        const activeFlatStyle = flat ? 'text-primary-text' : 'text-secondary-text';
+        return style('font-sans text-s font-light', active ? 'text-primary-main' : style(activeFlatStyle, 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+    };
+
+    const HeaderSecondaryMenu = JSX(({ className, version, ...rest }) => {
+        const iconVersion = version === 'transparent' ? 'white' : 'black';
+        const [currentLocation] = useLocation(rest?.branches?.default);
+        const searchDialog = useSearchDialog(rest);
+        const locationDialog = useLocationDialog(rest);
+        const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
+        const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
+        return (jsxs("div", { className: style('flex items-center ml-5 md:max-w-[300px] xl:max-w-full gap-lg', className), role: "navigation", children: [rest?.branches?.visible ? (jsx(TopItem, { className: "whitespace-nowrap text-ellipsis overflow-hidden", flat: true, href: "#", text: currentLocation?.name, data: getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? ''), onClick: openLocationDialog })) : null, rest?.officesAtms?.href ? (jsx(TopItem, { className: "whitespace-nowrap", flat: true, ...rest.officesAtms })) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: rest?.search?.ariaLabel ?? 'Поиск', onClick: openSearchDialog, data: rest?.search?.data })] }));
+    });
+
+    const HeaderTopMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+        const observerCallback = useCallback((entries) => {
+            if (!entries.length || !onVisibilityChange) {
+                return;
+            }
+            // Assumption about entries order (by time)
+            const entry = entries[entries.length - 1];
+            onVisibilityChange(entry.isIntersecting);
+        }, [onVisibilityChange]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        return (jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(TopItem, { ...rest, children: children }) }));
+    });
+
+    const HeaderTopMenu = JSX(({ topItems = [], activeTopItem, dropdownMenuAriaLabel, version, sitemap, bgColor, logo, data, }) => {
+        const [visibleItemsCount, setVisibleItemsCount] = useState(topItems.length);
+        const dropDownMenuItems = topItems.slice(visibleItemsCount);
+        const topItemsListRef = useRef(null);
+        const observerOptions = { rootRef: topItemsListRef };
+        const topItemsVisibilityHandlers = useMemo(() => topItems.map((_, index) => (isIntersecting) => {
             setVisibleItemsCount(isIntersecting
                 ? handleIntersectionActivation(index)
                 : handleIntersectionDeactivation(index));
-        }), [subItems]);
-        return (jsxs("nav", { className: "relative mt-s flex gap-s 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, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+        }), [topItems]);
+        return (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logo, data: data }), jsx("div", { ref: topItemsListRef, className: "overflow-hidden min-w-[160px] pb-xs mt-xs", role: "menu", children: topItems.map((_, i) => (jsx(HeaderTopMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeTopItem, observerOptions: observerOptions, onVisibilityChange: topItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "mx-xs", items: dropDownMenuItems, activeItem: activeTopItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", ...sitemap })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -4474,7 +4502,7 @@
         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(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] }) }));
+        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: [jsx("div", { className: "whitespace-nowrap", children: jsx(HeaderTopMenu, { activeTopItem: activeTopItem, topItems: topItems?.filter(isVisibleItem(HEADER_AREA_KEYS)), version: version, sitemap: sitemap, bgColor: bgColor, logo: customLogo ?? logoProps, data: dataHeader }) }), 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' : '');
 
@@ -4700,7 +4728,7 @@
             onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
         }, [hotFilters, items]);
         return {
-            value: items[activeItemIndex],
+            activeItem: items[activeItemIndex],
             items: items,
             onChange: handleChange,
         };
@@ -4785,7 +4813,7 @@
 
     const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
 
-    const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tabpanel", children: items.map(renderTab(value, onChange, tabsType)) })));
+    const TabsControl = JSX(({ className, tabsType = 'default', items = [], activeItem, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tabpanel", children: items.map(renderTab(activeItem, onChange, tabsType)) })));
 
     const initialFiltrationState = {
         categories: [],
@@ -5682,15 +5710,15 @@
             buttonTop: 'top-0',
         },
     };
-    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType = 'default' }) => {
+    const ScrollableTabsControl = JSX(({ className, items = [], activeItem, onChange, tabsType = 'default' }) => {
         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] }));
+        useEffect(() => scrollToSelected(containerRef.current, items, activeItem), []);
+        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(activeItem, 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);
+    const scrollToSelected = (container, items, activeItem) => {
+        const selectedIndex = items.findIndex((_) => _ === activeItem);
         if (container && selectedIndex > 0) {
             container.scrollTo({
                 left: container?.children[selectedIndex]?.offsetLeft,
@@ -5710,7 +5738,7 @@
         }
     };
 
-    const TAB_QUERY_PARAM_KEY$1 = 'tab';
+    const TAB_QUERY_PARAM_KEY = 'tab';
     const Tabs = JSX(({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
         const router = useRouter();
         const { isReady } = router;
@@ -5720,8 +5748,8 @@
             if (!tabs || !tabs[0]) {
                 return;
             }
-            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY$1]
-                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY$1]) || 0
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY]) || 0
                 : 0;
             const defaultTab = tabs[defaultTabIndex] || tabs[0];
             setActiveTabIndex(defaultTabIndex);
@@ -5740,10 +5768,10 @@
         const updateUrlSearchTabParam = (_) => {
             const searchParams = new URLSearchParams(router.query);
             if (_.name) {
-                searchParams.set(TAB_QUERY_PARAM_KEY$1, _.name);
+                searchParams.set(TAB_QUERY_PARAM_KEY, _.name);
             }
             else {
-                searchParams.delete(TAB_QUERY_PARAM_KEY$1);
+                searchParams.delete(TAB_QUERY_PARAM_KEY);
             }
             router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
         };
@@ -5758,7 +5786,7 @@
         }, [tabs, tabsControlItems]);
         return (jsx(BlockWrapper, { className: style(isSticky ? 'sticky top-1 z-20' : '', className), defaultPadding: "p-0", ...rest, children: renderTabs({
                 items: tabsControlItems,
-                value: tabsControlItems[activeTabIndex],
+                activeItem: tabsControlItems[activeTabIndex],
                 tabsMode,
                 onChange: handleChange,
             }) }));
@@ -5773,6 +5801,11 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
+    const getUrlParams = (params = '') => {
+        const href = globalThis?.location?.href;
+        return href ? new URL(href).searchParams.get(params) : null;
+    };
+
     const tabsStyle = {
         default: {
             wrapper: '',
@@ -5789,8 +5822,8 @@
     };
     const renderTabsLayout = ({ tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: tabsStyle[tabsType].wrapper, children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
 
-    const TAB_QUERY_PARAM_KEY = 'tab';
     const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
+        const id = block?.__id ? `tabs-${block.__id}` : 'tabs';
         const router = useRouter();
         const tabsCounted = showCounter
             ? tabs.map((_) => ({
@@ -5799,22 +5832,24 @@
             }))
             : tabs;
         const { isReady } = router;
-        const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
+        const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted, getUrlParams(id)));
+        const activeItem = tabsCounted[activeTabIndex];
         const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
+        //TODO: Вынести в отдельный хук
         useEffect(() => {
-            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-                ? tabsCounted.findIndex((_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY])
+            const defaultTabIndex = router.query[id]
+                ? tabsCounted.findIndex((_, index) => _.type === 'group' && String(index) === router.query[id])
                 : defaultSelectedTab;
             setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
-        }, [isReady, defaultSelectedTab]);
+        }, [isReady, defaultSelectedTab, id, tabsCounted]);
         const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
         const updateUrlSearchTabParam = (_, index) => {
             const searchParams = new URLSearchParams(router.query);
             if (_.text) {
-                searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+                searchParams.set(id, String(index));
             }
             else {
-                searchParams.delete(TAB_QUERY_PARAM_KEY);
+                searchParams.delete(id);
             }
             router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
         };
@@ -5828,20 +5863,23 @@
         }, [tabsCounted]);
         return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [renderTabsLayout({
                     items: tabsCounted,
-                    value: tabsCounted[activeTabIndex],
+                    activeItem,
                     tabsType,
                     onChange: handleChange,
-                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: renderBlocksList(block?.slots?.[slotName], {
+                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: Object.entries(block?.slots ?? {}).map(([key, value]) => renderBlocksList(value, {
                         ...rest?.options,
                         slotName,
                         parent: block,
-                    }) })] }));
+                        extraProps: { className: key === slotName ? '' : 'hidden' },
+                    })) })] }));
     }, {
         slots: ({ tabs }) => tabs?.filter((_) => _.type === 'group').map(getSlotName) || [],
         childrenTypes: { exclude: ['TabsLayout'] }, // TODO: fix this on wcms
     });
     const getSlotName = (tab, index) => tab?.text || `Слот №${index}`;
-    const getInitSelectedIndex = (tabs) => tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
+    const getInitSelectedIndex = (tabs, paramsId) => paramsId
+        ? Number(paramsId)
+        : tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
 
     const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
     const firstCellStyle = 'w-80 flex-shrink-0';
@@ -6274,7 +6312,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.393";
+    const packageVersion = "0.14.395";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;