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

package/MaskedField/useMasked.js

@@ -12,13 +12,12 @@ const useMasked = () => {
             caret: 0,
         };
         value
-            .replace(/\s/, '')
+            .replace(/\s+/g, '')
             .split('')
             .forEach((character, charIndex) => {
             const isMatch = mask.some(pattern => {
                 if (typeof pattern === 'string') {
-                    return false;
-                    // return character === pattern && character;
+                    return character === pattern && character;
                 }
                 if (pattern instanceof RegExp) {
                     return new RegExp(pattern).test(character);
@@ -45,7 +44,9 @@ const useMasked = () => {
         if (parsedValue === '') {
             return data;
         }
-        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+        let patternIndex = 0;
+        for (patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            data.isValid = false;
             if (data.charIndex >= parsedValue.length) {
                 break;
             }
@@ -57,6 +58,7 @@ const useMasked = () => {
             if (pattern instanceof RegExp && new RegExp(pattern).test(char)) {
                 data.text = `${data.text}${char}`;
                 data.charIndex += 1;
+                data.isValid = true;
             }
             // If char is correct (equal with pattern string)
             // then accept char into text
@@ -79,7 +81,7 @@ const useMasked = () => {
         const result = {
             text: data.text,
             caret: data.caret,
-            isValid: data.text.length >= mask.length,
+            isValid: data.isValid,
         };
         return result;
     }, []);

package/Menu/MenuContainer.js

@@ -357,7 +357,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             }));
         }
     }, [dispatch]);
-    return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: closeOutsideClick ? 'onMouseDown' : false },
+    return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false },
         react_1.default.createElement(overridesMap.Popper, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: actualPlacement, anchorElement: anchorElement, onAnchorPosChanged: newPlacement => {
                 setActualPlacement(newPlacement);
                 if (typeof onAnchorPosChanged === 'function') {

package/Swiper/Swiper.d.ts

@@ -2,43 +2,56 @@ 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 keyboardControl?: 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 keyboardControl?: 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, keyboardControl = true, threshold = 20, resistance = true, slidesPerView = 1 } = props, restProps = __rest(props, ["children", "dragThreshold", "snap", "draggable", "overrides", "initialIndex", "infinite", "onSlideChange", "autoplay", "autoplayInterval", "pauseOnHover", "keyboardControl", "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));
+        }
+    }, [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; // никуда не едем — флаг не трогаем
         }
-        width.current = wrapperRef.current.offsetWidth;
+        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,170 @@ 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));
         }
-        next = Math.max(0, Math.min(total - 1, next));
+        else {
+            nextIndex = Math.max(0, Math.min(total - 1, nextIndex));
+        }
+        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 Keyboard
+    React.useEffect(() => {
+        if (!keyboardControl)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                prev();
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                next();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [keyboardControl, prev, next]);
+    // #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;