@redneckz/wildless-cms-uni-blocks 0.6.34 → 0.6.36

package/mobile/bundle/bundle.umd.js

@@ -305,8 +305,10 @@
         }
     }
 
-    function useIntersectionObserver(observerCallback, observerOptions) {
+    const SENSITIVITY_SCALE = 10;
+    function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
         const ref = useRef(null);
+        const observerOptions = useMemo(() => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }), [sensitivity, rootRef?.current]);
         useEffect(() => {
             if (!ref.current) {
                 return undefined;
@@ -319,6 +321,13 @@
         }, [observerCallback, observerOptions]);
         return ref;
     }
+    function sensitivityToThreshold(sensitivity = 0) {
+        const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+        return new Array(thresholdsCount)
+            .fill(0)
+            .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+            .concat(1);
+    }
 
     const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
         if (!entries?.length) {
@@ -337,19 +346,13 @@
         }
     };
 
-    const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
-    const THRESHOLD_ARRAY_LENGTH = 18;
-    const THRESHOLD_ARRAY_START_VALUE = (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
-    const OBSERVER_OPTIONS = {
-        threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-    };
     const BlockWrapper = JSX(({ className, block, tag = 'section', role, children }) => {
         const Tag = tag;
         const { anchor, labels } = block || {};
         const [isVisible, setVisible] = useState(true);
         const anchorClickRef = useRef({});
         const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
-        const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
         useEffect(() => EventBus.inst.subscribe('anchorClick', (e) => {
             setVisible(true);
             anchorClickRef.current = e;
@@ -366,10 +369,6 @@
         }), []);
         return isVisible ? (jsx(Tag, { className: className, role: role, ...(anchor ? { id: anchor, ref } : {}), children: children })) : null;
     });
-    function getIntersectionThreshold(_, i) {
-        const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-        return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-    }
     function changeHash(label) {
         if (label) {
             globalThis.document.location.hash = label;
@@ -429,7 +428,7 @@
                     : '';
             }
         }, [isUnfolded, children?.length]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
     const svgUseStyleMap = {
@@ -522,142 +521,146 @@
     AccordionItem.childrenTypes = [];
     const FoldButton = JSX(({ className, icon, label, primaryIcon, onClick }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`, onClick: onClick, children: [jsxs("div", { className: "flex group-hover:text-primary-main", children: [primaryIcon ? (jsx(Img, { image: getIconWithVersion(primaryIcon), className: "mr-3 flex-shrink-0", width: "24", height: "24", asSVG: true })) : null, jsx(Text, { size: "text-m-title-xs", font: "font-medium", children: label })] }), jsx(Img, { className: "flex-shrink-0", image: getIconWithVersion({ icon: icon }), width: "24", height: "24", asSVG: true })] })));
 
-    // column-gap between children of SwipeListControl container
-    const DEFAULT_GAP = 14;
-    /*
-      Horizontal padding used on a container above SwipeListControl.
-      Same value used on a SwipeListControlChildren container to compensate it
-      and get rid of a clipping effect caused by overflow: hidden.
-     */
-    const DEFAULT_PADDING = 16;
-    // Classes used to compensate outer container padding, so that child elements won't be clipped
-
-    const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
-    const BASE_DOT_WIDTH = 6;
-    const ACTIVE_DOT_WIDTH_CHANGE = 16;
-    const BASE_DOT_OPACITY = 0.3;
-    const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
-    const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
-        const handleClick = useCallback((idx) => (e) => {
-            if (idx === activeIndex) {
-                return;
-            }
-            const contentContainer = e.currentTarget.parentElement
-                ?.previousElementSibling;
-            contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }, [activeIndex]);
-        return showDots && children ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children.length && children.map ? (children.map((_, idx) => (jsx("div", { onClick: handleClick(idx), className: DOT_STYLES, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx))))) : (jsx("div", { className: DOT_STYLES, style: createDotStyle(1) })) })) : null;
-    });
-    const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
-        if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-            return undefined;
+    const mapChildren = (mapper) => (children) => {
+        if (children === null || children === undefined) {
+            return children;
         }
-        const leftIndexMod = 1 - indexFraction;
-        const rightIndexMod = indexFraction;
-        return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
+        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
     };
-    const createDotStyle = (indexModifier) => ({
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
-    });
 
-    const SwipeListControlItem = JSX(({ className = '', children, ...rest }) => {
-        return (jsx("div", { className: `snap-center snap-always min-w-full box-border ${className}`, role: "listitem", ...rest, children: children }));
+    const SwipeListItem = JSX(({ className = '', style, 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, role: "listitem", "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
-    // styles used to compensate outer container padding to get rid of clipping effect
-    const getContainerStyle = (padding) => {
-        return {
-            marginLeft: `${-padding}px`,
-            marginRight: `${-padding}px`,
-            paddingLeft: `${padding}px`,
-            paddingRight: `${padding}px`,
+    const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+        const observerOptions = {
+            sensitivity: 1,
+            rootRef: containerRef,
         };
-    };
-
-    const SwipeListControlList = JSX(({ className = '', activeIndex = -1, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, children, onScroll, }) => {
-        return children ? (jsx("div", { className: `overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", onScroll: onScroll, children: children.length && children.map ? (children.map((child, idx) => (jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": Boolean(activeIndex === idx), children: child }, String(idx))))) : (jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": true, children: children })) })) : null;
+        const itemsVisibilityListRef = useRef([]);
+        const handleIntersection = useCallback((idx, entry) => {
+            const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+            itemsVisibilityList[idx] = entry;
+            itemsVisibilityListRef.current = itemsVisibilityList;
+            onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+            onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+        }, [onVisibleItemsChange, onVisibleIndicesChange]);
+        return (jsx("div", { className: `box-border overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: `${snapAlign} ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: getContainerStyle(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 getContainerStyle = (padding) => ({
+        marginLeft: `${-padding}px`,
+        marginRight: `${-padding}px`,
+        paddingLeft: `${padding}px`,
+        paddingRight: `${padding}px`,
+    });
+    const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
+        .map((_, i) => [_, i])
+        .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+        .map(([, i]) => i);
+
+    const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0 }) => {
+        const handleClick = (idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        };
+        return dotCount ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
     });
 
-    /*
-      Returns object containing whole index part, and it's decimal part for a given
-      scrollLeft value of a container and an array of tuple containing values of a
-      start and end boundaries of a scrollable child, right boundary non-inclusive.
-      Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
-     */
-    const getIndexParts = (scrollLeft, scrollPoints) => {
-        const index = scrollPoints.findIndex(([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd);
-        if (index < 0) {
-            return { index, fraction: 0 };
-        }
-        const [start, end] = scrollPoints[index];
-        const fraction = (scrollLeft - start) / (end - start);
-        return { index, fraction };
+    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+
+    const defaultDiscriminator = (_) => _;
+    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+
+    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
+    const scrollBy = (container) => (itemCount, delta) => {
+        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
     };
 
-    /*
-     Calculates array of breakpoints for each scrollable element in container.
-     Returns array of tuples consisting of [start, end] boundary scrollLeft values.
-    */
-    const getScrollPoints = ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }) => {
-        const scrollableDistance = scrollWidth - clientWidth;
-        if (childElementCount === 2) {
-            return [
-                [0, scrollableDistance],
-                [scrollableDistance, scrollWidth],
-            ];
-        }
-        const scrollItemWidth = itemWidth + gap;
-        const edgeScrollDistance = clientWidth - gap - padding;
-        const lastScrollableIdx = childElementCount - 2;
-        const scrollPoints = new Array(childElementCount)
-            .fill(0)
-            .map((_, idx) => idx === 0 || idx === lastScrollableIdx
-            ? [
-                idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
-                idx > 0 ? scrollableDistance : edgeScrollDistance,
-            ]
-            : [
-                (idx - 1) * scrollItemWidth + edgeScrollDistance,
-                idx * scrollItemWidth + edgeScrollDistance,
-            ]);
-        scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
-        return scrollPoints;
+    const scrollToEnd = (container) => {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
     };
 
-    const SwipeListControl = JSX(({ className, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, onSlideChange, children, }) => {
-        const [activeIndex, setActiveIndex] = useState(0);
-        const [indexFraction, setIndexFraction] = useState(0);
-        const dotsProps = {
-            activeIndex,
-            indexFraction,
-            showDots,
-            children,
-        };
-        const handleScroll = useCallback((e) => {
-            const { scrollLeft, clientWidth, childElementCount, scrollWidth, children: childrenCollection, } = e?.currentTarget;
-            if (!childrenCollection[0]) {
+    const scrollToStart = (container) => {
+        container.scrollTo({ left: 0, behavior: 'smooth' });
+    };
+
+    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
+        const containerRef = useRef(null);
+        const [visibleIndices, setVisibleIndices] = useState([]);
+        const handleVisibleIndicesChange = useCallback((indices) => {
+            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
+            onVisibleIndicesChange && onVisibleIndicesChange(indices);
+        }, [itemCount]);
+        const [minIndex, maxIndex] = visibleIndices.length
+            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
+            : [-1, -1];
+        const canScrollLeft = minIndex > 0;
+        const canScrollRight = maxIndex < itemCount - 1;
+        const scrollLeft = useCallback(() => {
+            if (!containerRef.current) {
                 return;
             }
-            // horizontal PADDING / 2 to compensate padding-margin combo of child container
-            // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-            const itemWidth = childrenCollection[0].offsetWidth - padding / 2;
-            const scrollPoints = getScrollPoints({
-                gap,
-                padding,
-                clientWidth,
-                scrollWidth,
-                childElementCount,
-                itemWidth,
-            });
-            const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-            if (index !== activeIndex && onSlideChange) {
-                onSlideChange();
+            if (isCyclic && !canScrollLeft) {
+                scrollToEnd(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, -1);
+            }
+        }, [isCyclic, itemCount, canScrollLeft]);
+        const scrollRight = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollRight) {
+                scrollToStart(containerRef.current);
             }
-            setActiveIndex(index);
-            setIndexFraction(fraction);
-        }, [gap, padding, activeIndex, onSlideChange]);
-        return (jsxs("div", { className: className, children: [jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }), jsx(SwipeListControlDots, { ...dotsProps })] }));
+            else {
+                scrollBy(containerRef.current)(itemCount, 1);
+            }
+        }, [itemCount, isCyclic, canScrollRight]);
+        return [
+            containerRef,
+            {
+                scrollLeft,
+                scrollRight,
+                canScrollLeft: isCyclic || canScrollLeft,
+                canScrollRight: isCyclic || canScrollRight,
+                visibleIndicesRange: [minIndex, maxIndex],
+                handleVisibleIndicesChange,
+            },
+        ];
+    };
+
+    const DEFAULT_GAP = 14;
+    /*
+      Horizontal padding used on a container above SwipeListControl.
+      Same value used on a SwipeListControlChildren container to compensate it
+      and get rid of a clipping effect caused by overflow: hidden.
+     */
+    const DEFAULT_PADDING = 16;
+    const SwipeListControl = JSX(({ className, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, children, onVisibleIndicesChange, }) => {
+        const itemCount = Array.isArray(children) ? children.length : 0;
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount,
+            onVisibleIndicesChange,
+        });
+        const [activeIndex] = scroll.visibleIndicesRange;
+        return (jsxs("div", { className: className, children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount })) : null] }));
     });
 
     const isURL = (href) => href?.includes('//');
@@ -738,7 +741,7 @@
                     props.onClick && props.onClick(ev);
                     const isLocalHref = href && !isURL(href);
                     const isLocalTarget = !props.target || props.target === '_self';
-                    if (isLocalHref && isLocalTarget) {
+                    if (isLocalHref && isLocalTarget && !isHash(href)) {
                         ev?.preventDefault();
                         router.push(href);
                     }
@@ -848,7 +851,7 @@
         const handleSlideChange = useCallback(() => setColumnsViewState((_) => new Array(_.length).fill(false)), []);
         const getColumnData = (cellData) => cellData?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title }));
         const tableColumns = columns?.map(({ data, header }, colIndex) => (jsx(TableColumn, { visibleRowLength: visibleRowLength, showRow: columnsViewState[colIndex], header: header, columnData: getColumnData(data), isFillGradient: colIndex === 0 && isColoredFirstColumn, onToggleColumn: () => handleToggleColumn(colIndex), ...rest }, String(colIndex))));
-        return orientation === 'horizontal' ? (jsx(SwipeListControl, { onSlideChange: handleSlideChange, children: tableColumns })) : (tableColumns);
+        return orientation === 'horizontal' ? (jsx(SwipeListControl, { onVisibleIndicesChange: handleSlideChange, children: tableColumns })) : (tableColumns);
     });
 
     const consistentDataMap = new Map();
@@ -1085,7 +1088,7 @@
         return orientation === 'horizontal' ? (jsx(SwipeListControl, { children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard) }));
     }
     function renderCard(card, key) {
-        return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+        return (jsxs("div", { className: `w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
       ${VersionStyleMap[card.version ?? 'primary']}`, children: [jsxs("div", { children: [renderImage$2(card.icon), card.title ? jsx("h3", { className: `text-m-title-xs font-medium m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null] }), card?.button?.text ? renderButton$1(card.button) : null] }, key));
     }
     const renderImage$2 = (image) => image?.src || image?.icon ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: image }) })) : null;
@@ -1104,8 +1107,6 @@
         return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [isDotted ? (jsx("div", { className: `rounded-full inline-block mr-3 mt-2 w-2 h-2 min-w-2 min-h-2 ${LIST_DOT_STYLE_MAP$1[version]}` })) : null, jsx("span", { className: "text-m font-medium", children: item.title }), jsx("span", { className: `text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
     }
 
-    const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
-
     const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => {
         return cmp(withoutQuery(href), withoutQuery(isURL(href) ? router.href : router.pathname));
     };
@@ -1618,7 +1619,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.6.34";
+    const packageVersion = "0.6.36";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;