@via-profit/ui-kit 0.3.0 → 0.5.0

package/Swiper/Swiper.d.ts

@@ -33,7 +33,20 @@ export type SwiperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>
     readonly threshold?: number;
     readonly resistance?: boolean;
     readonly slidesPerView?: number;
-    readonly children?: readonly SwiperSlideBaseElement[];
+    /**
+     * Arrow keys switch the slides when the swiper is focused\
+     * **Default:** `true`
+     */
+    readonly keyboardControl?: boolean;
+    /**
+     * The label of the slide for screen readers\
+     * **Default:** `(index, total) => \`${index + 1} / ${total}\``
+     */
+    readonly slideLabel?: (index: number, total: number) => string;
+    /**
+     * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
+     */
+    readonly children?: React.ReactNode;
     readonly overrides?: SwiperOverrides;
 };
 export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -49,7 +62,20 @@ export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttr
     readonly threshold?: number | undefined;
     readonly resistance?: boolean | undefined;
     readonly slidesPerView?: number | undefined;
-    readonly children?: readonly SwiperSlideBaseElement[] | undefined;
+    /**
+     * Arrow keys switch the slides when the swiper is focused\
+     * **Default:** `true`
+     */
+    readonly keyboardControl?: boolean | undefined;
+    /**
+     * The label of the slide for screen readers\
+     * **Default:** `(index, total) => \`${index + 1} / ${total}\``
+     */
+    readonly slideLabel?: ((index: number, total: number) => string) | undefined;
+    /**
+     * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
+     */
+    readonly children?: React.ReactNode;
     readonly overrides?: SwiperOverrides | undefined;
 } & React.RefAttributes<SwiperRef>>;
 export default Swiper;

package/Swiper/Swiper.js

@@ -46,14 +46,16 @@ const SwiperContainer_1 = __importDefault(require("./SwiperContainer"));
 const SwiperWrapper_1 = __importDefault(require("./SwiperWrapper"));
 const SwiperTrack_1 = __importDefault(require("./SwiperTrack"));
 const SwiperSlidesRenderer_1 = __importDefault(require("./SwiperSlidesRenderer"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./SwiperSlide"), exports);
+const defaultSlideLabel = (index, total) => `${index + 1} / ${total}`;
 exports.Swiper = React.forwardRef((props, ref) => {
-    const { children, dragThreshold = 240, snap = true, draggable = true, overrides, initialIndex = 0, infinite = false, onSlideChange, autoplay = false, autoplayInterval = 3000, pauseOnHover = true, threshold = 20, resistance = true, slidesPerView = 1 } = props, restProps = __rest(props, ["children", "dragThreshold", "snap", "draggable", "overrides", "initialIndex", "infinite", "onSlideChange", "autoplay", "autoplayInterval", "pauseOnHover", "threshold", "resistance", "slidesPerView"]);
+    const _a = (0, useThemeProps_1.default)('Swiper', props), { children, dragThreshold = 240, snap = true, draggable = true, overrides, initialIndex = 0, infinite = false, onSlideChange, autoplay = false, autoplayInterval = 3000, pauseOnHover = true, threshold = 20, resistance = true, slidesPerView = 1, keyboardControl = true, slideLabel = defaultSlideLabel } = _a, restProps = __rest(_a, ["children", "dragThreshold", "snap", "draggable", "overrides", "initialIndex", "infinite", "onSlideChange", "autoplay", "autoplayInterval", "pauseOnHover", "threshold", "resistance", "slidesPerView", "keyboardControl", "slideLabel"]);
     // #region Slides
     const slides = React.useMemo(() => {
-        const childrenSlides = Array.isArray(children)
-            ? children
-            : [children];
+        // toArray skips null/false and keeps the user keys (prefixed), so the slides are not remounted
+        // when a slide is added to the start
+        const childrenSlides = React.Children.toArray(children).filter(React.isValidElement);
         if (infinite) {
             if (childrenSlides.length < 2) {
                 console.error('To infinite loop counts of the slides must be greater than 2');
@@ -72,14 +74,9 @@ exports.Swiper = React.forwardRef((props, ref) => {
                 key: `clone-tail-${i}`,
                 'data-clone': 'tail',
             }));
-            const mainSlides = childrenSlides.map((slide, idx) => React.cloneElement(slide, {
-                key: `slide-${idx}`,
-            }));
-            return [...headClones, ...mainSlides, ...tailClones];
+            return [...headClones, ...childrenSlides, ...tailClones];
         }
-        return childrenSlides.map((slide, idx) => React.cloneElement(slide, {
-            key: `slide-${idx}`,
-        }));
+        return childrenSlides;
     }, [children, infinite, slidesPerView]);
     const total = slides.length;
     const realSlidesCount = infinite ? total - 2 * slidesPerView : total;
@@ -92,9 +89,15 @@ exports.Swiper = React.forwardRef((props, ref) => {
         return initialIndex + slidesPerView;
     });
     const [offset, setOffset] = React.useState(0);
+    // The long decelerating transition after a free swipe (snap=false)
+    const [isMomentum, setIsMomentum] = React.useState(false);
     const [isDragging, setIsDragging] = React.useState(false);
     const [disableAnimation, setDisableAnimation] = React.useState(false);
-    const [isPaused, setIsPaused] = React.useState(false);
+    const [isPausedByApi, setIsPausedByApi] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    // The pause by the API is not cancelled when the mouse leaves the swiper
+    const isPaused = isPausedByApi || isHovered || isFocused;
     // #region Refs
     const dragging = React.useRef(false);
     const startX = React.useRef(0);
@@ -104,8 +107,8 @@ exports.Swiper = React.forwardRef((props, ref) => {
     const wrapperRef = React.useRef(null);
     const trackRef = React.useRef(null);
     const isAnimating = React.useRef(false);
-    const autoplayTimer = React.useRef();
     const mounted = React.useRef(true);
+    const suppressClick = React.useRef(false);
     // #region Real Index
     const realIndex = React.useMemo(() => {
         if (!infinite) {
@@ -118,7 +121,8 @@ exports.Swiper = React.forwardRef((props, ref) => {
         if (realIndex >= realSlidesCount) {
             return realIndex - realSlidesCount;
         }
-        return Math.min(realIndex, realSlidesCount - slidesPerView);
+        // In the infinite mode any slide can be the first visible one, so there is no clamp
+        return realIndex;
     }, [index, infinite, slidesPerView, realSlidesCount]);
     const prevRealIndex = React.useRef(realIndex);
     // #region Effects
@@ -131,11 +135,13 @@ exports.Swiper = React.forwardRef((props, ref) => {
     React.useEffect(() => {
         if (!mounted.current)
             return;
-        const newTotal = slides.length;
-        if (index >= newTotal) {
-            setIndex(Math.max(0, newTotal - 1));
+        // The slides were removed: keep the index inside the allowed range
+        const lastIndex = infinite ? total - slidesPerView : maxIndex;
+        if (index > lastIndex) {
+            setIndex(infinite ? slidesPerView : maxIndex);
+            setOffset(0);
         }
-    }, [slides.length, index]);
+    }, [index, infinite, total, slidesPerView, maxIndex]);
     // #region Normalization
     const normalizeIndex = React.useCallback(() => {
         if (!infinite || !mounted.current)
@@ -143,15 +149,17 @@ exports.Swiper = React.forwardRef((props, ref) => {
         const firstRealIndex = slidesPerView;
         const lastRealIndex = total - slidesPerView - 1;
         if (index < firstRealIndex || index > lastRealIndex) {
-            const target = index < firstRealIndex ? lastRealIndex : firstRealIndex;
+            // A clone position shows the same slides as the real position shifted by the slides count.
+            // Not always the first/last real slide: after several fast clicks the index may be deeper in the clones
+            const target = index < firstRealIndex ? index + realSlidesCount : index - realSlidesCount;
             setDisableAnimation(true);
             requestAnimationFrame(() => {
                 var _a;
                 if (!mounted.current)
                     return;
                 (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                // The offset is kept: in the free mode (snap=false) the track stops between the slides
                 setIndex(target);
-                setOffset(0);
                 requestAnimationFrame(() => {
                     if (mounted.current) {
                         setDisableAnimation(false);
@@ -159,7 +167,7 @@ exports.Swiper = React.forwardRef((props, ref) => {
                 });
             });
         }
-    }, [index, infinite, slidesPerView, total]);
+    }, [index, infinite, slidesPerView, total, realSlidesCount]);
     // #region Navigation API
     const indexRef = React.useRef(index);
     React.useEffect(() => {
@@ -184,16 +192,21 @@ exports.Swiper = React.forwardRef((props, ref) => {
             return; // никуда не едем — флаг не трогаем
         }
         setDisableAnimation(false);
+        setIsMomentum(false);
+        setOffset(0);
         setIndex(targetIndex);
         isAnimating.current = true;
     }, [infinite, slidesPerView, realSlidesCount, maxIndex]);
     const next = React.useCallback(() => {
-        // if (isAnimating.current) return;
         setDisableAnimation(false);
+        setIsMomentum(false);
+        setOffset(0);
         setIndex(prev => {
             let nextIndex;
             if (infinite) {
-                nextIndex = Math.min(prev + 1, total - 1);
+                // The last position is the first tail clone: it mirrors the first real slide.
+                // Further positions would show the empty space when slidesPerView > 1
+                nextIndex = Math.min(prev + 1, total - slidesPerView);
             }
             else {
                 nextIndex = Math.min(prev + 1, maxIndex);
@@ -205,10 +218,11 @@ exports.Swiper = React.forwardRef((props, ref) => {
             isAnimating.current = true;
             return nextIndex;
         });
-    }, [infinite, maxIndex, total]);
+    }, [infinite, maxIndex, total, slidesPerView]);
     const prev = React.useCallback(() => {
-        // if (isAnimating.current) return;
         setDisableAnimation(false);
+        setIsMomentum(false);
+        setOffset(0);
         setIndex(prev => {
             const nextIndex = Math.max(prev - 1, 0);
             if (nextIndex === prev) {
@@ -218,22 +232,70 @@ exports.Swiper = React.forwardRef((props, ref) => {
             return nextIndex;
         });
     }, []);
+    // #region Position
+    // The position is the distance in pixels from the start of the track to the left edge of the view.
+    // The state keeps it as index (whole slides) + offset (pixels), the track is translated by both
+    const getSlideWidth = React.useCallback(() => { var _a; return (((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0) / slidesPerView; }, [slidesPerView]);
+    // The last allowed position. In the infinite mode it is the first tail clone
+    const maxPosition = React.useCallback(() => (infinite ? total - slidesPerView : maxIndex) * getSlideWidth(), [infinite, total, slidesPerView, maxIndex, getSlideWidth]);
+    // The position on the screen right now, also in the middle of a transition
+    const readPosition = React.useCallback(() => {
+        const track = trackRef.current;
+        if (track && typeof DOMMatrixReadOnly !== 'undefined') {
+            const { transform } = getComputedStyle(track);
+            if (transform && transform !== 'none') {
+                return -new DOMMatrixReadOnly(transform).m41;
+            }
+        }
+        return index * getSlideWidth() - offset;
+    }, [index, offset, getSlideWidth]);
+    // Infinite mode: the same view is shown by the real slides and by the clones,
+    // so the position is moved by the whole slides count when it comes close to the edge of the track
+    const wrapPosition = React.useCallback((position) => {
+        const width = getSlideWidth();
+        const span = realSlidesCount * width;
+        if (!infinite || width === 0)
+            return 0;
+        if (position < width * 0.5)
+            return span;
+        if (position > maxPosition() - width * 0.5)
+            return -span;
+        return 0;
+    }, [infinite, realSlidesCount, getSlideWidth, maxPosition]);
+    const dragBasePosition = React.useRef(0);
+    const dragAnchorIndex = React.useRef(0);
+    const dragPosition = React.useRef(0);
     // #region Pointer Events
     const onPointerDown = React.useCallback((e) => {
         if (!wrapperRef.current || !draggable)
             return;
+        // Only the main mouse button, the touch or the pen
+        if (e.pointerType === 'mouse' && e.button !== 0)
+            return;
+        const width = getSlideWidth();
+        // Grab the track where it is now: a running transition stops under the finger instead of jumping
+        let position = readPosition();
+        position += wrapPosition(position);
+        const anchor = width > 0 ? Math.round(position / width) : index;
+        dragBasePosition.current = position;
+        dragPosition.current = position;
+        dragAnchorIndex.current = anchor;
+        suppressClick.current = false;
         dragging.current = true;
         isAnimating.current = false;
         setDisableAnimation(true);
+        setIsMomentum(false);
         setIsDragging(true);
+        setIndex(anchor);
+        setOffset(anchor * width - position);
         startX.current = e.clientX;
         lastX.current = e.clientX;
         lastTime.current = performance.now();
         velocity.current = 0;
         e.target.setPointerCapture(e.pointerId);
-    }, [draggable]);
+    }, [draggable, getSlideWidth, readPosition, wrapPosition, index]);
     const onPointerMove = React.useCallback((e) => {
-        if (!dragging.current || isAnimating.current)
+        if (!dragging.current)
             return;
         const now = performance.now();
         const dx = e.clientX - lastX.current;
@@ -243,102 +305,172 @@ exports.Swiper = React.forwardRef((props, ref) => {
         }
         lastX.current = e.clientX;
         lastTime.current = now;
-        let delta = lastX.current - startX.current;
-        if (resistance && !infinite) {
-            if (index === 0 && delta > 0) {
-                delta *= 0.3;
+        const width = getSlideWidth();
+        let position = dragBasePosition.current - (e.clientX - startX.current);
+        // Endless drag in the infinite mode: move the base together with the position
+        const shift = wrapPosition(position);
+        if (shift !== 0) {
+            dragBasePosition.current += shift;
+            dragAnchorIndex.current += Math.round(shift / width);
+            position += shift;
+        }
+        if (!infinite) {
+            const max = maxPosition();
+            if (position < 0) {
+                position = resistance ? position * 0.3 : 0;
             }
-            if (index === maxIndex && delta < 0) {
-                delta *= 0.3;
+            else if (position > max) {
+                position = resistance ? max + (position - max) * 0.3 : max;
             }
         }
-        setOffset(delta);
-    }, [resistance, infinite, index, maxIndex]);
+        dragPosition.current = position;
+        // snap: the index stays the same during the drag, the slide changes after the release.
+        // free: the index follows the position, so onSlideChange reports the slide under the view
+        const nextIndex = snap ? dragAnchorIndex.current : Math.round(position / width);
+        setIndex(nextIndex);
+        setOffset(nextIndex * width - position);
+    }, [getSlideWidth, wrapPosition, infinite, maxPosition, resistance, snap]);
     const onPointerUp = React.useCallback((e) => {
         if (!dragging.current)
             return;
+        const width = getSlideWidth();
+        const position = dragPosition.current;
         const delta = lastX.current - startX.current;
-        const v = Math.abs(velocity.current);
-        const velocityFactor = Math.min(v * 250, 0.65);
-        const dynamicThreshold = Math.max(threshold, Math.min(dragThreshold * (1 - velocityFactor), dragThreshold));
-        let nextIndex = index;
-        if (Math.abs(delta) > dynamicThreshold) {
-            nextIndex = delta < 0 ? index + 1 : index - 1;
-        }
-        if (!infinite) {
-            nextIndex = Math.max(0, Math.min(maxIndex, nextIndex));
-        }
-        else {
-            nextIndex = Math.max(0, Math.min(total - 1, nextIndex));
+        // The pointer stopped before the release: no inertia
+        const v = performance.now() - lastTime.current > 100 ? 0 : velocity.current;
+        const lastIndex = infinite ? total - slidesPerView : maxIndex;
+        // It was a drag, not a click: the click on a link or a button inside the slide must not fire
+        if (Math.abs(delta) > threshold) {
+            suppressClick.current = true;
         }
         setDisableAnimation(false);
         if (snap) {
+            const anchor = dragAnchorIndex.current;
+            const displacement = position - anchor * width;
+            const velocityFactor = Math.min(Math.abs(v) * 250, 0.65);
+            const dynamicThreshold = Math.max(threshold, Math.min(dragThreshold * (1 - velocityFactor), dragThreshold));
+            let nextIndex = anchor;
+            if (Math.abs(displacement) > dynamicThreshold) {
+                // At least one slide, more if the slide was dragged further
+                nextIndex =
+                    displacement > 0
+                        ? Math.max(anchor + 1, Math.round(position / width))
+                        : Math.min(anchor - 1, Math.round(position / width));
+            }
+            nextIndex = Math.max(0, Math.min(lastIndex, nextIndex));
             setIndex(nextIndex);
             setOffset(0);
+            // A click without movement does not start a transition, so transitionend never comes
+            // and the flag would block autoplay and goToIndex forever
+            isAnimating.current = Math.abs(nextIndex * width - position) > 0.5;
         }
         else {
+            // Free mode: the track keeps moving by inertia and stops where it stops
+            const projected = Math.max(0, Math.min(lastIndex * width, position - v * 300));
+            const nextIndex = width > 0 ? Math.round(projected / width) : index;
+            setIsMomentum(true);
             setIndex(nextIndex);
+            setOffset(nextIndex * width - projected);
+            isAnimating.current = Math.abs(projected - position) > 0.5;
         }
-        // A click without movement does not start a transition, so transitionend never comes
-        // and the flag would block autoplay and goToIndex forever
-        isAnimating.current = nextIndex !== index || (snap && offset !== 0);
         dragging.current = false;
         setIsDragging(false);
         e.target.releasePointerCapture(e.pointerId);
-    }, [threshold, dragThreshold, index, maxIndex, snap, infinite, total, offset]);
+    }, [
+        getSlideWidth,
+        infinite,
+        total,
+        slidesPerView,
+        maxIndex,
+        threshold,
+        snap,
+        dragThreshold,
+        index,
+    ]);
     const onLostPointerCapture = React.useCallback((e) => {
         if (dragging.current) {
             onPointerUp(e);
         }
     }, [onPointerUp]);
     // #region Autoplay
-    const startAutoplay = React.useCallback(() => {
+    const autoplayStep = React.useRef(() => undefined);
+    autoplayStep.current = () => {
+        // Without the infinite loop the autoplay returns to the first slide instead of stopping at the end
+        if (!infinite && indexRef.current >= maxIndex) {
+            goToIndex(0);
+        }
+        else {
+            next();
+        }
+    };
+    const pause = React.useCallback(() => setIsPausedByApi(true), []);
+    const resume = React.useCallback(() => setIsPausedByApi(false), []);
+    React.useEffect(() => {
         if (!autoplay || isPaused)
-            return;
-        autoplayTimer.current = setInterval(() => {
-            if (!isDragging && !isAnimating.current && mounted.current) {
-                next();
+            return undefined;
+        const timer = setInterval(() => {
+            if (!dragging.current && !isAnimating.current && mounted.current) {
+                autoplayStep.current();
             }
         }, autoplayInterval);
-    }, [autoplay, autoplayInterval, isDragging, isPaused, next]);
-    const pause = React.useCallback(() => {
-        setIsPaused(true);
-        if (autoplayTimer.current) {
-            clearInterval(autoplayTimer.current);
-            autoplayTimer.current = undefined;
-        }
-    }, []);
-    const resume = React.useCallback(() => {
-        setIsPaused(false);
-    }, []);
-    // #region Hover
+        return () => clearInterval(timer);
+    }, [autoplay, autoplayInterval, isPaused]);
+    // #region Hover and focus
+    // The autoplay pauses while the pointer is over the swiper (pauseOnHover)
+    // and always while the focus is inside it, so the keyboard user is not interrupted
     React.useEffect(() => {
-        if (!autoplay || !pauseOnHover)
-            return;
         const wrapper = wrapperRef.current;
-        if (!wrapper)
-            return;
-        const handleMouseEnter = () => pause();
-        const handleMouseLeave = () => resume();
+        if (!autoplay || !wrapper)
+            return undefined;
+        const handleMouseEnter = () => pauseOnHover && setIsHovered(true);
+        const handleMouseLeave = () => setIsHovered(false);
+        const handleFocusIn = () => setIsFocused(true);
+        const handleFocusOut = (event) => {
+            if (!wrapper.contains(event.relatedTarget)) {
+                setIsFocused(false);
+            }
+        };
         wrapper.addEventListener('mouseenter', handleMouseEnter);
         wrapper.addEventListener('mouseleave', handleMouseLeave);
+        wrapper.addEventListener('focusin', handleFocusIn);
+        wrapper.addEventListener('focusout', handleFocusOut);
         return () => {
             wrapper.removeEventListener('mouseenter', handleMouseEnter);
             wrapper.removeEventListener('mouseleave', handleMouseLeave);
+            wrapper.removeEventListener('focusin', handleFocusIn);
+            wrapper.removeEventListener('focusout', handleFocusOut);
         };
-    }, [autoplay, pauseOnHover, pause, resume]);
-    // #region Autoplay Effect
-    React.useEffect(() => {
-        if (autoplay) {
-            startAutoplay();
+    }, [autoplay, pauseOnHover]);
+    // #region Keyboard
+    const onKeyDown = React.useCallback((event) => {
+        if (!keyboardControl)
+            return;
+        // Do not steal the arrows from the fields inside the slides
+        const target = event.target;
+        if (target.closest('input, textarea, select, [contenteditable="true"]'))
+            return;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            prev();
         }
-        return () => {
-            if (autoplayTimer.current) {
-                clearInterval(autoplayTimer.current);
-                autoplayTimer.current = undefined;
-            }
-        };
-    }, [autoplay, startAutoplay, isPaused]);
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            next();
+        }
+    }, [keyboardControl, prev, next]);
+    const onClickCapture = React.useCallback((event) => {
+        if (suppressClick.current) {
+            suppressClick.current = false;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, []);
+    // The images and the links are dragged by the browser as files, it breaks the swipe
+    const onDragStart = React.useCallback((event) => {
+        if (draggable) {
+            event.preventDefault();
+        }
+    }, [draggable]);
     // #region Transition End
     React.useEffect(() => {
         const track = trackRef.current;
@@ -398,10 +530,22 @@ exports.Swiper = React.forwardRef((props, ref) => {
         }
         return domIndex - slidesPerView;
     }, [infinite, realSlidesCount, slidesPerView, total]);
-    return (React.createElement(overridesMap.Container, Object.assign({}, restProps),
-        React.createElement(overridesMap.Wrapper, { ref: wrapperRef, draggable: draggable, slidesPerView: slidesPerView, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onLostPointerCapture: onLostPointerCapture },
-            React.createElement(overridesMap.Track, { ref: trackRef, dragging: isDragging, index: index, offset: offset, disableAnimation: disableAnimation, slidesPerView: slidesPerView },
-                React.createElement(SwiperSlidesRenderer_1.default, { slides: slides, slidesPerView: slidesPerView, realIndex: realIndex, realSlidesCount: realSlidesCount, getSlideRealIndex: getSlideRealIndex })))));
+    // The slides at least partially in the view: they are not inert, so a partially visible slide
+    // can be clicked. Between the slides (drag, free mode) one more slide is partially visible
+    const slideWidth = wrapperRef.current ? wrapperRef.current.clientWidth / slidesPerView : 0;
+    let firstVisibleDomIndex = index;
+    let visibleCount = slidesPerView;
+    if (slideWidth > 0 && Math.abs(offset) > 0.5) {
+        const position = index * slideWidth - offset;
+        firstVisibleDomIndex = Math.floor(position / slideWidth + 0.001);
+        const lastVisibleDomIndex = Math.ceil((position + slidesPerView * slideWidth) / slideWidth - 0.001) - 1;
+        visibleCount = lastVisibleDomIndex - firstVisibleDomIndex + 1;
+    }
+    firstVisibleDomIndex = Math.max(0, Math.min(total - 1, firstVisibleDomIndex));
+    return (React.createElement(overridesMap.Container, Object.assign({ role: "region", "aria-roledescription": "carousel" }, restProps),
+        React.createElement(overridesMap.Wrapper, { ref: wrapperRef, draggable: draggable, slidesPerView: slidesPerView, tabIndex: keyboardControl ? 0 : undefined, "aria-live": autoplay && !isPaused ? 'off' : 'polite', onKeyDown: onKeyDown, onClickCapture: onClickCapture, onDragStart: onDragStart, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onLostPointerCapture: onLostPointerCapture },
+            React.createElement(overridesMap.Track, { ref: trackRef, dragging: isDragging, index: index, offset: offset, disableAnimation: disableAnimation, momentum: isMomentum, slidesPerView: slidesPerView },
+                React.createElement(SwiperSlidesRenderer_1.default, { slides: slides, slidesPerView: slidesPerView, realIndex: realIndex, firstVisibleIndex: getSlideRealIndex(firstVisibleDomIndex), visibleCount: visibleCount, realSlidesCount: realSlidesCount, getSlideRealIndex: getSlideRealIndex, slideLabel: slideLabel })))));
 });
 exports.Swiper.displayName = 'Swiper';
 exports.default = exports.Swiper;

package/Swiper/SwiperContainer.js

@@ -7,8 +7,6 @@ exports.SwiperContainer = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 exports.SwiperContainer = styled_1.default.div `
   width: 100%;
-    max-width: 1200px;
-  margin: 0 auto;
   overflow: hidden;
   position: relative;
 `;

package/Swiper/SwiperSlidesRenderer.d.ts

@@ -4,8 +4,16 @@ export type SwiperSlidesRendererProps = {
     readonly slides: readonly SwiperSlideElement[];
     readonly slidesPerView: number;
     readonly realIndex: number;
+    /**
+     * The real index of the first slide that is at least partially in the view
+     * and the count of such slides. In the free mode (snap=false) the track stops between the slides,
+     * then one more slide is partially visible
+     */
+    readonly firstVisibleIndex?: number;
+    readonly visibleCount?: number;
     readonly realSlidesCount: number;
     readonly getSlideRealIndex: (index: number) => number;
+    readonly slideLabel: (index: number, total: number) => string;
 };
 declare const _default: React.NamedExoticComponent<SwiperSlidesRendererProps>;
 export default _default;

package/Swiper/SwiperSlidesRenderer.js

@@ -24,23 +24,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
+// React 19 supports the boolean `inert`, React 18 passes only the string value to the DOM
+const INERT_VALUE = parseInt(React.version, 10) >= 19 ? true : '';
 const SwiperSlidesRenderer = props => {
-    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex } = props;
-    // Мемоизируем вычисления видимости
+    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex, slideLabel, firstVisibleIndex = realIndex, visibleCount = slidesPerView, } = props;
     const visibilityMap = React.useMemo(() => {
         const map = new Map();
-        if (realSlidesCount <= slidesPerView) {
+        if (realSlidesCount <= visibleCount) {
             slides.forEach((_, i) => {
                 map.set(i, { isVisible: true, isNearby: false });
             });
         }
         else {
             const visibleIndices = [];
-            for (let j = 0; j < slidesPerView; j++) {
-                visibleIndices.push((realIndex + j) % realSlidesCount);
+            for (let j = 0; j < visibleCount; j++) {
+                visibleIndices.push((firstVisibleIndex + j) % realSlidesCount);
             }
-            const prevIndex = (realIndex - 1 + realSlidesCount) % realSlidesCount;
-            const nextIndex = (realIndex + slidesPerView) % realSlidesCount;
+            const prevIndex = (firstVisibleIndex - 1 + realSlidesCount) % realSlidesCount;
+            const nextIndex = (firstVisibleIndex + visibleCount) % realSlidesCount;
             slides.forEach((_, i) => {
                 const slideRealIndex = getSlideRealIndex(i);
                 const isVisible = visibleIndices.includes(slideRealIndex);
@@ -49,23 +50,25 @@ const SwiperSlidesRenderer = props => {
             });
         }
         return map;
-    }, [slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex]);
+    }, [slides, visibleCount, firstVisibleIndex, realSlidesCount, getSlideRealIndex]);
     return (React.createElement(React.Fragment, null, slides.map((slide, i) => {
         const { isVisible, isNearby } = visibilityMap.get(i) || {
             isVisible: false,
             isNearby: false,
         };
         const slideRealIndex = getSlideRealIndex(i);
-        // Не клонируем заново, если пропсы не изменились
-        if (slide.props.slidesPerView === slidesPerView &&
-            slide.props.isVisible === isVisible &&
-            slide.props.isNearby === isNearby) {
-            return slide;
-        }
+        const isClone = typeof slide.props['data-clone'] !== 'undefined';
+        // The slides out of the view are inert: Tab does not go into them (it would scroll the track)
+        // and screen readers skip them. The clones are always hidden from screen readers
         return React.cloneElement(slide, {
             slidesPerView,
             isVisible,
             isNearby,
+            role: 'group',
+            'aria-roledescription': 'slide',
+            'aria-label': slideLabel(slideRealIndex, realSlidesCount),
+            'aria-hidden': isClone || !isVisible ? true : undefined,
+            inert: isVisible && !isClone ? undefined : INERT_VALUE,
             'data-index': i,
             'data-real-index': slideRealIndex,
         });

package/Swiper/SwiperTrack.d.ts

@@ -5,6 +5,10 @@ export type SwiperTrackProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly offset: number;
     readonly dragging: boolean;
     readonly disableAnimation?: boolean;
+    /**
+     * The long decelerating transition after a free swipe (snap=false)
+     */
+    readonly momentum?: boolean;
     readonly slidesPerView: number;
 };
 export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
@@ -13,6 +17,10 @@ export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttr
     readonly offset: number;
     readonly dragging: boolean;
     readonly disableAnimation?: boolean | undefined;
+    /**
+     * The long decelerating transition after a free swipe (snap=false)
+     */
+    readonly momentum?: boolean | undefined;
     readonly slidesPerView: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SwiperTrack;