@telus-uds/components-base 1.83.0 → 1.84.0

package/lib/Carousel/Carousel.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _PanResponder = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PanResponder"));
@@ -28,6 +28,13 @@ var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/Caro
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+};
 const staticStyles = _StyleSheet.default.create({
   root: {
     backgroundColor: 'transparent',
@@ -36,6 +43,12 @@ const staticStyles = _StyleSheet.default.create({
     position: 'relative',
     top: 0,
     left: 0
+  },
+  animationControlButton: {
+    position: 'absolute',
+    zIndex: 1,
+    right: _Platform.default.OS === 'web' ? undefined : 40,
+    top: 40
   }
 });
 const selectContainerStyles = width => ({
@@ -48,12 +61,29 @@ const selectSwipeAreaStyles = (count, width) => ({
   justifyContent: 'space-between',
   flexDirection: 'row'
 });
+const getDynamicPositionProperty = areStylesAppliedOnPreviousButton => areStylesAppliedOnPreviousButton ? 'left' : 'right';
+const selectControlButtonPositionStyles = _ref => {
+  let {
+    positionVariant,
+    buttonWidth,
+    positionProperty = getDynamicPositionProperty(),
+    spaceBetweenSlideAndButton
+  } = _ref;
+  const styles = {};
+  if (positionVariant === 'edge') {
+    styles[positionProperty] = -1 * (buttonWidth / 2);
+  } else if (positionVariant === 'inside') {
+    styles[positionProperty] = 0;
+  } else if (positionVariant === 'outside') {
+    styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
+  }
+  return styles;
+};
 const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
   };
-  const dynamicPositionProperty = areStylesAppliedOnPreviousButton ? 'left' : 'right';
   if (isFirstSlide) {
     styles.visibility = areStylesAppliedOnPreviousButton ? 'hidden' : 'visible';
   } else if (isLastSlide) {
@@ -61,19 +91,20 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   } else {
     styles.visibility = 'visible';
   }
-  if (previousNextNavigationPosition === 'edge') {
-    styles[dynamicPositionProperty] = -1 * (previousNextNavigationButtonWidth / 2);
-  } else if (previousNextNavigationPosition === 'inside') {
-    styles[dynamicPositionProperty] = 0;
-  } else if (previousNextNavigationPosition === 'outside') {
-    styles[dynamicPositionProperty] = -1 * (spaceBetweenSlideAndPreviousNextNavigation + previousNextNavigationButtonWidth);
-  }
-  return styles;
+  return {
+    ...styles,
+    ...selectControlButtonPositionStyles({
+      positionVariant: previousNextNavigationPosition,
+      buttonWidth: previousNextNavigationButtonWidth,
+      positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
+      spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation
+    })
+  };
 };
-const selectIconStyles = _ref => {
+const selectIconStyles = _ref2 => {
   let {
     iconBackgroundColor
-  } = _ref;
+  } = _ref2;
   return {
     backgroundColor: iconBackgroundColor
   };
@@ -134,7 +165,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -164,8 +195,21 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     accessibilityLabel,
     accessibilityLiveRegion = 'polite',
     copy,
+    slideDuration = 0,
+    transitionDuration = 0,
+    autoPlay = false,
     ...rest
-  } = _ref2;
+  } = _ref3;
+  let childrenArray = (0, _utils.unpackFragment)(children);
+  const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1;
+  // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
+  if (!Array.isArray(childrenArray)) {
+    childrenArray = [childrenArray];
+  }
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
     viewport
@@ -173,84 +217,53 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     previousIcon,
     nextIcon,
+    playIcon,
+    pauseIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
     showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
-  const [activeIndex, setActiveIndex] = _react.default.useState(0);
-  const [isAnimating, setIsAnimating] = _react.default.useState(false);
-  const handleAnimationStart = _react.default.useCallback(function () {
-    if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
-    setIsAnimating(true);
-  }, [onAnimationStart]);
-  const handleAnimationEnd = _react.default.useCallback(function () {
-    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
-    setIsAnimating(false);
-  }, [onAnimationEnd]);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
-    copy
-  });
-  let childrenArray = (0, _utils.unpackFragment)(children);
-  // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
-  if (!Array.isArray(childrenArray)) {
-    childrenArray = [childrenArray];
-  }
-  const systemProps = selectProps({
-    ...rest,
-    accessibilityRole,
-    accessibilityLabel,
-    accessibilityValue: {
-      min: 1,
-      max: childrenArray.length,
-      now: activeIndex + 1
-    }
-  });
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
+  const activeIndexRef = (0, _react.useRef)(activeIndex);
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotionRef = (0, _react.useRef)(reduceMotionEnabled);
   const [containerLayout, setContainerLayout] = _react.default.useState({
     x: 0,
     y: 0,
     width: 0
   });
-  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = _react.default.useState(0);
-  const firstFocusRef = _react.default.useRef(null);
-  const pan = _react.default.useRef(new _Animated.default.ValueXY()).current;
-  const animatedX = _react.default.useRef(0);
-  const animatedY = _react.default.useRef(0);
+  const containerLayoutRef = (0, _react.useRef)(containerLayout);
+  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = (0, _react.useState)(0);
+  const firstFocusRef = (0, _react.useRef)(null);
+  const pan = (0, _react.useRef)(new _Animated.default.ValueXY()).current;
+  const animatedX = (0, _react.useRef)(0);
+  const animatedY = (0, _react.useRef)(0);
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  /**
+   * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
+   *
+   * `isAutoPlayEnabled` is a state to determine if the autoplay feature is enabled or disabled
+   * `isCarouselPlaying` is a state to determine if the carousel is currently playing or paused
+   */
+  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = (0, _react.useState)(autoPlayFeatureEnabled);
+  const [isCarouselPlaying, setisCarouselPlaying] = (0, _react.useState)(autoPlayFeatureEnabled);
+  const isSwiping = (0, _react.useRef)(false);
+  const autoPlayRef = (0, _react.useRef)(null);
   const isFirstSlide = !activeIndex;
-  const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref3 => {
-    let {
-      nativeEvent: {
-        layout: {
-          x,
-          y,
-          width
-        }
-      }
-    } = _ref3;
-    return setContainerLayout(prevState => ({
-      ...prevState,
-      x,
-      y,
-      width
-    }));
-  };
-  const onPreviousNextNavigationButtonLayout = _ref4 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width
-        }
-      }
-    } = _ref4;
-    return setPreviousNextNavigationButtonWidth(width);
-  };
-  const updateOffset = _react.default.useCallback(() => {
-    animatedX.current = containerLayout.width * activeIndex * -1;
+  const isLastSlide = activeIndex + 1 >= childrenArray.length;
+  const handleAnimationStart = (0, _react.useCallback)(function () {
+    if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
+    setIsAnimating(true);
+  }, [onAnimationStart]);
+  const handleAnimationEnd = (0, _react.useCallback)(function () {
+    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+    setIsAnimating(false);
+  }, [onAnimationEnd]);
+  const updateOffset = (0, _react.useCallback)(() => {
+    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
     animatedY.current = 0;
     pan.setOffset({
       x: animatedX.current,
@@ -260,20 +273,27 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       x: 0,
       y: 0
     });
-  }, [activeIndex, containerLayout.width, pan, animatedX]);
-  const animate = _react.default.useCallback((toValue, toIndex) => {
+  }, [pan, animatedX]);
+  const animate = (0, _react.useCallback)((toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
       return handleAnimationEnd(toIndex, ...args);
     };
-    if (reduceMotionEnabled) {
+    if (reduceMotionRef.current || isSwiping.current) {
       _Animated.default.timing(pan, {
         toValue,
         duration: 1,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
+    } else if (isAutoPlayEnabled) {
+      _Animated.default.timing(pan, {
+        ...springConfig,
+        toValue,
+        useNativeDriver: false,
+        duration: transitionDuration * 1000
+      }).start(handleAnimationEndToIndex);
     } else {
       _Animated.default.spring(pan, {
         ...springConfig,
@@ -281,45 +301,157 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, reduceMotionEnabled, handleAnimationEnd]);
-  const updateIndex = _react.default.useCallback(function () {
+  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]);
+  const stopAutoplay = (0, _react.useCallback)(() => {
+    if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
+      clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
+    }
+  }, []);
+  const updateIndex = (0, _react.useCallback)(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let transitionMode = arguments.length > 1 ? arguments[1] : undefined;
     const toValue = {
       x: 0,
       y: 0
     };
     let skipChanges = !delta;
     let calcDelta = delta;
-    if (activeIndex <= 0 && delta < 0) {
-      skipChanges = true;
-      calcDelta = children.length + delta;
-    } else if (activeIndex + 1 >= children.length && delta > 0) {
-      skipChanges = true;
-      calcDelta = -1 * activeIndex + delta - 1;
+    if (activeIndexRef.current <= 0 && delta < 0) {
+      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      calcDelta = childrenArray.length + delta;
+    } else if (activeIndexRef.current + 1 >= childrenArray.length && delta > 0) {
+      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      calcDelta = -1 * activeIndexRef.current + delta - 1;
     }
-    const index = activeIndex + calcDelta;
+    const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
       animate(toValue, index);
       return calcDelta;
     }
+    stopAutoplay();
     setActiveIndex(index);
-    toValue.x = containerLayout.width * -1 * calcDelta;
+    toValue.x = containerLayoutRef.current.width * -1 * calcDelta;
     animate(toValue, index);
+    if (isCarouselPlaying) {
+      stopAutoplay();
+      if (index === 0 && activeIndexRef.current + 1 === childrenArray.length && transitionMode === TRANSITION_MODES.AUTOMATIC) {
+        setisCarouselPlaying(false);
+      } else if (isAutoPlayEnabled) {
+        autoPlayRef.current = setTimeout(() => {
+          var _firstFocusRef$curren;
+          updateOffset();
+          handleAnimationStart(activeIndexRef.current);
+          updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+          if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
+        }, Math.abs(slideDuration) * 1000);
+      }
+    }
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
-  }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
-  const fixOffsetAndGo = _react.default.useCallback(delta => {
-    var _firstFocusRef$curren;
+  }, [handleAnimationStart, refocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
+  const startAutoplay = (0, _react.useCallback)(() => {
+    stopAutoplay();
+    if (isAutoPlayEnabled) {
+      autoPlayRef.current = setTimeout(() => {
+        var _firstFocusRef$curren2;
+        updateOffset();
+        handleAnimationStart(activeIndexRef.current);
+        updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+        if (refocus && _Platform.default.OS === 'web') (_firstFocusRef$curren2 = firstFocusRef.current) === null || _firstFocusRef$curren2 === void 0 ? void 0 : _firstFocusRef$curren2.focus();
+      }, Math.abs(slideDuration) * 1000);
+    }
+  }, [handleAnimationStart, refocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
+  const fixOffsetAndGo = (0, _react.useCallback)((delta, transitionMode) => {
+    var _firstFocusRef$curren3;
     updateOffset();
-    handleAnimationStart(activeIndex);
-    updateIndex(delta);
-    if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
-  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart, refocus]);
-  const goToNeighboring = _react.default.useCallback(function () {
+    handleAnimationStart(activeIndexRef.current);
+    updateIndex(delta, transitionMode);
+    if (refocus && _Platform.default.OS === 'web') (_firstFocusRef$curren3 = firstFocusRef.current) === null || _firstFocusRef$curren3 === void 0 ? void 0 : _firstFocusRef$curren3.focus();
+  }, [updateIndex, updateOffset, handleAnimationStart, refocus]);
+  const goToNeighboring = (0, _react.useCallback)(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    fixOffsetAndGo(toPrev ? -1 : 1);
+    let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
+    fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
-  const isSwipeAllowed = _react.default.useCallback(() => {
+  (0, _react.useEffect)(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+  (0, _react.useEffect)(() => {
+    reduceMotionRef.current = reduceMotionEnabled;
+  }, [reduceMotionEnabled]);
+  (0, _react.useEffect)(() => {
+    containerLayoutRef.current = containerLayout;
+  }, [containerLayout]);
+  (0, _react.useEffect)(() => {
+    pan.x.addListener(_ref4 => {
+      let {
+        value
+      } = _ref4;
+      animatedX.current = value;
+    });
+    pan.y.addListener(_ref5 => {
+      let {
+        value
+      } = _ref5;
+      animatedY.current = value;
+    });
+    if (isCarouselPlaying) {
+      startAutoplay();
+    }
+    return () => {
+      stopAutoplay();
+      pan.x.removeAllListeners();
+      pan.y.removeAllListeners();
+    };
+  }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying]);
+  (0, _react.useEffect)(() => {
+    const subscription = _Dimensions.default.addEventListener('change', () => {
+      updateOffset();
+    });
+    return () => {
+      if (subscription.remove) {
+        subscription.remove();
+      } else {
+        _Dimensions.default.removeEventListener('change', updateOffset);
+      }
+    };
+  }, [updateOffset]);
+  (0, _react.useEffect)(() => {
+    setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1);
+  }, [autoPlay, slideDuration, transitionDuration, childrenArray.length]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      stopAutoplay();
+    };
+  }, [stopAutoplay]);
+  const onContainerLayout = _ref6 => {
+    let {
+      nativeEvent: {
+        layout: {
+          x,
+          y,
+          width
+        }
+      }
+    } = _ref6;
+    return setContainerLayout(prevState => ({
+      ...prevState,
+      x,
+      y,
+      width
+    }));
+  };
+  const onPreviousNextNavigationButtonLayout = _ref7 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref7;
+    return setPreviousNextNavigationButtonWidth(width);
+  };
+  const isSwipeAllowed = (0, _react.useCallback)(() => {
     if (childrenArray.length === 1) {
       return false;
     }
@@ -328,72 +460,59 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     }
     return true;
   }, [viewport, childrenArray.length]);
-  const panResponder = _react.default.useMemo(() => _PanResponder.default.create({
+  const panResponder = (0, _react.useMemo)(() => _PanResponder.default.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
       if (!isSwipeAllowed()) {
         return false;
       }
-      handleAnimationStart(activeIndex);
-      return Math.abs(gestureState.dx) > minDistanceToCapture;
+      handleAnimationStart(activeIndexRef.current);
+      const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
+      if (allow) {
+        isSwiping.current = true;
+        stopAutoplay();
+      }
+      return allow;
+    },
+    onPanResponderGrant: () => {
+      updateOffset();
     },
-    onPanResponderGrant: () => updateOffset(),
     onPanResponderMove: _Animated.default.event([null, {
       dx: pan.x
     }], {
       useNativeDriver: false
     }),
     onPanResponderRelease: (_, gesture) => {
+      if (isCarouselPlaying) {
+        startAutoplay();
+      }
       const correction = gesture.moveX - gesture.x0;
-      if (Math.abs(correction) < containerLayout.width * minDistanceForAction) {
+      if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate({
           x: 0,
           y: 0
         }, 0);
       } else {
         const delta = correction > 0 ? -1 : 1;
-        updateIndex(delta);
+        updateIndex(delta, TRANSITION_MODES.SWIPE);
       }
+      isSwiping.current = false;
     }
-  }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
-  _react.default.useEffect(() => {
-    pan.x.addListener(_ref5 => {
-      let {
-        value
-      } = _ref5;
-      animatedX.current = value;
-    });
-    pan.y.addListener(_ref6 => {
-      let {
-        value
-      } = _ref6;
-      animatedY.current = value;
-    });
-    return () => {
-      pan.x.removeAllListeners();
-      pan.y.removeAllListeners();
-    };
-  }, [pan.x, pan.y]);
-  _react.default.useEffect(() => {
-    const subscription = _Dimensions.default.addEventListener('change', () => {
-      updateOffset();
-    });
-    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
-  });
-  const goToNext = _react.default.useCallback(() => {
+  }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
+  const goToNext = (0, _react.useCallback)(() => {
     goToNeighboring();
   }, [goToNeighboring]);
-  const goToPrev = _react.default.useCallback(() => {
+  const goToPrev = (0, _react.useCallback)(() => {
     goToNeighboring(true);
   }, [goToNeighboring]);
-  const goTo = _react.default.useCallback(function () {
+  const goTo = (0, _react.useCallback)(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    const delta = index - activeIndex;
+    const delta = index - activeIndexRef.current;
     if (delta) {
-      fixOffsetAndGo(delta);
+      fixOffsetAndGo(delta, TRANSITION_MODES.MANUAL);
     }
-  }, [fixOffsetAndGo, activeIndex]);
+  }, [fixOffsetAndGo]);
 
   // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
   // Normally we avoid setting variants of subcomponents, however this could be re-considered.
@@ -403,7 +522,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
     inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
-  const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
+  const getCopyWithPlaceholders = (0, _react.useCallback)(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length);
 
     // First word might be a lowercase placeholder: capitalize the first letter
@@ -426,6 +545,17 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }
     }
   };
+  const systemProps = selectProps({
+    ...rest,
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityValue: {
+      min: 1,
+      max: childrenArray.length,
+      now: activeIndex + 1
+    }
+  });
+
   // If container isn't used for focus, give it a label of title if none is passed in,
   // otherwise read the current position on focus
   const containerAccessibilityLabel = systemProps.accessibilityLabel ?? isFirstFocusContainer ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}` : title;
@@ -437,6 +567,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       focusable: true
     })
   };
+  const onAnimationControlButtonPress = (0, _react.useCallback)(() => {
+    if (isCarouselPlaying) {
+      stopAutoplay();
+    } else {
+      startAutoplay();
+    }
+    setisCarouselPlaying(prevState => !prevState);
+  }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -453,7 +591,19 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ref: ref,
       ...systemProps,
       ...containerProps,
-      children: [showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [isAutoPlayEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
+          positionVariant: previousNextNavigationPosition,
+          buttonWidth: previousNextNavigationButtonWidth,
+          positionProperty: getDynamicPositionProperty(),
+          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation
+        })],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          icon: isCarouselPlaying ? pauseIcon : playIcon,
+          variant: previousNextIconButtonVariants,
+          onPress: onAnimationControlButtonPress
+        })
+      }) : null, showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
         testID: "previous-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
@@ -477,7 +627,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectContainerStyles(containerLayout.width),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-          style: _StyleSheet.default.flatten([selectSwipeAreaStyles(children.length, containerLayout.width), {
+          style: _StyleSheet.default.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width), {
             transform: [{
               translateX: pan.x
             }, {
@@ -570,7 +720,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
    * Use it as follows:
    * ```js
-   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
+   *    const onIndexChangedCallback = useCallback((changedIndex, currentActiveIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -621,7 +771,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the current slide index before animation starts
    * Use it as follows:
    * ```js
-   *    const onAnimationStartCallback = React.useCallback((currentIndex) => {
+   *    const onAnimationStartCallback = useCallback((currentIndex) => {
    *      console.log(currentIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -638,7 +788,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the updated slide index after animation ends
    * Use it as follows:
    * ```js
-   *    const onAnimationEndCallback = React.useCallback((changedIndex) => {
+   *    const onAnimationEndCallback = useCallback((changedIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -676,7 +826,26 @@ Carousel.propTypes = {
    * Note that if the immediate Carousel children do not all render as `'li'` elements,
    * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags)
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * If set to `true`, the Carousel will automatically transition between slides
+   * and show the play/pause button
+   * - Default value is `false`
+   * - `slideDuration` and `transitionDuration` are required to be set for this to work
+   */
+  autoPlay: _propTypes.default.bool,
+  /**
+   * Duration of the time in seconds spent on each slide
+   * - Default value is `0`
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  slideDuration: _propTypes.default.number,
+  /**
+   * Duration of the time in seconds between each slide transition
+   * - Default value is `0`
+   * - `autoPlay` and `slideDuration` are required to be set for this to work
+   */
+  transitionDuration: _propTypes.default.number
 };
 Carousel.Item = _CarouselItem.default;
 Carousel.displayName = 'Carousel';