react-spring-carousel 1.9.29-beta45 → 1.9.29-beta49

package/dist/cjs/index.js

@@ -81,6 +81,33 @@ function useFullscreenModule({ mainCarouselWrapperRef, emitObservable, handleRes
     };
 }
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function useMount(callback) {
     const isMounted = react.useRef(false);
     react.useEffect(() => {
@@ -98,7 +125,8 @@ function getIsBrowser() {
     return typeof window !== 'undefined';
 }
 
-const InternalWrapper = react.forwardRef(({ children, ...rest }, ref) => {
+const InternalWrapper = react.forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
     return (jsxRuntime.jsx(reactSpring.animated.div, Object.assign({}, rest, { ref: ref }, { children: children }), void 0));
 });
 function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfig, prepareThumbsData, itemsPerSlide, getFluidWrapperScrollValue = () => 0, getSlideValue = () => 0, CustomThumbsWrapperComponent, }) {
@@ -122,7 +150,8 @@ function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfi
         return internalThumbsWrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
     }
     function getThumbsTotalScrollableValue() {
-        return Math.round(Number(internalThumbsWrapperRef.current?.[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+        var _a;
+        return Math.round(Number((_a = internalThumbsWrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
             internalThumbsWrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
     }
     function getThumbSlideValue() {
@@ -251,18 +280,12 @@ function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfi
         : InternalWrapper;
     const thumbsFragment = withThumbs ? (jsxRuntime.jsx(Wrapper, Object.assign({ ref: internalThumbsWrapperRef, className: "use-spring-carousel-thumbs-wrapper", onWheel: () => {
             thumbListStyles[thumbsSlideAxis].stop();
-        }, style: {
-            display: 'flex',
-            flex: 1,
-            position: 'relative',
-            flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',
-            ...(thumbsSlideAxis === 'x'
-                ? { overflowX: 'auto' }
-                : {
-                    overflowY: 'auto',
-                    maxHeight: '100%',
-                }),
-        } }, { children: handlePrepareThumbsDate().map(({ id, renderThumb }) => {
+        }, style: Object.assign({ display: 'flex', flex: 1, position: 'relative', flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column' }, (thumbsSlideAxis === 'x'
+            ? { overflowX: 'auto' }
+            : {
+                overflowY: 'auto',
+                maxHeight: '100%',
+            })) }, { children: handlePrepareThumbsDate().map(({ id, renderThumb }) => {
             const thumbId = `thumb-${id}`;
             return (jsxRuntime.jsx("div", Object.assign({ id: thumbId }, { children: renderThumb }), thumbId));
         }) }), void 0)) : null;
@@ -306,7 +329,8 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
         },
     }));
     function getCarouselItem() {
-        return carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
+        var _a;
+        return (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
     }
     const getMainCarouselWrapperWidth = react.useCallback(() => {
         if (!mainCarouselWrapperRef.current) {
@@ -328,7 +352,8 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
         return getCarouselItemWidth() * items.length < getMainCarouselWrapperWidth();
     }, [getCarouselItemWidth, getMainCarouselWrapperWidth, items.length]);
     const getFluidWrapperScrollValue = react.useCallback(() => {
-        return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+        var _a;
+        return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
             carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
     }, [carouselSlideAxis]);
     const getIsFirstItem = react.useCallback(() => {
@@ -517,11 +542,7 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
         }
         if (isDragging) {
             setIsDragging(true);
-            emitObservable({
-                eventName: 'onDrag',
-                slideActionType: getSlideActionType(),
-                ...props,
-            });
+            emitObservable(Object.assign({ eventName: 'onDrag', slideActionType: getSlideActionType() }, props));
             const direction = props.direction[carouselSlideAxis === 'x' ? 0 : 1];
             if (direction > 0) {
                 setSlideActionType('prev');
@@ -594,11 +615,7 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
         }
         if (props.last && !props.pressed && !freeScroll) {
             resetAnimation();
-            emitObservable({
-                eventName: 'onDrag',
-                slideActionType: getSlideActionType(),
-                ...props,
-            });
+            emitObservable(Object.assign({ eventName: 'onDrag', slideActionType: getSlideActionType() }, props));
         }
     }, {
         enabled: !disableGestures,
@@ -766,11 +783,7 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
                 [carouselSlideAxis]: -(getSlideValue() * to),
             };
         }
-        setCarouselStyles.start({
-            ...getFromValue(),
-            to: getToValue(),
-            immediate,
-            onRest: val => {
+        setCarouselStyles.start(Object.assign(Object.assign({}, getFromValue()), { to: getToValue(), immediate, onRest: val => {
                 if (val.finished) {
                     setIsDragging(false);
                     setIsAnimating(false);
@@ -786,8 +799,7 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
                         });
                     }
                 }
-            },
-        });
+            } }));
         if (enableThumbsWrapperScroll && withThumbs && !immediate) {
             handleThumbsScroll(to, getSlideActionType());
         }
@@ -933,8 +945,7 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
             to: itemIndex,
         });
     }
-    const contextProps = {
-        useListenToCustomEvent,
+    const contextProps = Object.assign({ useListenToCustomEvent,
         getIsFullscreen,
         enterFullscreen,
         exitFullscreen,
@@ -943,34 +954,27 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
         getIsNextItem,
         getIsPrevItem,
         slideToPrevItem,
-        slideToNextItem,
-        ...(typeof itemsPerSlide === 'number'
-            ? {
-                slideToItem: _slideToItem,
-                getIsActiveItem: (id) => {
-                    return findItemIndex(id) === getCurrentActiveItem();
-                },
-                getCurrentActiveItem: () => ({
-                    id: items[getCurrentActiveItem()].id,
-                    index: getCurrentActiveItem(),
-                }),
-            }
-            : {}),
-    };
+        slideToNextItem }, (typeof itemsPerSlide === 'number'
+        ? {
+            slideToItem: _slideToItem,
+            getIsActiveItem: (id) => {
+                return findItemIndex(id) === getCurrentActiveItem();
+            },
+            getCurrentActiveItem: () => ({
+                id: items[getCurrentActiveItem()].id,
+                index: getCurrentActiveItem(),
+            }),
+        }
+        : {}));
     function getItemStyles() {
         if (typeof itemsPerSlide === 'number') {
-            return {
-                ...(carouselSlideAxis === 'x'
-                    ? { marginRight: `${gutter}px` }
-                    : { marginBottom: `${gutter}px` }),
-                flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
-            };
-        }
-        return {
-            ...(carouselSlideAxis === 'x'
+            return Object.assign(Object.assign({}, (carouselSlideAxis === 'x'
                 ? { marginRight: `${gutter}px` }
-                : { marginBottom: `${gutter}px` }),
-        };
+                : { marginBottom: `${gutter}px` })), { flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)` });
+        }
+        return Object.assign({}, (carouselSlideAxis === 'x'
+            ? { marginRight: `${gutter}px` }
+            : { marginBottom: `${gutter}px` }));
     }
     function getAnimatedWrapperStyles() {
         const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
@@ -1019,32 +1023,12 @@ function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggin
     }
     const carouselFragment = (jsxRuntime.jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef, className: "use-spring-carousel-main-wrapper", "data-testid": "use-spring-carousel-wrapper" }, getWheelEvent(), { 
             // @ts-ignore
-            style: {
-                display: 'flex',
-                position: 'relative',
-                width: '100%',
-                height: '100%',
-                ...getOverflowStyles(),
-            } }, { children: jsxRuntime.jsx(reactSpring.animated.div, Object.assign({}, bindDrag(), { className: "use-spring-carousel-track-wrapper", "data-testid": "use-spring-carousel-animated-wrapper", ref: handleCarouselFragmentRef, style: {
-                    display: 'flex',
-                    position: 'relative',
-                    touchAction: getTouchAction(),
-                    flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column',
-                    ...getAnimatedWrapperStyles(),
-                    ...(freeScroll ? {} : carouselStyles),
-                } }, { children: internalItems.map(({ id, renderItem }, index) => {
-                    return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: {
-                            display: 'flex',
-                            position: 'relative',
-                            ...getItemStyles(),
-                        } }, { children: renderItem }), `${id}-${index}`));
+            style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getOverflowStyles()) }, { children: jsxRuntime.jsx(reactSpring.animated.div, Object.assign({}, bindDrag(), { className: "use-spring-carousel-track-wrapper", "data-testid": "use-spring-carousel-animated-wrapper", ref: handleCarouselFragmentRef, style: Object.assign(Object.assign({ display: 'flex', position: 'relative', touchAction: getTouchAction(), flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column' }, getAnimatedWrapperStyles()), (freeScroll ? {} : carouselStyles)) }, { children: internalItems.map(({ id, renderItem }, index) => {
+                    return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: 'flex', position: 'relative' }, getItemStyles()) }, { children: renderItem }), `${id}-${index}`));
                 }) }), void 0) }), void 0) }), void 0));
     const thumbsFragment = (jsxRuntime.jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: _thumbsFragment }), void 0));
-    return {
-        ...contextProps,
-        carouselFragment,
-        thumbsFragment,
-    };
+    return Object.assign(Object.assign({}, contextProps), { carouselFragment,
+        thumbsFragment });
 }
 function useSpringCarouselContext() {
     const context = react.useContext(UseSpringCarouselContext);
@@ -1133,57 +1117,28 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
         const slideActionType = getSlideActionType();
         if (slideActionType === 'prev' && toPrevItemSpringProps) {
             return {
-                initial: {
-                    ...springAnimationProps.initial,
-                },
-                from: {
-                    ...toPrevItemSpringProps.from,
-                },
-                enter: {
-                    ...toPrevItemSpringProps.enter,
-                },
-                leave: {
-                    ...toPrevItemSpringProps.leave,
-                },
+                initial: Object.assign({}, springAnimationProps.initial),
+                from: Object.assign({}, toPrevItemSpringProps.from),
+                enter: Object.assign({}, toPrevItemSpringProps.enter),
+                leave: Object.assign({}, toPrevItemSpringProps.leave),
             };
         }
         if (slideActionType === 'next' && toNextItemSpringProps) {
             return {
-                initial: {
-                    ...springAnimationProps.initial,
-                },
-                from: {
-                    ...toNextItemSpringProps.from,
-                },
-                enter: {
-                    ...toNextItemSpringProps.enter,
-                },
-                leave: {
-                    ...toNextItemSpringProps.leave,
-                },
+                initial: Object.assign({}, springAnimationProps.initial),
+                from: Object.assign({}, toNextItemSpringProps.from),
+                enter: Object.assign({}, toNextItemSpringProps.enter),
+                leave: Object.assign({}, toNextItemSpringProps.leave),
             };
         }
         return {
-            initial: {
-                ...springAnimationProps.initial,
-            },
-            from: {
-                ...springAnimationProps.from,
-            },
-            enter: {
-                ...springAnimationProps.enter,
-            },
-            leave: {
-                ...springAnimationProps.leave,
-            },
+            initial: Object.assign({}, springAnimationProps.initial),
+            from: Object.assign({}, springAnimationProps.from),
+            enter: Object.assign({}, springAnimationProps.enter),
+            leave: Object.assign({}, springAnimationProps.leave),
         };
     }
-    const transitions = reactSpring.useTransition(activeItem, {
-        config: springConfig,
-        ...getTransitionConfig(),
-        onStart: () => setIsAnimating(true),
-        keys: null,
-        onRest: val => {
+    const transitions = reactSpring.useTransition(activeItem, Object.assign(Object.assign({ config: springConfig }, getTransitionConfig()), { onStart: () => setIsAnimating(true), keys: null, onRest: val => {
             if (val.finished) {
                 setIsAnimating(false);
                 emitObservable({
@@ -1195,14 +1150,8 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
                     },
                 });
             }
-        },
-    });
-    const itemsFragment = transitions((styles, item) => (jsxRuntime.jsx(reactSpring.animated.div, Object.assign({ style: {
-            ...styles,
-            flex: '1 0 100%',
-            width: '100%',
-            height: '100%',
-        } }, { children: items[item].renderItem }), void 0)));
+        } }));
+    const itemsFragment = transitions((styles, item) => (jsxRuntime.jsx(reactSpring.animated.div, Object.assign({ style: Object.assign(Object.assign({}, styles), { flex: '1 0 100%', width: '100%', height: '100%' }) }, { children: items[item].renderItem }), void 0)));
     function getIsAnimating() {
         return isAnimating.current;
     }
@@ -1380,11 +1329,8 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
                 overflow: 'hidden',
             } }, { children: itemsFragment }), void 0) }), void 0));
     const thumbsFragment = (jsxRuntime.jsx(UseTransitionCarouselContext.Provider, Object.assign({ value: contextProps }, { children: _thumbsFragment }), void 0));
-    return {
-        carouselFragment,
-        thumbsFragment,
-        ...contextProps,
-    };
+    return Object.assign({ carouselFragment,
+        thumbsFragment }, contextProps);
 }
 
 exports.useSpringCarousel = useSpringCarousel;