@redneckz/wildless-cms-uni-blocks 0.14.151 → 0.14.153

package/bundle/bundle.umd.js

@@ -5711,29 +5711,48 @@
                     }, width: "24", height: "24" })) : null, jsxs("div", { className: "border-0", children: [tab?.title ? jsx("div", { className: buttonClassNames.title, children: tab.title }) : null, tab?.description ? jsx("div", { className: buttonClassNames.desc, children: tab.description }) : null] })] }));
     });
 
-    const REDIRECT_DELAY = 0.5 * 1000;
-    const TabsLayoutRedirectTab = JSX(({ tab }) => {
+    const REDIRECT_DELAY = 0.8 * 1000;
+    const TabsLayoutRedirectSection = JSX(({ tab }) => {
         const link = useLink();
-        useDebouncedEffect(() => {
-            const { onClick } = link(tab);
-            onClick();
-        }, [tab], REDIRECT_DELAY);
+        const { onClick } = link({
+            ...tab,
+            onClick: () => {
+                /**
+                 * In the current implementation of useLink, there is no follow-by-link method,
+                 * and default routing won't work if the link is external.
+                 */
+                if (tab.href && !isLocalURL(tab.href)) {
+                    globalThis.location.href = tab.href;
+                }
+            },
+        });
+        useDebouncedEffect(onClick, [], REDIRECT_DELAY);
         return jsx(Shimmer, { className: "col-span-12 p-xl", size: 5 });
     });
 
+    const useScrollToTab = (activeTabIndex, scroll) => {
+        const [initState, { setTrue: setInitStateTrue }] = useBool(false);
+        useEffect(() => {
+            scroll.scrollTo(activeTabIndex, {
+                behavior: initState ? 'smooth' : 'auto',
+                block: 'nearest',
+                inline: 'center',
+            });
+            !initState && setInitStateTrue();
+        }, [activeTabIndex, initState]);
+    };
+
     const TabsLayout = JSX(({ className = '', tabs = [], block, tabAlign, ...rest }) => {
         const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
         const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
         const itemCount = tabs.length;
         const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] = useCarouselControls({ itemCount }, activeTabIndex);
         const [containerRef, scroll] = useSwipeListScroll({ itemCount });
-        useEffect(() => {
-            scroll.scrollTo(activeTabIndex, { behavior: 'auto' });
-        }, []);
-        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "relative border-b-8 border-primary-main", children: [jsx(SwipeListContainer, { itemClassName: "flex", containerRef: containerRef, snapAlign: "snap-end", gap: 8, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign)) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: true, onScrollLeft: decActiveSlideIndex, onScrollRight: incActiveSlideIndex, activeIndex: activeSlideIndex, itemCount: itemCount })] }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: tabs[activeTabIndex]?.href ? (jsx(TabsLayoutRedirectTab, { tab: tabs[activeTabIndex] })) : (renderBlocksList(block?.slots?.[slotName], { ...rest?.options, slotName })) })] }));
+        useScrollToTab(activeTabIndex, scroll);
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "relative border-b-8 border-primary-main", children: [jsx(SwipeListContainer, { itemClassName: "flex", containerRef: containerRef, snapAlign: "snap-end", gap: 8, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign)) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: true, onScrollLeft: decActiveSlideIndex, onScrollRight: incActiveSlideIndex, activeIndex: activeSlideIndex, itemCount: itemCount })] }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: tabs[activeTabIndex]?.href ? (jsx(TabsLayoutRedirectSection, { tab: tabs[activeTabIndex] })) : (renderBlocksList(block?.slots?.[slotName], { ...rest?.options, slotName })) })] }));
     });
     TabsLayout.slots = ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [];
-    TabsLayout.childrenTypes = { exclude: ['TabsLayout'] };
+    TabsLayout.childrenTypes = { exclude: ['TabsLayout'] }; //TODO: fix this on wcms
     const getSlotName = (tab, index) => tab?.title || `Слот №${index}`;
     const getInitSelectedIndex = (tabs) => tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
     const renderTabButton = (activeTabIndex, onClick, tabAlign = 'start') => (tab, i) => (jsx(TabsLayoutButton, { className: alignTabStyle[tabAlign], tab: tab, isActive: activeTabIndex === i, onClick: () => onClick(i) }, String(i)));
@@ -6172,7 +6191,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.14.150";
+    const packageVersion = "0.14.152";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;