@via-profit/ui-kit 0.2.1-alpha.3 → 0.2.3

package/Selectbox/index.js

@@ -70,9 +70,8 @@ const generateGuid = () => {
     ].join('-');
 };
 const Selectbox = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
     const menuRef = React.useRef(null);
-    const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
     const [anchorElement, setAnchorElement] = React.useState(null);
     const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
     const inputID = React.useMemo(() => {
@@ -136,7 +135,8 @@ const Selectbox = React.forwardRef((props, ref) => {
     }, [handleMouseDown]);
     const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
         error,
-        isOpen, anchorPos: actualPlacement, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, actualPlacement, isLoading, overridesMap, nativeButtonProps]);
+        isOpen,
+        anchorPos, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
     const labelProps = React.useMemo(() => ({
         htmlFor: inputID,
         error,
@@ -151,7 +151,7 @@ const Selectbox = React.forwardRef((props, ref) => {
         React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
             React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { onClick: handleButtonClick, ref: setRefs }), renderValueAsString())),
         React.createElement(overridesMap.ErrorText, { error: error }, errorText),
-        React.createElement(SelectboxMenu_1.default, { actualPlacement: actualPlacement, multiple: multiple, items: items, value: value, isOpen: isOpen, anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, onAnchorPosChanged: setActualPlacement, ref: menuRef }, children)));
+        React.createElement(SelectboxMenu_1.default, { multiple: multiple, items: items, value: value, isOpen: isOpen, anchorPos: anchorPos, positionStrategy: positionStrategy, autoFlip: autoFlip, alternativePlacements: ['bottom-fill', 'top-fill'], anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, ref: menuRef }, children)));
 });
 Selectbox.displayName = 'Selectbox';
 exports.default = Selectbox;

package/Swiper/Swiper.d.ts

@@ -2,43 +2,54 @@ import * as React from 'react';
 import { SwiperContainerProps } from './SwiperContainer';
 import { SwiperWrapperProps } from './SwiperWrapper';
 import { SwiperTrackProps } from './SwiperTrack';
+import SwiperSlide, { SwiperSlideBaseProps, SwiperSlideProps } from './SwiperSlide';
+export * from './SwiperSlide';
+export type SwiperSlideBaseElement = React.ReactElement<SwiperSlideBaseProps, typeof SwiperSlide>;
+export type SwiperSlideElement = React.ReactElement<SwiperSlideProps, typeof SwiperSlide>;
 export type SwiperRef = {
     next: () => void;
     prev: () => void;
     goToIndex: (index: number) => void;
+    getRealIndex: () => number;
+    getTotalSlides: () => number;
+    pause: () => void;
+    resume: () => void;
 };
 export interface SwiperOverrides {
-    /**
-     * Swiper main container
-     */
     readonly Container?: React.ComponentType<SwiperContainerProps & React.RefAttributes<HTMLDivElement>>;
-    /**
-     * Swiper wrapper
-     */
     readonly Wrapper?: React.ComponentType<SwiperWrapperProps & React.RefAttributes<HTMLDivElement>>;
-    /**
-     * Swiper slides track
-     */
     readonly Track?: React.ComponentType<SwiperTrackProps & React.RefAttributes<HTMLDivElement>>;
 }
-export type SwiperProps = React.HTMLAttributes<HTMLDivElement> & {
+export type SwiperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     readonly dragThreshold?: number;
     readonly snap?: boolean;
     readonly draggable?: boolean;
     readonly initialIndex?: number;
-    /**
-     * Overridable components map
-     */
+    readonly infinite?: boolean;
+    readonly onSlideChange?: (realIndex: number) => void;
+    readonly autoplay?: boolean;
+    readonly autoplayInterval?: number;
+    readonly pauseOnHover?: boolean;
+    readonly threshold?: number;
+    readonly resistance?: boolean;
+    readonly slidesPerView?: number;
+    readonly children?: readonly SwiperSlideBaseElement[];
     readonly overrides?: SwiperOverrides;
 };
-export declare const Swiper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     readonly dragThreshold?: number | undefined;
     readonly snap?: boolean | undefined;
     readonly draggable?: boolean | undefined;
     readonly initialIndex?: number | undefined;
-    /**
-     * Overridable components map
-     */
+    readonly infinite?: boolean | undefined;
+    readonly onSlideChange?: ((realIndex: number) => void) | undefined;
+    readonly autoplay?: boolean | undefined;
+    readonly autoplayInterval?: number | undefined;
+    readonly pauseOnHover?: boolean | undefined;
+    readonly threshold?: number | undefined;
+    readonly resistance?: boolean | undefined;
+    readonly slidesPerView?: number | undefined;
+    readonly children?: readonly SwiperSlideBaseElement[] | undefined;
     readonly overrides?: SwiperOverrides | undefined;
 } & React.RefAttributes<SwiperRef>>;
 export default Swiper;

package/Swiper/Swiper.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -42,26 +45,185 @@ const React = __importStar(require("react"));
 const SwiperContainer_1 = __importDefault(require("./SwiperContainer"));
 const SwiperWrapper_1 = __importDefault(require("./SwiperWrapper"));
 const SwiperTrack_1 = __importDefault(require("./SwiperTrack"));
+const SwiperSlidesRenderer_1 = __importDefault(require("./SwiperSlidesRenderer"));
+__exportStar(require("./SwiperSlide"), exports);
 exports.Swiper = React.forwardRef((props, ref) => {
-    const { children, dragThreshold = 120, snap = true, draggable = true, overrides, initialIndex = 0 } = props, restProps = __rest(props, ["children", "dragThreshold", "snap", "draggable", "overrides", "initialIndex"]);
-    const slides = React.Children.toArray(children);
+    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"]);
+    // #region Slides
+    const slides = React.useMemo(() => {
+        const childrenSlides = Array.isArray(children)
+            ? children
+            : [children];
+        if (infinite) {
+            if (childrenSlides.length < 2) {
+                console.error('To infinite loop counts of the slides must be greater than 2');
+                return childrenSlides;
+            }
+            if (childrenSlides.length < slidesPerView + 1) {
+                console.error(`For infinite loop with slidesPerView=${slidesPerView}, need at least ${slidesPerView + 1} slides`);
+                return childrenSlides;
+            }
+            // Используем стабильные ключи без Date.now()
+            const headClones = childrenSlides.slice(-slidesPerView).map((slide, i) => React.cloneElement(slide, {
+                key: `clone-head-${i}`,
+                'data-clone': 'head',
+            }));
+            const tailClones = childrenSlides.slice(0, slidesPerView).map((slide, i) => React.cloneElement(slide, {
+                key: `clone-tail-${i}`,
+                'data-clone': 'tail',
+            }));
+            const mainSlides = childrenSlides.map((slide, idx) => React.cloneElement(slide, {
+                key: `slide-${idx}`,
+            }));
+            return [...headClones, ...mainSlides, ...tailClones];
+        }
+        return childrenSlides.map((slide, idx) => React.cloneElement(slide, {
+            key: `slide-${idx}`,
+        }));
+    }, [children, infinite, slidesPerView]);
     const total = slides.length;
-    const [index, setIndex] = React.useState(initialIndex);
+    const realSlidesCount = infinite ? total - 2 * slidesPerView : total;
+    const maxIndex = Math.max(0, total - slidesPerView);
+    // #region States
+    const [index, setIndex] = React.useState(() => {
+        if (!infinite) {
+            return Math.max(0, Math.min(initialIndex, maxIndex));
+        }
+        return initialIndex + slidesPerView;
+    });
     const [offset, setOffset] = React.useState(0);
     const [isDragging, setIsDragging] = React.useState(false);
+    const [disableAnimation, setDisableAnimation] = React.useState(false);
+    const [isPaused, setIsPaused] = React.useState(false);
+    // #region Refs
     const dragging = React.useRef(false);
     const startX = React.useRef(0);
     const lastX = React.useRef(0);
     const lastTime = React.useRef(0);
     const velocity = React.useRef(0);
-    const width = React.useRef(0);
     const wrapperRef = React.useRef(null);
-    const onPointerDown = React.useCallback((e) => {
-        if (!wrapperRef.current || !draggable) {
+    const trackRef = React.useRef(null);
+    const isAnimating = React.useRef(false);
+    const autoplayTimer = React.useRef();
+    const mounted = React.useRef(true);
+    const normalizeTimeout = React.useRef();
+    // #region Real Index
+    const realIndex = React.useMemo(() => {
+        if (!infinite) {
+            return index;
+        }
+        const realIndex = index - slidesPerView;
+        if (realIndex < 0) {
+            return realSlidesCount + realIndex;
+        }
+        if (realIndex >= realSlidesCount) {
+            return realIndex - realSlidesCount;
+        }
+        return Math.min(realIndex, realSlidesCount - slidesPerView);
+    }, [index, infinite, slidesPerView, realSlidesCount]);
+    const prevRealIndex = React.useRef(realIndex);
+    // #region Effects
+    React.useEffect(() => {
+        if (realIndex !== prevRealIndex.current && mounted.current) {
+            onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(realIndex);
+            prevRealIndex.current = realIndex;
+        }
+    }, [realIndex, onSlideChange]);
+    React.useEffect(() => {
+        if (!mounted.current)
             return;
+        const newTotal = slides.length;
+        if (index >= newTotal) {
+            setIndex(Math.max(0, newTotal - 1));
         }
-        width.current = wrapperRef.current.offsetWidth;
+    }, [slides.length, index]);
+    // #region Normalization
+    const normalizeIndex = React.useCallback(() => {
+        if (!infinite || !mounted.current)
+            return;
+        const firstRealIndex = slidesPerView;
+        const lastRealIndex = total - slidesPerView - 1;
+        if (index < firstRealIndex || index > lastRealIndex) {
+            const target = index < firstRealIndex ? lastRealIndex : firstRealIndex;
+            setDisableAnimation(true);
+            requestAnimationFrame(() => {
+                var _a;
+                if (!mounted.current)
+                    return;
+                (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                setIndex(target);
+                setOffset(0);
+                requestAnimationFrame(() => {
+                    if (mounted.current) {
+                        setDisableAnimation(false);
+                    }
+                });
+            });
+        }
+    }, [index, infinite, slidesPerView, total]);
+    // #region Navigation API
+    const indexRef = React.useRef(index);
+    React.useEffect(() => {
+        indexRef.current = index;
+    }, [index]);
+    const goToIndex = React.useCallback((i) => {
+        if (isAnimating.current)
+            return;
+        let targetIndex = i;
+        if (infinite) {
+            targetIndex = i + slidesPerView;
+            const minIndex = slidesPerView;
+            const maxIndex = slidesPerView + realSlidesCount - 1;
+            targetIndex = Math.max(minIndex, Math.min(maxIndex, targetIndex));
+        }
+        else {
+            targetIndex = Math.max(0, Math.min(maxIndex, i));
+        }
+        if (targetIndex === indexRef.current) {
+            return; // никуда не едем — флаг не трогаем
+        }
+        setDisableAnimation(false);
+        setIndex(targetIndex);
+        isAnimating.current = true;
+    }, [infinite, slidesPerView, realSlidesCount, maxIndex]);
+    const next = React.useCallback(() => {
+        // if (isAnimating.current) return;
+        setDisableAnimation(false);
+        setIndex(prev => {
+            let nextIndex;
+            if (infinite) {
+                nextIndex = Math.min(prev + 1, total - 1);
+            }
+            else {
+                nextIndex = Math.min(prev + 1, maxIndex);
+            }
+            // если индекс не меняется — не ставим флаг анимации
+            if (nextIndex === prev) {
+                return prev;
+            }
+            isAnimating.current = true;
+            return nextIndex;
+        });
+    }, [infinite, maxIndex, total]);
+    const prev = React.useCallback(() => {
+        // if (isAnimating.current) return;
+        setDisableAnimation(false);
+        setIndex(prev => {
+            const nextIndex = Math.max(prev - 1, 0);
+            if (nextIndex === prev) {
+                return prev;
+            }
+            isAnimating.current = true;
+            return nextIndex;
+        });
+    }, []);
+    // #region Pointer Events
+    const onPointerDown = React.useCallback((e) => {
+        if (!wrapperRef.current || !draggable)
+            return;
         dragging.current = true;
+        isAnimating.current = false;
+        setDisableAnimation(true);
         setIsDragging(true);
         startX.current = e.clientX;
         lastX.current = e.clientX;
@@ -70,9 +232,8 @@ exports.Swiper = React.forwardRef((props, ref) => {
         e.target.setPointerCapture(e.pointerId);
     }, [draggable]);
     const onPointerMove = React.useCallback((e) => {
-        if (!dragging.current) {
+        if (!dragging.current || isAnimating.current)
             return;
-        }
         const now = performance.now();
         const dx = e.clientX - lastX.current;
         const dt = now - lastTime.current;
@@ -82,58 +243,153 @@ exports.Swiper = React.forwardRef((props, ref) => {
         lastX.current = e.clientX;
         lastTime.current = now;
         let delta = lastX.current - startX.current;
-        if (index === 0 && delta > 0) {
-            delta *= 0.3;
-        }
-        if (index === total - 1 && delta < 0) {
-            delta *= 0.3;
+        if (resistance && !infinite) {
+            if (index === 0 && delta > 0) {
+                delta *= 0.3;
+            }
+            if (index === maxIndex && delta < 0) {
+                delta *= 0.3;
+            }
         }
         setOffset(delta);
-    }, [index, total]);
+    }, [resistance, infinite, index, maxIndex]);
     const onPointerUp = React.useCallback((e) => {
-        if (!dragging.current) {
+        if (!dragging.current)
             return;
-        }
         const delta = lastX.current - startX.current;
         const v = Math.abs(velocity.current);
         const velocityFactor = Math.min(v * 250, 0.65);
-        const threshold = Math.max(20, Math.min(dragThreshold * (1 - velocityFactor), dragThreshold));
-        let next = index;
-        if (Math.abs(delta) > threshold) {
-            next = delta < 0 ? index + 1 : index - 1;
+        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));
         }
-        next = Math.max(0, Math.min(total - 1, next));
+        setDisableAnimation(false);
         if (snap) {
-            setIndex(next);
+            setIndex(nextIndex);
             setOffset(0);
         }
         else {
-            setIndex(next);
+            setIndex(nextIndex);
         }
+        isAnimating.current = true;
         dragging.current = false;
         setIsDragging(false);
         e.target.releasePointerCapture(e.pointerId);
-    }, [dragThreshold, index, snap, total]);
-    const next = React.useCallback(() => {
-        setIndex(i => Math.min(total - 1, i + 1));
-    }, [total]);
-    const prev = React.useCallback(() => {
-        setIndex(i => Math.max(0, i - 1));
+    }, [threshold, dragThreshold, index, maxIndex, snap, infinite, total]);
+    const onLostPointerCapture = React.useCallback((e) => {
+        if (dragging.current) {
+            onPointerUp(e);
+        }
+    }, [onPointerUp]);
+    // #region Autoplay
+    const startAutoplay = React.useCallback(() => {
+        if (!autoplay || isPaused)
+            return;
+        autoplayTimer.current = setInterval(() => {
+            if (!isDragging && !isAnimating.current && mounted.current) {
+                next();
+            }
+        }, autoplayInterval);
+    }, [autoplay, autoplayInterval, isDragging, isPaused, next]);
+    const pause = React.useCallback(() => {
+        setIsPaused(true);
+        if (autoplayTimer.current) {
+            clearInterval(autoplayTimer.current);
+            autoplayTimer.current = undefined;
+        }
     }, []);
-    const goToIndex = React.useCallback((i) => {
-        setIndex(Math.max(0, Math.min(total - 1, i)));
-    }, [total]);
-    React.useImperativeHandle(ref, () => ({ next, prev, goToIndex }), [next, prev, goToIndex]);
+    const resume = React.useCallback(() => {
+        setIsPaused(false);
+    }, []);
+    // #region Hover
+    React.useEffect(() => {
+        if (!autoplay || !pauseOnHover)
+            return;
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const handleMouseEnter = () => pause();
+        const handleMouseLeave = () => resume();
+        wrapper.addEventListener('mouseenter', handleMouseEnter);
+        wrapper.addEventListener('mouseleave', handleMouseLeave);
+        return () => {
+            wrapper.removeEventListener('mouseenter', handleMouseEnter);
+            wrapper.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [autoplay, pauseOnHover, pause, resume]);
+    // #region Autoplay Effect
+    React.useEffect(() => {
+        if (autoplay) {
+            startAutoplay();
+        }
+        return () => {
+            if (autoplayTimer.current) {
+                clearInterval(autoplayTimer.current);
+                autoplayTimer.current = undefined;
+            }
+        };
+    }, [autoplay, startAutoplay, isPaused]);
+    // #region Transition End
+    React.useEffect(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform')
+                return;
+            isAnimating.current = false;
+            normalizeIndex(); // <-- вот здесь
+        };
+        track.addEventListener('transitionend', handleTransitionEnd);
+        return () => track.removeEventListener('transitionend', handleTransitionEnd);
+    }, [normalizeIndex]);
+    // #region Mount
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    // #region Imperative Handle
+    React.useImperativeHandle(ref, () => ({
+        next,
+        prev,
+        goToIndex,
+        getRealIndex: () => realIndex,
+        getTotalSlides: () => realSlidesCount,
+        pause,
+        resume,
+    }), [next, prev, goToIndex, realIndex, realSlidesCount, pause, resume]);
+    // #region Overrides
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SwiperContainer_1.default,
         Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || SwiperTrack_1.default,
         Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || SwiperWrapper_1.default,
     }), [overrides]);
+    const getSlideRealIndex = React.useCallback((domIndex) => {
+        if (!infinite) {
+            return domIndex;
+        }
+        const totalSlides = realSlidesCount;
+        if (domIndex < slidesPerView) {
+            return totalSlides - slidesPerView + domIndex;
+        }
+        if (domIndex >= total - slidesPerView) {
+            return domIndex - (total - slidesPerView);
+        }
+        return domIndex - slidesPerView;
+    }, [infinite, realSlidesCount, slidesPerView, total]);
     return (React.createElement(overridesMap.Container, Object.assign({}, restProps),
-        React.createElement(overridesMap.Wrapper, { ref: wrapperRef, draggable: draggable, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp },
-            React.createElement(overridesMap.Track, { dragging: isDragging, index: index, offset: offset }, slides.map((slide, i) => (
-            // eslint-disable-next-line react/no-array-index-key
-            React.createElement(React.Fragment, { key: i }, slide)))))));
+        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 })))));
 });
 exports.Swiper.displayName = 'Swiper';
 exports.default = exports.Swiper;

package/Swiper/SwiperContainer.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 export type SwiperContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const SwiperContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default SwiperContainer;

package/Swiper/SwiperContainer.js

@@ -7,6 +7,7 @@ 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/SwiperSlide.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
-export type SwiperSlideProps = React.HTMLAttributes<HTMLDivElement> & {
-    readonly children: React.ReactNode | readonly React.ReactNode[];
+export type SwiperSlideBaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode;
 };
-export declare const SwiperSlide: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly children: React.ReactNode | readonly React.ReactNode[];
-} & React.RefAttributes<HTMLDivElement>>;
+export type SwiperSlideProps = SwiperSlideBaseProps & {
+    readonly isVisible: boolean;
+    readonly isNearby: boolean;
+    readonly slidesPerView: number;
+    readonly key: string;
+};
+export declare const SwiperSlide: React.ForwardRefExoticComponent<(SwiperSlideBaseProps | SwiperSlideProps) & React.RefAttributes<HTMLDivElement>>;
+export default SwiperSlide;

package/Swiper/SwiperSlide.js

@@ -41,7 +41,9 @@ exports.SwiperSlide = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const React = __importStar(require("react"));
 const StyledSlide = styled_1.default.div `
-  flex: 0 0 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(100% / ${({ $slidesPerView }) => $slidesPerView});
   height: 100%;
   display: flex;
   align-items: center;
@@ -49,7 +51,8 @@ const StyledSlide = styled_1.default.div `
   box-sizing: border-box;
 `;
 exports.SwiperSlide = React.forwardRef((props, ref) => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (React.createElement(StyledSlide, Object.assign({}, restProps, { ref: ref }), children));
+    const _a = props, { children, isVisible = true, slidesPerView = 1, isNearby = true } = _a, restProps = __rest(_a, ["children", "isVisible", "slidesPerView", "isNearby"]);
+    return (React.createElement(StyledSlide, Object.assign({ "data-is-visible": isVisible, "data-is-nearby": isNearby }, restProps, { "$slidesPerView": slidesPerView, ref: ref }), isVisible || isNearby ? children : null));
 });
 exports.SwiperSlide.displayName = 'SwiperSlide';
+exports.default = exports.SwiperSlide;

package/Swiper/SwiperSlidesRenderer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SwiperSlideElement } from './Swiper';
+export type SwiperSlidesRendererProps = {
+    readonly slides: readonly SwiperSlideElement[];
+    readonly slidesPerView: number;
+    readonly realIndex: number;
+    readonly realSlidesCount: number;
+    readonly getSlideRealIndex: (index: number) => number;
+};
+declare const _default: React.NamedExoticComponent<SwiperSlidesRendererProps>;
+export default _default;

package/Swiper/SwiperSlidesRenderer.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SwiperSlidesRenderer = props => {
+    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex } = props;
+    // Мемоизируем вычисления видимости
+    const visibilityMap = React.useMemo(() => {
+        const map = new Map();
+        if (realSlidesCount <= slidesPerView) {
+            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);
+            }
+            const prevIndex = (realIndex - 1 + realSlidesCount) % realSlidesCount;
+            const nextIndex = (realIndex + slidesPerView) % realSlidesCount;
+            slides.forEach((_, i) => {
+                const slideRealIndex = getSlideRealIndex(i);
+                const isVisible = visibleIndices.includes(slideRealIndex);
+                const isNearby = !isVisible && (slideRealIndex === prevIndex || slideRealIndex === nextIndex);
+                map.set(i, { isVisible, isNearby });
+            });
+        }
+        return map;
+    }, [slides, slidesPerView, realIndex, 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;
+        }
+        return React.cloneElement(slide, {
+            slidesPerView,
+            isVisible,
+            isNearby,
+            'data-index': i,
+            'data-real-index': slideRealIndex,
+        });
+    })));
+};
+exports.default = React.memo(SwiperSlidesRenderer);