@redneckz/wildless-cms-uni-blocks 0.14.294 → 0.14.295

package/bundle/bundle.umd.js

@@ -4749,31 +4749,54 @@
         };
     };
 
+    const getButtonClassNames = (isActive) => ({
+        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
+        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
+        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+        icon: isActive ? '' : 'text-primary-main',
+        iconVersion: (isActive ? 'white' : 'normal'),
+        oldText: 'text-m text-center',
+        oldDesc: 'text-m-light',
+    });
+    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
+        const buttonClassNames = getButtonClassNames(isActive);
+        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, role: "tab", children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+                        ...icon,
+                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
+                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
+    };
+
     const tabPaddingStyleMap = {
         default: 'px-xs',
         underlined: 'px-m',
-        rounded: 'px-lg rounded-md',
+        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
     };
     const tabTextStyle = 'text-secondary-text hover:text-primary-main';
     const activeTabTextStyleMap = {
         default: 'text-black sm:text-white',
         underlined: 'text-primary-main border-b-2',
-        rounded: 'text-white',
+        animated: 'text-white sm:text-white',
     };
     const tabBgStyleMap = {
         default: 'bg-white',
         underlined: 'bg-white',
-        rounded: 'bg-transparent',
+        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
     };
     const activeTabBgStyleMap = {
         default: 'sm:bg-primary-main',
         underlined: 'bg-white',
-        rounded: 'bg-primary-main',
+        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
     };
-    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
         const Tag = tag;
-        const { text, appendRight, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [jsx(Text, { size: "text-m", children: text }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
+        const { text, description, icon, appendRight, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tablist", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [renderTabItemInner({
+                        text,
+                        description,
+                        icon,
+                        isActive,
+                        type,
+                    }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
     });
 
     const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
@@ -4795,7 +4818,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: "tablist", children: items.map(renderTab(value, onChange, tabsType)) })));
+    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 initialFiltrationState = {
         categories: [],
@@ -5594,20 +5617,30 @@
 
     const SwipeListControlBlock = UniBlock(({ listType, showDots, options, version, ...rest }) => (jsx(BlockWrapper, { version: version, defaultPadding: "p-0", ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) })), { childrenTypes: { exclude: ['SwipeListControlBlock'] } });
 
-    const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
-    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType }) => {
+    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+    const scrollStyleType = {
+        animated: {
+            itemClassName: 'flex',
+            gap: 8,
+            buttonTop: 'top-5',
+        },
+        underlined: {
+            itemClassName: '',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
+    };
+    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType = 'default' }) => {
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: items?.length || 0,
         });
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), role: "tablist", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle), onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyleType[tabsType].itemClassName, gap: scrollStyleType[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
 
     const renderTabs = ({ tabsMode, ...props }) => {
         switch (tabsMode) {
             case 'wideScreen':
                 return jsx(TabsControl, { ...props });
-            case 'centered':
-                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto p-xs rounded-md bg-main-gray", tabsType: "rounded", ...props }) }));
             case 'scrollable':
                 return (jsx("div", { className: "flex", children: jsx(ScrollableTabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
             default:
@@ -5615,7 +5648,7 @@
         }
     };
 
-    const TAB_QUERY_PARAM_KEY = 'tab';
+    const TAB_QUERY_PARAM_KEY$1 = 'tab';
     const Tabs = JSX(({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
         const router = useRouter();
         const { isReady } = router;
@@ -5625,8 +5658,8 @@
             if (!tabs || !tabs[0]) {
                 return;
             }
-            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY]) || 0
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY$1]
+                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY$1]) || 0
                 : 0;
             const defaultTab = tabs[defaultTabIndex] || tabs[0];
             setActiveTabIndex(defaultTabIndex);
@@ -5645,10 +5678,10 @@
         const updateUrlSearchTabParam = (_) => {
             const searchParams = new URLSearchParams(router.query);
             if (_.name) {
-                searchParams.set(TAB_QUERY_PARAM_KEY, _.name);
+                searchParams.set(TAB_QUERY_PARAM_KEY$1, _.name);
             }
             else {
-                searchParams.delete(TAB_QUERY_PARAM_KEY);
+                searchParams.delete(TAB_QUERY_PARAM_KEY$1);
             }
             router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
         };
@@ -5678,67 +5711,66 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
-    const alignTabStyle = {
-        start: 'text-start',
-        center: 'text-center',
-        end: 'text-end',
+    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => {
+        switch (tabsType) {
+            case 'default':
+                return jsx(TabsControl, { ...props });
+            case 'underlined':
+                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
+            case 'animated':
+                return (jsx("div", { className: "border-b-8 border-primary-main", children: jsx(ScrollableTabsControl, { className: "m-auto", ...props, tabsType: "animated" }) }));
+            default:
+                return null;
+        }
     };
 
-    const getButtonClassNames = (isActive) => ({
-        btn: `w-96 ${isActive
-        ? 'p-m border-none bg-primary-main text-white'
-        : 'p-s ease-in duration-300 bg-white text-primary-text'}`,
-        title: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l',
-        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
-        icon: isActive ? '' : 'text-primary-main',
-        iconVersion: (isActive ? 'white' : 'normal'),
-    });
-    const TabsLayoutButton = JSX(({ tab, className, onClick, isActive }) => {
-        const buttonClassNames = getButtonClassNames(isActive);
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs', buttonClassNames.btn, className), ...getAspectsAttributes(tab?.data), children: [tab?.icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
-                        ...tab?.icon,
-                        iconVersion: tab?.icon?.iconVersion ?? buttonClassNames.iconVersion,
-                    }, 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.8 * 1000;
-    const TabsLayoutRedirectSection = JSX(({ tab }) => {
-        const link = useLink();
-        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 TabsLayout = UniBlock(({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+    const TAB_QUERY_PARAM_KEY = 'tab';
+    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, ...rest }) => {
+        const router = useRouter();
+        const { isReady } = router;
         const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+        const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+        useEffect(() => {
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+                ? tabs.findIndex((_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY])
+                : defaultSelectedTab;
+            setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
+        }, [isReady, defaultSelectedTab]);
         const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
-        const itemCount = tabs.length;
-        const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] = useCarouselControls({ itemCount }, activeTabIndex);
-        const [containerRef, scroll] = useSwipeListScroll({ itemCount });
-        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], {
+        const updateUrlSearchTabParam = (_, index) => {
+            const searchParams = new URLSearchParams(router.query);
+            if (_.text) {
+                searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+            }
+            else {
+                searchParams.delete(TAB_QUERY_PARAM_KEY);
+            }
+            router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+        };
+        const handleChange = useCallback((_) => {
+            const index = tabs.indexOf(_);
+            const tab = tabs[index];
+            setActiveTabIndex(index);
+            if (tab.type === 'group') {
+                updateUrlSearchTabParam(_, index);
+            }
+        }, [tabs]);
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [renderTabsLayout({
+                    items: tabs,
+                    value: tabs[activeTabIndex],
+                    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], {
                         ...rest?.options,
-                        key: `${slotName}-${block?.type}`,
                         slotName,
                         parent: block,
-                    })) })] }));
+                    }) })] }));
     }, {
         slots: ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [],
         childrenTypes: { exclude: ['TabsLayout'] }, // TODO: fix this on wcms
     });
-    const getSlotName = (tab, index) => tab?.title || `Слот №${index}`;
+    const getSlotName = (tab, index) => tab?.text || `Слот №${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)));
 
     const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
     const firstCellStyle = 'w-80 flex-shrink-0';
@@ -6170,7 +6202,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.293";
+    const packageVersion = "0.14.294";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;