From 460279273ae25c0effc9aad8e9f13ac7ce59ddcd Mon Sep 17 00:00:00 2001
From: "sagiv.bengiat" <sagiv.bengiat@appsflyer.com>
Date: Fri, 8 Jan 2021 10:30:12 +0200
Subject: [PATCH 1/2] added css classes to hidden and visible items

---
 .../components/Carousel.js                    |  2 ++
 .../components/Track.js                       | 27 ++++++++++++++-----
 src/react-elastic-carousel/utils/helpers.js   |  4 ++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js
index aae952e..4ccfabc 100644
--- a/src/react-elastic-carousel/components/Carousel.js
+++ b/src/react-elastic-carousel/components/Carousel.js
@@ -737,6 +737,7 @@ class Carousel extends React.Component {
       className,
       style,
       itemsToShow,
+      itemsToScroll,
       verticalMode,
       isRTL,
       easing,
@@ -816,6 +817,7 @@ class Carousel extends React.Component {
                 currentItem={activeIndex}
                 autoTabIndexVisibleItems={autoTabIndexVisibleItems}
                 itemsToShow={itemsToShow}
+                itemsToScroll={itemsToScroll}
                 itemPosition={itemPosition}
                 itemPadding={itemPadding}
                 enableSwipe={enableSwipe}
diff --git a/src/react-elastic-carousel/components/Track.js b/src/react-elastic-carousel/components/Track.js
index e34fe9c..8d8e7b4 100644
--- a/src/react-elastic-carousel/components/Track.js
+++ b/src/react-elastic-carousel/components/Track.js
@@ -12,6 +12,7 @@ const Track = ({
   enableMouseSwipe,
   preventDefaultTouchmoveEvent,
   itemsToShow,
+  itemsToScroll,
   currentItem,
   itemPosition,
   itemPadding,
@@ -22,17 +23,31 @@ const Track = ({
 }) => {
   const width = `${childWidth}px`;
   const paddingStyle = `${itemPadding.join("px ")}px`;
+  const minVisibleItem = currentItem;
+  const maxVisibleItem = currentItem + itemsToShow;
+  const prevItem = minVisibleItem - itemsToScroll;
+  const nextItem = maxVisibleItem + itemsToScroll;
+
   const originalChildren = React.Children.map(children, (child, idx) => {
-    const min = currentItem;
-    const max = currentItem + itemsToShow;
-    const isVisible = idx >= min && idx < max;
+    const isVisible = idx >= minVisibleItem && idx < maxVisibleItem;
+    const isPrevItem = !isVisible && idx >= prevItem && idx < currentItem;
+    const isNextItem = !isVisible && idx < nextItem && idx > currentItem;
+    const itemClass = "carousel-item";
+
     const childToRender = autoTabIndexVisibleItems
-      ? React.cloneElement(child, { tabIndex: isVisible ? 0 : -1 })
+      ? React.cloneElement(child, {
+          tabIndex: isVisible ? 0 : -1
+        })
       : child;
     return (
       <div
-        className={cssPrefix("carousel-item", `carousel-item-${idx}`)}
-        // tabIndex={isVisible ? 0 : -1}
+        className={cssPrefix(
+          itemClass,
+          `${itemClass}-${idx}`,
+          `${itemClass}-${isVisible ? "visible" : "hidden"}`,
+          isPrevItem && `${itemClass}-prev`,
+          isNextItem && `${itemClass}-next`
+        )}
       >
         <ItemWrapperContainer
           id={idx}
diff --git a/src/react-elastic-carousel/utils/helpers.js b/src/react-elastic-carousel/utils/helpers.js
index 18a1600..e106a2e 100644
--- a/src/react-elastic-carousel/utils/helpers.js
+++ b/src/react-elastic-carousel/utils/helpers.js
@@ -9,7 +9,9 @@ export const cssPrefix = (...classNames) => {
 
   // in case of an array we add the class prefix per item;
   const chainedClasses = classNames.reduce((acc, current) => {
-    acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    if (current) {
+      acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    }
     return acc;
   }, "");
   result += chainedClasses;

From 2b398a8c4eb1e8df85226bc2f842955505fddb3b Mon Sep 17 00:00:00 2001
From: "sagiv.bengiat" <sagiv.bengiat@appsflyer.com>
Date: Fri, 8 Jan 2021 10:36:36 +0200
Subject: [PATCH 2/2] added missing ts type and extended react range version

---
 package.json                          | 4 ++--
 src/react-elastic-carousel/index.d.ts | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b5ebb4d..f034b0c 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.5.4",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
+    "react": "^15.0.0 || ^17.0.0",
+    "react-dom": "^15.0.0 || ^17.0.0",
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
diff --git a/src/react-elastic-carousel/index.d.ts b/src/react-elastic-carousel/index.d.ts
index 2b07e35..55394b6 100644
--- a/src/react-elastic-carousel/index.d.ts
+++ b/src/react-elastic-carousel/index.d.ts
@@ -31,6 +31,8 @@ export interface ReactElasticCarouselProps {
   itemsToShow?: number;
   // Defaults to false
   verticalMode?: boolean;
+  // Defaults to false
+  isRTL: boolean,
   // Defaults to true
   pagination?: boolean;
   // Defaults to 500