react-spring-carousel 1.9.29-beta10 → 1.9.29-beta100

package/dist/types/types/index.d.ts

@@ -0,0 +1,50 @@
+import { FullGestureState } from '@use-gesture/react';
+import { ReactSpringCarouselItemWithThumbs } from './useSpringCarousel';
+export declare type PrepareThumbsData = (items: Omit<ReactSpringCarouselItemWithThumbs, 'renderItem'>[]) => Omit<ReactSpringCarouselItemWithThumbs, 'renderItem'>[];
+export declare type SlideToItemFnProps = {
+    from?: number;
+    to?: number;
+    newIndex?: number;
+    immediate?: boolean;
+    customTo?: number;
+    onRest?(): void;
+};
+export declare type SlideActionType = 'initial' | 'prev' | 'next';
+declare type OnSlideStartChange = {
+    eventName: 'onSlideStartChange';
+    slideActionType: SlideActionType;
+    nextItem: {
+        index: number;
+        id: string;
+    };
+};
+declare type OnSlideChange = {
+    eventName: 'onSlideChange';
+    slideActionType: SlideActionType;
+    currentItem: {
+        index: number;
+        id: string;
+    };
+};
+declare type OnDrag = Omit<FullGestureState<'drag'>, 'event'> & {
+    eventName: 'onDrag';
+    slideActionType: SlideActionType;
+};
+declare type OnFullscreenChange = {
+    eventName: 'onFullscreenChange';
+    isFullscreen: boolean;
+};
+declare type OnLeftSwipe = {
+    eventName: 'onLeftSwipe';
+};
+declare type OnRightSwipe = {
+    eventName: 'onRightSwipe';
+};
+export declare type UseSpringCarouselEventsObservableProps = OnSlideStartChange | OnSlideChange | OnDrag | OnFullscreenChange;
+export declare type UseTransitionCarouselEventsObservableProps = OnSlideStartChange | OnSlideChange | OnFullscreenChange | OnLeftSwipe | OnRightSwipe;
+declare type CombinedProps<T> = T extends 'use-spring' ? UseSpringCarouselEventsObservableProps : UseTransitionCarouselEventsObservableProps;
+export declare type EmitObservableFn<T> = (data: CombinedProps<T>) => void;
+export declare type ObservableCallbackFn<T> = (data: CombinedProps<T>) => void;
+export declare type UseListenToCustomEvent<T> = (fn: ObservableCallbackFn<T>) => void;
+export * from './useSpringCarousel';
+export * from './useTransitionCarousel';

package/dist/types/types/useSpringCarousel.d.ts

@@ -0,0 +1,124 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { SpringConfig } from 'react-spring';
+import { PrepareThumbsData, UseListenToCustomEvent } from './index';
+export declare type UseSpringCarouselBaseProps = {
+    disableGestures?: boolean;
+    draggingSlideTreshold?: number;
+    springConfig?: SpringConfig;
+    carouselSlideAxis?: 'x' | 'y';
+    gutter?: number;
+    shouldResizeOnWindowResize?: boolean;
+};
+/**
+ * Types based on withThums prop
+ */
+export declare type ReactSpringCarouselItem = {
+    id: string;
+    renderItem: ReactNode;
+    renderThumb?: never;
+};
+export declare type ReactSpringCarouselItemWithThumbs = {
+    id: string;
+    renderItem: ReactNode;
+    renderThumb: ReactNode;
+};
+declare type UseSpringCarouselWithThumbs = {
+    withThumbs: true;
+    thumbsSlideAxis?: 'x' | 'y';
+    items: ReactSpringCarouselItemWithThumbs[];
+    enableThumbsWrapperScroll?: boolean;
+    CustomThumbsWrapperComponent?: React.FC<HTMLAttributes<HTMLElement>>;
+    prepareThumbsData?: PrepareThumbsData;
+};
+declare type UseSpringCarouselWithNoThumbs = {
+    withThumbs?: false;
+    thumbsSlideAxis?: never;
+    items: ReactSpringCarouselItem[];
+    enableThumbsWrapperScroll?: never;
+    CustomThumbsWrapperComponent?: never;
+    prepareThumbsData?: never;
+};
+export declare type ThumbsProps = UseSpringCarouselWithThumbs | UseSpringCarouselWithNoThumbs;
+/**
+ * Types based on slideType
+ */
+declare type UseSpringCarouselFluidType = {
+    slideType: 'fluid';
+    slideAmount?: number;
+    itemsPerSlide?: never;
+    initialActiveItem?: never;
+    initialStartingPosition?: never;
+    freeScroll?: boolean;
+    enableFreeScrollDrag?: boolean | (() => boolean);
+};
+declare type UseSpringCarouselNumericSlideType = {
+    slideType?: 'fixed';
+    itemsPerSlide?: number;
+    initialActiveItem?: number;
+    slideAmount?: never;
+    initialStartingPosition?: 'start' | 'center' | 'end';
+    freeScroll?: never;
+    enableFreeScrollDrag?: never;
+};
+declare type SlideTypes = UseSpringCarouselFluidType | UseSpringCarouselNumericSlideType;
+/**
+ * Types based on gestures activation
+ */
+declare type DisableGesturesProps = {
+    disableGestures?: true;
+    touchAction?: never;
+};
+declare type EnableGesturesProps = {
+    disableGestures?: false;
+    touchAction?: string;
+};
+declare type Gestures = DisableGesturesProps | EnableGesturesProps;
+/**
+ * Types based on loop functionality
+ */
+declare type WithLoopProps = {
+    withLoop: true;
+    initialStartingPosition?: 'start' | 'center' | 'end';
+    startEndGutter?: number;
+};
+declare type WithNoLoop = {
+    withLoop?: false;
+    initialStartingPosition?: never;
+    startEndGutter?: never;
+};
+declare type LoopProps = WithLoopProps | WithNoLoop;
+export declare type UseSpringCarouselProps = UseSpringCarouselBaseProps & ThumbsProps & SlideTypes & Gestures & LoopProps;
+export declare type UseSpringCarouselWithThumbsReturnProps = {
+    carouselFragment: ReactNode;
+    thumbsFragment: ReactNode;
+    useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>;
+    getIsFullscreen(): boolean;
+    getIsPrevItem(id: string): boolean;
+    getIsNextItem(id: string): boolean;
+    enterFullscreen(elementRef?: HTMLElement): void;
+    exitFullscreen(): void;
+    slideToNextItem(): void;
+    slideToPrevItem(): void;
+    getIsAnimating(): boolean;
+    getIsDragging(): boolean;
+};
+export declare type UseSpringDafaultTypeReturnProps = {
+    carouselFragment: ReactNode;
+    useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>;
+    getIsFullscreen(): boolean;
+    getIsPrevItem(id: string): boolean;
+    getIsNextItem(id: string): boolean;
+    enterFullscreen(elementRef?: HTMLElement): void;
+    exitFullscreen(): void;
+    slideToNextItem(): void;
+    slideToPrevItem(): void;
+    getIsAnimating(): boolean;
+    slideToItem(item: string | number): void;
+    getIsActiveItem(id: string): boolean;
+    getIsDragging(): boolean;
+    getCurrentActiveItem(): {
+        id: string;
+        index: number;
+    };
+};
+export {};

package/dist/types/types/useTransitionCarousel.d.ts

@@ -0,0 +1,39 @@
+import { TransitionFrom, TransitionTo } from 'react-spring';
+import { UseListenToCustomEvent } from './index';
+import { UseSpringCarouselBaseProps, ThumbsProps } from './useSpringCarousel';
+declare type ReactSpringCarouselItem = {
+    id: string;
+};
+export declare type SpringAnimationProps = {
+    initial: TransitionFrom<ReactSpringCarouselItem>;
+    from: TransitionFrom<ReactSpringCarouselItem>;
+    enter: TransitionTo<ReactSpringCarouselItem>;
+    leave: TransitionTo<ReactSpringCarouselItem>;
+};
+export declare type UseTransitionCarouselProps = UseSpringCarouselBaseProps & ThumbsProps & {
+    toPrevItemSpringProps?: SpringAnimationProps;
+    toNextItemSpringProps?: SpringAnimationProps;
+    springAnimationProps?: SpringAnimationProps;
+    withLoop?: boolean;
+    exitBeforeEnter?: boolean;
+    trail?: number;
+};
+export declare type UseTransitionCarouselContextProps = {
+    useListenToCustomEvent: UseListenToCustomEvent<'use-transition'>;
+    activeItem: number;
+    getIsFullscreen(): boolean;
+    getIsPrevItem(id: string): boolean;
+    getIsNextItem(id: string): boolean;
+    enterFullscreen(elementRef?: HTMLElement): void;
+    exitFullscreen(): void;
+    slideToNextItem(): void;
+    slideToPrevItem(): void;
+    getIsAnimating(): boolean;
+    slideToItem(item: string | number): void;
+    getIsActiveItem(id: string): boolean;
+    getCurrentActiveItem(): {
+        id: string;
+        index: number;
+    };
+};
+export {};

package/dist/types/useSpringCarousel/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { UseSpringDafaultTypeReturnProps } from '../types';
+import { UseSpringCarouselProps } from '../types/useSpringCarousel';
+import { UseSpringFluidTypeReturnProps } from 'react-spring-carousel';
+declare function useSpringCarousel({ items, withLoop, draggingSlideTreshold, springConfig, shouldResizeOnWindowResize, withThumbs, enableThumbsWrapperScroll, carouselSlideAxis, thumbsSlideAxis, prepareThumbsData, initialActiveItem, initialStartingPosition, disableGestures, gutter, startEndGutter, touchAction, slideAmount, freeScroll, CustomThumbsWrapperComponent, enableFreeScrollDrag, itemsPerSlide, slideType, }: UseSpringCarouselProps): {
+    carouselFragment: JSX.Element;
+    thumbsFragment: JSX.Element;
+    slideToItem?: ((item: string | number) => void) | undefined;
+    getIsActiveItem?: ((id: string) => boolean) | undefined;
+    getCurrentActiveItem?: (() => {
+        id: string;
+        index: number;
+    }) | undefined;
+    useListenToCustomEvent: (fn: import("../types").ObservableCallbackFn<"use-spring">) => void;
+    getIsFullscreen: () => boolean;
+    enterFullscreen: (elementRef?: HTMLElement | undefined) => void;
+    exitFullscreen: () => void;
+    getIsAnimating: () => boolean;
+    getIsDragging: () => boolean;
+    getIsNextItem: (id: string) => boolean;
+    getIsPrevItem: (id: string) => boolean;
+    slideToPrevItem: () => void;
+    slideToNextItem: () => void;
+};
+declare function useSpringCarouselContext(): UseSpringFluidTypeReturnProps | UseSpringDafaultTypeReturnProps;
+export { useSpringCarousel, useSpringCarouselContext };

package/dist/{useTransitionCarousel.d.ts → types/useTransitionCarousel/index.d.ts}

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { UseTransitionCarouselContextProps, UseTransitionCarouselProps } from './types';
-export declare function useTransitionCarouselContext(): UseTransitionCarouselContextProps;
-export default function useTransitionCarousel({ items, withLoop, withThumbs, springConfig, thumbsSlideAxis, enableThumbsWrapperScroll, draggingSlideTreshold, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures, CustomThumbsWrapperComponent, springAnimationProps, }: UseTransitionCarouselProps): {
-    useListenToCustomEvent: import("./types").UseListenToCustomEvent;
+import { UseTransitionCarouselContextProps, UseTransitionCarouselProps } from '../types/useTransitionCarousel';
+declare function useTransitionCarouselContext(): UseTransitionCarouselContextProps;
+declare function useTransitionCarousel({ items, withLoop, withThumbs, springConfig, thumbsSlideAxis, enableThumbsWrapperScroll, draggingSlideTreshold, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures, CustomThumbsWrapperComponent, trail, exitBeforeEnter, springAnimationProps, }: UseTransitionCarouselProps): {
+    useListenToCustomEvent: import("../types").UseListenToCustomEvent<"use-transition">;
+    activeItem: number;
     getIsFullscreen(): boolean;
     getIsPrevItem(id: string): boolean;
     getIsNextItem(id: string): boolean;
@@ -17,7 +18,7 @@ export default function useTransitionCarousel({ items, withLoop, withThumbs, spr
         id: string;
         index: number;
     };
-    activeItem: number;
     carouselFragment: JSX.Element;
     thumbsFragment: JSX.Element;
 };
+export { useTransitionCarouselContext, useTransitionCarousel };

package/dist/types/utils.d.ts

@@ -0,0 +1,5 @@
+import { useLayoutEffect } from 'react';
+declare type Callback = () => void | (() => void);
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare function useIsomorphicMount(callback: Callback): void;
+export { useIsomorphicLayoutEffect, useIsomorphicMount };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-spring-carousel",
-  "version": "1.9.29-beta10",
+  "version": "1.9.29-beta100",
   "description": "A new Carousel experience for the web",
   "homepage": "https://react-spring-carousel-js.emilianobucci.com",
-  "repository": "https://github.com/Emiliano-Bucci/react-spring-carousel-js",
+  "repository": "https://github.com/Emiliano-Bucci/react-spring-carousel",
   "author": "Emiliano Bucci",
   "license": "MIT",
   "keywords": [
@@ -17,10 +17,23 @@
     "react-spring-slider",
     "animated"
   ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
   "scripts": {
     "start": "start-storybook -p 6006",
+    "clean": "rimraf dist",
     "build-storybook": "build-storybook",
-    "build:lib": "rollup -c",
+    "build:lib": "npm run clean && rollup -c",
     "lint": "eslint --fix --config .eslintrc.js 'src/**/*.{ts,tsx,js}'",
     "prepare": "husky install",
     "lint-staged": "lint-staged",
@@ -29,68 +42,66 @@
     "release:test": "jest",
     "push:tags": "git push --follow-tags",
     "release:lib": "npm run lint && npm run release:test && npm run check:tag:branch && npm run build:lib && npm run push:tags && npm publish",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "release:beta": "npm run build:lib && npm publish --tag beta"
   },
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "dependencies": {
-    "@use-gesture/react": "^10.1.1",
-    "rxjs": "^7.4.0",
-    "screenfull": "^5.1.0"
+    "@use-gesture/react": "^10.2.7",
+    "movement": "^0.0.13",
+    "react-spring-carousel": "^1.9.29-beta26",
+    "rxjs": "^7.5.4",
+    "screenfull": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
-    "@emotion/babel-plugin": "^11.3.0",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@emotion/babel-plugin": "^11.7.2",
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/jest": "^11.5.0",
-    "@emotion/react": "^11.5.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.1.21",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.0.28",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@emotion/jest": "^11.8.0",
+    "@emotion/react": "^11.8.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
     "babel-loader": "^8.2.3",
-    "chalk": "^4.1.2",
-    "eslint": "^8.1.0",
-    "eslint-config-prettier": "^8.3.0",
+    "chalk": "^5.0.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.1-alpha-9c8161ba8-20211028",
-    "eslint-plugin-testing-library": "^5.0.0",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.0.6",
     "git-repo-info": "^2.1.1",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
-    "lint-staged": "^11.2.6",
-    "prettier": "^2.4.1",
-    "rollup": "^2.58.3",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.3.4",
+    "prettier": "^2.5.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.69.0",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.21",
-    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.22",
+    "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-visualizer": "^5.5.2",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.4.4"
+    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-visualizer": "^5.6.0",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.6.2"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-spring": "^9.3.1"
+    "react-spring": "^9.4.2"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-export { default as useSpringCarousel } from './useSpringCarousel';
-export { default as useTransitionCarousel } from './useTransitionCarousel';
-export * from './useSpringCarousel';
-export * from './useTransitionCarousel';
-export * from './types';

package/dist/index.es.js

@@ -1,2 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as t,useEffect as n,forwardRef as r,createContext as i,useCallback as o,useContext as s,useState as u}from"react";import{animated as l,useSpring as c,config as a,useTransition as d}from"react-spring";import{useDrag as m}from"@use-gesture/react";import{Subject as f}from"rxjs";import h from"screenfull";function p(){const e=t(new f);return{useListenToCustomEvent:function(t){n((()=>{const n=e.current.subscribe(t);return()=>n.unsubscribe()}),[t])},emitObservable:t=>{e.current.next(t)}}}function g({mainCarouselWrapperRef:e,emitObservable:r,handleResize:i}){const o=t(!1);function s(e){o.current=e}return n((()=>{function e(){document.fullscreenElement&&(s(!0),r({eventName:"onFullscreenChange",isFullscreen:!0}),i&&i()),document.fullscreenElement||(s(!1),r({eventName:"onFullscreenChange",isFullscreen:!1}),i&&i())}if(h.isEnabled)return h.on("change",e),()=>{h.isEnabled&&h.off("change",e)}})),{enterFullscreen:function(t){h.isEnabled&&h.request(t||e.current)},exitFullscreen:function(){h.isEnabled&&h.exit()},getIsFullscreen:function(){return o.current}}}function b(e){const r=t(!1);n((()=>{if(!r.current){const t=e();return r.current=!0,()=>{t&&t()}}}),[])}const x=r((({children:t,...n},r)=>e(l.div,Object.assign({},n,{ref:r},{children:t}),void 0)));function v({items:n,withThumbs:r,thumbsSlideAxis:i="x",springConfig:o,prepareThumbsData:s,itemsPerSlide:u,getFluidWrapperScrollValue:a=(()=>0),getSlideValue:d=(()=>0),CustomThumbsWrapperComponent:m}){const f=t(null),[h,p]=c((()=>({x:0,y:0,config:o,onChange:({value:e})=>{f.current&&(f.current["x"===i?"scrollLeft":"scrollTop"]=Math.abs(e[i]))}})));function g(){return f.current["x"===i?"scrollLeft":"scrollTop"]}function v(){return Math.round(Number(f.current?.["x"===i?"scrollWidth":"scrollHeight"])-f.current.getBoundingClientRect()["x"===i?"width":"height"])}function w(){const e=Math.round(a()/d());return v()/e}b((()=>{if(r&&!f.current)throw new Error("The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.")}));const T=m?l(m):x;return{thumbsFragment:r?e(T,Object.assign({ref:f,className:"use-spring-carousel-thumbs-wrapper",onWheel:()=>{h[i].stop()},style:{display:"flex",flex:1,position:"relative",flexDirection:"x"===i?"row":"column",..."x"===i?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"}}},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(n)):e(n)}().map((({id:t,renderThumb:n})=>{const r=`thumb-${t}`;return e("div",Object.assign({id:r},{children:n}),r)}))}),void 0):null,handleThumbsScroll:function(e,t){if("fluid"===u){const e=v();if("next"===t){const t=g()+w();p.start({from:{[i]:g()},to:{[i]:t>e?e:t}})}if("prev"===t){const e=g()-w();p.start({from:{[i]:g()},to:{[i]:e<0?0:e}})}}else{const t=f.current.querySelector(`#thumb-${n[e].id}`);if(t){const r=f.current,o="x"===i?"offsetWidth":"offsetHeight",s="x"===i?"scrollLeft":"scrollTop",u=function({thumbNode:e,offsetDirection:t,offsetDimension:n}){return e[t]+e[n]/2}({thumbNode:t,offsetDimension:o,offsetDirection:"x"===i?"offsetLeft":"offsetTop"}),l=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:r,offsetDimension:o});p.start({from:{[i]:function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:r,scrollDirection:s})},to:{[i]:function({thumbWrapper:t,thumbOffsetPosition:r,thumbScrollDimension:o,offsetDimension:s}){const u="x"===i?"scrollWidth":"scrollHeight";return e===n.length-1||r-o>t[u]-t[s]?t[u]-t[s]:0===e?0:r-o}({thumbWrapper:r,thumbOffsetPosition:u,thumbScrollDimension:l,offsetDimension:o})},onChange:e=>{"x"===i?f.current.scrollLeft=e.x:f.current.scrollTop=e.y}})}}}}}const w=i(void 0);function T({itemsPerSlide:r=1,items:i,withLoop:s=!1,draggingSlideTreshold:u=140,springConfig:d=a.default,shouldResizeOnWindowResize:f=!0,withThumbs:h=!1,enableThumbsWrapperScroll:x=!0,carouselSlideAxis:T="x",thumbsSlideAxis:y="x",prepareThumbsData:C,initialActiveItem:S=0,initialStartingPosition:I="start",disableGestures:E=!1,gutter:W=0,startEndGutter:A=0,touchAction:N,slideAmount:F,freeScroll:R=!1,CustomThumbsWrapperComponent:L}){const O=t("initial"),D=s?[...i,...i,...i]:i,P=t(S),j=t(null),M=t(null),$=t(!1),z=t(!1),B=t(!1),H=t(0),k=t(0),V=t(!1),q=t(0),[G,Y]=c((()=>({y:0,x:0,config:d,onChange:({value:e})=>{j.current&&R&&(j.current["x"===T?"scrollLeft":"scrollTop"]=Math.abs(e[T]))}})));const X=o((()=>{if(!j.current)throw new Error("mainCarouselWrapperRef is not available");return j.current.getBoundingClientRect()["x"===T?"width":"height"]}),[T]),Z=o((()=>{const e=M.current?.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()["x"===T?"width":"height"]+W}),[T,W]),J=o((()=>G[T].get()),[T,G]),K=o((()=>Z()*i.length<X()),[Z,X,i.length]),Q=o((()=>Math.round(Number(M.current?.["x"===T?"scrollWidth":"scrollHeight"])-M.current.getBoundingClientRect()["x"===T?"width":"height"])),[T]),U=o((()=>0===he()),[]),_=o((()=>{if(!M.current)return 0;const e=Z();if("fluid"===r&&"number"==typeof F){if(F<e)throw new Error("slideAmount must be greater than the width of a single item.");return F}return e}),[Z,r,F]),ee=o((e=>{const t="x"===T?"left":"top";function n(){return Z()*i.length}function o(n){e.style.top="0px",e.style.left="0px",s&&(e.style[t]=`-${n-A}px`)}function u(){o(n())}if("fluid"!==r&&"number"==typeof r){if(r>1)switch(I){default:case"start":u();break;case"center":o(n()-_()*Math.round((r-1)/2));break;case"end":o(n()-_()*Math.round(r-1))}else u()}else u()}),[T,r,Z,i.length,A,_,I,s]),te=o((()=>{if(console.log("RESIZE"),window.innerWidth===H.current||R)console.log("HERE?");else{if(H.current=window.innerWidth,"fluid"===r){if(K())return void Y.start({immediate:!0,[T]:0});k.current=Q();const e=H.current-q.current;if(V.current){const e=-k.current;Y.start({immediate:!0,[T]:e})}else{const t=J()+e;Y.start({immediate:!0,[T]:t})}q.current=window.innerWidth}else Y.start({immediate:!0,x:0,y:0}),Y.start({immediate:!0,[T]:-_()*he()});ee(M.current)}}),[r,K,Q,R,Y,T,J,_,ee]),{useListenToCustomEvent:ne,emitObservable:re}=p(),{enterFullscreen:ie,exitFullscreen:oe,getIsFullscreen:se}=g({mainCarouselWrapperRef:j,emitObservable:re,handleResize:te}),{thumbsFragment:ue,handleThumbsScroll:le}=v({withThumbs:h,items:i,thumbsSlideAxis:y,springConfig:d,prepareThumbsData:C,itemsPerSlide:r,getFluidWrapperScrollValue:Q,getSlideValue:_,CustomThumbsWrapperComponent:L});function ce(){if(!j.current)throw new Error("Missing mainCarouselWrapperRef.current");return j.current["x"===T?"scrollLeft":"scrollTop"]}const ae=m((e=>{const t=e.dragging,n=e.movement["x"===T?0:1];function o(){"fluid"===r?K()?Y.start({[T]:0}):U()?ye():V.current?Y.start({[T]:-k.current}):Y.start({[T]:J()}):Y.start({[T]:-he()*_()})}if(t){if(ge(!0),re({eventName:"onDrag",...e}),R){const t=e.direction["x"===T?0:1];0===ce()&&t>0?e.cancel():Y.start({from:{[T]:ce()},to:{[T]:t>0?ce()-Math.abs(n):ce()+Math.abs(n)}})}else Y.start({[T]:J()+n});const t=n>u,r=n<-u;if(j.current.getBoundingClientRect().width>=i.length*_()&&(V.current=!0),(t||r)&&K())return e.cancel(),void o();V.current&&n<0?r&&(e.cancel(),Y.start({[T]:-k.current})):r?(e.cancel(),!s&&Te()?o():Ce()):t&&(e.cancel(),!s&&U()?o():ye())}!e.last||e.pressed||R||o()}),{enabled:!E});function de(e){O.current=e}function me(){return O.current}function fe(e){P.current=e}function he(){return P.current}function pe(e){z.current=e}function ge(e){$.current=e}function be(){const e=he();return 0===e?i.length-1:e-1}function xe(){const e=he();return e===i.length-1?0:e+1}function ve(e){return i.findIndex((t=>t.id===e))}function we({from:e,to:t=-1,customTo:n,immediate:r=!1,onRest:o=(()=>{})}){r||(fe(t),pe(!0),re({eventName:"onSlideStartChange",slideActionType:me(),nextItem:{index:t,id:i[t].id}})),Y.start({..."number"==typeof e?{from:{[T]:e}}:{},to:"number"==typeof n?{[T]:n}:{[T]:-_()*t},immediate:r,onRest:e=>{e.finished&&(ge(!1),pe(!1),o(),r||re({eventName:"onSlideChange",slideActionType:me(),currentItem:{index:he(),id:i[he()].id}}))}}),x&&h&&!r&&le(t,me())}function Te(){return he()===i.length-1}function ye(){if(de("prev"),"fluid"===r){if(K())return;const e=J()+_()+200;if(R){const e=j.current.scrollLeft-_();we({customTo:e<0?0:e,from:j.current.scrollLeft})}else we(e>=0?s?{from:J()-Z()*i.length,customTo:J()-Z()*i.length+_()}:{customTo:0}:{customTo:J()+_()});V.current&&(V.current=!1)}else{if(!s&&0===he()||B.current)return;U()?we({from:J()-_()*i.length,to:i.length-1}):we({to:be()})}}function Ce(){if(de("next"),"fluid"===r){if(K())return;const e=Math.abs(J()-_())+100>=k.current;if(R)we({customTo:j.current.scrollLeft+_(),from:j.current.scrollLeft});else if(s&&Math.abs(J()-_())>=i.length*Z()){const e=Z()*i.length;we({from:J()+e,customTo:J()+e-_()})}else{if(V.current)return;e?(V.current=!0,we({customTo:-k.current})):we({customTo:J()-_()})}}else{if(!s&&he()===D.length-1||B.current)return;Te()?we({from:J()+_()*i.length,to:0}):we({to:xe()})}}b((()=>{if("fluid"!==r&&!Number.isInteger(r))throw new Error("itemsPerSlide should be an integer.");if(r>i.length)throw new Error("The itemsPerSlide prop can't be greater than the total length of the items you provide.");if(r<1)throw new Error("The itemsPerSlide prop can't be less than 1.");f||console.warn("You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation."),S<0&&console.warn("The initialActiveItem cannot be less than 0."),S>i.length&&console.warn("The initialActiveItem cannot be greater than the total length of the items you provide.")})),b((()=>{function e(){document.hidden?B.current=!0:B.current=!1}if(k.current=Q(),"undefined"!=typeof window)return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})),b((()=>{q.current=window.innerWidth,S>0&&S<=i.length&&(we({to:S,immediate:!0}),fe(S))})),n((()=>{if(f)return window.addEventListener("resize",te),()=>{window.removeEventListener("resize",te)}}),[te,f]),n((()=>{M.current&&("x"===T&&(M.current.style.top="0px"),"y"===T&&(M.current.style.left="0px"))}),[T]);const Se={useListenToCustomEvent:ne,getIsFullscreen:se,enterFullscreen:ie,exitFullscreen:oe,getIsAnimating:function(){return z.current},getIsDragging:function(){return $.current},getIsNextItem:function(e){const t=ve(e),n=he();return s&&n===i.length-1?0===t:t===n+1},getIsPrevItem:function(e){const t=ve(e),n=he();return s&&0===n?t===i.length-1:t===n-1},slideToPrevItem:ye,slideToNextItem:Ce,..."number"==typeof r?{slideToItem:function(e){let t=0;if(t="string"==typeof e?i.findIndex((t=>t.id===e)):e,t>=i.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(t===he())return;const n=ve(i[he()].id);de(ve(i[t].id)>n?"next":"prev"),we({to:t})},getIsActiveItem:e=>ve(e)===he(),getCurrentActiveItem:()=>({id:i[he()].id,index:he()})}:{}};const Ie=e(w.Provider,Object.assign({value:Se},{children:e("div",Object.assign({ref:j,className:"use-spring-carousel-main-wrapper","data-testid":"use-spring-carousel-wrapper"},R?{onWheel(){G[T].stop()}}:{},{style:{display:"flex",position:"relative",width:"100%",height:"100%",...R?"x"===T?{overflowX:"auto"}:{overflowY:"auto"}:{}}},{children:e(l.div,Object.assign({},ae(),{className:"use-spring-carousel-track-wrapper","data-testid":"use-spring-carousel-animated-wrapper",ref:function(e){e&&(M.current=e,ee(e))},style:{display:"flex",position:"relative",touchAction:N||("x"===T?"pan-y":"pan-x"),flexDirection:"x"===T?"row":"column",...function(){const e=`calc(100% - ${2*A}px)`;return{width:"x"===T?e:"100%",height:"y"===T?e:"100%"}}(),...R?{}:G}},{children:D.map((({id:t,renderItem:n},i)=>e("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",..."number"==typeof r?{..."x"===T?{marginRight:`${W}px`}:{marginBottom:`${W}px`},flex:`1 0 calc(100% / ${r} - ${W*(r-1)/r}px)`}:{..."x"===T?{marginRight:`${W}px`}:{marginBottom:`${W}px`}}}},{children:n}),`${t}-${i}`)))}),void 0)}),void 0)}),void 0),Ee=e(w.Provider,Object.assign({value:Se},{children:ue}),void 0);return{...Se,carouselFragment:Ie,thumbsFragment:Ee}}function y(){const e=s(w);if(!e)throw new Error("useSpringCarouselContext must be used only inside a component that is rendered inside the Carousel.");return e}const C=i(void 0);function S(){const e=s(C);if(!e)throw new Error("useTransitionCarouselContext isn't being used within the useTransitionCarousel context; \n    use the context only inside a component that is rendered within the Carousel.");return e}function I({items:n,withLoop:r=!1,withThumbs:i=!1,springConfig:o=a.default,thumbsSlideAxis:s="x",enableThumbsWrapperScroll:c=!0,draggingSlideTreshold:f=50,prepareThumbsData:h,toPrevItemSpringProps:b,toNextItemSpringProps:x,disableGestures:w=!1,CustomThumbsWrapperComponent:T,springAnimationProps:y={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"absolute"},enter:{opacity:1,position:"relative"},leave:{opacity:0,position:"absolute"}}}){const S=t("next"),I=t(null),E=t(!1),[W,A]=u(0),{emitObservable:N,useListenToCustomEvent:F}=p(),{enterFullscreen:R,exitFullscreen:L,getIsFullscreen:O}=g({emitObservable:N,mainCarouselWrapperRef:I}),{thumbsFragment:D,handleThumbsScroll:P}=v({items:n,withThumbs:i,thumbsSlideAxis:s,springConfig:o,prepareThumbsData:h,CustomThumbsWrapperComponent:T}),j=m((({last:e,movement:[t]})=>{if(!$()&&e){const e=t>f,i=t<-f,o=0===W,s=W===n.length-1;if(i){if(!r&&s)return;k(),N({eventName:"onLeftSwipe"})}else if(e){if(!r&&o)return;V(),N({eventName:"onRightSwipe"})}}}),{enabled:!w});const M=d(W,{config:o,...function(){const e=H();return"prev"===e&&b?{initial:{...y.initial},from:{...b.from},enter:{...b.enter},leave:{...b.leave}}:"next"===e&&x?{initial:{...y.initial},from:{...x.from},enter:{...x.enter},leave:{...x.leave}}:{initial:{...y.initial},from:{...y.from},enter:{...y.enter},leave:{...y.leave}}}(),onStart:()=>z(!0),keys:null,onRest:e=>{e.finished&&(z(!1),N({eventName:"onSlideChange",slideActionType:H(),currentItem:{index:W,id:n[W].id}}))}})(((t,r)=>e(l.div,Object.assign({style:{...t,flex:"1 0 100%",width:"100%",height:"100%"}},{children:n[r].renderItem}),void 0)));function $(){return E.current}function z(e){E.current=e}function B(e){S.current=e}function H(){return S.current}function k(){const e=W===n.length-1;r?(B("next"),e?(N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:0,id:n[0].id}}),A(0)):(N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:W+1,id:n[W+1].id}}),A(W+1))):e||(N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:W+1,id:n[W+1].id}}),B("next"),A(W+1))}function V(){const e=0===W;r?(B("prev"),e?(N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:W-1,id:n[W-1].id}}),A(n.length-1)):(N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:W-1,id:n[W-1].id}}),A(W-1))):e||(B("prev"),N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:W-1,id:n[W-1].id}}),A(W-1))}function q(e){return n.findIndex((t=>t.id===e))}const G={activeItem:W,slideToItem:function(e){let t=0;if(t="string"==typeof e?n.findIndex((t=>t.id===e)):e,t>=n.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(t===W)return;const r=q(n[W].id),o=q(n[t].id);N({eventName:"onSlideStartChange",slideActionType:H(),nextItem:{index:o,id:n[t].id}}),B(o>r?"next":"prev"),A(t),c&&i&&P(t)},slideToNextItem:k,slideToPrevItem:V,enterFullscreen:R,exitFullscreen:L,useListenToCustomEvent:F,getIsNextItem:function(e){const t=q(e);return r&&W===n.length-1?0===t:t===W+1},getIsPrevItem:function(e){const t=q(e);return r&&0===W?t===n.length-1:t===W-1},getIsAnimating:$,getIsFullscreen:O,getIsActiveItem:e=>q(e)===W,getCurrentActiveItem:()=>({id:n[W].id,index:W})};return{carouselFragment:e(C.Provider,Object.assign({value:G},{children:e("div",Object.assign({ref:I},j(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:M}),void 0)}),void 0),thumbsFragment:e(C.Provider,Object.assign({value:G},{children:D}),void 0),...G}}export{T as useSpringCarousel,y as useSpringCarouselContext,I as useTransitionCarousel,S as useTransitionCarouselContext};
-//# sourceMappingURL=index.es.js.map