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

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.example.json

@@ -0,0 +1,25 @@
+{
+  "icon": {
+    "icon": "SignDocsIcon",
+    "format": "webp",
+    "size": {
+      "width": 200,
+      "height": 242
+    }
+  },
+  "title": "Заголовок",
+  "list": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
+
+export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      {...rest}
+    >
+      <div className="w-[200px] min-w-[200px] self-end">
+        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
+      </div>
+      <div className="p-8 pl-3 w-full">
+        {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+        {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+const renderList = (_: HeadlineCommonProps, i: number) => (
+  <div key={String(i)} className="break-words">
+    {_.title ? <div className={`text-h6`}>{_.title}</div> : null}
+    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  </div>
+);

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -0,0 +1,13 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Карточка программ карусели
+ */
+export type CarouselProgramsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Список */
+  list?: HeadlineCommonProps[];
+  version?: BlockVersion;
+};

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -14,45 +14,50 @@ import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
+const VISIBLE_ROWS_COUNT = 1;
+
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const hitStyle = getHitStyle(Boolean(isHighlighting));
     const rowsNode = rows.map(renderCardInfo);
-    const VISIBLE_ROWS_COUNT = 1;
-    const [visibleRows, hiddenRows] = [
-      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
-      rowsNode.slice(VISIBLE_ROWS_COUNT),
-    ];
+    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
+    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
 
     return (
-      <BlockWrapper
-        className={`font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
-        {...rest}
-      >
-        {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
-        {title ? (
-          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
-        ) : null}
-        {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows?.length ? (
-          <Foldable
-            renderFoldableSection={({ isUnfolded }) => (
-              <div>
-                {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-              </div>
-            )}
-            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
-          />
-        ) : null}
+      <BlockWrapper className={`font-sans ${className}`} {...rest}>
+        <div
+          className={`relative bg-white border border-main-stroke min-w-[322px] p-8 ${getHitStyle(
+            isHighlighting,
+          )}`}
+        >
+          {isHighlighting ? renderHitIcon() : null}
+          {icon?.src ? <Img image={icon} /> : null}
+          {title ? (
+            <Heading
+              className="text-primary-text text-center pt-2"
+              headingType="h5"
+              title={title}
+            />
+          ) : null}
+          {button ? <Button className="w-full mt-4" {...button} /> : null}
+          {rows?.length ? (
+            <Foldable
+              renderFoldableSection={({ isUnfolded }) => (
+                <div>
+                  {visibleRows}
+                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                </div>
+              )}
+              renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+            />
+          ) : null}
+        </div>
       </BlockWrapper>
     );
   },
 );
 
-const getHitStyle = (isHighlighting: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+const getHitStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -71,23 +76,19 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
 );
 
 const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider flex flex-col gap-1">
+  <div key={String(i)} className="py-5 border-b border-main-divider">
     {cell?.title ? (
       <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
     ) : null}
-    {cell?.description ? <div className="text-primary-text text-h6">{cell.description}</div> : null}
+    {cell?.description ? (
+      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+    ) : null}
   </div>
 );
 
-const renderHitIcon = (): VNode => {
-  const POSITION_STYLE = 'absolute -top-7 -right-4';
-
-  return (
-    <div
-      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
-    >
-      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-      <div className="text-center">Хит</div>
-    </div>
-  );
-};
+const renderHitIcon = (): VNode => (
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+    <div className="text-center">Хит</div>
+  </div>
+);

package/mobile/src/components/ComparisonTable/ComparisonTable.tsx

@@ -62,7 +62,7 @@ const TableInner = JSX<ComparisonTableProps>(
     ));
 
     return orientation === 'horizontal' ? (
-      <SwipeListControl onSlideChange={handleSlideChange}>{tableColumns}</SwipeListControl>
+      <SwipeListControl onVisibleIndicesChange={handleSlideChange}>{tableColumns}</SwipeListControl>
     ) : (
       tableColumns
     );

package/mobile/src/components/Gallery/Gallery.tsx

@@ -45,7 +45,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
 function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
-      className={`h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      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']}`}
       key={key}
     >

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -21,10 +22,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const subItemsListRef = useRef<HTMLDivElement | null>(null);
-  const observerOptions = useMemo(
-    () => ({ threshold: 1, root: subItemsListRef.current }),
-    [subItemsListRef.current],
-  );
+  const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
   const subItemsVisibilityHandlers = useMemo(
     () =>
       subItems.map((_, index) => (isIntersecting: boolean) => {

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,6 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
@@ -9,7 +12,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
-  observerOptions?: IntersectionObserverInit;
+  observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -55,7 +55,16 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ),
 );
 
-RollupItem.childrenTypes = [];
+RollupItem.childrenTypes = {
+  exclude: [
+    'RollupItem',
+    'Accordion',
+    'AccordionItem',
+    'OtherProducts',
+    'OtherProductsItem',
+    'VerticalLayout',
+  ],
+};
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
   const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];

package/mobile/src/hooks/useIntersectionObserver.ts

@@ -1,11 +1,23 @@
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useMemo, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface IntersectionObserverOptions<E extends Element = Element> {
+  sensitivity?: number; // from 0 to 1
+  rootRef?: { current: E | null };
+}
+
+const SENSITIVITY_SCALE = 10;
 
 export function useIntersectionObserver<R extends Element>(
   observerCallback: IntersectionObserverCallback,
-  observerOptions?: IntersectionObserverInit,
+  { sensitivity, rootRef }: IntersectionObserverOptions = {},
 ) {
   const ref = useRef<R | null>(null);
 
+  const observerOptions = useMemo(
+    () => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }),
+    [sensitivity, rootRef?.current],
+  );
+
   useEffect(() => {
     if (!ref.current) {
       return undefined;
@@ -21,3 +33,12 @@ export function useIntersectionObserver<R extends Element>(
 
   return ref;
 }
+
+function sensitivityToThreshold(sensitivity = 0): number[] {
+  const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+
+  return new Array(thresholdsCount)
+    .fill(0)
+    .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+    .concat(1);
+}

package/mobile/src/hooks/useLink.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref } from '../utils/adjustHref';
-import { isURL } from '../utils/url';
+import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -24,7 +24,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
         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);
         }

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -11,15 +11,6 @@ interface BlockWrapperProps extends UniBlockProps {
   role?: string;
 }
 
-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),
-};
-
 export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
@@ -33,7 +24,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
-    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
 
     useEffect(
       () =>
@@ -65,12 +56,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   },
 );
 
-function getIntersectionThreshold(_: number, i: number): number {
-  const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-
-  return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-}
-
 function changeHash(label?: string) {
   if (label) {
     globalThis.document.location.hash = label;

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -24,3 +24,16 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     />
   </Button>
 ));
+
+export const ScrollLeftButton = JSX<ButtonProps>((props) => (
+  <ArrowButton {...props} ariaLabel="Пролистать влево" data-block-control="scroll-left" />
+));
+
+export const ScrollRightButton = JSX<ButtonProps>((props) => (
+  <ArrowButton
+    {...props}
+    className={`${props.className || ''} rotate-180`}
+    ariaLabel="Пролистать вправо"
+    data-block-control="scroll-right"
+  />
+));

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -21,7 +21,9 @@ export const FoldableSection = JSX<FoldableSectionProps>(
     return (
       <div
         ref={containerRef}
-        className={`transition-max-h duration-300 overflow-hidden max-h-0 ${className}`}
+        className={`transition-max-h duration-300 overflow-hidden ${
+          containerRef.current || !isUnfolded ? 'max-h-0' : ''
+        } ${className}`}
       >
         {children}
       </div>

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -0,0 +1,97 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { mapChildren } from '../../utils/mapChildren';
+import type { SwipeContainerProps } from './SwipeListControlProps';
+import { SwipeListItem } from './SwipeListItem';
+
+type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
+
+type SwipeListItemWidthAuto = 0;
+
+/**
+ * @title Список
+ */
+interface SwipeListContainerProps extends SwipeContainerProps {
+  className?: string;
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
+  onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+
+export const SwipeListContainer = JSX<SwipeListContainerProps>(
+  ({
+    className = '',
+    containerRef,
+    activeIndex,
+    visibleItemCount,
+    gap = 0,
+    padding = 0,
+    snapAlign = 'snap-center',
+    children,
+    onVisibleItemsChange,
+    onVisibleIndicesChange,
+  }) => {
+    const observerOptions: IntersectionObserverOptions = {
+      sensitivity: 1,
+      rootRef: containerRef,
+    };
+
+    const itemsVisibilityListRef = useRef<ItemsVisibilityList>([]);
+    const handleIntersection = useCallback(
+      (idx: number, entry: IntersectionObserverEntry) => {
+        const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+        itemsVisibilityList[idx] = entry;
+        itemsVisibilityListRef.current = itemsVisibilityList;
+
+        onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+        onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+      },
+      [onVisibleItemsChange, onVisibleIndicesChange],
+    );
+
+    return (
+      <div
+        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
+        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        role="list"
+        ref={containerRef}
+      >
+        {mapChildren((child, idx) => (
+          <SwipeListItem
+            key={String(idx)}
+            className={`${snapAlign} ${
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
+            }`}
+            style={getContainerStyle(padding / 4)}
+            activeIndex={activeIndex}
+            idx={idx}
+            observerOptions={observerOptions}
+            onIntersection={handleIntersection}
+          >
+            {child}
+          </SwipeListItem>
+        ))(children)}
+      </div>
+    );
+  },
+);
+
+// Styles used to compensate outer container padding to get rid of clipping effect
+const getContainerStyle = (padding: number): Record<string, string> => ({
+  marginLeft: `${-padding}px`,
+  marginRight: `${-padding}px`,
+  paddingLeft: `${padding}px`,
+  paddingRight: `${padding}px`,
+});
+
+const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>
+  itemsVisibilityList
+    .map((_, i): [IntersectionObserverEntry | undefined, number] => [_, i])
+    .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+    .map(([, i]) => i);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -1,12 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList } from './SwipeListControlList';
-import type { SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getIndexParts } from './utils/getIndexParts';
-import { getScrollPoints } from './utils/getScrollPoints';
+import { useSwipeListScroll } from './useSwipeListScroll';
+
+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;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,65 +19,36 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
-    onSlideChange,
     children,
+    onVisibleIndicesChange,
   }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [indexFraction, setIndexFraction] = useState(0);
-
-    const dotsProps = {
-      activeIndex,
-      indexFraction,
-      showDots,
-      children,
-    };
-
-    const handleScroll: SwipeListControlListProps['onScroll'] = useCallback(
-      (e) => {
-        const {
-          scrollLeft,
-          clientWidth,
-          childElementCount,
-          scrollWidth,
-          children: childrenCollection,
-        } = e?.currentTarget as HTMLElement;
-        if (!childrenCollection[0]) {
-          return;
-        }
+    const itemCount = Array.isArray(children) ? children.length : 0;
 
-        // 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] as HTMLElement).offsetWidth - padding / 2;
-        const scrollPoints = getScrollPoints({
-          gap,
-          padding,
-          clientWidth,
-          scrollWidth,
-          childElementCount,
-          itemWidth,
-        });
-
-        const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-        if (index !== activeIndex && onSlideChange) {
-          onSlideChange();
-        }
-        setActiveIndex(index);
-        setIndexFraction(fraction);
-      },
-      [gap, padding, activeIndex, onSlideChange],
-    );
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount,
+      onVisibleIndicesChange,
+    });
+    const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
       <div className={className}>
-        <SwipeListControlList
+        <SwipeListContainer
+          containerRef={containerRef}
+          activeIndex={activeIndex}
+          visibleItemCount={1}
           gap={gap}
           padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {children}
-        </SwipeListControlList>
-        <SwipeListControlDots {...dotsProps} />
+        </SwipeListContainer>
+        {showDots ? (
+          <SwipeListControlDots
+            containerRef={containerRef}
+            activeIndex={activeIndex}
+            dotCount={itemCount}
+          />
+        ) : null}
       </div>
     );
   },