Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

nuka-carousel

Package Overview
Dependencies
Maintainers
28
Versions
145
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuka-carousel - npm Package Compare versions

Comparing version 5.2.0 to 5.3.0

es/carousel.test.js
es/default-controls.test.js
es/utils.test.js
lib/carousel.test.d.ts
lib/carousel.test.d.ts.map
lib/carousel.test.js
lib/carousel.test.js.map
lib/default-controls.test.d.ts
lib/default-controls.test.d.ts.map
lib/default-controls.test.js
lib/default-controls.test.js.map
lib/utils.test.d.ts
lib/utils.test.d.ts.map
lib/utils.test.js
lib/utils.test.js.map

454

es/carousel.js

@@ -26,2 +26,4 @@ "use strict";

var _defaultControls = require("./default-controls");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -76,3 +78,3 @@

disableEdgeSwiping = props.disableEdgeSwiping,
dragging = props.dragging,
desktopDraggingEnabled = props.dragging,
propsDragThreshold = props.dragThreshold,

@@ -94,9 +96,14 @@ enableKeyboardControls = props.enableKeyboardControls,

style = props.style,
swiping = props.swiping,
mobileDraggingEnabled = props.swiping,
wrapAround = props.wrapAround,
zoomScale = props.zoomScale;
var count = _react["default"].Children.count(children);
var filteredSlides = _react["default"].Children.toArray(children).filter(Boolean);
var _useState = (0, _react.useState)(autoplayReverse ? count - slidesToShow : slideIndex),
var slideCount = filteredSlides.length;
var slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll;
var _useState = (0, _react.useState)(function () {
return (0, _utils.getDefaultSlideIndex)(slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode);
}),
_useState2 = _slicedToArray(_useState, 2),

@@ -108,4 +115,4 @@ currentSlide = _useState2[0],

_useState4 = _slicedToArray(_useState3, 2),
animationEnabled = _useState4[0],
setAnimationEnabled = _useState4[1];
isAnimating = _useState4[0],
setIsAnimating = _useState4[1];

@@ -124,20 +131,15 @@ var _useState5 = (0, _react.useState)(false),

_useState10 = _slicedToArray(_useState9, 2),
move = _useState10[0],
setMove = _useState10[1];
dragDistance = _useState10[0],
setDragDistance = _useState10[1];
var _useState11 = (0, _react.useState)(null),
_useState12 = _slicedToArray(_useState11, 2),
keyboardMove = _useState12[0],
setKeyboardMove = _useState12[1];
var carouselWidth = (0, _react.useRef)(null);
var focus = (0, _react.useRef)(false);
var prevMove = (0, _react.useRef)(0);
var carouselEl = (0, _react.useRef)(null);
var timer = (0, _react.useRef)(null);
var prevXPosition = (0, _react.useRef)(null);
var preDragOffset = (0, _react.useRef)(0);
var sliderListRef = (0, _react.useRef)(null);
var defaultCarouselRef = (0, _react.useRef)(null);
var autoplayTimeout = (0, _react.useRef)();
var autoplayLastTriggeredRef = (0, _react.useRef)(null);
var animationEndTimeout = (0, _react.useRef)();
var isMounted = (0, _react.useRef)(true);
var slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll;
var dragThreshold = (carouselWidth.current || 0) / slidesToShow * propsDragThreshold;
var _getIndexes = (0, _utils.getIndexes)(currentSlide, currentSlide - slidesToScroll, count),
var _getIndexes = (0, _utils.getIndexes)(currentSlide, currentSlide - slidesToScroll, slideCount),
_getIndexes2 = _slicedToArray(_getIndexes, 1),

@@ -158,217 +160,212 @@ slide = _getIndexes2[0];

}, []);
var carouselRef = innerRef || carouselEl;
var getNextIndex = (0, _react.useCallback)(function (to) {
var index = to !== null && to !== void 0 ? to : currentSlide;
var carouselRef = innerRef || defaultCarouselRef;
var goToSlide = (0, _react.useCallback)(function (targetSlideIndex) {
// Boil down the target index (-Infinity < targetSlideIndex < Infinity) to
// a user-friendly index (0 ≤ targetSlideIndex < slideCount)
var userFacingIndex = (targetSlideIndex % slideCount + slideCount) % slideCount;
var slideChanged = targetSlideIndex !== currentSlide;
slideChanged && beforeSlide(slide, userFacingIndex); // if animation is disabled decrease the speed to 40
if (index < 0) {
return index + count;
}
var msToEndOfAnimation = !disableAnimation ? propsSpeed || 500 : 40;
if (index === count) {
return 0;
if (!disableAnimation) {
setIsAnimating(true);
clearTimeout(animationEndTimeout.current);
animationEndTimeout.current = setTimeout(function () {
if (!isMounted.current) return;
setIsAnimating(false);
}, msToEndOfAnimation);
}
return index;
}, [count, currentSlide]);
var moveSlide = (0, _react.useCallback)(function (to) {
var nextIndex = getNextIndex(to);
typeof to === 'number' && beforeSlide(slide, nextIndex);
!disableAnimation && setAnimationEnabled(true);
if (typeof to === 'number') {
setCurrentSlide(to);
if (slideChanged) {
setCurrentSlide(targetSlideIndex);
setTimeout(function () {
if (!isMounted.current) return;
afterSlide(userFacingIndex);
}, msToEndOfAnimation);
}
}, [slide, afterSlide, beforeSlide, slideCount, currentSlide, disableAnimation, propsSpeed]);
var nextSlide = (0, _react.useCallback)(function () {
var nextSlideIndex = (0, _utils.getNextMoveIndex)(scrollMode, wrapAround, currentSlide, slideCount, propsSlidesToScroll, slidesToShow, cellAlign);
setTimeout(function () {
if (!isMounted.current) return;
typeof to === 'number' && afterSlide(nextIndex);
!disableAnimation && setAnimationEnabled(false);
}, !disableAnimation ? propsSpeed || 500 : 40); // if animation is disabled decrease the speed to 40
}, [slide, afterSlide, beforeSlide, disableAnimation, getNextIndex, propsSpeed]);
var nextSlide = (0, _react.useCallback)(function () {
if (wrapAround || currentSlide < count - propsSlidesToScroll) {
var nextPosition = (0, _utils.getNextMoveIndex)(scrollMode, wrapAround, currentSlide, count, propsSlidesToScroll, slidesToShow);
moveSlide(nextPosition);
if (currentSlide !== nextSlideIndex) {
goToSlide(nextSlideIndex);
}
}, [count, currentSlide, moveSlide, propsSlidesToScroll, scrollMode, wrapAround, slidesToShow]);
}, [cellAlign, currentSlide, goToSlide, propsSlidesToScroll, scrollMode, slideCount, slidesToShow, wrapAround]);
var prevSlide = (0, _react.useCallback)(function () {
// boundary
if (wrapAround || currentSlide > 0) {
var prevPosition = (0, _utils.getPrevMoveIndex)(scrollMode, wrapAround, currentSlide, propsSlidesToScroll);
moveSlide(prevPosition);
var prevSlideIndex = (0, _utils.getPrevMoveIndex)(scrollMode, wrapAround, currentSlide, propsSlidesToScroll, slidesToShow, cellAlign);
if (currentSlide !== prevSlideIndex) {
goToSlide(prevSlideIndex);
}
}, [currentSlide, moveSlide, propsSlidesToScroll, scrollMode, wrapAround]); // When user changed the slideIndex property from outside.
}, [cellAlign, currentSlide, goToSlide, propsSlidesToScroll, scrollMode, slidesToShow, wrapAround]); // When user changed the slideIndex property from outside.
var prevMovedToSlideIndex = (0, _react.useRef)(slideIndex);
(0, _react.useEffect)(function () {
if (slideIndex !== prevMovedToSlideIndex.current && !autoplayReverse) {
moveSlide(slideIndex);
if (slideIndex !== undefined && slideIndex !== prevMovedToSlideIndex.current && !autoplayReverse) {
goToSlide(slideIndex);
prevMovedToSlideIndex.current = slideIndex;
}
}, [slideIndex, currentSlide, autoplayReverse, moveSlide]); // Makes the carousel infinity when autoplay and wrapAround are enabled
}, [slideIndex, autoplayReverse, goToSlide]);
(0, _react.useEffect)(function () {
if (autoplay && !animationEnabled && wrapAround) {
if (currentSlide > count) {
setCurrentSlide(currentSlide - count);
var pauseStarted = null; // Keep track of when autoplay was paused so we can resume it with the same
// remaining time to the next slide transition
if (timer !== null && timer !== void 0 && timer.current) {
clearTimeout(timer.current);
}
} else if (currentSlide < 0) {
setCurrentSlide(count - -currentSlide);
if (pause) {
pauseStarted = Date.now();
}
if (timer !== null && timer !== void 0 && timer.current) {
clearTimeout(timer.current);
}
return function () {
if (pauseStarted !== null && autoplayLastTriggeredRef.current !== null) {
autoplayLastTriggeredRef.current += Date.now() - pauseStarted;
}
}
}, [animationEnabled, currentSlide, count, wrapAround, autoplay]);
};
}, [pause]);
(0, _react.useEffect)(function () {
if (autoplay && !pause) {
timer.current = setTimeout(function () {
// Adjust the timeout duration to account for changes that triggered the
// re-creation of this timeout, such as the currentSlide being changed
// periodically to make wrapAround loop forever
var adjustedTimeoutMs = autoplayLastTriggeredRef.current !== null ? autoplayInterval - (Date.now() - autoplayLastTriggeredRef.current) : autoplayInterval;
autoplayTimeout.current = setTimeout(function () {
autoplayLastTriggeredRef.current = Date.now();
if (autoplayReverse) {
if (!wrapAround && currentSlide > 0) {
prevSlide();
} else if (wrapAround) {
prevSlide();
}
} else if (!wrapAround && currentSlide < count - slidesToShow) {
prevSlide();
} else {
nextSlide();
} else if (wrapAround) {
nextSlide();
}
}, autoplayInterval);
}, adjustedTimeoutMs);
} // Clear the timeout if user hover on carousel
if (autoplay && pause && timer !== null && timer !== void 0 && timer.current) {
clearTimeout(timer.current);
if (autoplay && pause) {
clearTimeout(autoplayTimeout.current);
}
return function () {
if (timer.current) {
clearTimeout(timer.current);
}
clearTimeout(autoplayTimeout.current);
};
}, [currentSlide, slidesToShow, count, pause, autoplay, autoplayInterval, autoplayReverse, wrapAround, prevSlide, nextSlide]); // Makes the carousel infinity when wrapAround is enabled, but autoplay is disabled
}, [pause, autoplay, autoplayInterval, autoplayReverse, prevSlide, nextSlide]); // Makes the carousel infinity when wrapAround is enabled
(0, _react.useEffect)(function () {
var prevTimeout = null;
var nextTimeout = null;
if (wrapAround && !autoplay) {
// if animation is disabled decrease the speed to 0
var speed = !disableAnimation ? propsSpeed || 500 : 0;
if (wrapAround && !isAnimating && !isDragging) {
if (currentSlide <= -slidesToShow) {
// prev
prevTimeout = setTimeout(function () {
if (!isMounted.current) return;
setCurrentSlide(count - -currentSlide);
}, speed + 10);
} else if (currentSlide >= count) {
// next
nextTimeout = setTimeout(function () {
if (!isMounted.current) return;
setCurrentSlide(currentSlide - count);
}, speed + 10);
setCurrentSlide(slideCount - -currentSlide);
} else if (currentSlide >= slideCount) {
setCurrentSlide(currentSlide - slideCount);
}
}
}, [currentSlide, isAnimating, isDragging, slideCount, slidesToShow, wrapAround]);
return function cleanup() {
if (prevTimeout) {
clearTimeout(prevTimeout);
}
var onKeyDown = function onKeyDown(event) {
var keyCommand = null;
Object.keys(keyCodeConfig).forEach(function (command) {
var _keyCodeConfig$comman;
if (nextTimeout) {
clearTimeout(nextTimeout);
if ((_keyCodeConfig$comman = keyCodeConfig[command]) !== null && _keyCodeConfig$comman !== void 0 && _keyCodeConfig$comman.includes(event.keyCode)) {
keyCommand = command;
}
};
}, [currentSlide, autoplay, wrapAround, disableAnimation, propsSpeed, slidesToShow, count]);
(0, _react.useEffect)(function () {
if (enableKeyboardControls && keyboardMove && focus.current) {
switch (keyboardMove) {
case 'nextSlide':
nextSlide();
break;
});
if (keyCommand === null) return; // At this point we know some action is going to be triggered, so we
// preventDefault to avoid the browser interpreting the key event and
// stopPropagation to avoid any higher-up handlers from interpreting it.
case 'previousSlide':
prevSlide();
break;
event.preventDefault();
event.stopPropagation();
case 'firstSlide':
setCurrentSlide(0);
break;
switch (keyCommand) {
case 'nextSlide':
nextSlide();
break;
case 'lastSlide':
setCurrentSlide(count - slidesToShow);
break;
case 'previousSlide':
prevSlide();
break;
case 'pause':
if (pause && autoplay) {
setPause(false);
break;
} else if (autoplay) {
setPause(true);
break;
case 'firstSlide':
case 'lastSlide':
{
var dotIndices = (0, _defaultControls.getDotIndexes)(slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround, cellAlign);
if (keyCommand === 'firstSlide') {
goToSlide(dotIndices[0]);
} else {
goToSlide(dotIndices[dotIndices.length - 1]);
}
break;
}
}
setKeyboardMove(null);
case 'pause':
setPause(function (p) {
return !p;
});
break;
}
}, [keyboardMove, enableKeyboardControls, count, slidesToShow, pause, autoplay, nextSlide, prevSlide]);
var onKeyPress = (0, _react.useCallback)(function (e) {
if (enableKeyboardControls && focus.current && e.keyCode) {
var keyConfig = keyCodeConfig;
};
for (var func in keyConfig) {
var _keyConfig;
var dragPositions = (0, _react.useRef)([]);
if ((_keyConfig = keyConfig[func]) !== null && _keyConfig !== void 0 && _keyConfig.includes(e.keyCode)) {
setKeyboardMove(func);
}
var handleDragEnd = function handleDragEnd(e) {
if (!isDragging || !carouselRef.current) return;
setIsDragging(false); // Inertia calculation is used to allow quick flicks to scroll the carousel
// where they might not based on the start and end points of the gesture
// alone. In certain conditions, the inertia may also scroll the carousel
// several times.
var distanceFromInertia = 0;
if (dragPositions.current.length > 1) {
var startMove = dragPositions.current[0];
var endMove = dragPositions.current[dragPositions.current.length - 1];
var timeOffset = endMove.time - startMove.time;
var goodInertiaFeelConstant = 9;
var goodFrictionFeelConstant = 0.92;
var initialVelocity = goodInertiaFeelConstant * Math.abs((endMove.pos - startMove.pos) / timeOffset);
var velocity = initialVelocity;
while (Math.abs(velocity) > 1) {
distanceFromInertia += velocity;
velocity *= goodFrictionFeelConstant;
}
}
}, [enableKeyboardControls, keyCodeConfig]);
(0, _react.useEffect)(function () {
if (carouselEl && carouselEl.current) {
carouselWidth.current = carouselEl.current.offsetWidth;
} else if (innerRef) {
carouselWidth.current = innerRef.current.offsetWidth;
}
if (enableKeyboardControls) {
(0, _utils.addEvent)(document, 'keydown', onKeyPress);
}
return function () {
(0, _utils.removeEvent)(document, 'keydown', onKeyPress);
};
}, [enableKeyboardControls, innerRef, onKeyPress]);
var handleDragEnd = (0, _react.useCallback)(function (e) {
if (!dragging || !isDragging) return;
setIsDragging(false);
dragPositions.current = [];
var adjustedDragDistance = Math.abs(dragDistance) + Math.abs(distanceFromInertia);
onDragEnd(e);
prevXPosition.current = null;
setDragDistance(0);
var oneScrollWidth = carouselRef.current.offsetWidth * Math.min(1, slidesToScroll / slidesToShow);
var dragThreshold = oneScrollWidth * propsDragThreshold;
if (Math.abs(move) <= dragThreshold) {
moveSlide();
setMove(0);
prevMove.current = 0;
if (adjustedDragDistance < dragThreshold) {
goToSlide(currentSlide);
return;
}
} // If skipping over multiple slides at a time is still roughly trackable by
// your eyes, we allow for skipping multiple slides with a single gesture.
// This formula is just based off an observation that it is confusing to
// skip from slides 1 to 3 when only one slide is shown at a time, but
// skipping from 1 to 4 or so with two slides shown at a time is pulled-back
// enough that you can still roughly keep track of your place in the
// carousel.
if (move > 0) {
nextSlide();
} else {
prevSlide();
var canMaintainVisualContinuity = slidesToShow >= 2 * slidesToScroll;
var timesToMove = canMaintainVisualContinuity ? 1 + Math.floor((adjustedDragDistance - dragThreshold) / oneScrollWidth) : 1;
var nextSlideIndex = currentSlide;
for (var index = 0; index < timesToMove; index += 1) {
if (dragDistance > 0) {
nextSlideIndex = (0, _utils.getNextMoveIndex)(scrollMode, wrapAround, nextSlideIndex, slideCount, propsSlidesToScroll, slidesToShow, cellAlign);
} else {
nextSlideIndex = (0, _utils.getPrevMoveIndex)(scrollMode, wrapAround, nextSlideIndex, propsSlidesToScroll, slidesToShow, cellAlign);
}
}
setMove(0);
prevMove.current = 0;
}, [dragThreshold, isDragging, move, moveSlide, nextSlide, onDragEnd, prevSlide, dragging]);
goToSlide(nextSlideIndex);
};
var onTouchStart = (0, _react.useCallback)(function (e) {
if (!swiping) {
if (!mobileDraggingEnabled || !sliderListRef.current || !carouselRef.current) {
return;

@@ -378,53 +375,58 @@ }

setIsDragging(true);
preDragOffset.current = sliderListRef.current.getBoundingClientRect().left - carouselRef.current.getBoundingClientRect().left;
onDragStart(e);
}, [onDragStart, swiping]);
var handlePointerMove = (0, _react.useCallback)(function (m) {
if (!dragging || !isDragging) return;
var moveValue = m * 0.75; // Friction
}, [carouselRef, onDragStart, mobileDraggingEnabled]);
var handlePointerMove = (0, _react.useCallback)(function (xPosition) {
if (!isDragging) return;
var isFirstMove = prevXPosition.current === null;
var delta = prevXPosition.current !== null ? xPosition - prevXPosition.current : 0;
var nextDragDistance = dragDistance + delta;
var now = Date.now(); // Maintain a buffer of drag positions from the last 100ms
var moveState = move + (moveValue - prevMove.current); // Exit drag early if passed threshold
while (dragPositions.current.length > 0) {
if (now - dragPositions.current[0].time <= 100) {
break;
}
if (Math.abs(move) > dragThreshold) {
handleDragEnd();
return;
dragPositions.current.shift();
}
if (!wrapAround && disableEdgeSwiping && (currentSlide <= 0 && moveState <= 0 || moveState > 0 && currentSlide >= count - slidesToShow)) {
prevMove.current = moveValue;
return;
}
dragPositions.current.push({
pos: nextDragDistance,
time: now
});
if (prevMove.current !== 0) {
setMove(moveState);
if (!isFirstMove) {
// nextDragDistance will always be `0` on the first move event, so we
// skip it because the value is already set to 0 at this point
setDragDistance(nextDragDistance);
}
prevMove.current = moveValue;
}, [count, currentSlide, disableEdgeSwiping, dragThreshold, isDragging, handleDragEnd, move, dragging, slidesToShow, wrapAround]);
prevXPosition.current = xPosition;
}, [isDragging, dragDistance]);
var onTouchMove = (0, _react.useCallback)(function (e) {
if (!dragging || !isDragging) return;
if (!isDragging || !carouselRef.current) return;
onDragStart(e);
var moveValue = ((carouselWidth === null || carouselWidth === void 0 ? void 0 : carouselWidth.current) || 0) - e.touches[0].pageX;
var moveValue = carouselRef.current.offsetWidth - e.touches[0].pageX;
handlePointerMove(moveValue);
}, [dragging, isDragging, handlePointerMove, onDragStart]);
}, [isDragging, carouselRef, handlePointerMove, onDragStart]);
var onMouseDown = (0, _react.useCallback)(function (e) {
var _carouselRef$current;
if (!dragging) return;
carouselRef === null || carouselRef === void 0 ? void 0 : (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.focus();
if (!desktopDraggingEnabled || !sliderListRef.current || !carouselRef.current) return;
setIsDragging(true);
preDragOffset.current = sliderListRef.current.getBoundingClientRect().left - carouselRef.current.getBoundingClientRect().left;
onDragStart(e);
}, [carouselRef, dragging, onDragStart]);
}, [carouselRef, desktopDraggingEnabled, onDragStart]);
var onMouseMove = (0, _react.useCallback)(function (e) {
var _carouselRef$current2;
if (!dragging || !isDragging) return;
if (!isDragging || !carouselRef.current) return;
onDrag(e);
var offsetX = e.clientX - (((_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 ? void 0 : _carouselRef$current2.getBoundingClientRect().left) || 0);
var moveValue = ((carouselWidth === null || carouselWidth === void 0 ? void 0 : carouselWidth.current) || 0) - offsetX;
var offsetX = e.clientX - carouselRef.current.getBoundingClientRect().left;
var moveValue = carouselRef.current.offsetWidth - offsetX;
handlePointerMove(moveValue);
}, [carouselRef, isDragging, handlePointerMove, onDrag, dragging]);
var onMouseUp = (0, _react.useCallback)(function (e) {
e === null || e === void 0 ? void 0 : e.preventDefault();
}, [carouselRef, isDragging, handlePointerMove, onDrag]);
var onMouseUp = function onMouseUp(e) {
e.preventDefault();
handleDragEnd(e);
}, [handleDragEnd]);
};
var onMouseEnter = (0, _react.useCallback)(function () {

@@ -441,7 +443,3 @@ if (pauseOnHover) {

var _useFrameHeight = (0, _useFrameHeight2.useFrameHeight)({
adaptiveHeight: adaptiveHeight,
slidesToShow: slidesToShow,
numSlides: count
}),
var _useFrameHeight = (0, _useFrameHeight2.useFrameHeight)(adaptiveHeight, slidesToShow, slideCount),
frameHeight = _useFrameHeight.frameHeight,

@@ -452,7 +450,7 @@ handleVisibleSlideHeightChange = _useFrameHeight.handleVisibleSlideHeightChange,

var renderSlides = function renderSlides(typeOfSlide) {
var slides = _react["default"].Children.map(children, function (child, index) {
var isCurrentSlide = wrapAround ? currentSlide === index || currentSlide === index + count || currentSlide === index - count : currentSlide === index;
var slides = filteredSlides.map(function (child, index) {
var isCurrentSlide = wrapAround ? currentSlide === index || currentSlide === index + slideCount || currentSlide === index - slideCount : currentSlide === index;
return /*#__PURE__*/_react["default"].createElement(_slide["default"], {
key: "".concat(typeOfSlide, "-").concat(index),
count: count,
count: slideCount,
currentSlide: currentSlide,

@@ -474,3 +472,2 @@ index: index,

});
return slides;

@@ -490,5 +487,5 @@ };

currentSlide: slide,
count: count
count: slideCount
})
}), (0, _controls["default"])(props, count, currentSlide, moveSlide, nextSlide, prevSlide, slidesToScroll), /*#__PURE__*/_react["default"].createElement("div", {
}), (0, _controls["default"])(props, slideCount, currentSlide, goToSlide, nextSlide, prevSlide, slidesToScroll), /*#__PURE__*/_react["default"].createElement("div", {
className: ['slider-frame', className || ''].join(' ').trim(),

@@ -502,3 +499,4 @@ style: _objectSpread({

transition: adaptiveHeightAnimation ? 'height 300ms ease-in-out' : undefined,
willChange: 'height'
willChange: 'height',
userSelect: 'none'
}, style),

@@ -508,9 +506,4 @@ "aria-label": frameAriaLabel,

tabIndex: 0,
onFocus: function onFocus() {
return focus.current = true;
},
onBlur: function onBlur() {
return focus.current = false;
},
ref: innerRef || carouselEl,
onKeyDown: enableKeyboardControls ? onKeyDown : undefined,
ref: carouselRef,
onMouseUp: onMouseUp,

@@ -525,3 +518,4 @@ onMouseDown: onMouseDown,

className: "slider-list",
style: (0, _sliderList.getSliderListStyles)(children, currentSlide, animationEnabled, slidesToShow, cellAlign, wrapAround, propsSpeed, move, animation)
style: (0, _sliderList.getSliderListStyles)(slideCount, currentSlide, isAnimating, slidesToShow, cellAlign, wrapAround, propsSpeed, isDragging ? preDragOffset.current - dragDistance : 0, slidesToScroll, scrollMode, disableEdgeSwiping, animation),
ref: sliderListRef
}, wrapAround ? renderSlides('prev-cloned') : null, renderSlides(), wrapAround ? renderSlides('next-cloned') : null)));

@@ -528,0 +522,0 @@ };

16

es/controls.js

@@ -55,3 +55,3 @@ "use strict";

var renderControls = function renderControls(props, count, currentSlide, moveSlide, _nextSlide, prevSlide, slidesToScroll) {
var renderControls = function renderControls(props, slideCount, currentSlide, goToSlide, nextSlide, prevSlide, slidesToScroll) {
if (props.withoutControls) {

@@ -87,13 +87,7 @@ return null;

defaultControlsConfig: props.defaultControlsConfig || {},
goToSlide: function goToSlide(index) {
return moveSlide(index);
},
nextSlide: function nextSlide() {
return _nextSlide();
},
previousSlide: function previousSlide() {
return prevSlide();
},
goToSlide: goToSlide,
nextSlide: nextSlide,
previousSlide: prevSlide,
scrollMode: props.scrollMode,
slideCount: count,
slideCount: slideCount,
slidesToScroll: slidesToScroll,

@@ -100,0 +94,0 @@ slidesToShow: props.slidesToShow || 1,

1

es/default-carousel-props.js

@@ -64,3 +64,2 @@ "use strict";

scrollMode: _types.ScrollMode.page,
slideIndex: 0,
slidesToScroll: 1,

@@ -67,0 +66,0 @@ slidesToShow: 1,

129

es/default-controls.js

@@ -38,22 +38,22 @@ "use strict";

var currentSlide = _ref.currentSlide,
slideCount = _ref.slideCount,
slidesToShow = _ref.slidesToShow,
wrapAround = _ref.wrapAround;
wrapAround = _ref.wrapAround,
cellAlign = _ref.cellAlign,
slidesToShow = _ref.slidesToShow;
// inifite carousel with visible slides that are less than all slides
if (wrapAround && slidesToShow < slideCount) {
// inifite carousel
if (wrapAround) {
return false;
} // inifite carousel with visible slide equal or less than all slides
} // disable if displaying the leftmost slide
if (wrapAround) {
return false;
} // if the first slide is not visible return false (button is not disabled)
if (currentSlide === 0) {
return true;
} // remainder scroll mode
if (currentSlide !== 0) {
return false;
if (cellAlign === _types.Alignment.Right && currentSlide <= slidesToShow - 1) {
return true;
}
return true;
return false;
};

@@ -92,27 +92,21 @@

slidesToShow = _ref3.slidesToShow,
slidesToScroll = _ref3.slidesToScroll,
wrapAround = _ref3.wrapAround,
scrollMode = _ref3.scrollMode;
cellAlign = _ref3.cellAlign;
// remainder scroll mode
if (!wrapAround && scrollMode === _types.ScrollMode.remainder && currentSlide >= slideCount - slidesToShow) {
return true;
} // inifite carousel with visible slides that are less than all slides
if (wrapAround && slidesToShow < slideCount) {
// inifite carousel
if (wrapAround) {
return false;
} // inifite carousel with visible slide equal or less than all slides
} // If we are at the last possible slide without wrap, disable
if (wrapAround) {
return false;
} // if the last slide is not visible return false (button is not disabled)
if (currentSlide >= slideCount - 1) {
return true;
} // remainder scroll mode
if (currentSlide < slideCount - slidesToScroll) {
return false;
if (cellAlign === _types.Alignment.Left && currentSlide >= slideCount - slidesToShow) {
return true;
}
return true;
return false;
};

@@ -143,21 +137,80 @@

};
/**
* Calculate the indices that each dot will jump to when clicked
*/
exports.NextButton = NextButton;
var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround) {
var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround, cellAlign) {
var dotIndexes = [];
var scrollSlides = slidesToScroll === 0 ? 1 : slidesToScroll;
var scrollSlides = slidesToScroll <= 0 ? 1 : slidesToScroll;
for (var i = 0; i < slideCount; i += scrollSlides) {
if (!(!wrapAround && scrollMode === _types.ScrollMode.remainder && i > slideCount - slidesToShow)) {
if (wrapAround) {
for (var i = 0; i < slideCount; i += scrollSlides) {
dotIndexes.push(i);
}
} // check if the slidesToShow is float value, if true add the last dot (remainder scroll mode)
return dotIndexes;
}
if (!wrapAround && scrollMode === _types.ScrollMode.remainder && slidesToShow % 1 !== 0) {
var lastIndex = dotIndexes[dotIndexes.length - 1];
dotIndexes.push(lastIndex + slidesToShow % 1);
if (cellAlign === _types.Alignment.Center) {
for (var _i = 0; _i < slideCount - 1; _i += scrollSlides) {
dotIndexes.push(_i);
}
if (slideCount > 0) {
dotIndexes.push(slideCount - 1);
}
return dotIndexes;
}
if (cellAlign === _types.Alignment.Left) {
if (slidesToShow >= slideCount) {
return [0];
}
var lastPossibleIndexWithoutWhitespace = slideCount - slidesToShow;
for (var _i2 = 0; _i2 < lastPossibleIndexWithoutWhitespace; _i2 += scrollSlides) {
dotIndexes.push(_i2);
}
if (scrollMode === _types.ScrollMode.remainder) {
dotIndexes.push(lastPossibleIndexWithoutWhitespace);
} else {
dotIndexes.push(dotIndexes[dotIndexes.length - 1] + scrollSlides);
}
return dotIndexes;
}
if (cellAlign === _types.Alignment.Right) {
if (slidesToShow >= slideCount) {
return [slideCount - 1];
}
var firstPossibleIndexWithoutWhitespace = slidesToShow - 1;
if (scrollMode === _types.ScrollMode.remainder) {
for (var _i3 = firstPossibleIndexWithoutWhitespace; _i3 < slideCount - 1; _i3 += scrollSlides) {
dotIndexes.push(_i3);
}
dotIndexes.push(slideCount - 1);
} else {
for (var _i4 = slideCount - 1; _i4 > firstPossibleIndexWithoutWhitespace; _i4 -= scrollSlides) {
dotIndexes.push(_i4);
}
dotIndexes.push(dotIndexes[dotIndexes.length - 1] - scrollSlides);
dotIndexes.reverse();
}
return dotIndexes;
} // We should never reach this, because the if statements above cover all
// possible values of cellAlign
return dotIndexes;

@@ -186,5 +239,3 @@ };

}, []);
var indexes = (0, _react.useMemo)(function () {
return getDotIndexes(props.slideCount, props.slidesToScroll, props.scrollMode, props.slidesToShow, props.wrapAround);
}, [props.slideCount, props.slidesToScroll, props.scrollMode, props.slidesToShow, props.wrapAround]);
var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.scrollMode, props.slidesToShow, props.wrapAround, props.cellAlign);
var _props$defaultControl = props.defaultControlsConfig,

@@ -191,0 +242,0 @@ pagingDotsContainerClassName = _props$defaultControl.pagingDotsContainerClassName,

10

es/hooks/use-frame-height.js

@@ -47,7 +47,3 @@ "use strict";

*/
var useFrameHeight = function useFrameHeight(_ref) {
var adaptiveHeight = _ref.adaptiveHeight,
slidesToShow = _ref.slidesToShow,
numSlides = _ref.numSlides;
var useFrameHeight = function useFrameHeight(adaptiveHeight, slidesToShow, slideCount) {
var _useStateWithRef = (0, _useStateWithRef3.useStateWithRef)([]),

@@ -83,6 +79,6 @@ _useStateWithRef2 = _slicedToArray(_useStateWithRef, 3),

if (newVisibleHeights.length >= Math.min(numSlides, Math.ceil(slidesToShow))) {
if (newVisibleHeights.length >= Math.min(slideCount, Math.ceil(slidesToShow))) {
setInitializedAdaptiveHeight(true);
}
}, [numSlides, setVisibleHeights, slidesToShow, visibleHeightsRef]);
}, [slideCount, setVisibleHeights, slidesToShow, visibleHeightsRef]);
var frameHeight = (0, _react.useMemo)(function () {

@@ -89,0 +85,0 @@ if (adaptiveHeight) {

24

es/slide.js

@@ -12,3 +12,3 @@ "use strict";

var _types = require("./types");
var _utils = require("./utils");

@@ -57,22 +57,2 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

var isVisibleSlide = function isVisibleSlide(currentSlide, index, slidesToShow, cellAlign) {
if (slidesToShow === 1) {
return index === currentSlide;
}
if (cellAlign === _types.Alignment.Left) {
return index < currentSlide + slidesToShow && index >= currentSlide;
}
if (cellAlign === _types.Alignment.Center) {
return index >= currentSlide - slidesToShow / 2 && index <= currentSlide || index > currentSlide && index <= currentSlide + slidesToShow / 2;
}
if (cellAlign === _types.Alignment.Right) {
return index <= currentSlide && index > currentSlide - slidesToShow;
}
return false;
};
var generateIndex = function generateIndex(index, count, typeOfSlide) {

@@ -108,3 +88,3 @@ if (typeOfSlide === 'prev-cloned') {

var customIndex = wrapAround ? generateIndex(index, count, typeOfSlide) : index;
var isVisible = isVisibleSlide(currentSlide, customIndex, slidesToShow, cellAlign);
var isVisible = (0, _utils.isSlideVisible)(currentSlide, customIndex, slidesToShow, cellAlign);
var slideRef = (0, _react.useRef)(null);

@@ -111,0 +91,0 @@ var prevIsVisibleRef = (0, _react.useRef)(false);

69

es/slider-list.js

@@ -8,13 +8,11 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var _defaultControls = require("./default-controls");
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var getSliderListWidth = function getSliderListWidth(slideCount, slidesToShow, wrapAround) {
var visibleSlides = slidesToShow;
var getSliderListWidth = function getSliderListWidth(count, slidesToShow, wrapAround) {
var visibleSlides = slidesToShow || 1;
if (wrapAround) {
var _percentage = count * 100 / visibleSlides;
var _percentage = slideCount * 100 / visibleSlides;

@@ -24,10 +22,10 @@ return "".concat(3 * _percentage, "%");

var percentage = count * 100 / visibleSlides;
var percentage = slideCount * 100 / visibleSlides;
return "".concat(percentage, "%");
};
var getTransition = function getTransition(count, initialValue, currentSlide, cellAlign, wrapAround) {
var getPercentOffsetForSlide = function getPercentOffsetForSlide(slideCount, initialValue, currentSlide, cellAlign, wrapAround) {
if (cellAlign === _types.Alignment.Left) {
if (wrapAround) {
var _slideTransition = 100 / (3 * count);
var _slideTransition = 100 / (3 * slideCount);

@@ -38,7 +36,7 @@ var currentTransition = initialValue - _slideTransition * (currentSlide - 1);

var slideTransition = 100 / count * currentSlide;
var slideTransition = 100 / slideCount * currentSlide;
return -(slideTransition + initialValue);
} else if (cellAlign === _types.Alignment.Center) {
if (wrapAround) {
var _slideTransition3 = 100 / (3 * count);
var _slideTransition3 = 100 / (3 * slideCount);

@@ -50,3 +48,3 @@ var _currentTransition = initialValue - _slideTransition3 * (currentSlide - 1);

var _slideTransition2 = 100 / count * currentSlide;
var _slideTransition2 = 100 / slideCount * currentSlide;

@@ -56,3 +54,3 @@ return initialValue - _slideTransition2;

if (wrapAround) {
var _slideTransition5 = 100 / (3 * count);
var _slideTransition5 = 100 / (3 * slideCount);

@@ -64,3 +62,3 @@ var _currentTransition2 = initialValue - _slideTransition5 * (currentSlide - 1);

var _slideTransition4 = 100 / count * currentSlide;
var _slideTransition4 = 100 / slideCount * currentSlide;

@@ -73,7 +71,7 @@ return initialValue - _slideTransition4;

var getPositioning = function getPositioning(cellAlign, slidesToShow, count, currentSlide, wrapAround, move) {
var getPositioning = function getPositioning(cellAlign, slidesToShow, slideCount, currentSlide, wrapAround, draggedOffset, clampIndices) {
// When wrapAround is enabled, we show the slides 3 times
var totalCount = wrapAround ? 3 * count : count;
var totalCount = wrapAround ? 3 * slideCount : slideCount;
var slideSize = 100 / totalCount;
var initialValue = wrapAround ? -count * slideSize : 0;
var initialValue = wrapAround ? -slideCount * slideSize : 0;

@@ -93,22 +91,41 @@ if (cellAlign === _types.Alignment.Right && slidesToShow > 1) {

var horizontalMove = getTransition(count, initialValue, currentSlide, cellAlign, wrapAround); // Special-case this. It's better to return undefined rather than a
var slideBasedOffset = getPercentOffsetForSlide(slideCount, initialValue, currentSlide, cellAlign, wrapAround); // Special-case this. It's better to return undefined rather than a
// transform of 0 pixels since transforms can cause flickering in chrome.
if (move === 0 && horizontalMove === 0) {
if (draggedOffset === 0 && slideBasedOffset === 0) {
return undefined;
}
var draggableMove = move ? "calc(".concat(horizontalMove, "% - ").concat(move, "px)") : "".concat(horizontalMove, "%");
return "translate3d(".concat(draggableMove, ", 0, 0)");
var clampOffsets = null;
if (clampIndices) {
clampOffsets = clampIndices.map(function (index) {
return getPercentOffsetForSlide(slideCount, initialValue, index, cellAlign, wrapAround);
});
}
var clampedDraggedOffset = clampOffsets ? // Offsets are seemingly backwards because the rightmost slide creates
// the most negative translate value
"clamp(".concat(clampOffsets[1], "%, ").concat(draggedOffset, "px, ").concat(clampOffsets[0], "%)") : "".concat(draggedOffset, "px");
return "translate3d(".concat(draggedOffset ? clampedDraggedOffset : "".concat(slideBasedOffset, "%"), ", 0, 0)");
};
var getSliderListStyles = function getSliderListStyles(children, currentSlide, animation, slidesToShow, cellAlign, wrapAround, speed, move, slideAnimation) {
var count = _react["default"].Children.count(children);
var getSliderListStyles = function getSliderListStyles(slideCount, currentSlide, isAnimating, slidesToShow, cellAlign, wrapAround, speed, draggedOffset, slidesToScroll, scrollMode, disableEdgeSwiping, slideAnimation) {
var width = getSliderListWidth(slideCount, slidesToShow, wrapAround); // When disableEdgeSwiping=true, we recycle dot index generation to determine
// the leftmost and rightmost indices used, to be used in calculating the
// x-translation values we need to limit to.
var width = getSliderListWidth(count, slidesToShow, wrapAround);
var positioning = getPositioning(cellAlign || _types.Alignment.Left, slidesToShow || 1, count, currentSlide, wrapAround, move);
var clampIndices = null;
if (disableEdgeSwiping && !wrapAround) {
var dotIndexes = (0, _defaultControls.getDotIndexes)(slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround, cellAlign);
clampIndices = [dotIndexes[0], dotIndexes[dotIndexes.length - 1]];
}
var positioning = getPositioning(cellAlign, slidesToShow, slideCount, currentSlide, wrapAround, draggedOffset, clampIndices);
return {
width: width,
textAlign: 'left',
transition: animation && slideAnimation !== 'fade' ? "".concat(speed || 500, "ms ease 0s") : undefined,
userSelect: 'auto',
transition: draggedOffset === 0 && isAnimating && slideAnimation !== 'fade' ? "".concat(speed, "ms cubic-bezier(0.16, 1, 0.3, 1) 0s") : undefined,
transform: positioning,

@@ -115,0 +132,0 @@ display: 'flex'

93

es/utils.js

@@ -6,7 +6,9 @@ "use strict";

});
exports.removeEvent = exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.getIndexes = exports.addEvent = void 0;
exports.isSlideVisible = exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.getIndexes = exports.getDefaultSlideIndex = void 0;
var _defaultControls = require("./default-controls");
var _types = require("./types");
var getIndexes = function getIndexes(slide, endSlide, count) {
var getIndexes = function getIndexes(slide, endSlide, slideCount) {
var slideIndex = slide;

@@ -16,11 +18,11 @@ var endSlideIndex = endSlide;

if (slideIndex < 0) {
slideIndex += count;
} else if (slideIndex > count - 1) {
slideIndex -= count;
slideIndex += slideCount;
} else if (slideIndex > slideCount - 1) {
slideIndex -= slideCount;
}
if (endSlideIndex < 0) {
endSlideIndex += count;
} else if (endSlideIndex > count - 1) {
endSlideIndex -= count;
endSlideIndex += slideCount;
} else if (endSlideIndex > slideCount - 1) {
endSlideIndex -= slideCount;
}

@@ -33,45 +35,74 @@

var addEvent = function addEvent(elem, type, eventHandler) {
if (elem === null || typeof elem === 'undefined') {
return;
var isSlideVisible = function isSlideVisible(currentSlide, indexToCheck, slidesToShow, cellAlign) {
// The addition or subtraction of constants (1 , 0.5) in the following
// calculations are accounting for the fact that a slide will be visible even
// after the position associated with its index is off-screen. For example,
// with cellAlign="left", slidesToShow=1 and indexToCheck=0,
// if the currentSlide is set to 0.99, both (a sliver of) slide 0 and slide 1
// will be visible at the same time, even though the position we associate
// with index 0, its leftmost edge, is off-screen.
if (cellAlign === _types.Alignment.Left) {
return indexToCheck < currentSlide + slidesToShow && indexToCheck > currentSlide - 1;
}
if (elem.addEventListener) {
elem.addEventListener(type, eventHandler, false);
if (cellAlign === _types.Alignment.Center) {
return indexToCheck > currentSlide - slidesToShow / 2 - 0.5 && indexToCheck <= currentSlide || indexToCheck > currentSlide && indexToCheck < currentSlide + slidesToShow / 2 + 0.5;
}
if (cellAlign === _types.Alignment.Right) {
return indexToCheck < currentSlide + 1 && indexToCheck > currentSlide - slidesToShow;
}
return false;
};
exports.addEvent = addEvent;
exports.isSlideVisible = isSlideVisible;
var removeEvent = function removeEvent(elem, type, eventHandler) {
if (elem === null || typeof elem === 'undefined') {
return;
var getNextMoveIndex = function getNextMoveIndex(scrollMode, wrapAround, currentSlide, slideCount, slidesToScroll, slidesToShow, cellAlign) {
if (wrapAround) {
return currentSlide + slidesToScroll;
} // Quit early if we're already as far right as we can go
if (currentSlide >= slideCount - 1 || cellAlign === _types.Alignment.Left && currentSlide >= slideCount - slidesToShow) {
return currentSlide;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, eventHandler, false);
if (scrollMode === _types.ScrollMode.remainder && cellAlign === _types.Alignment.Left) {
return Math.min(currentSlide + slidesToScroll, slideCount - slidesToShow);
}
return Math.min(currentSlide + slidesToScroll, slideCount - 1);
};
exports.removeEvent = removeEvent;
exports.getNextMoveIndex = getNextMoveIndex;
var getNextMoveIndex = function getNextMoveIndex(scrollMode, wrapAround, currentSlide, count, slidesToScroll, slidesToShow) {
if (!wrapAround && scrollMode === _types.ScrollMode.remainder && count < currentSlide + (slidesToScroll + slidesToShow)) {
var remindedSlides = count - (currentSlide + slidesToScroll) - (slidesToShow - slidesToScroll);
return currentSlide + remindedSlides;
var getPrevMoveIndex = function getPrevMoveIndex(scrollMode, wrapAround, currentSlide, slidesToScroll, slidesToShow, cellAlign) {
if (wrapAround) {
return currentSlide - slidesToScroll;
} // Quit early if we're already as far left as we can go
if (currentSlide <= 0 || cellAlign === _types.Alignment.Right && currentSlide <= slidesToShow - 1) {
return currentSlide;
}
return currentSlide + slidesToScroll;
if (scrollMode === _types.ScrollMode.remainder && cellAlign === _types.Alignment.Right) {
return Math.max(currentSlide - slidesToScroll, slidesToShow - 1);
}
return Math.max(currentSlide - slidesToScroll, 0);
};
exports.getNextMoveIndex = getNextMoveIndex;
exports.getPrevMoveIndex = getPrevMoveIndex;
var getPrevMoveIndex = function getPrevMoveIndex(scrollMode, wrapAround, currentSlide, slidesToScroll) {
if (!wrapAround && scrollMode === _types.ScrollMode.remainder && currentSlide - slidesToScroll < 0) {
return 0;
var getDefaultSlideIndex = function getDefaultSlideIndex(slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode) {
if (slideIndex !== undefined) {
return slideIndex;
}
return currentSlide - slidesToScroll;
var dotIndexes = (0, _defaultControls.getDotIndexes)(slideCount, slidesToScroll, scrollMode, slidesToShow, false, cellAlign);
return autoplayReverse ? dotIndexes[dotIndexes.length - 1] : dotIndexes[0];
};
exports.getPrevMoveIndex = getPrevMoveIndex;
exports.getDefaultSlideIndex = getDefaultSlideIndex;

4

lib/announce-slide.d.ts
import React, { AriaAttributes } from 'react';
declare const AnnounceSlide: ({ message, ariaLive }: {
declare const AnnounceSlide: ({ message, ariaLive, }: {
message: string;
ariaLive: AriaAttributes['aria-live'];
}) => React.ReactElement;
export declare const defaultRenderAnnounceSlideMessage: ({ currentSlide, count }: {
export declare const defaultRenderAnnounceSlideMessage: ({ currentSlide, count, }: {
currentSlide: number;

@@ -8,0 +8,0 @@ count: number;

6

lib/announce-slide.js

@@ -14,8 +14,8 @@ "use strict";

whiteSpace: 'nowrap',
border: 0
border: 0,
};
const AnnounceSlide = ({ message, ariaLive = 'polite' }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-live": ariaLive, "aria-atomic": "true", style: styles, tabIndex: -1 }, { children: message })));
const defaultRenderAnnounceSlideMessage = ({ currentSlide, count }) => `Slide ${currentSlide + 1} of ${count}`;
const AnnounceSlide = ({ message, ariaLive = 'polite', }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-live": ariaLive, "aria-atomic": "true", style: styles, tabIndex: -1 }, { children: message })));
const defaultRenderAnnounceSlideMessage = ({ currentSlide, count, }) => `Slide ${currentSlide + 1} of ${count}`;
exports.defaultRenderAnnounceSlideMessage = defaultRenderAnnounceSlideMessage;
exports.default = AnnounceSlide;
//# sourceMappingURL=announce-slide.js.map

510

lib/carousel.js

@@ -39,2 +39,3 @@ "use strict";

const use_frame_height_1 = require("./hooks/use-frame-height");
const default_controls_1 = require("./default-controls");
const Carousel = (rawProps) => {

@@ -51,19 +52,20 @@ /**

const props = rawProps;
const { adaptiveHeight, adaptiveHeightAnimation, afterSlide, animation, autoplay, autoplayInterval, autoplayReverse, beforeSlide, cellAlign, cellSpacing, children, className, disableAnimation, disableEdgeSwiping, dragging, dragThreshold: propsDragThreshold, enableKeyboardControls, frameAriaLabel, innerRef, keyCodeConfig, onDrag, onDragEnd, onDragStart, pauseOnHover, renderAnnounceSlideMessage, scrollMode, slideIndex, slidesToScroll: propsSlidesToScroll, slidesToShow, speed: propsSpeed, style, swiping, wrapAround, zoomScale } = props;
const count = react_1.default.Children.count(children);
const [currentSlide, setCurrentSlide] = (0, react_1.useState)(autoplayReverse ? count - slidesToShow : slideIndex);
const [animationEnabled, setAnimationEnabled] = (0, react_1.useState)(false);
const { adaptiveHeight, adaptiveHeightAnimation, afterSlide, animation, autoplay, autoplayInterval, autoplayReverse, beforeSlide, cellAlign, cellSpacing, children, className, disableAnimation, disableEdgeSwiping, dragging: desktopDraggingEnabled, dragThreshold: propsDragThreshold, enableKeyboardControls, frameAriaLabel, innerRef, keyCodeConfig, onDrag, onDragEnd, onDragStart, pauseOnHover, renderAnnounceSlideMessage, scrollMode, slideIndex, slidesToScroll: propsSlidesToScroll, slidesToShow, speed: propsSpeed, style, swiping: mobileDraggingEnabled, wrapAround, zoomScale, } = props;
const filteredSlides = react_1.default.Children.toArray(children).filter(Boolean);
const slideCount = filteredSlides.length;
const slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll;
const [currentSlide, setCurrentSlide] = (0, react_1.useState)(() => (0, utils_1.getDefaultSlideIndex)(slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode));
const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
const [pause, setPause] = (0, react_1.useState)(false);
const [isDragging, setIsDragging] = (0, react_1.useState)(false);
const [move, setMove] = (0, react_1.useState)(0);
const [keyboardMove, setKeyboardMove] = (0, react_1.useState)(null);
const carouselWidth = (0, react_1.useRef)(null);
const focus = (0, react_1.useRef)(false);
const prevMove = (0, react_1.useRef)(0);
const carouselEl = (0, react_1.useRef)(null);
const timer = (0, react_1.useRef)(null);
const [dragDistance, setDragDistance] = (0, react_1.useState)(0);
const prevXPosition = (0, react_1.useRef)(null);
const preDragOffset = (0, react_1.useRef)(0);
const sliderListRef = (0, react_1.useRef)(null);
const defaultCarouselRef = (0, react_1.useRef)(null);
const autoplayTimeout = (0, react_1.useRef)();
const autoplayLastTriggeredRef = (0, react_1.useRef)(null);
const animationEndTimeout = (0, react_1.useRef)();
const isMounted = (0, react_1.useRef)(true);
const slidesToScroll = animation === 'fade' ? slidesToShow : propsSlidesToScroll;
const dragThreshold = ((carouselWidth.current || 0) / slidesToShow) * propsDragThreshold;
const [slide] = (0, utils_1.getIndexes)(currentSlide, currentSlide - slidesToScroll, count);
const [slide] = (0, utils_1.getIndexes)(currentSlide, currentSlide - slidesToScroll, slideCount);
(0, react_1.useEffect)(() => {

@@ -81,105 +83,115 @@ isMounted.current = true;

}, []);
const carouselRef = innerRef || carouselEl;
const getNextIndex = (0, react_1.useCallback)((to) => {
const index = to !== null && to !== void 0 ? to : currentSlide;
if (index < 0) {
return index + count;
const carouselRef = innerRef || defaultCarouselRef;
const goToSlide = (0, react_1.useCallback)((targetSlideIndex) => {
// Boil down the target index (-Infinity < targetSlideIndex < Infinity) to
// a user-friendly index (0 ≤ targetSlideIndex < slideCount)
const userFacingIndex = ((targetSlideIndex % slideCount) + slideCount) % slideCount;
const slideChanged = targetSlideIndex !== currentSlide;
slideChanged && beforeSlide(slide, userFacingIndex);
// if animation is disabled decrease the speed to 40
const msToEndOfAnimation = !disableAnimation ? propsSpeed || 500 : 40;
if (!disableAnimation) {
setIsAnimating(true);
clearTimeout(animationEndTimeout.current);
animationEndTimeout.current = setTimeout(() => {
if (!isMounted.current)
return;
setIsAnimating(false);
}, msToEndOfAnimation);
}
if (index === count) {
return 0;
if (slideChanged) {
setCurrentSlide(targetSlideIndex);
setTimeout(() => {
if (!isMounted.current)
return;
afterSlide(userFacingIndex);
}, msToEndOfAnimation);
}
return index;
}, [count, currentSlide]);
const moveSlide = (0, react_1.useCallback)((to) => {
const nextIndex = getNextIndex(to);
typeof to === 'number' && beforeSlide(slide, nextIndex);
!disableAnimation && setAnimationEnabled(true);
if (typeof to === 'number') {
setCurrentSlide(to);
}
setTimeout(() => {
if (!isMounted.current)
return;
typeof to === 'number' && afterSlide(nextIndex);
!disableAnimation && setAnimationEnabled(false);
}, !disableAnimation ? propsSpeed || 500 : 40); // if animation is disabled decrease the speed to 40
}, [slide, afterSlide, beforeSlide, disableAnimation, getNextIndex, propsSpeed]);
}, [
slide,
afterSlide,
beforeSlide,
slideCount,
currentSlide,
disableAnimation,
propsSpeed,
]);
const nextSlide = (0, react_1.useCallback)(() => {
if (wrapAround || currentSlide < count - propsSlidesToScroll) {
const nextPosition = (0, utils_1.getNextMoveIndex)(scrollMode, wrapAround, currentSlide, count, propsSlidesToScroll, slidesToShow);
moveSlide(nextPosition);
const nextSlideIndex = (0, utils_1.getNextMoveIndex)(scrollMode, wrapAround, currentSlide, slideCount, propsSlidesToScroll, slidesToShow, cellAlign);
if (currentSlide !== nextSlideIndex) {
goToSlide(nextSlideIndex);
}
}, [
count,
cellAlign,
currentSlide,
moveSlide,
goToSlide,
propsSlidesToScroll,
scrollMode,
slideCount,
slidesToShow,
wrapAround,
slidesToShow
]);
const prevSlide = (0, react_1.useCallback)(() => {
// boundary
if (wrapAround || currentSlide > 0) {
const prevPosition = (0, utils_1.getPrevMoveIndex)(scrollMode, wrapAround, currentSlide, propsSlidesToScroll);
moveSlide(prevPosition);
const prevSlideIndex = (0, utils_1.getPrevMoveIndex)(scrollMode, wrapAround, currentSlide, propsSlidesToScroll, slidesToShow, cellAlign);
if (currentSlide !== prevSlideIndex) {
goToSlide(prevSlideIndex);
}
}, [currentSlide, moveSlide, propsSlidesToScroll, scrollMode, wrapAround]);
}, [
cellAlign,
currentSlide,
goToSlide,
propsSlidesToScroll,
scrollMode,
slidesToShow,
wrapAround,
]);
// When user changed the slideIndex property from outside.
const prevMovedToSlideIndex = (0, react_1.useRef)(slideIndex);
(0, react_1.useEffect)(() => {
if (slideIndex !== prevMovedToSlideIndex.current && !autoplayReverse) {
moveSlide(slideIndex);
if (slideIndex !== undefined &&
slideIndex !== prevMovedToSlideIndex.current &&
!autoplayReverse) {
goToSlide(slideIndex);
prevMovedToSlideIndex.current = slideIndex;
}
}, [slideIndex, currentSlide, autoplayReverse, moveSlide]);
// Makes the carousel infinity when autoplay and wrapAround are enabled
}, [slideIndex, autoplayReverse, goToSlide]);
(0, react_1.useEffect)(() => {
if (autoplay && !animationEnabled && wrapAround) {
if (currentSlide > count) {
setCurrentSlide(currentSlide - count);
if (timer === null || timer === void 0 ? void 0 : timer.current) {
clearTimeout(timer.current);
}
let pauseStarted = null;
// Keep track of when autoplay was paused so we can resume it with the same
// remaining time to the next slide transition
if (pause) {
pauseStarted = Date.now();
}
return () => {
if (pauseStarted !== null && autoplayLastTriggeredRef.current !== null) {
autoplayLastTriggeredRef.current += Date.now() - pauseStarted;
}
else if (currentSlide < 0) {
setCurrentSlide(count - -currentSlide);
if (timer === null || timer === void 0 ? void 0 : timer.current) {
clearTimeout(timer.current);
}
}
}
}, [animationEnabled, currentSlide, count, wrapAround, autoplay]);
};
}, [pause]);
(0, react_1.useEffect)(() => {
if (autoplay && !pause) {
timer.current = setTimeout(() => {
// Adjust the timeout duration to account for changes that triggered the
// re-creation of this timeout, such as the currentSlide being changed
// periodically to make wrapAround loop forever
const adjustedTimeoutMs = autoplayLastTriggeredRef.current !== null
? autoplayInterval - (Date.now() - autoplayLastTriggeredRef.current)
: autoplayInterval;
autoplayTimeout.current = setTimeout(() => {
autoplayLastTriggeredRef.current = Date.now();
if (autoplayReverse) {
if (!wrapAround && currentSlide > 0) {
prevSlide();
}
else if (wrapAround) {
prevSlide();
}
prevSlide();
}
else if (!wrapAround && currentSlide < count - slidesToShow) {
else {
nextSlide();
}
else if (wrapAround) {
nextSlide();
}
}, autoplayInterval);
}, adjustedTimeoutMs);
}
// Clear the timeout if user hover on carousel
if (autoplay && pause && (timer === null || timer === void 0 ? void 0 : timer.current)) {
clearTimeout(timer.current);
if (autoplay && pause) {
clearTimeout(autoplayTimeout.current);
}
return () => {
if (timer.current) {
clearTimeout(timer.current);
}
clearTimeout(autoplayTimeout.current);
};
}, [
currentSlide,
slidesToShow,
count,
pause,

@@ -189,209 +201,183 @@ autoplay,

autoplayReverse,
wrapAround,
prevSlide,
nextSlide
nextSlide,
]);
// Makes the carousel infinity when wrapAround is enabled, but autoplay is disabled
// Makes the carousel infinity when wrapAround is enabled
(0, react_1.useEffect)(() => {
let prevTimeout = null;
let nextTimeout = null;
if (wrapAround && !autoplay) {
// if animation is disabled decrease the speed to 0
const speed = !disableAnimation ? propsSpeed || 500 : 0;
if (wrapAround && !isAnimating && !isDragging) {
if (currentSlide <= -slidesToShow) {
// prev
prevTimeout = setTimeout(() => {
if (!isMounted.current)
return;
setCurrentSlide(count - -currentSlide);
}, speed + 10);
setCurrentSlide(slideCount - -currentSlide);
}
else if (currentSlide >= count) {
// next
nextTimeout = setTimeout(() => {
if (!isMounted.current)
return;
setCurrentSlide(currentSlide - count);
}, speed + 10);
else if (currentSlide >= slideCount) {
setCurrentSlide(currentSlide - slideCount);
}
}
return function cleanup() {
if (prevTimeout) {
clearTimeout(prevTimeout);
}
if (nextTimeout) {
clearTimeout(nextTimeout);
}
};
}, [
currentSlide,
autoplay,
isAnimating,
isDragging,
slideCount,
slidesToShow,
wrapAround,
disableAnimation,
propsSpeed,
slidesToShow,
count
]);
(0, react_1.useEffect)(() => {
if (enableKeyboardControls && keyboardMove && focus.current) {
switch (keyboardMove) {
case 'nextSlide':
nextSlide();
break;
case 'previousSlide':
prevSlide();
break;
case 'firstSlide':
setCurrentSlide(0);
break;
case 'lastSlide':
setCurrentSlide(count - slidesToShow);
break;
case 'pause':
if (pause && autoplay) {
setPause(false);
break;
}
else if (autoplay) {
setPause(true);
break;
}
break;
const onKeyDown = (event) => {
let keyCommand = null;
Object.keys(keyCodeConfig).forEach((command) => {
var _a;
if ((_a = keyCodeConfig[command]) === null || _a === void 0 ? void 0 : _a.includes(event.keyCode)) {
keyCommand = command;
}
setKeyboardMove(null);
}
}, [
keyboardMove,
enableKeyboardControls,
count,
slidesToShow,
pause,
autoplay,
nextSlide,
prevSlide
]);
const onKeyPress = (0, react_1.useCallback)((e) => {
var _a;
if (enableKeyboardControls &&
focus.current &&
e.keyCode) {
const keyConfig = keyCodeConfig;
for (const func in keyConfig) {
if ((_a = keyConfig[func]) === null || _a === void 0 ? void 0 : _a.includes(e.keyCode)) {
setKeyboardMove(func);
});
if (keyCommand === null)
return;
// At this point we know some action is going to be triggered, so we
// preventDefault to avoid the browser interpreting the key event and
// stopPropagation to avoid any higher-up handlers from interpreting it.
event.preventDefault();
event.stopPropagation();
switch (keyCommand) {
case 'nextSlide':
nextSlide();
break;
case 'previousSlide':
prevSlide();
break;
case 'firstSlide':
case 'lastSlide': {
const dotIndices = (0, default_controls_1.getDotIndexes)(slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround, cellAlign);
if (keyCommand === 'firstSlide') {
goToSlide(dotIndices[0]);
}
else {
goToSlide(dotIndices[dotIndices.length - 1]);
}
break;
}
case 'pause':
setPause((p) => !p);
break;
}
}, [enableKeyboardControls, keyCodeConfig]);
(0, react_1.useEffect)(() => {
if (carouselEl && carouselEl.current) {
carouselWidth.current = carouselEl.current.offsetWidth;
}
else if (innerRef) {
carouselWidth.current = innerRef.current.offsetWidth;
}
if (enableKeyboardControls) {
(0, utils_1.addEvent)(document, 'keydown', onKeyPress);
}
return () => {
(0, utils_1.removeEvent)(document, 'keydown', onKeyPress);
};
}, [enableKeyboardControls, innerRef, onKeyPress]);
const handleDragEnd = (0, react_1.useCallback)((e) => {
if (!dragging || !isDragging)
};
const dragPositions = (0, react_1.useRef)([]);
const handleDragEnd = (e) => {
if (!isDragging || !carouselRef.current)
return;
setIsDragging(false);
// Inertia calculation is used to allow quick flicks to scroll the carousel
// where they might not based on the start and end points of the gesture
// alone. In certain conditions, the inertia may also scroll the carousel
// several times.
let distanceFromInertia = 0;
if (dragPositions.current.length > 1) {
const startMove = dragPositions.current[0];
const endMove = dragPositions.current[dragPositions.current.length - 1];
const timeOffset = endMove.time - startMove.time;
const goodInertiaFeelConstant = 9;
const goodFrictionFeelConstant = 0.92;
const initialVelocity = goodInertiaFeelConstant *
Math.abs((endMove.pos - startMove.pos) / timeOffset);
let velocity = initialVelocity;
while (Math.abs(velocity) > 1) {
distanceFromInertia += velocity;
velocity *= goodFrictionFeelConstant;
}
}
dragPositions.current = [];
const adjustedDragDistance = Math.abs(dragDistance) + Math.abs(distanceFromInertia);
onDragEnd(e);
if (Math.abs(move) <= dragThreshold) {
moveSlide();
setMove(0);
prevMove.current = 0;
prevXPosition.current = null;
setDragDistance(0);
const oneScrollWidth = carouselRef.current.offsetWidth *
Math.min(1, slidesToScroll / slidesToShow);
const dragThreshold = oneScrollWidth * propsDragThreshold;
if (adjustedDragDistance < dragThreshold) {
goToSlide(currentSlide);
return;
}
if (move > 0) {
nextSlide();
// If skipping over multiple slides at a time is still roughly trackable by
// your eyes, we allow for skipping multiple slides with a single gesture.
// This formula is just based off an observation that it is confusing to
// skip from slides 1 to 3 when only one slide is shown at a time, but
// skipping from 1 to 4 or so with two slides shown at a time is pulled-back
// enough that you can still roughly keep track of your place in the
// carousel.
const canMaintainVisualContinuity = slidesToShow >= 2 * slidesToScroll;
const timesToMove = canMaintainVisualContinuity
? 1 + Math.floor((adjustedDragDistance - dragThreshold) / oneScrollWidth)
: 1;
let nextSlideIndex = currentSlide;
for (let index = 0; index < timesToMove; index += 1) {
if (dragDistance > 0) {
nextSlideIndex = (0, utils_1.getNextMoveIndex)(scrollMode, wrapAround, nextSlideIndex, slideCount, propsSlidesToScroll, slidesToShow, cellAlign);
}
else {
nextSlideIndex = (0, utils_1.getPrevMoveIndex)(scrollMode, wrapAround, nextSlideIndex, propsSlidesToScroll, slidesToShow, cellAlign);
}
}
else {
prevSlide();
}
setMove(0);
prevMove.current = 0;
}, [
dragThreshold,
isDragging,
move,
moveSlide,
nextSlide,
onDragEnd,
prevSlide,
dragging
]);
goToSlide(nextSlideIndex);
};
const onTouchStart = (0, react_1.useCallback)((e) => {
if (!swiping) {
if (!mobileDraggingEnabled ||
!sliderListRef.current ||
!carouselRef.current) {
return;
}
setIsDragging(true);
preDragOffset.current =
sliderListRef.current.getBoundingClientRect().left -
carouselRef.current.getBoundingClientRect().left;
onDragStart(e);
}, [onDragStart, swiping]);
const handlePointerMove = (0, react_1.useCallback)((m) => {
if (!dragging || !isDragging)
}, [carouselRef, onDragStart, mobileDraggingEnabled]);
const handlePointerMove = (0, react_1.useCallback)((xPosition) => {
if (!isDragging)
return;
const moveValue = m * 0.75; // Friction
const moveState = move + (moveValue - prevMove.current);
// Exit drag early if passed threshold
if (Math.abs(move) > dragThreshold) {
handleDragEnd();
return;
const isFirstMove = prevXPosition.current === null;
const delta = prevXPosition.current !== null ? xPosition - prevXPosition.current : 0;
const nextDragDistance = dragDistance + delta;
const now = Date.now();
// Maintain a buffer of drag positions from the last 100ms
while (dragPositions.current.length > 0) {
if (now - dragPositions.current[0].time <= 100) {
break;
}
dragPositions.current.shift();
}
if (!wrapAround &&
disableEdgeSwiping &&
((currentSlide <= 0 && moveState <= 0) ||
(moveState > 0 && currentSlide >= count - slidesToShow))) {
prevMove.current = moveValue;
return;
dragPositions.current.push({ pos: nextDragDistance, time: now });
if (!isFirstMove) {
// nextDragDistance will always be `0` on the first move event, so we
// skip it because the value is already set to 0 at this point
setDragDistance(nextDragDistance);
}
if (prevMove.current !== 0) {
setMove(moveState);
}
prevMove.current = moveValue;
}, [
count,
currentSlide,
disableEdgeSwiping,
dragThreshold,
isDragging,
handleDragEnd,
move,
dragging,
slidesToShow,
wrapAround
]);
prevXPosition.current = xPosition;
}, [isDragging, dragDistance]);
const onTouchMove = (0, react_1.useCallback)((e) => {
if (!dragging || !isDragging)
if (!isDragging || !carouselRef.current)
return;
onDragStart(e);
const moveValue = ((carouselWidth === null || carouselWidth === void 0 ? void 0 : carouselWidth.current) || 0) - e.touches[0].pageX;
const moveValue = carouselRef.current.offsetWidth - e.touches[0].pageX;
handlePointerMove(moveValue);
}, [dragging, isDragging, handlePointerMove, onDragStart]);
}, [isDragging, carouselRef, handlePointerMove, onDragStart]);
const onMouseDown = (0, react_1.useCallback)((e) => {
var _a;
if (!dragging)
if (!desktopDraggingEnabled ||
!sliderListRef.current ||
!carouselRef.current)
return;
(_a = carouselRef === null || carouselRef === void 0 ? void 0 : carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus();
setIsDragging(true);
preDragOffset.current =
sliderListRef.current.getBoundingClientRect().left -
carouselRef.current.getBoundingClientRect().left;
onDragStart(e);
}, [carouselRef, dragging, onDragStart]);
}, [carouselRef, desktopDraggingEnabled, onDragStart]);
const onMouseMove = (0, react_1.useCallback)((e) => {
var _a;
if (!dragging || !isDragging)
if (!isDragging || !carouselRef.current)
return;
onDrag(e);
const offsetX = e.clientX - (((_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0);
const moveValue = ((carouselWidth === null || carouselWidth === void 0 ? void 0 : carouselWidth.current) || 0) - offsetX;
const offsetX = e.clientX - carouselRef.current.getBoundingClientRect().left;
const moveValue = carouselRef.current.offsetWidth - offsetX;
handlePointerMove(moveValue);
}, [carouselRef, isDragging, handlePointerMove, onDrag, dragging]);
const onMouseUp = (0, react_1.useCallback)((e) => {
e === null || e === void 0 ? void 0 : e.preventDefault();
}, [carouselRef, isDragging, handlePointerMove, onDrag]);
const onMouseUp = (e) => {
e.preventDefault();
handleDragEnd(e);
}, [handleDragEnd]);
};
const onMouseEnter = (0, react_1.useCallback)(() => {

@@ -407,15 +393,11 @@ if (pauseOnHover) {

}, [pauseOnHover]);
const { frameHeight, handleVisibleSlideHeightChange, initializedAdaptiveHeight } = (0, use_frame_height_1.useFrameHeight)({
adaptiveHeight,
slidesToShow,
numSlides: count
});
const { frameHeight, handleVisibleSlideHeightChange, initializedAdaptiveHeight, } = (0, use_frame_height_1.useFrameHeight)(adaptiveHeight, slidesToShow, slideCount);
const renderSlides = (typeOfSlide) => {
const slides = react_1.default.Children.map(children, (child, index) => {
const slides = filteredSlides.map((child, index) => {
const isCurrentSlide = wrapAround
? currentSlide === index ||
currentSlide === index + count ||
currentSlide === index - count
currentSlide === index + slideCount ||
currentSlide === index - slideCount
: currentSlide === index;
return ((0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ count: count, currentSlide: currentSlide, index: index, isCurrentSlide: isCurrentSlide, typeOfSlide: typeOfSlide, wrapAround: wrapAround, cellSpacing: cellSpacing, animation: animation, slidesToShow: slidesToShow, speed: propsSpeed, zoomScale: zoomScale, cellAlign: cellAlign, onVisibleSlideHeightChange: handleVisibleSlideHeightChange, adaptiveHeight: adaptiveHeight, initializedAdaptiveHeight: initializedAdaptiveHeight }, { children: child }), `${typeOfSlide}-${index}`));
return ((0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ count: slideCount, currentSlide: currentSlide, index: index, isCurrentSlide: isCurrentSlide, typeOfSlide: typeOfSlide, wrapAround: wrapAround, cellSpacing: cellSpacing, animation: animation, slidesToShow: slidesToShow, speed: propsSpeed, zoomScale: zoomScale, cellAlign: cellAlign, onVisibleSlideHeightChange: handleVisibleSlideHeightChange, adaptiveHeight: adaptiveHeight, initializedAdaptiveHeight: initializedAdaptiveHeight }, { children: child }), `${typeOfSlide}-${index}`));
});

@@ -425,9 +407,9 @@ return slides;

return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'slider-container', style: {
position: 'relative'
position: 'relative',
}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: [(0, jsx_runtime_1.jsx)(announce_slide_1.default, { ariaLive: autoplay && !pause ? 'off' : 'polite', message: renderAnnounceSlideMessage({
currentSlide: slide,
count
}) }), (0, controls_1.default)(props, count, currentSlide, moveSlide, nextSlide, prevSlide, slidesToScroll), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: ['slider-frame', className || ''].join(' ').trim(), style: Object.assign({ overflow: 'hidden', width: '100%', position: 'relative', outline: 'none', height: frameHeight, transition: adaptiveHeightAnimation
count: slideCount,
}) }), (0, controls_1.default)(props, slideCount, currentSlide, goToSlide, nextSlide, prevSlide, slidesToScroll), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: ['slider-frame', className || ''].join(' ').trim(), style: Object.assign({ overflow: 'hidden', width: '100%', position: 'relative', outline: 'none', height: frameHeight, transition: adaptiveHeightAnimation
? 'height 300ms ease-in-out'
: undefined, willChange: 'height' }, style), "aria-label": frameAriaLabel, role: "region", tabIndex: 0, onFocus: () => (focus.current = true), onBlur: () => (focus.current = false), ref: innerRef || carouselEl, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseLeave: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: handleDragEnd, onTouchMove: onTouchMove }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "slider-list", style: (0, slider_list_1.getSliderListStyles)(children, currentSlide, animationEnabled, slidesToShow, cellAlign, wrapAround, propsSpeed, move, animation) }, { children: [wrapAround ? renderSlides('prev-cloned') : null, renderSlides(), wrapAround ? renderSlides('next-cloned') : null] })) }))] })));
: undefined, willChange: 'height', userSelect: 'none' }, style), "aria-label": frameAriaLabel, role: "region", tabIndex: 0, onKeyDown: enableKeyboardControls ? onKeyDown : undefined, ref: carouselRef, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseLeave: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: handleDragEnd, onTouchMove: onTouchMove }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "slider-list", style: (0, slider_list_1.getSliderListStyles)(slideCount, currentSlide, isAnimating, slidesToShow, cellAlign, wrapAround, propsSpeed, isDragging ? preDragOffset.current - dragDistance : 0, slidesToScroll, scrollMode, disableEdgeSwiping, animation), ref: sliderListRef }, { children: [wrapAround ? renderSlides('prev-cloned') : null, renderSlides(), wrapAround ? renderSlides('next-cloned') : null] })) }))] })));
};

@@ -434,0 +416,0 @@ exports.Carousel = Carousel;

2

lib/control-styles.js

@@ -12,3 +12,3 @@ "use strict";

bottom: 0,
right: 0
right: 0,
};

@@ -15,0 +15,0 @@ /**

2

lib/controls.d.ts
import React from 'react';
import { InternalCarouselProps } from './types';
declare const renderControls: (props: InternalCarouselProps, count: number, currentSlide: number, moveSlide: (to: number) => void, nextSlide: () => void, prevSlide: () => void, slidesToScroll: number) => React.ReactElement[] | null;
declare const renderControls: (props: InternalCarouselProps, slideCount: number, currentSlide: number, goToSlide: (targetSlideIndex: number) => void, nextSlide: () => void, prevSlide: () => void, slidesToScroll: number) => React.ReactElement[] | null;
export default renderControls;
//# sourceMappingURL=controls.d.ts.map

16

lib/controls.js

@@ -16,5 +16,5 @@ "use strict";

{ funcName: 'renderBottomCenterControls', key: types_1.Positions.BottomCenter },
{ funcName: 'renderBottomRightControls', key: types_1.Positions.BottomRight }
{ funcName: 'renderBottomRightControls', key: types_1.Positions.BottomRight },
];
const renderControls = (props, count, currentSlide, moveSlide, nextSlide, prevSlide, slidesToScroll) => {
const renderControls = (props, slideCount, currentSlide, goToSlide, nextSlide, prevSlide, slidesToScroll) => {
if (props.withoutControls) {

@@ -31,3 +31,3 @@ return null;

`slider-control-${control.key.toLowerCase()}`,
props.defaultControlsConfig.containerClassName || ''
props.defaultControlsConfig.containerClassName || '',
]

@@ -43,11 +43,11 @@ .join(' ')

defaultControlsConfig: props.defaultControlsConfig || {},
goToSlide: (index) => moveSlide(index),
nextSlide: () => nextSlide(),
previousSlide: () => prevSlide(),
goToSlide,
nextSlide,
previousSlide: prevSlide,
scrollMode: props.scrollMode,
slideCount: count,
slideCount,
slidesToScroll,
slidesToShow: props.slidesToShow || 1,
vertical: props.vertical,
wrapAround: props.wrapAround
wrapAround: props.wrapAround,
}) })) }), control.funcName));

@@ -54,0 +54,0 @@ });

5

lib/default-carousel-props.js

@@ -35,3 +35,3 @@ "use strict";

lastSlide: [69],
pause: [32]
pause: [32],
},

@@ -53,3 +53,2 @@ onDragStart: () => {

scrollMode: types_1.ScrollMode.page,
slideIndex: 0,
slidesToScroll: 1,

@@ -63,5 +62,5 @@ slidesToShow: 1,

wrapAround: false,
children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
};
exports.default = defaultProps;
//# sourceMappingURL=default-carousel-props.js.map

11

lib/default-controls.d.ts
/// <reference types="react" />
import { ControlProps, ScrollMode } from './types';
export declare const prevButtonDisabled: ({ currentSlide, slideCount, slidesToShow, wrapAround }: ControlProps) => boolean;
import { Alignment, ControlProps, ScrollMode } from './types';
export declare const prevButtonDisabled: ({ currentSlide, wrapAround, cellAlign, slidesToShow, }: ControlProps) => boolean;
export declare const PreviousButton: (props: ControlProps) => JSX.Element;
export declare const nextButtonDisabled: ({ currentSlide, slideCount, slidesToShow, slidesToScroll, wrapAround, scrollMode }: ControlProps) => boolean;
export declare const nextButtonDisabled: ({ currentSlide, slideCount, slidesToShow, wrapAround, cellAlign, }: ControlProps) => boolean;
export declare const NextButton: (props: ControlProps) => JSX.Element;
export declare const getDotIndexes: (slideCount: number, slidesToScroll: number, scrollMode: ScrollMode, slidesToShow: number, wrapAround: boolean) => number[];
/**
* Calculate the indices that each dot will jump to when clicked
*/
export declare const getDotIndexes: (slideCount: number, slidesToScroll: number, scrollMode: ScrollMode, slidesToShow: number, wrapAround: boolean, cellAlign: Alignment) => number[];
export declare const PagingDots: (props: ControlProps) => JSX.Element;
//# sourceMappingURL=default-controls.d.ts.map

133

lib/default-controls.js

@@ -15,18 +15,18 @@ "use strict";

opacity: disabled ? 0.3 : 1,
cursor: disabled ? 'not-allowed' : 'pointer'
cursor: disabled ? 'not-allowed' : 'pointer',
});
const prevButtonDisabled = ({ currentSlide, slideCount, slidesToShow, wrapAround }) => {
// inifite carousel with visible slides that are less than all slides
if (wrapAround && slidesToShow < slideCount) {
return false;
}
// inifite carousel with visible slide equal or less than all slides
const prevButtonDisabled = ({ currentSlide, wrapAround, cellAlign, slidesToShow, }) => {
// inifite carousel
if (wrapAround) {
return false;
}
// if the first slide is not visible return false (button is not disabled)
if (currentSlide !== 0) {
return false;
// disable if displaying the leftmost slide
if (currentSlide === 0) {
return true;
}
return true;
// remainder scroll mode
if (cellAlign === types_1.Alignment.Right && currentSlide <= slidesToShow - 1) {
return true;
}
return false;
};

@@ -39,3 +39,3 @@ exports.prevButtonDisabled = prevButtonDisabled;

};
const { prevButtonClassName, prevButtonStyle = {}, prevButtonText } = props.defaultControlsConfig || {};
const { prevButtonClassName, prevButtonStyle = {}, prevButtonText, } = props.defaultControlsConfig || {};
const disabled = (0, exports.prevButtonDisabled)(props);

@@ -45,22 +45,17 @@ return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: prevButtonClassName, style: Object.assign(Object.assign({}, defaultButtonStyles(disabled)), prevButtonStyle), disabled: disabled, onClick: handleClick, "aria-label": "previous", type: "button" }, { children: prevButtonText || 'Prev' })));

exports.PreviousButton = PreviousButton;
const nextButtonDisabled = ({ currentSlide, slideCount, slidesToShow, slidesToScroll, wrapAround, scrollMode }) => {
const nextButtonDisabled = ({ currentSlide, slideCount, slidesToShow, wrapAround, cellAlign, }) => {
// inifite carousel
if (wrapAround) {
return false;
}
// If we are at the last possible slide without wrap, disable
if (currentSlide >= slideCount - 1) {
return true;
}
// remainder scroll mode
if (!wrapAround &&
scrollMode === types_1.ScrollMode.remainder &&
if (cellAlign === types_1.Alignment.Left &&
currentSlide >= slideCount - slidesToShow) {
return true;
}
// inifite carousel with visible slides that are less than all slides
if (wrapAround && slidesToShow < slideCount) {
return false;
}
// inifite carousel with visible slide equal or less than all slides
if (wrapAround) {
return false;
}
// if the last slide is not visible return false (button is not disabled)
if (currentSlide < slideCount - slidesToScroll) {
return false;
}
return true;
return false;
};

@@ -74,3 +69,3 @@ exports.nextButtonDisabled = nextButtonDisabled;

const { defaultControlsConfig } = props;
const { nextButtonClassName, nextButtonStyle = {}, nextButtonText } = defaultControlsConfig;
const { nextButtonClassName, nextButtonStyle = {}, nextButtonText, } = defaultControlsConfig;
const disabled = (0, exports.nextButtonDisabled)(props);

@@ -80,19 +75,61 @@ return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: nextButtonClassName, style: Object.assign(Object.assign({}, defaultButtonStyles(disabled)), nextButtonStyle), disabled: disabled, onClick: handleClick, "aria-label": "next", type: "button" }, { children: nextButtonText || 'Next' })));

exports.NextButton = NextButton;
const getDotIndexes = (slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround) => {
/**
* Calculate the indices that each dot will jump to when clicked
*/
const getDotIndexes = (slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround, cellAlign) => {
const dotIndexes = [];
const scrollSlides = slidesToScroll === 0 ? 1 : slidesToScroll;
for (let i = 0; i < slideCount; i += scrollSlides) {
if (!(!wrapAround &&
scrollMode === types_1.ScrollMode.remainder &&
i > slideCount - slidesToShow)) {
const scrollSlides = slidesToScroll <= 0 ? 1 : slidesToScroll;
if (wrapAround) {
for (let i = 0; i < slideCount; i += scrollSlides) {
dotIndexes.push(i);
}
return dotIndexes;
}
// check if the slidesToShow is float value, if true add the last dot (remainder scroll mode)
if (!wrapAround &&
scrollMode === types_1.ScrollMode.remainder &&
slidesToShow % 1 !== 0) {
const lastIndex = dotIndexes[dotIndexes.length - 1];
dotIndexes.push(lastIndex + (slidesToShow % 1));
if (cellAlign === types_1.Alignment.Center) {
for (let i = 0; i < slideCount - 1; i += scrollSlides) {
dotIndexes.push(i);
}
if (slideCount > 0) {
dotIndexes.push(slideCount - 1);
}
return dotIndexes;
}
if (cellAlign === types_1.Alignment.Left) {
if (slidesToShow >= slideCount) {
return [0];
}
const lastPossibleIndexWithoutWhitespace = slideCount - slidesToShow;
for (let i = 0; i < lastPossibleIndexWithoutWhitespace; i += scrollSlides) {
dotIndexes.push(i);
}
if (scrollMode === types_1.ScrollMode.remainder) {
dotIndexes.push(lastPossibleIndexWithoutWhitespace);
}
else {
dotIndexes.push(dotIndexes[dotIndexes.length - 1] + scrollSlides);
}
return dotIndexes;
}
if (cellAlign === types_1.Alignment.Right) {
if (slidesToShow >= slideCount) {
return [slideCount - 1];
}
const firstPossibleIndexWithoutWhitespace = slidesToShow - 1;
if (scrollMode === types_1.ScrollMode.remainder) {
for (let i = firstPossibleIndexWithoutWhitespace; i < slideCount - 1; i += scrollSlides) {
dotIndexes.push(i);
}
dotIndexes.push(slideCount - 1);
}
else {
for (let i = slideCount - 1; i > firstPossibleIndexWithoutWhitespace; i -= scrollSlides) {
dotIndexes.push(i);
}
dotIndexes.push(dotIndexes[dotIndexes.length - 1] - scrollSlides);
dotIndexes.reverse();
}
return dotIndexes;
}
// We should never reach this, because the if statements above cover all
// possible values of cellAlign
return dotIndexes;

@@ -108,3 +145,3 @@ };

padding: 0,
listStyleType: 'none'
listStyleType: 'none',
};

@@ -116,12 +153,6 @@ const getButtonStyles = (0, react_1.useCallback)((active) => ({

border: 'none',
fill: 'black'
fill: 'black',
}), []);
const indexes = (0, react_1.useMemo)(() => (0, exports.getDotIndexes)(props.slideCount, props.slidesToScroll, props.scrollMode, props.slidesToShow, props.wrapAround), [
props.slideCount,
props.slidesToScroll,
props.scrollMode,
props.slidesToShow,
props.wrapAround
]);
const { pagingDotsContainerClassName, pagingDotsClassName, pagingDotsStyle = {} } = props.defaultControlsConfig;
const indexes = (0, exports.getDotIndexes)(props.slideCount, props.slidesToScroll, props.scrollMode, props.slidesToShow, props.wrapAround, props.cellAlign);
const { pagingDotsContainerClassName, pagingDotsClassName, pagingDotsStyle = {}, } = props.defaultControlsConfig;
return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: pagingDotsContainerClassName, style: listStyles }, { children: indexes.map((index, i) => {

@@ -128,0 +159,0 @@ let isActive = props.currentSlide === index ||

6

lib/hooks/use-frame-height.d.ts

@@ -16,7 +16,3 @@ /**

*/
export declare const useFrameHeight: ({ adaptiveHeight, slidesToShow, numSlides }: {
adaptiveHeight: boolean;
slidesToShow: number;
numSlides: number;
}) => {
export declare const useFrameHeight: (adaptiveHeight: boolean, slidesToShow: number, slideCount: number) => {
/**

@@ -23,0 +19,0 @@ * Callback that can be passed to Slides to allow them to update the

9

lib/hooks/use-frame-height.js

@@ -21,3 +21,3 @@ "use strict";

*/
const useFrameHeight = ({ adaptiveHeight, slidesToShow, numSlides }) => {
const useFrameHeight = (adaptiveHeight, slidesToShow, slideCount) => {
const [visibleHeights, setVisibleHeights, visibleHeightsRef] = (0, use_state_with_ref_1.useStateWithRef)([]);

@@ -37,6 +37,7 @@ // Whether we've received heights of all initial visible heights

setVisibleHeights(newVisibleHeights);
if (newVisibleHeights.length >= Math.min(numSlides, Math.ceil(slidesToShow))) {
if (newVisibleHeights.length >=
Math.min(slideCount, Math.ceil(slidesToShow))) {
setInitializedAdaptiveHeight(true);
}
}, [numSlides, setVisibleHeights, slidesToShow, visibleHeightsRef]);
}, [slideCount, setVisibleHeights, slidesToShow, visibleHeightsRef]);
const frameHeight = (0, react_1.useMemo)(() => {

@@ -61,3 +62,3 @@ if (adaptiveHeight) {

frameHeight,
initializedAdaptiveHeight
initializedAdaptiveHeight,
};

@@ -64,0 +65,0 @@ };

2

lib/slide.d.ts
import { ReactNode } from 'react';
import { Alignment } from './types';
declare const Slide: ({ count, children, currentSlide, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, animation, speed, slidesToShow, zoomScale, cellAlign, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight }: {
declare const Slide: ({ count, children, currentSlide, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, animation, speed, slidesToShow, zoomScale, cellAlign, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight, }: {
count: number;

@@ -5,0 +5,0 @@ children: ReactNode | ReactNode[];

26

lib/slide.js

@@ -5,3 +5,3 @@ "use strict";

const react_1 = require("react");
const types_1 = require("./types");
const utils_1 = require("./utils");
const getSlideWidth = (count, wrapAround) => `${wrapAround ? 100 / (3 * count) : 100 / count}%`;

@@ -40,21 +40,5 @@ const getSlideStyles = (count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight, initializedAdaptiveHeight) => {

: undefined,
opacity: animation === 'fade' ? visibleSlideOpacity : 1
opacity: animation === 'fade' ? visibleSlideOpacity : 1,
};
};
const isVisibleSlide = (currentSlide, index, slidesToShow, cellAlign) => {
if (slidesToShow === 1) {
return index === currentSlide;
}
if (cellAlign === types_1.Alignment.Left) {
return index < currentSlide + slidesToShow && index >= currentSlide;
}
if (cellAlign === types_1.Alignment.Center) {
return ((index >= currentSlide - slidesToShow / 2 && index <= currentSlide) ||
(index > currentSlide && index <= currentSlide + slidesToShow / 2));
}
if (cellAlign === types_1.Alignment.Right) {
return index <= currentSlide && index > currentSlide - slidesToShow;
}
return false;
};
const generateIndex = (index, count, typeOfSlide) => {

@@ -69,7 +53,7 @@ if (typeOfSlide === 'prev-cloned') {

};
const Slide = ({ count, children, currentSlide, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, animation, speed, slidesToShow, zoomScale, cellAlign, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight }) => {
const Slide = ({ count, children, currentSlide, index, isCurrentSlide, typeOfSlide, wrapAround, cellSpacing, animation, speed, slidesToShow, zoomScale, cellAlign, onVisibleSlideHeightChange, adaptiveHeight, initializedAdaptiveHeight, }) => {
const customIndex = wrapAround
? generateIndex(index, count, typeOfSlide)
: index;
const isVisible = isVisibleSlide(currentSlide, customIndex, slidesToShow, cellAlign);
const isVisible = (0, utils_1.isSlideVisible)(currentSlide, customIndex, slidesToShow, cellAlign);
const slideRef = (0, react_1.useRef)(null);

@@ -102,3 +86,3 @@ const prevIsVisibleRef = (0, react_1.useRef)(false);

onVisibleSlideHeightChange,
slidesToShow
slidesToShow,
]);

@@ -105,0 +89,0 @@ const currentSlideClass = isCurrentSlide && isVisible ? ' slide-current' : '';

5

lib/slider-list.d.ts

@@ -1,3 +0,4 @@

import { CSSProperties, ReactNode } from 'react';
export declare const getSliderListStyles: (children: ReactNode | ReactNode[], currentSlide: number, animation: boolean, slidesToShow?: number, cellAlign?: 'left' | 'right' | 'center', wrapAround?: boolean, speed?: number, move?: number, slideAnimation?: 'fade' | 'zoom') => CSSProperties;
import React from 'react';
import { Alignment, ScrollMode } from './types';
export declare const getSliderListStyles: (slideCount: number, currentSlide: number, isAnimating: boolean, slidesToShow: number, cellAlign: Alignment, wrapAround: boolean, speed: number, draggedOffset: number, slidesToScroll: number, scrollMode: ScrollMode, disableEdgeSwiping: boolean, slideAnimation?: 'fade' | 'zoom') => React.CSSProperties;
//# sourceMappingURL=slider-list.d.ts.map

73

lib/slider-list.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSliderListStyles = void 0;
const react_1 = __importDefault(require("react"));
const default_controls_1 = require("./default-controls");
const types_1 = require("./types");
const getSliderListWidth = (count, slidesToShow, wrapAround) => {
const visibleSlides = slidesToShow || 1;
const getSliderListWidth = (slideCount, slidesToShow, wrapAround) => {
const visibleSlides = slidesToShow;
if (wrapAround) {
const percentage = (count * 100) / visibleSlides;
const percentage = (slideCount * 100) / visibleSlides;
return `${3 * percentage}%`;
}
const percentage = (count * 100) / visibleSlides;
const percentage = (slideCount * 100) / visibleSlides;
return `${percentage}%`;
};
const getTransition = (count, initialValue, currentSlide, cellAlign, wrapAround) => {
const getPercentOffsetForSlide = (slideCount, initialValue, currentSlide, cellAlign, wrapAround) => {
if (cellAlign === types_1.Alignment.Left) {
if (wrapAround) {
const slideTransition = 100 / (3 * count);
const slideTransition = 100 / (3 * slideCount);
const currentTransition = initialValue - slideTransition * (currentSlide - 1);
return currentTransition - slideTransition;
}
const slideTransition = (100 / count) * currentSlide;
const slideTransition = (100 / slideCount) * currentSlide;
return -(slideTransition + initialValue);

@@ -30,7 +27,7 @@ }

if (wrapAround) {
const slideTransition = 100 / (3 * count);
const slideTransition = 100 / (3 * slideCount);
const currentTransition = initialValue - slideTransition * (currentSlide - 1);
return currentTransition - slideTransition;
}
const slideTransition = (100 / count) * currentSlide;
const slideTransition = (100 / slideCount) * currentSlide;
return initialValue - slideTransition;

@@ -40,7 +37,7 @@ }

if (wrapAround) {
const slideTransition = 100 / (3 * count);
const slideTransition = 100 / (3 * slideCount);
const currentTransition = initialValue - slideTransition * (currentSlide - 1);
return currentTransition - slideTransition;
}
const slideTransition = (100 / count) * currentSlide;
const slideTransition = (100 / slideCount) * currentSlide;
return initialValue - slideTransition;

@@ -50,7 +47,7 @@ }

};
const getPositioning = (cellAlign, slidesToShow, count, currentSlide, wrapAround, move) => {
const getPositioning = (cellAlign, slidesToShow, slideCount, currentSlide, wrapAround, draggedOffset, clampIndices) => {
// When wrapAround is enabled, we show the slides 3 times
const totalCount = wrapAround ? 3 * count : count;
const totalCount = wrapAround ? 3 * slideCount : slideCount;
const slideSize = 100 / totalCount;
let initialValue = wrapAround ? -count * slideSize : 0;
let initialValue = wrapAround ? -slideCount * slideSize : 0;
if (cellAlign === types_1.Alignment.Right && slidesToShow > 1) {

@@ -66,25 +63,39 @@ const excessSlides = slidesToShow - 1;

}
const horizontalMove = getTransition(count, initialValue, currentSlide, cellAlign, wrapAround);
const slideBasedOffset = getPercentOffsetForSlide(slideCount, initialValue, currentSlide, cellAlign, wrapAround);
// Special-case this. It's better to return undefined rather than a
// transform of 0 pixels since transforms can cause flickering in chrome.
if (move === 0 && horizontalMove === 0) {
if (draggedOffset === 0 && slideBasedOffset === 0) {
return undefined;
}
const draggableMove = move
? `calc(${horizontalMove}% - ${move}px)`
: `${horizontalMove}%`;
return `translate3d(${draggableMove}, 0, 0)`;
let clampOffsets = null;
if (clampIndices) {
clampOffsets = clampIndices.map((index) => getPercentOffsetForSlide(slideCount, initialValue, index, cellAlign, wrapAround));
}
const clampedDraggedOffset = clampOffsets
? // Offsets are seemingly backwards because the rightmost slide creates
// the most negative translate value
`clamp(${clampOffsets[1]}%, ${draggedOffset}px, ${clampOffsets[0]}%)`
: `${draggedOffset}px`;
return `translate3d(${draggedOffset ? clampedDraggedOffset : `${slideBasedOffset}%`}, 0, 0)`;
};
const getSliderListStyles = (children, currentSlide, animation, slidesToShow, cellAlign, wrapAround, speed, move, slideAnimation) => {
const count = react_1.default.Children.count(children);
const width = getSliderListWidth(count, slidesToShow, wrapAround);
const positioning = getPositioning(cellAlign || types_1.Alignment.Left, slidesToShow || 1, count, currentSlide, wrapAround, move);
const getSliderListStyles = (slideCount, currentSlide, isAnimating, slidesToShow, cellAlign, wrapAround, speed, draggedOffset, slidesToScroll, scrollMode, disableEdgeSwiping, slideAnimation) => {
const width = getSliderListWidth(slideCount, slidesToShow, wrapAround);
// When disableEdgeSwiping=true, we recycle dot index generation to determine
// the leftmost and rightmost indices used, to be used in calculating the
// x-translation values we need to limit to.
let clampIndices = null;
if (disableEdgeSwiping && !wrapAround) {
const dotIndexes = (0, default_controls_1.getDotIndexes)(slideCount, slidesToScroll, scrollMode, slidesToShow, wrapAround, cellAlign);
clampIndices = [dotIndexes[0], dotIndexes[dotIndexes.length - 1]];
}
const positioning = getPositioning(cellAlign, slidesToShow, slideCount, currentSlide, wrapAround, draggedOffset, clampIndices);
return {
width,
textAlign: 'left',
transition: animation && slideAnimation !== 'fade'
? `${speed || 500}ms ease 0s`
userSelect: 'auto',
transition: draggedOffset === 0 && isAnimating && slideAnimation !== 'fade'
? `${speed}ms cubic-bezier(0.16, 1, 0.3, 1) 0s`
: undefined,
transform: positioning,
display: 'flex'
display: 'flex',
};

@@ -91,0 +102,0 @@ };

22

lib/types.d.ts

@@ -101,20 +101,9 @@ import { ReactNode, CSSProperties, MutableRefObject } from 'react';

}
/** @deprecated This is not actually used for anything */
export interface CarouselState {
cellAlign: Alignment;
}
declare type RenderAnnounceSlideMessage = (props: {
currentSlide: number;
dragging: boolean;
easing: (normalizedTime: number) => number;
hasFocus: boolean;
hasInteraction: boolean;
isWrappingAround: boolean;
left: number;
pauseOnHover?: boolean;
resetWrapAroundPosition: boolean;
count: number;
slidesToScroll: number;
slidesToShow: number;
top: number;
wrapToIndex: number | null;
}
declare type RenderAnnounceSlideMessage = (props: Pick<CarouselState, 'currentSlide' | 'count'>) => string;
}) => string;
export interface ControlProps {

@@ -351,3 +340,2 @@ /**

* Supports 'page' and 'remainder' scroll modes.
* Defaults to 'remainder'.
*/

@@ -358,3 +346,3 @@ scrollMode: ScrollMode;

*/
slideIndex: number;
slideIndex?: number;
/**

@@ -361,0 +349,0 @@ * Slides to scroll at once.

12

lib/utils.d.ts

@@ -1,7 +0,7 @@

import { ScrollMode } from './types';
export declare const getIndexes: (slide: number, endSlide: number, count: number) => [number, number];
export declare const addEvent: (elem: Window | Document, type: string, eventHandler: EventListener) => void;
export declare const removeEvent: (elem: Window | Document, type: string, eventHandler: EventListener) => void;
export declare const getNextMoveIndex: (scrollMode: ScrollMode, wrapAround: boolean, currentSlide: number, count: number, slidesToScroll: number, slidesToShow: number) => number;
export declare const getPrevMoveIndex: (scrollMode: ScrollMode, wrapAround: boolean, currentSlide: number, slidesToScroll: number) => number;
import { Alignment, ScrollMode } from './types';
export declare const getIndexes: (slide: number, endSlide: number, slideCount: number) => [number, number];
export declare const isSlideVisible: (currentSlide: number, indexToCheck: number, slidesToShow: number, cellAlign: Alignment) => boolean;
export declare const getNextMoveIndex: (scrollMode: ScrollMode, wrapAround: boolean, currentSlide: number, slideCount: number, slidesToScroll: number, slidesToShow: number, cellAlign: Alignment) => number;
export declare const getPrevMoveIndex: (scrollMode: ScrollMode, wrapAround: boolean, currentSlide: number, slidesToScroll: number, slidesToShow: number, cellAlign: Alignment) => number;
export declare const getDefaultSlideIndex: (slideIndex: number | undefined, slideCount: number, slidesToShow: number, slidesToScroll: number, cellAlign: Alignment, autoplayReverse: boolean, scrollMode: ScrollMode) => number;
//# sourceMappingURL=utils.d.ts.map

95

lib/utils.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.removeEvent = exports.addEvent = exports.getIndexes = void 0;
exports.getDefaultSlideIndex = exports.getPrevMoveIndex = exports.getNextMoveIndex = exports.isSlideVisible = exports.getIndexes = void 0;
const default_controls_1 = require("./default-controls");
const types_1 = require("./types");
const getIndexes = (slide, endSlide, count) => {
const getIndexes = (slide, endSlide, slideCount) => {
let slideIndex = slide;
let endSlideIndex = endSlide;
if (slideIndex < 0) {
slideIndex += count;
slideIndex += slideCount;
}
else if (slideIndex > count - 1) {
slideIndex -= count;
else if (slideIndex > slideCount - 1) {
slideIndex -= slideCount;
}
if (endSlideIndex < 0) {
endSlideIndex += count;
endSlideIndex += slideCount;
}
else if (endSlideIndex > count - 1) {
endSlideIndex -= count;
else if (endSlideIndex > slideCount - 1) {
endSlideIndex -= slideCount;
}

@@ -23,39 +24,65 @@ return [slideIndex, endSlideIndex];

exports.getIndexes = getIndexes;
const addEvent = (elem, type, eventHandler) => {
if (elem === null || typeof elem === 'undefined') {
return;
const isSlideVisible = (currentSlide, indexToCheck, slidesToShow, cellAlign) => {
// The addition or subtraction of constants (1 , 0.5) in the following
// calculations are accounting for the fact that a slide will be visible even
// after the position associated with its index is off-screen. For example,
// with cellAlign="left", slidesToShow=1 and indexToCheck=0,
// if the currentSlide is set to 0.99, both (a sliver of) slide 0 and slide 1
// will be visible at the same time, even though the position we associate
// with index 0, its leftmost edge, is off-screen.
if (cellAlign === types_1.Alignment.Left) {
return (indexToCheck < currentSlide + slidesToShow &&
indexToCheck > currentSlide - 1);
}
if (elem.addEventListener) {
elem.addEventListener(type, eventHandler, false);
if (cellAlign === types_1.Alignment.Center) {
return ((indexToCheck > currentSlide - slidesToShow / 2 - 0.5 &&
indexToCheck <= currentSlide) ||
(indexToCheck > currentSlide &&
indexToCheck < currentSlide + slidesToShow / 2 + 0.5));
}
if (cellAlign === types_1.Alignment.Right) {
return (indexToCheck < currentSlide + 1 &&
indexToCheck > currentSlide - slidesToShow);
}
return false;
};
exports.addEvent = addEvent;
const removeEvent = (elem, type, eventHandler) => {
if (elem === null || typeof elem === 'undefined') {
return;
exports.isSlideVisible = isSlideVisible;
const getNextMoveIndex = (scrollMode, wrapAround, currentSlide, slideCount, slidesToScroll, slidesToShow, cellAlign) => {
if (wrapAround) {
return currentSlide + slidesToScroll;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, eventHandler, false);
// Quit early if we're already as far right as we can go
if (currentSlide >= slideCount - 1 ||
(cellAlign === types_1.Alignment.Left && currentSlide >= slideCount - slidesToShow)) {
return currentSlide;
}
};
exports.removeEvent = removeEvent;
const getNextMoveIndex = (scrollMode, wrapAround, currentSlide, count, slidesToScroll, slidesToShow) => {
if (!wrapAround &&
scrollMode === types_1.ScrollMode.remainder &&
count < currentSlide + (slidesToScroll + slidesToShow)) {
const remindedSlides = count - (currentSlide + slidesToScroll) - (slidesToShow - slidesToScroll);
return currentSlide + remindedSlides;
if (scrollMode === types_1.ScrollMode.remainder && cellAlign === types_1.Alignment.Left) {
return Math.min(currentSlide + slidesToScroll, slideCount - slidesToShow);
}
return currentSlide + slidesToScroll;
return Math.min(currentSlide + slidesToScroll, slideCount - 1);
};
exports.getNextMoveIndex = getNextMoveIndex;
const getPrevMoveIndex = (scrollMode, wrapAround, currentSlide, slidesToScroll) => {
if (!wrapAround &&
scrollMode === types_1.ScrollMode.remainder &&
currentSlide - slidesToScroll < 0) {
return 0;
const getPrevMoveIndex = (scrollMode, wrapAround, currentSlide, slidesToScroll, slidesToShow, cellAlign) => {
if (wrapAround) {
return currentSlide - slidesToScroll;
}
return currentSlide - slidesToScroll;
// Quit early if we're already as far left as we can go
if (currentSlide <= 0 ||
(cellAlign === types_1.Alignment.Right && currentSlide <= slidesToShow - 1)) {
return currentSlide;
}
if (scrollMode === types_1.ScrollMode.remainder && cellAlign === types_1.Alignment.Right) {
return Math.max(currentSlide - slidesToScroll, slidesToShow - 1);
}
return Math.max(currentSlide - slidesToScroll, 0);
};
exports.getPrevMoveIndex = getPrevMoveIndex;
const getDefaultSlideIndex = (slideIndex, slideCount, slidesToShow, slidesToScroll, cellAlign, autoplayReverse, scrollMode) => {
if (slideIndex !== undefined) {
return slideIndex;
}
const dotIndexes = (0, default_controls_1.getDotIndexes)(slideCount, slidesToScroll, scrollMode, slidesToShow, false, cellAlign);
return autoplayReverse ? dotIndexes[dotIndexes.length - 1] : dotIndexes[0];
};
exports.getDefaultSlideIndex = getDefaultSlideIndex;
//# sourceMappingURL=utils.js.map

34

package.json
{
"name": "nuka-carousel",
"version": "5.2.0",
"version": "5.3.0",
"description": "Pure React Carousel",

@@ -13,12 +13,3 @@ "main": "lib/index.js",

"devDependencies": {
"@babel/cli": "^7.10.4",
"@babel/core": "^7.17.2",
"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
"@babel/plugin-transform-object-assign": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.4",
"@babel/plugin-transform-typescript": "^7.16.8",
"@babel/polyfill": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.16.0",
"@storybook/addon-actions": "^6.5.9",

@@ -30,20 +21,13 @@ "@storybook/addon-essentials": "^6.5.9",

"@storybook/react": "^6.5.9",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@types/exenv": "^1.2.0",
"@types/node": "^18.7.5",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.5.0",
"@types/testing-library__jest-dom": "^5.14.5",
"babel-loader": "8.1.0",
"builder": "^5.0.0",
"chromatic": "^6.2.0",
"cypress": "^9.3.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"exenv": "^1.2.0",
"jest-environment-jsdom": "^28.1.3",
"prop-types": "^15.6.0",

@@ -83,3 +67,2 @@ "react": "^18.0.0",

"sideEffects": false,
"dependencies": {},
"scripts": {

@@ -99,2 +82,7 @@ "build": "builder concurrent --buffer build:lib build:es build:ts",

"preversion": "pnpm run check",
"test": "pnpm run test:unit && pnpm run test:e2e",
"test:ci": "pnpm run test:unit:ci && pnpm run test:e2e:ci",
"test:unit": "jest --testPathIgnorePatterns=\\(/cypress /es /lib\\)",
"test:unit:ci": "pnpm run test:unit",
"test:unit:watch": "pnpm run test:unit --watchAll",
"test:e2e": "cypress open",

@@ -101,0 +89,0 @@ "test:e2e:ci": "cypress run",

39

README.md

@@ -10,2 +10,3 @@ # nuka-carousel

> If you are looking for v4 documentation, you can find it [here](https://www.npmjs.com/package/nuka-carousel/v/4.8.4)
### Install

@@ -30,24 +31,23 @@

You can test nuka-carousel default behaviour. [Link](https://nuka-carousel-next.vercel.app/)
```jsx
<Carousel>
<img src="/image1.png" />
<img src="/image2.png" />
<img src="/image3.png" />
<img src="/image4.png" />
<img src="/image5.png" />
</Carousel>
<Carousel>
<img src="/image1.png" />
<img src="/image2.png" />
<img src="/image3.png" />
<img src="/image4.png" />
<img src="/image5.png" />
</Carousel>
```
Infinity nuka-carousel@5 with 3 slides to show. [Link](https://nuka-carousel-next.vercel.app/?slides=6&params=%7B%22wrapAround%22:true,%22slidesToShow%22:3%7D)
```jsx
<Carousel
wrapAround={true}
slidesToShow={3}
>
<img src="/image1.png" />
<img src="/image2.png" />
<img src="/image3.png" />
<img src="/image4.png" />
<img src="/image5.png" />
</Carousel>
<Carousel wrapAround={true} slidesToShow={3}>
<img src="/image1.png" />
<img src="/image2.png" />
<img src="/image3.png" />
<img src="/image4.png" />
<img src="/image5.png" />
</Carousel>
```

@@ -61,3 +61,3 @@

- Rewritten the library with **TypeScript** and **React Hooks** for obvious reasons.
- **Reduce the size of the library and its dependencies**. Currently v4 has 5 dependencies - `prop-types`, `d3-ease`, `wicg-inert`, `exenv` and `react-move`. We are looking to use only `d3-ease` in v5.1, but definitely after bumping the version of it to the latest.
- **Reduce the size of the library and its dependencies**. Currently v4 has 5 dependencies - `prop-types`, `d3-ease`, `wicg-inert`, `exenv` and `react-move`. We are looking to use only `d3-ease` in v5.1, but definitely after bumping the version of it to the latest.
- `prop-types` is replaced with usage of TypeScript.

@@ -69,3 +69,2 @@ - `exenv` is not maintained anymore and is removed with v5 as a dependency of nuka-carousel.

### Props

@@ -233,3 +232,1 @@

[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen&style=flat
lib/announce-slide.js.map

Sorry, the diff of this file is not supported yet

lib/carousel.d.ts.map

Sorry, the diff of this file is not supported yet

lib/carousel.js.map

Sorry, the diff of this file is not supported yet

lib/controls.d.ts.map

Sorry, the diff of this file is not supported yet

lib/controls.js.map

Sorry, the diff of this file is not supported yet

lib/default-carousel-props.d.ts.map

Sorry, the diff of this file is not supported yet

lib/default-carousel-props.js.map

Sorry, the diff of this file is not supported yet

lib/default-controls.d.ts.map

Sorry, the diff of this file is not supported yet

lib/default-controls.js.map

Sorry, the diff of this file is not supported yet

lib/hooks/use-frame-height.d.ts.map

Sorry, the diff of this file is not supported yet

lib/hooks/use-frame-height.js.map

Sorry, the diff of this file is not supported yet

lib/slide.d.ts.map

Sorry, the diff of this file is not supported yet

lib/slide.js.map

Sorry, the diff of this file is not supported yet

lib/slider-list.d.ts.map

Sorry, the diff of this file is not supported yet

lib/slider-list.js.map

Sorry, the diff of this file is not supported yet

lib/types.d.ts.map

Sorry, the diff of this file is not supported yet

lib/utils.d.ts.map

Sorry, the diff of this file is not supported yet

lib/utils.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc