@redneckz/wildless-cms-uni-blocks 0.14.147 → 0.14.149

package/bundle/bundle.umd.js

@@ -3064,18 +3064,18 @@
             .concat(1);
     }
 
-    const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+    const SwipeListItem = JSX(({ className, style: inlineStyle, idx, activeIndex, observerOptions, children, onIntersection, }) => {
         const observerCallback = useCallback((entries) => {
             if (entries.length && onIntersection) {
                 onIntersection(idx || 0, entries[entries.length - 1]);
             }
         }, [onIntersection, idx]);
         const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
+        return (jsx("div", { className: style('inline-block snap-always box-border', className), style: inlineStyle, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
     const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@lg:min-w-[25%]'];
-    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+    const SwipeListContainer = JSX(({ className, itemClassName, containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
             rootRef: containerRef,
@@ -3096,7 +3096,7 @@
             ...(isVerticalList ? getContainerHeight(minHeight) : {}),
             gap: `${gap}px`,
         };
-        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : ''), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : '', itemClassName), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
     });
     // Styles used to compensate outer container padding to get rid of clipping effect
     const getContainerOffset = (padding, additionalPadding = 0) => ({
@@ -3183,13 +3183,13 @@
                 scrollToStart(containerRef.current);
             }
         }, [itemCount, canScrollRight]);
-        const scrollTo = useCallback((idx) => {
+        const scrollTo = useCallback((idx, options = {
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center',
+        }) => {
             if (containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                    inline: 'center',
-                });
+                containerRef.current.children[idx]?.scrollIntoView(options);
             }
         }, [containerRef]);
         return [
@@ -5064,7 +5064,7 @@
         }, [data, filtrationState]);
         return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "pt-6xl px-6xl", children: [jsxs("div", { className: "flex gap-xs pb-2xl", children: [jsx(Heading, { headingType: "h2", children: title }), lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: `(${lengthItems})` })) : null] }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, renderFiltrationForm(Object.keys(initFilterState), { field, reset })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard)] }));
     });
-    const renderDescriptionBlock$1 = ({ description, list }) => description || list?.length ? (jsxs("div", { className: "p-xl mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [description ? (jsx(Paragraph, { size: "text-l", font: "font-light", children: description })) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pt-xs", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
+    const renderDescriptionBlock$1 = ({ __html, list }) => __html || list?.length ? (jsxs("div", { className: "p-xl mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [__html ? jsx(RichText, { __html: __html }) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pt-xs", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
 
     const colorStyle = {
         yellow: { border: 'border-yellow-light', text: 'text-yellow' },
@@ -5328,13 +5328,15 @@
     });
 
     const GOLDEN_RATIO = 1.618;
-    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isEmbedded: true }), jsx("figure", { className: "m-0 mt-xl min-w-[80%]", children: renderShimmer() })] })));
+    const Shimmer = JSX(({ className, size }) => (jsx("figure", { className: style('m-0 mt-xl min-w-[80%]', className), children: renderShimmer(size) })));
     const renderShimmer = (size = 3) => goldenSequence(100, size)
         .map((_) => Math.floor(_))
         .map(renderShimmerItem);
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-xs bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
+    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isEmbedded: true }), jsx(Shimmer, {})] })));
+
     const ProductGallery = JSX(({ className = '', padding, slides = [], ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-6xl", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-6xl h-full", headlineVersion: "M", isFullWidthTitle: false, ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
@@ -5686,6 +5688,56 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
+    const alignTabStyle = {
+        start: 'text-start',
+        center: 'text-center',
+        end: 'text-end',
+    };
+
+    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), 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.5 * 1000;
+    const TabsLayoutRedirectTab = JSX(({ tab }) => {
+        const link = useLink();
+        useDebouncedEffect(() => {
+            const { onClick } = link(tab);
+            onClick();
+        }, [tab], REDIRECT_DELAY);
+        return jsx(Shimmer, { className: "col-span-12 p-xl", size: 5 });
+    });
+
+    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 })) })] }));
+    });
+    TabsLayout.slots = ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [];
+    TabsLayout.childrenTypes = { exclude: ['TabsLayout'] };
+    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)));
+
     const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
     const firstCellStyle = 'w-80 flex-shrink-0';
     const COLS_LENGTH_FOR_SCROLL = 2;
@@ -5927,7 +5979,6 @@
         Placeholder,
         ProductBlock,
         ProductGallery,
-        UnitBlock,
         RepresentativeOfficeInfo,
         RichTextBlock,
         RollupItem,
@@ -5935,8 +5986,10 @@
         StepsBlock,
         SwipeListControlBlock,
         Tabs,
+        TabsLayout,
         TariffsTable,
         TextBlock,
+        UnitBlock,
         VerticalLayout,
         Video,
     };
@@ -6119,7 +6172,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.146";
+    const packageVersion = "0.14.148";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;