@redneckz/wildless-cms-uni-blocks 0.7.5 → 0.7.6

package/bundle/bundle.umd.js

@@ -1606,7 +1606,7 @@
 
     const ITEMS_GAP = 4;
     const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
-    const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
+    const scrollButtonStyle$1 = 'absolute top-[calc(50%-12px)] z-50';
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, isPadding = true, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
@@ -1626,7 +1626,7 @@
         'CarouselTariffsCard',
         'CarouselInvestmentCard',
     ];
-    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
+    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle$1} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle$1} right-8`, onClick: scrollRight })) : null] }));
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
     const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
@@ -3638,60 +3638,139 @@
     };
 
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
-    const ACTIVE_LINK_CLASSES = 'bg-primary-main';
     const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
-    const TEXT_CLASSES = 'font-sans text-m';
+    const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+    const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+    const TEXT_CLASSES = 'font-sans text-m text-center';
     const ACTIVE_TEXT_CLASSES = 'text-white';
     const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+    const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+    const GROUP_TAB_CLASSES = {
+        div: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            default: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `h-full border-0 border-b-2`,
+                default: ``,
+            },
+            default: {
+                active: '',
+                default: '',
+            },
+        },
+    };
+    const LINK_TAB_CLASSES = {
+        link: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            default: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            default: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+        },
+    };
+    const getGroupTabClassName = (type, active, isScrollable) => {
+        const styleType = isScrollable ? 'scrollable' : 'default';
+        const styleActive = active ? 'active' : 'default';
+        return GROUP_TAB_CLASSES[type][styleType][styleActive];
+    };
+    const getLinkTabClassName = (type, active, isScrollable) => {
+        const styleType = isScrollable ? 'scrollable' : 'default';
+        const styleActive = active ? 'active' : 'default';
+        return LINK_TAB_CLASSES[type][styleType][styleActive];
+    };
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab } = props;
+        const { tab, currentTab, isScrollable = false } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
         const link = useLink();
         const adjustedProps = link(tab);
-        return (jsx("a", { role: "tab", className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: tab.text }) }));
+        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
     });
 
     const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
     const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
-    const renderGroupTab = ({ page, currentTab, showCounter, onClick }) => (tab, i) => {
+    const renderGroupTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$2(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+        return (jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle$2(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+    };
+    const renderTitle$2 = (title, active, isScrollable) => {
+        const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+        const titleClassName = isScrollable
+            ? `${TEXT_CLASSES} ${activeClassName}`
+            : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+        return title ? jsx("h3", { className: titleClassName, children: title }) : null;
+    };
+    const renderCount = (showCounter, count, active) => {
+        return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
     };
-    const renderTitle$2 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
-    const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 
-    const renderTab = ({ page, currentTab, showCounter, onClick }) => 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (tab, i) => {
+    const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
         const type = tab.type;
         if (!(type === 'group' || type === 'link')) {
             return null;
         }
         switch (type) {
             case 'group':
-                return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+                return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
             case 'link': {
-                return jsx(LinkTab, { tab: tab, currentTab: currentTab }, String(i));
+                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable }, String(i)));
             }
             default:
                 assertUnreachable(type);
         }
+        return null;
     };
 
+    const scrollButtonStyle = 'absolute z-50 top-0';
+    const ScrollableTabs = JSX((props) => {
+        const { tabs, onClick, currentTab, page, showCounter } = props;
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: tabs?.length || 0,
+            isCyclic: false,
+        });
+        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({
+                            onClick,
+                            currentTab,
+                            showCounter,
+                            page,
+                            isScrollable: true,
+                        })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
+    });
+
     const Tabs = JSX((props) => {
-        const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+        const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
             const tab = tabs?.find(checkTab(event));
             if (event.type === 'link' && tab) {
                 setCurrentTab(tab);
             }
+            return [];
         }), [tabs]);
         useEffect(() => currentTab?.type === 'group'
             ? EventBus.inst.subject('tab', { label: currentTab.ref })
@@ -3702,7 +3781,12 @@
             }
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`, role: "tablist", ...rest, children: tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest })) }));
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20 ' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
+                onClick: handleClick,
+                currentTab,
+                showCounter,
+                ...rest,
+            }))) }));
     });
     const checkTab = (event) => (_) => _.type === 'link' && _.href === `#${event.label}`;
 
@@ -4114,7 +4198,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.7.5";
+    const packageVersion = "0.7.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;