@yoursurprise/slider 0.0.20 → 0.0.22

package/README.md

@@ -15,7 +15,7 @@ This slider has the following features:
 Before using this slider, please consider the following:
 - This project is still being set up, this is an alpha version
 - The slider only contains styling to make it functional
-- There is no configuration of aforementioned features (yet)
+- There is no configuration of most aforementioned features (yet)
 
 Todos:
 - ~~Add a demo page~~
@@ -39,11 +39,13 @@ All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/doc
 
 ### Import the CSS files
 
-`import "@yoursurprise/slider/dist/index.css";`
+```javascript
+import "@yoursurprise/slider/dist/index.css";
+```
 
 ### Implement the Slider
 
-```
+```javascript
 import { Slider } from '@yoursurprise/slider';
 import '@yoursurprise/slider/dist/index.css';
 
@@ -59,6 +61,8 @@ export default function YourComponent() {
 }
 ```
 
+### Configuration
 
-
-
+| Option                | Type      | Required | Default | Description                         |   
+|-----------------------|-----------|----------|---------|-------------------------------------|
+| hideNavigationButtons | `boolean` | `false`  | `false` | Always hides the navigation buttons |

package/dist/Components/Controls/NextButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Button.scss';
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+export declare const NextButton: React.FC<Props>;
+export {};

package/dist/Components/Controls/PreviousButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Button.scss';
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+export declare const PreviousButton: React.FC<Props>;
+export {};

package/dist/Hooks/UseSider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Hooks/UseSlider.d.ts

@@ -0,0 +1,22 @@
+export declare enum Visibility {
+    FULL = 0,
+    PARTIAL = 1,
+    NONE = 2
+}
+export declare enum NavigationDirection {
+    PREV = 0,
+    NEXT = 1
+}
+interface UseSlider {
+    getLeftPositionToScrollTo: (direction: NavigationDirection, slideOffsetLeft: number, wrapperOffsetLeft: number, wrapperWidth: number, slideWidth: number) => number;
+    getVisibilityByIntersectionRatio: (intersectionRatio: number) => Visibility;
+    getFirstVisibleSlideIndex: () => number;
+    getLastVisibleSlideIndex: () => number;
+    addVisibleSlide: (index: number) => void;
+    addPartiallyVisibleSlide: (index: number) => void;
+    sortSlides: () => void;
+    removeVisibleSlide: (index: number) => void;
+    removePartiallyVisibleSlide: (index: number) => void;
+}
+export declare const useSlider: () => UseSlider;
+export {};

package/dist/Slider.d.ts

@@ -1,4 +1,8 @@
 import type React from 'react';
 import type { PropsWithChildren } from 'react';
 import './Slider.scss';
-export declare const Slider: React.FC<PropsWithChildren>;
+interface Settings {
+    hideNavigationButtons?: boolean;
+}
+export declare const Slider: React.FC<PropsWithChildren<Settings>>;
+export {};

package/dist/index.css

@@ -1,6 +1,3 @@
-.slider {
-  position: relative;
-}
 .slider__button {
   position: absolute;
   top: 0;
@@ -9,12 +6,21 @@
   width: 48px;
   margin: auto 0;
   border-radius: 50%;
-  border: 1px solid #C9C9C9;
   background-color: white;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   display: none;
+  border: none;
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);
+  transition: box-shadow 0.2s ease-in-out;
+}
+.slider__button__icon {
+  fill: #554c44;
+}
+.slider__button:hover {
+  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);
 }
 @media (hover: hover) {
   .slider__button {
@@ -30,6 +36,9 @@
 .slider__button--prev {
   left: 5px;
 }
+.slider {
+  position: relative;
+}
 .slider__wrapper {
   overscroll-behavior-x: contain;
   -ms-overflow-style: none;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,YAAY;EACZ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,yBAAyB;EACzB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,aAAa;AACf;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,UAAU;AACZ;AACA;EACE,SAAS;AACX;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,uBAAuB;AACzB;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB;AACA;EACE,wBAAwB;AAC1B","file":"index.css","sourcesContent":[".slider {\n  position: relative;\n}\n.slider__button {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: 48px;\n  width: 48px;\n  margin: auto 0;\n  border-radius: 50%;\n  border: 1px solid #C9C9C9;\n  background-color: white;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: none;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--hidden {\n  display: none;\n}\n.slider__button--next {\n  right: 5px;\n}\n.slider__button--prev {\n  left: 5px;\n}\n.slider__wrapper {\n  overscroll-behavior-x: contain;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\n}\n.slider__wrapper__slide {\n  scroll-snap-align: start;\n}"]}
+{"version":3,"sources":["Button.scss","Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,YAAY;EACZ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,aAAa;EACb,YAAY;EACZ,aAAa;EACb,iDAAiD;EACjD,uCAAuC;AACzC;AACA;EACE,aAAa;AACf;AACA;EACE,iDAAiD;AACnD;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,UAAU;AACZ;AACA;EACE,SAAS;AACX;ACrCA;EACE,kBAAkB;AACpB;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,uBAAuB;AACzB;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB;AACA;EACE,wBAAwB;AAC1B","file":"index.css","sourcesContent":[".slider__button {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: 48px;\n  width: 48px;\n  margin: auto 0;\n  border-radius: 50%;\n  background-color: white;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: none;\n  border: none;\n  outline: none;\n  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);\n  transition: box-shadow 0.2s ease-in-out;\n}\n.slider__button__icon {\n  fill: #554c44;\n}\n.slider__button:hover {\n  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--hidden {\n  display: none;\n}\n.slider__button--next {\n  right: 5px;\n}\n.slider__button--prev {\n  left: 5px;\n}",".slider {\n  position: relative;\n}\n.slider__wrapper {\n  overscroll-behavior-x: contain;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\n}\n.slider__wrapper__slide {\n  scroll-snap-align: start;\n}"]}

package/dist/index.js

@@ -1,22 +1,149 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, Children } from 'react';
 
-var Visbility;
-(function (Visbility) {
-    Visbility[Visbility["FULL"] = 0] = "FULL";
-    Visbility[Visbility["PARTIAL"] = 1] = "PARTIAL";
-    Visbility[Visbility["NONE"] = 2] = "NONE";
-})(Visbility || (Visbility = {}));
+var classnamesExports = {};
+var classnames = {
+  get exports(){ return classnamesExports; },
+  set exports(v){ classnamesExports = v; },
+};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames));
+
+var classNames = classnamesExports;
+
+const NextButton = ({ onClick, isHidden }) => {
+    return (jsx("button", { "aria-label": "Next slide", type: "button", onClick: onClick, "aria-hidden": isHidden, className: classNames([
+            'slider__button',
+            'slider__button--next',
+            { 'slider__button--hidden': isHidden },
+        ]), children: jsx("svg", { className: "slider__button__icon", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z" }) }) }));
+};
+
+const PreviousButton = ({ onClick, isHidden }) => {
+    return (jsx("button", { "aria-label": "Previous slide", type: "button", onClick: onClick, "aria-hidden": isHidden, className: classNames([
+            'slider__button',
+            'slider__button--prev',
+            { 'slider__button--hidden': isHidden },
+        ]), children: jsx("svg", { className: "slider__button__icon", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z" }) }) }));
+};
+
+var Visibility;
+(function (Visibility) {
+    Visibility[Visibility["FULL"] = 0] = "FULL";
+    Visibility[Visibility["PARTIAL"] = 1] = "PARTIAL";
+    Visibility[Visibility["NONE"] = 2] = "NONE";
+})(Visibility || (Visibility = {}));
 var NavigationDirection;
 (function (NavigationDirection) {
     NavigationDirection[NavigationDirection["PREV"] = 0] = "PREV";
     NavigationDirection[NavigationDirection["NEXT"] = 1] = "NEXT";
 })(NavigationDirection || (NavigationDirection = {}));
-const Slider = ({ children }) => {
-    const slides = useRef([]);
-    const wrapper = useRef(null);
+const useSlider = () => {
     const visibleSlideIndices = useRef([]);
     const partiallyVisibleSlideIndices = useRef([]);
+    const getFirstVisibleSlideIndex = () => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
+    const getLastVisibleSlideIndex = () => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
+        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
+    const addVisibleSlide = (index) => visibleSlideIndices.current.push(index);
+    const addPartiallyVisibleSlide = (index) => partiallyVisibleSlideIndices.current.push(index);
+    const removePartiallyVisibleSlide = (index) => partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+    const removeVisibleSlide = (index) => visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+    const sortSlides = () => {
+        visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
+        partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+    };
+    const getLeftPositionToScrollTo = (direction, slideOffsetLeft, wrapperOffsetLeft, wrapperWidth, slideWidth) => {
+        let scrollLeft = 0;
+        if (direction === NavigationDirection.PREV) {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft - wrapperWidth + slideWidth;
+        }
+        else {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft;
+        }
+        return scrollLeft;
+    };
+    const getVisibilityByIntersectionRatio = (intersectionRatio) => {
+        if (intersectionRatio >= 0.9) {
+            return Visibility.FULL;
+        }
+        if (intersectionRatio >= 0.5) {
+            return Visibility.PARTIAL;
+        }
+        return Visibility.NONE;
+    };
+    return {
+        addVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        removeVisibleSlide,
+        sortSlides,
+        getFirstVisibleSlideIndex,
+        getLastVisibleSlideIndex,
+        getLeftPositionToScrollTo,
+        getVisibilityByIntersectionRatio,
+    };
+};
+
+const Slider = ({ children, hideNavigationButtons = false }) => {
+    const slides = useRef([]);
+    const wrapper = useRef(null);
+    const [nextArrowVisible, setNextArrowVisible] = useState(false);
+    const [prevArrowVisible, setPrevArrowVisible] = useState(false);
     const [isScrollable, setIsScrollable] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const [isBlockingClicks, setIsBlockingClicks] = useState(false);
@@ -24,14 +151,13 @@ const Slider = ({ children }) => {
         clientX: 0,
         scrollX: 0,
     });
-    const arrowPrevRef = useRef(null);
-    const arrowNextRef = useRef(null);
+    const { getLeftPositionToScrollTo, getVisibilityByIntersectionRatio, addVisibleSlide, addPartiallyVisibleSlide, getLastVisibleSlideIndex, sortSlides, getFirstVisibleSlideIndex, removeVisibleSlide, removePartiallyVisibleSlide, } = useSlider();
     useEffect(() => {
         const currentWrapper = wrapper.current;
         if (!currentWrapper) {
             return () => { };
         }
-        const checkScrollable = () => setIsScrollable(currentWrapper.classList.toggle('is-scrollable', currentWrapper.scrollWidth > currentWrapper.clientWidth));
+        const checkScrollable = () => setIsScrollable(currentWrapper.scrollWidth > currentWrapper.clientWidth);
         window?.addEventListener('resize', checkScrollable);
         checkScrollable();
         return () => {
@@ -39,10 +165,6 @@ const Slider = ({ children }) => {
         };
     }, [wrapper]);
     useEffect(() => {
-        wrapper.current?.classList.toggle('is-scrollable', isScrollable);
-    }, [isScrollable]);
-    useEffect(() => {
-        wrapper.current?.classList.toggle('is-dragging', isDragging);
         const onDocumentMouseUp = (event) => {
             event.stopPropagation();
             event.preventDefault();
@@ -63,9 +185,7 @@ const Slider = ({ children }) => {
         }
         setIsBlockingClicks(false);
     };
-    const mouseUpHandler = () => {
-        setIsDragging(false);
-    };
+    const mouseUpHandler = () => setIsDragging(false);
     const mouseDownHandler = (event) => {
         setMousePosition({
             ...mousePosition,
@@ -86,57 +206,30 @@ const Slider = ({ children }) => {
     const addSlide = (node, index) => {
         slides.current[index] = {
             element: node,
-            visibility: Visbility.NONE,
+            visibility: Visibility.NONE,
         };
     };
-    const getFirstVisibleSlideIndex = () => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
-    const getLastVisibleSlideIndex = () => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
-        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
     const setControlsVisibility = useCallback(() => {
         const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
-        const moreContentAvailable = isScrollable && lastSlideFullyVisible === false;
-        const previousContentAvailable = getFirstVisibleSlideIndex() > 0 && isScrollable;
-        if (arrowNextRef.current && arrowPrevRef.current) {
-            arrowNextRef.current.classList.toggle('slider__button--hidden', moreContentAvailable === false);
-            arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
-            arrowPrevRef.current.classList.toggle('slider__button--hidden', previousContentAvailable === false);
-            arrowPrevRef.current.ariaHidden = String(previousContentAvailable === false);
-        }
-    }, [isScrollable]);
-    const getVisibilityByIntersectionRatio = (intersectionRatio) => {
-        if (intersectionRatio >= 0.9) {
-            return Visbility.FULL;
-        }
-        if (intersectionRatio >= 0.5) {
-            return Visbility.PARTIAL;
-        }
-        return Visbility.NONE;
-    };
+        setPrevArrowVisible(getFirstVisibleSlideIndex() > 0 && isScrollable);
+        setNextArrowVisible(isScrollable && lastSlideFullyVisible === false);
+    }, [getFirstVisibleSlideIndex, getLastVisibleSlideIndex, isScrollable]);
     useEffect(() => {
         if (!wrapper.current) {
             return () => { };
         }
-        setControlsVisibility();
         const intersectionCallback = (entries) => {
             entries.forEach((entry) => {
                 const target = entry.target;
                 const index = Number(target.dataset.slideIndex);
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.FULL) {
-                    visibleSlideIndices.current.push(index);
-                }
-                else {
-                    visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.PARTIAL) {
-                    partiallyVisibleSlideIndices.current.push(index);
-                }
-                else {
-                    partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
+                const visibility = getVisibilityByIntersectionRatio(entry.intersectionRatio);
+                visibility === Visibility.FULL ? addVisibleSlide(index) : removeVisibleSlide(index);
+                visibility === Visibility.PARTIAL ? addPartiallyVisibleSlide(index) : removePartiallyVisibleSlide(index);
             });
-            visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
-            partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
-            setControlsVisibility();
+            sortSlides();
+            if (hideNavigationButtons === false) {
+                setControlsVisibility();
+            }
         };
         const intersectionObserver = new IntersectionObserver(intersectionCallback, {
             root: wrapper.current,
@@ -144,28 +237,35 @@ const Slider = ({ children }) => {
         });
         slides.current.forEach(({ element }) => intersectionObserver.observe(element));
         return () => intersectionObserver.disconnect();
-    }, [wrapper, setControlsVisibility]);
+    }, [
+        wrapper,
+        setControlsVisibility,
+        hideNavigationButtons,
+        sortSlides,
+        addVisibleSlide,
+        removeVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        getVisibilityByIntersectionRatio,
+    ]);
     const navigate = (direction) => {
         if (!wrapper.current) {
             return;
         }
         const targetSlideIndex = direction === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
         const targetSlide = slides.current[targetSlideIndex];
-        let scrollLeft = 0;
         if (!targetSlide) {
             return;
         }
-        if (direction === NavigationDirection.PREV) {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft - wrapper.current.clientWidth + targetSlide.element.clientWidth;
-        }
-        else {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft;
-        }
+        const scrollLeft = getLeftPositionToScrollTo(direction, targetSlide.element.offsetLeft, wrapper.current.offsetLeft, wrapper.current.clientWidth, targetSlide.element.clientWidth);
         wrapper.current.scrollTo({ behavior: 'smooth', left: scrollLeft, top: 0 });
     };
-    return (jsxs("div", { className: "slider", children: [jsx("div", { className: "slider__wrapper", role: "list", ref: wrapper, onMouseDown: mouseDownHandler, onMouseMove: mouseMoveHandler, onMouseUp: mouseUpHandler, onClickCapture: blockChildClickHandler, children: Children.map(children, (child, index) => (jsx("div", { className: "slider__wrapper__slide", role: "listitem", "data-slide-index": index, ref: (node) => { if (node) {
+    return (jsxs("div", { className: "slider", children: [jsx("div", { role: "list", ref: wrapper, onMouseDown: mouseDownHandler, onMouseMove: mouseMoveHandler, onMouseUp: mouseUpHandler, onClickCapture: blockChildClickHandler, className: classNames('slider__wrapper', {
+                    'is-scrollable': isScrollable,
+                    'is-dragging': isDragging,
+                }), children: Children.map(children, (child, index) => (jsx("div", { className: "slider__wrapper__slide", role: "listitem", "data-slide-index": index, ref: (node) => { if (node) {
                         addSlide(node, index);
-                    } }, children: child }, index))) }), jsx("button", { "aria-label": "Previous slide", type: "button", onClick: () => navigate(NavigationDirection.PREV), ref: arrowPrevRef, className: "slider__button slider__button--prev slider__button--hidden", children: jsx("svg", { fill: "#33333", viewBox: "0 0 256 256", width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: jsx("path", { d: "M160,220a11.96287,11.96287,0,0,1-8.48535-3.51465l-80-80a12.00062,12.00062,0,0,1,0-16.9707l80-80a12.0001,12.0001,0,0,1,16.9707,16.9707L96.9707,128l71.51465,71.51465A12,12,0,0,1,160,220Z" }) }) }) }), jsx("button", { "aria-label": "Next slide", type: "button", onClick: () => navigate(NavigationDirection.NEXT), ref: arrowNextRef, className: "slider__button slider__button--next slider__button--hidden", children: jsx("svg", { fill: "#333333", viewBox: "0 0 256 256", width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: jsx("path", { d: "M96,220a12,12,0,0,1-8.48535-20.48535L159.0293,128,87.51465,56.48535a12.0001,12.0001,0,0,1,16.9707-16.9707l80,80a12.00062,12.00062,0,0,1,0,16.9707l-80,80A11.96287,11.96287,0,0,1,96,220Z" }) }) }) })] }));
+                    } }, children: child }, index))) }), hideNavigationButtons === false && (jsxs(Fragment, { children: [jsx(PreviousButton, { onClick: () => navigate(NavigationDirection.PREV), isHidden: prevArrowVisible === false }), jsx(NextButton, { onClick: () => navigate(NavigationDirection.NEXT), isHidden: nextArrowVisible === false })] }))] }));
 };
 
 export { Slider };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/Slider.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../node_modules/classnames/index.js","../src/Components/Controls/NextButton.tsx","../src/Components/Controls/PreviousButton.tsx","../src/Hooks/UseSlider.ts","../src/Slider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n",null,null,null,null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoursurprise/slider",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Basic React slider using modern Javascript and CSS",
   "module": "dist/index.js",
   "main": "dist/index.js",
@@ -22,6 +22,9 @@
     "serve": "parcel index.html",
     "deploy-pages": "gh-pages -d dist"
   },
+  "dependencies": {
+    "classnames": "^2.3.2"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -56,6 +59,7 @@
     "npm": "^8.19.3",
     "parcel": "^2.8.3",
     "postcss": "^8.4.18",
+    "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",

package/src/Components/Controls/Button.scss

@@ -0,0 +1,42 @@
+.slider__button {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 48px;
+  width: 48px;
+  margin: auto 0;
+  border-radius: 50%;
+  background-color: white;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  display: none;
+  border: none;
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .1);
+  transition: box-shadow .2s ease-in-out;
+
+  &__icon {
+    fill: #554c44;
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .2);
+  }
+
+  @media (hover: hover) {
+    display: flex;
+  }
+
+  &--hidden {
+    display: none;
+  }
+
+  &--next {
+    right: 5px;
+  }
+
+  &--prev {
+    left: 5px;
+  }
+}

package/src/Components/Controls/NextButton.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import './Button.scss';
+
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+
+export const NextButton: React.FC<Props> = ({ onClick, isHidden }) => {
+    return (
+        <button
+            aria-label="Next slide"
+            type="button"
+            onClick={onClick}
+            aria-hidden={isHidden}
+            className={classNames([
+                'slider__button',
+                'slider__button--next',
+                { 'slider__button--hidden': isHidden },
+            ])}
+        >
+            <svg className="slider__button__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+                <path d="M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z"/>
+            </svg>
+        </button>
+    );
+};

package/src/Components/Controls/PreviousButton.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import './Button.scss';
+
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+
+export const PreviousButton: React.FC<Props> = ({ onClick, isHidden }) => {
+    return (
+        <button
+            aria-label="Previous slide"
+            type="button"
+            onClick={onClick}
+            aria-hidden={isHidden}
+            className={classNames([
+                'slider__button',
+                'slider__button--prev',
+                { 'slider__button--hidden': isHidden },
+            ])}
+        >
+            <svg className="slider__button__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+                <path d="M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z"/>
+            </svg>
+        </button>
+    );
+};

package/src/Hooks/UseSider.test.ts

@@ -0,0 +1,123 @@
+import { NavigationDirection, useSlider, Visibility } from './UseSlider';
+import { renderHook } from '@testing-library/react';
+
+describe('UseSlider', () => {
+    describe('keeps track of slides', () => {
+        it('gets the first fully visible slide', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(1);
+            result.current.addVisibleSlide(2);
+            result.current.addVisibleSlide(3);
+
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(2);
+        });
+
+        it('gets the last fully visible slide', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addVisibleSlide(1);
+            result.current.addVisibleSlide(2);
+            result.current.addPartiallyVisibleSlide(3);
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(2);
+        });
+
+
+        it('gets the first partially visible slide when no slide is fully visible', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(1);
+            result.current.addPartiallyVisibleSlide(2);
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(1);
+        });
+
+        it('gets the last visible slide when no slide is fully visible', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(1);
+            result.current.addPartiallyVisibleSlide(2);
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(2);
+        });
+
+
+        it('falls back when first slide is non-existant', () => {
+            const { result } = renderHook(() => useSlider());
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(-1);
+        });
+
+
+        it('falls back when last slide is non-existant', () => {
+            const { result } = renderHook(() => useSlider());
+            expect(result.current.getLastVisibleSlideIndex()).toBe(-1);
+        });
+
+        it('sorts the fully visible slides by index', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addVisibleSlide(3);
+            result.current.addVisibleSlide(2);
+            result.current.addVisibleSlide(1);
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(3);
+            expect(result.current.getLastVisibleSlideIndex()).toBe(1);
+
+            result.current.sortSlides();
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(3);
+        });
+
+        it('sorts the partially fully visible slides by index', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(3);
+            result.current.addPartiallyVisibleSlide(2);
+            result.current.addPartiallyVisibleSlide(1);
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(3);
+            expect(result.current.getLastVisibleSlideIndex()).toBe(1);
+
+            result.current.sortSlides();
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(3);
+        });
+    });
+
+    describe('calculations', () => {
+
+        it('calculates the scrollLeft position (next)', () => {
+            const { result } = renderHook(() => useSlider());
+
+            expect(result.current.getLeftPositionToScrollTo(NavigationDirection.NEXT, 200, 50, 1250, 325)).toBe(150);
+        });
+
+        it('calculates the scrollLeft position (prev)', () => {
+            const { result } = renderHook(() => useSlider());
+
+            expect(result.current.getLeftPositionToScrollTo(NavigationDirection.PREV, 875, 50, 1250, 325)).toBe(-100);
+        });
+
+        it('calculates the visibility of a slide', () => {
+            const { result } = renderHook(() => useSlider());
+
+            [
+                [0.0, Visibility.NONE],
+                [0.1, Visibility.NONE],
+                [0.2, Visibility.NONE],
+                [0.3, Visibility.NONE],
+                [0.4, Visibility.NONE],
+                [0.5, Visibility.PARTIAL],
+                [0.6, Visibility.PARTIAL],
+                [0.7, Visibility.PARTIAL],
+                [0.8, Visibility.PARTIAL],
+                [0.9, Visibility.FULL],
+                [1.0, Visibility.FULL],
+            ].forEach(([ratio, expectation]) => {
+                expect(result.current.getVisibilityByIntersectionRatio(ratio)).toBe(expectation);
+            });
+        });
+    });
+});

package/src/Hooks/UseSlider.ts

@@ -0,0 +1,84 @@
+import { useRef } from 'react';
+
+export enum Visibility {
+    FULL,
+    PARTIAL,
+    NONE,
+}
+
+export enum NavigationDirection {
+    PREV,
+    NEXT,
+}
+
+interface UseSlider {
+    getLeftPositionToScrollTo: (direction: NavigationDirection, slideOffsetLeft: number, wrapperOffsetLeft: number, wrapperWidth: number, slideWidth: number) => number;
+    getVisibilityByIntersectionRatio: (intersectionRatio: number) => Visibility;
+    getFirstVisibleSlideIndex: () => number;
+    getLastVisibleSlideIndex: () => number;
+    addVisibleSlide: (index: number) => void;
+    addPartiallyVisibleSlide: (index: number) => void;
+    sortSlides: () => void;
+    removeVisibleSlide: (index: number) => void;
+    removePartiallyVisibleSlide: (index: number) => void;
+}
+
+export const useSlider = (): UseSlider => {
+    const visibleSlideIndices = useRef<number[]>([]);
+    const partiallyVisibleSlideIndices = useRef<number[]>([]);
+
+    const getFirstVisibleSlideIndex = (): number => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
+
+    const getLastVisibleSlideIndex = (): number => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
+        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
+
+    const addVisibleSlide = (index: number) => visibleSlideIndices.current.push(index);
+
+    const addPartiallyVisibleSlide = (index: number) => partiallyVisibleSlideIndices.current.push(index);
+
+    const removePartiallyVisibleSlide = (index: number) => partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+
+    const removeVisibleSlide = (index: number) => visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+
+    const sortSlides = () => {
+        // Make sure there are no duplicate visible slides, then sort to retain proper order
+        visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
+        partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+    };
+
+    const getLeftPositionToScrollTo = (direction: NavigationDirection, slideOffsetLeft: number, wrapperOffsetLeft: number, wrapperWidth: number, slideWidth: number) => {
+        let scrollLeft = 0;
+
+        if (direction === NavigationDirection.PREV) {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft - wrapperWidth + slideWidth;
+        } else {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft;
+        }
+
+        return scrollLeft;
+    };
+
+    const getVisibilityByIntersectionRatio =  (intersectionRatio: number) => {
+        if (intersectionRatio >= 0.9) {
+            return Visibility.FULL;
+        }
+
+        if (intersectionRatio >= 0.5) {
+            return Visibility.PARTIAL;
+        }
+
+        return Visibility.NONE;
+    };
+
+    return {
+        addVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        removeVisibleSlide,
+        sortSlides,
+        getFirstVisibleSlideIndex,
+        getLastVisibleSlideIndex,
+        getLeftPositionToScrollTo,
+        getVisibilityByIntersectionRatio,
+    };
+};

package/src/Slider.scss

@@ -1,43 +1,6 @@
 .slider {
   position: relative;
 
-  &__button {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-
-    height: 48px;
-    width: 48px;
-    margin: auto 0;
-    border-radius: 50%;
-
-    border: 1px solid #C9C9C9;
-    background-color: white;
-
-    align-items: center;
-    justify-content: center;
-
-    cursor: pointer;
-
-    display: none;
-
-    @media (hover: hover) {
-      display: flex;
-    }
-
-    &--hidden {
-      display: none;
-    }
-
-    &--next {
-      right: 5px;
-    }
-
-    &--prev {
-      left: 5px;
-    }
-  }
-
   &__wrapper {
 
     // Prevent the browser from going back in history when there is no scroll area left

package/src/Slider.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Slider } from './Slider';
@@ -89,8 +89,23 @@ describe('UpsellSlider', () => {
             const nextButton = screen.getByLabelText('Next slide');
             const prevButton = screen.getByLabelText('Previous slide');
 
-            expect(prevButton.ariaHidden).toBe('true');
-            expect(nextButton.ariaHidden).toBe('false');
+            expect(prevButton).toHaveAttribute('aria-hidden', 'true');
+            expect(nextButton).toHaveAttribute('aria-hidden', 'true');
+        });
+
+        it('does not render controls if disabled', () => {
+            render(<Slider hideNavigationButtons={true}>
+                <span key={1}/>
+                <span key={2}/>
+                <span key={3}/>
+                <span key={4}/>
+            </Slider>);
+
+            const nextButton = screen.queryByLabelText('Next slide');
+            const prevButton = screen.queryByLabelText('Previous slide');
+
+            expect(prevButton).not.toBeInTheDocument();
+            expect(nextButton).not.toBeInTheDocument();
         });
 
         it('allows scrolling by dragging with the mouse', () => {
@@ -164,12 +179,14 @@ describe('UpsellSlider', () => {
                 Object.defineProperty(child, 'offsetLeft', { value: 100 * (i + 1) });
             });
 
-            intersectionCallback([
-                { intersectionRatio: 1, target: slides[0] } as unknown as IntersectionObserverEntry,
-                { intersectionRatio: 0.5, target: slides[1] } as unknown as IntersectionObserverEntry,
-                { intersectionRatio: 0, target: slides[2] } as unknown as IntersectionObserverEntry,
-                { intersectionRatio: 0, target: slides[3] } as unknown as IntersectionObserverEntry,
-            ]);
+            await act(() => {
+                intersectionCallback([
+                    { intersectionRatio: 1, target: slides[ 0 ] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0.5, target: slides[ 1 ] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0, target: slides[ 2 ] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0, target: slides[ 3 ] } as unknown as IntersectionObserverEntry,
+                ]);
+            });
 
             await userEvent.click(nextButton);
 
@@ -191,12 +208,14 @@ describe('UpsellSlider', () => {
                 Object.defineProperty(child, 'offsetLeft', { value: 100 * (i + 1) });
             });
 
-            intersectionCallback([
-                { intersectionRatio: 0, target: slides[0] } as unknown as IntersectionObserverEntry,
-                { intersectionRatio: 0, target: slides[1] } as unknown as IntersectionObserverEntry,
-                { intersectionRatio: 1, target: slides[2] } as unknown as IntersectionObserverEntry,
-                { intersectionRatio: 0.5, target: slides[3] } as unknown as IntersectionObserverEntry,
-            ]);
+            await act(() => {
+                intersectionCallback([
+                    { intersectionRatio: 0, target: slides[ 0 ] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0, target: slides[ 1 ] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 1, target: slides[ 2 ] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0.5, target: slides[ 3 ] } as unknown as IntersectionObserverEntry,
+                ]);
+            });
 
             await userEvent.click(prevButton);
 
@@ -207,7 +226,7 @@ describe('UpsellSlider', () => {
             });
         });
 
-        it('updates controls visibility', () => {
+        it('updates controls visibility', async () => {
             Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 500 });
             Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 1000 });
             Object.defineProperty(HTMLElement.prototype, 'scrollLeft', { configurable: true, value: 0, writable: true });
@@ -223,26 +242,33 @@ describe('UpsellSlider', () => {
             const nextButton = screen.getByLabelText('Next slide');
             const prevButton = screen.getByLabelText('Previous slide');
 
-            ([
+            const testCases = [
                 // All slides are visible
                 [[1, 1, 1, 1], true, true],
                 // Only the first slide is not visible
                 [[0, 1, 1, 1], false, true],
                 // Only the last slide is not visible
                 [[1, 1, 1, 0], true, false],
-            ] as Array<[number[], boolean, boolean]>).forEach((expectations) => {
-                const [intersections, prevButtonHidden, nextButtonHidden] = expectations;
-
-                intersectionCallback([
-                    { intersectionRatio: intersections[0], target: slides[0] } as unknown as IntersectionObserverEntry,
-                    { intersectionRatio: intersections[1], target: slides[1] } as unknown as IntersectionObserverEntry,
-                    { intersectionRatio: intersections[2], target: slides[2] } as unknown as IntersectionObserverEntry,
-                    { intersectionRatio: intersections[3], target: slides[3] } as unknown as IntersectionObserverEntry,
-                ]);
+                // Only a single slide is partially visible
+                [[0, 0, 0.5, 0], false, false],
+            ] as Array<[number[], boolean, boolean]>;
+
+            for (const testCase of testCases) {
+                const [intersections, prevButtonHidden, nextButtonHidden] = testCase;
+
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                await act(() => {
+                    intersectionCallback([
+                        { intersectionRatio: intersections[0], target: slides[0] } as unknown as IntersectionObserverEntry,
+                        { intersectionRatio: intersections[1], target: slides[1] } as unknown as IntersectionObserverEntry,
+                        { intersectionRatio: intersections[2], target: slides[2] } as unknown as IntersectionObserverEntry,
+                        { intersectionRatio: intersections[3], target: slides[3] } as unknown as IntersectionObserverEntry,
+                    ]);
+                });
 
-                expect(prevButton.ariaHidden).toBe(String(prevButtonHidden));
-                expect(nextButton.ariaHidden).toBe(String(nextButtonHidden));
-            });
+                expect(prevButton).toHaveAttribute('aria-hidden', String(prevButtonHidden));
+                expect(nextButton).toHaveAttribute('aria-hidden', String(nextButtonHidden));
+            }
         });
     });
 });

package/src/Slider.tsx

@@ -1,29 +1,28 @@
+import classNames from 'classnames';
 import type React from 'react';
 import type { MouseEvent as ReactMouseEvent, PropsWithChildren } from 'react';
 import { useRef, useEffect, Children, useCallback, useState } from 'react';
+import { NextButton } from './Components/Controls/NextButton';
+import { PreviousButton } from './Components/Controls/PreviousButton';
+import { NavigationDirection, useSlider, Visibility } from './Hooks/UseSlider';
 import './Slider.scss';
 
-enum Visbility {
-    FULL,
-    PARTIAL,
-    NONE,
-}
-
-enum NavigationDirection {
-    PREV,
-    NEXT,
-}
-
 interface SlideVisibilityEntry {
     element: HTMLDivElement;
-    visibility: Visbility;
+    visibility: Visibility;
 }
 
-export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
+interface Settings {
+    // Sets whether the navigation buttons (next/prev) are no longer rendered
+    hideNavigationButtons?: boolean;
+}
+
+export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNavigationButtons = false }) => {
     const slides = useRef<SlideVisibilityEntry[]>([]);
     const wrapper = useRef<HTMLDivElement>(null);
-    const visibleSlideIndices = useRef<number[]>([]);
-    const partiallyVisibleSlideIndices = useRef<number[]>([]);
+
+    const [nextArrowVisible, setNextArrowVisible] = useState<boolean>(false);
+    const [prevArrowVisible, setPrevArrowVisible] = useState<boolean>(false);
 
     const [isScrollable, setIsScrollable] = useState<boolean>(false);
     const [isDragging, setIsDragging] = useState<boolean>(false);
@@ -33,8 +32,17 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
         scrollX: 0,
     });
 
-    const arrowPrevRef = useRef<HTMLButtonElement>(null);
-    const arrowNextRef = useRef<HTMLButtonElement>(null);
+    const {
+        getLeftPositionToScrollTo,
+        getVisibilityByIntersectionRatio,
+        addVisibleSlide,
+        addPartiallyVisibleSlide,
+        getLastVisibleSlideIndex,
+        sortSlides,
+        getFirstVisibleSlideIndex,
+        removeVisibleSlide,
+        removePartiallyVisibleSlide,
+    } = useSlider();
 
     useEffect(() => {
         const currentWrapper = wrapper.current;
@@ -43,7 +51,7 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
             return () => {};
         }
 
-        const checkScrollable = () => setIsScrollable(currentWrapper.classList.toggle('is-scrollable', currentWrapper.scrollWidth > currentWrapper.clientWidth));
+        const checkScrollable = () => setIsScrollable(currentWrapper.scrollWidth > currentWrapper.clientWidth);
 
         window?.addEventListener('resize', checkScrollable);
 
@@ -55,12 +63,6 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
     }, [wrapper]);
 
     useEffect(() => {
-        wrapper.current?.classList.toggle('is-scrollable', isScrollable);
-    }, [isScrollable]);
-
-    useEffect(() => {
-        wrapper.current?.classList.toggle('is-dragging', isDragging);
-
         const onDocumentMouseUp = (event: MouseEvent) => {
             event.stopPropagation();
             event.preventDefault();
@@ -87,9 +89,7 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
         setIsBlockingClicks(false);
     };
 
-    const mouseUpHandler = () => {
-        setIsDragging(false);
-    };
+    const mouseUpHandler = () => setIsDragging(false);
 
     const mouseDownHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
         setMousePosition({
@@ -116,71 +116,37 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
     const addSlide = (node: HTMLDivElement, index: number) => {
         slides.current[index] = {
             element: node,
-            visibility: Visbility.NONE,
+            visibility: Visibility.NONE,
         };
     };
 
-    const getFirstVisibleSlideIndex = (): number => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
-
-    const getLastVisibleSlideIndex = (): number => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
-        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
-
     const setControlsVisibility = useCallback(() => {
         const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
-        const moreContentAvailable = isScrollable && lastSlideFullyVisible === false;
-        const previousContentAvailable = getFirstVisibleSlideIndex() > 0 && isScrollable;
 
-        if (arrowNextRef.current && arrowPrevRef.current) {
-            arrowNextRef.current.classList.toggle('slider__button--hidden', moreContentAvailable === false);
-            arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
-
-            arrowPrevRef.current.classList.toggle('slider__button--hidden', previousContentAvailable === false);
-            arrowPrevRef.current.ariaHidden = String(previousContentAvailable === false);
-        }
-    }, [isScrollable]);
-
-    const getVisibilityByIntersectionRatio = (intersectionRatio: number) => {
-        if (intersectionRatio >= 0.9) {
-            return Visbility.FULL;
-        }
-
-        if (intersectionRatio >= 0.5) {
-            return Visbility.PARTIAL;
-        }
-
-        return Visbility.NONE;
-    };
+        setPrevArrowVisible(getFirstVisibleSlideIndex() > 0 && isScrollable);
+        setNextArrowVisible(isScrollable && lastSlideFullyVisible === false);
+    }, [getFirstVisibleSlideIndex, getLastVisibleSlideIndex, isScrollable]);
 
     useEffect(() => {
         if (!wrapper.current) {
             return () => {};
         }
 
-        setControlsVisibility();
-
         const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
             entries.forEach((entry: IntersectionObserverEntry) => {
                 const target = entry.target as HTMLDivElement;
                 const index = Number(target.dataset.slideIndex);
+                const visibility = getVisibilityByIntersectionRatio(entry.intersectionRatio);
 
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.FULL) {
-                    visibleSlideIndices.current.push(index);
-                } else {
-                    visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
-
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.PARTIAL) {
-                    partiallyVisibleSlideIndices.current.push(index);
-                } else {
-                    partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
+                visibility === Visibility.FULL ? addVisibleSlide(index) : removeVisibleSlide(index);
+                visibility === Visibility.PARTIAL ? addPartiallyVisibleSlide(index) : removePartiallyVisibleSlide(index);
             });
 
-            // Make sure there are no duplicate visible slides, then sort to retain proper order
-            visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
-            partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+            sortSlides();
 
-            setControlsVisibility();
+            if (hideNavigationButtons === false) {
+                setControlsVisibility();
+            }
         };
 
         const intersectionObserver = new IntersectionObserver(intersectionCallback, {
@@ -191,7 +157,17 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
         slides.current.forEach(({ element }) => intersectionObserver.observe(element));
 
         return () => intersectionObserver.disconnect();
-    }, [wrapper, setControlsVisibility]);
+    }, [
+        wrapper,
+        setControlsVisibility,
+        hideNavigationButtons,
+        sortSlides,
+        addVisibleSlide,
+        removeVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        getVisibilityByIntersectionRatio,
+    ]);
 
     const navigate = (direction: NavigationDirection) => {
         if (!wrapper.current) {
@@ -199,30 +175,34 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
         }
 
         const targetSlideIndex = direction === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
-
         const targetSlide = slides.current[targetSlideIndex];
-        let scrollLeft = 0;
 
         if (!targetSlide) {
             return;
         }
 
-        if (direction === NavigationDirection.PREV) {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft - wrapper.current.clientWidth + targetSlide.element.clientWidth;
-        } else {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft;
-        }
+        const scrollLeft = getLeftPositionToScrollTo(
+            direction,
+            targetSlide.element.offsetLeft,
+            wrapper.current.offsetLeft,
+            wrapper.current.clientWidth,
+            targetSlide.element.clientWidth,
+        );
 
         wrapper.current.scrollTo({ behavior: 'smooth', left: scrollLeft, top: 0 });
     };
 
     return (
         <div className="slider">
-            <div className="slider__wrapper" role="list" ref={wrapper}
+            <div role="list" ref={wrapper}
                 onMouseDown={mouseDownHandler}
                 onMouseMove={mouseMoveHandler}
                 onMouseUp={mouseUpHandler}
                 onClickCapture={blockChildClickHandler}
+                className={classNames('slider__wrapper', {
+                    'is-scrollable': isScrollable,
+                    'is-dragging': isDragging,
+                })}
             >
                 {Children.map(children, (child, index: number) => (
                     <div className="slider__wrapper__slide" role="listitem" key={index} data-slide-index={index} ref={(node) => { if (node) { addSlide(node, index); } }}>
@@ -230,32 +210,12 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
                     </div>
                 ))}
             </div>
-            <button
-                aria-label="Previous slide"
-                type="button"
-                onClick={() => navigate(NavigationDirection.PREV)}
-                ref={arrowPrevRef}
-                className="slider__button slider__button--prev slider__button--hidden"
-            >
-                <svg fill="#33333" viewBox="0 0 256 256" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-                    <g>
-                        <path d="M160,220a11.96287,11.96287,0,0,1-8.48535-3.51465l-80-80a12.00062,12.00062,0,0,1,0-16.9707l80-80a12.0001,12.0001,0,0,1,16.9707,16.9707L96.9707,128l71.51465,71.51465A12,12,0,0,1,160,220Z"></path>
-                    </g>
-                </svg>
-            </button>
-            <button
-                aria-label="Next slide"
-                type="button"
-                onClick={() => navigate(NavigationDirection.NEXT)}
-                ref={arrowNextRef}
-                className="slider__button slider__button--next slider__button--hidden"
-            >
-                <svg fill="#333333" viewBox="0 0 256 256" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-                    <g>
-                        <path d="M96,220a12,12,0,0,1-8.48535-20.48535L159.0293,128,87.51465,56.48535a12.0001,12.0001,0,0,1,16.9707-16.9707l80,80a12.00062,12.00062,0,0,1,0,16.9707l-80,80A11.96287,11.96287,0,0,1,96,220Z"></path>
-                    </g>
-                </svg>
-            </button>
+            { hideNavigationButtons === false && (
+                <>
+                    <PreviousButton onClick={() => navigate(NavigationDirection.PREV)} isHidden={prevArrowVisible === false}/>
+                    <NextButton onClick={() => navigate(NavigationDirection.NEXT)} isHidden={nextArrowVisible === false}/>
+                </>
+            )}
         </div>
     );
 };