@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Carousel/Carousel.js

@@ -0,0 +1,1039 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Animated from "react-native-web/dist/exports/Animated";
+import PanResponder from "react-native-web/dist/exports/PanResponder";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment } from '../utils';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { CarouselProvider } from './CarouselContext';
+import CarouselItem from './CarouselItem';
+import IconButton from '../IconButton';
+import SkipLink from '../SkipLink';
+import A11yText from '../A11yText';
+import CarouselStepTracker from './CarouselStepTracker';
+import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
+import dictionary from './dictionary';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, HERO_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN } from './Constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+};
+const staticStyles = StyleSheet.create({
+  root: {
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    top: 0,
+    left: 0,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  },
+  animationControlButton: {
+    position: 'absolute',
+    zIndex: 1,
+    right: Platform.OS === 'web' ? undefined : 40,
+    top: 40
+  }
+});
+const selectContainerStyles = width => ({
+  backgroundColor: 'transparent',
+  overflow: 'hidden',
+  width
+});
+const selectSwipeAreaStyles = (count, width, enablePeeking, enableDisplayMultipleItemsPerSlide) => ({
+  width: width * count,
+  justifyContent: enablePeeking || enableDisplayMultipleItemsPerSlide ? 'flex-start' : 'space-between',
+  flexDirection: 'row'
+});
+const getDynamicPositionProperty = areStylesAppliedOnPreviousButton => areStylesAppliedOnPreviousButton ? 'left' : 'right';
+const selectControlButtonPositionStyles = _ref => {
+  let {
+    positionVariant,
+    buttonWidth,
+    positionProperty = getDynamicPositionProperty(),
+    spaceBetweenSlideAndButton,
+    enablePeeking,
+    enableDisplayMultipleItemsPerSlide,
+    enableHero,
+    viewport
+  } = _ref;
+  const styles = {};
+  if (positionVariant === 'edge') {
+    styles[positionProperty] = -1 * (buttonWidth / 2);
+  } else if (positionVariant === 'inside') {
+    if (enableHero && viewport === 'xl') {
+      styles[positionProperty] = HERO_POSITION_OFFSET;
+    } else {
+      styles[positionProperty] = DEFAULT_POSITION_OFFSET;
+    }
+  } else if (positionVariant === 'outside') {
+    if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
+      styles[positionProperty] = 0;
+    } else {
+      styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
+    }
+  }
+  return styles;
+};
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport) => {
+  const styles = {
+    zIndex: 1,
+    position: 'absolute'
+  };
+  if (isFirstSlide) {
+    styles.visibility = areStylesAppliedOnPreviousButton ? 'hidden' : 'visible';
+  } else if (isLastSlide) {
+    styles.visibility = areStylesAppliedOnPreviousButton ? 'visible' : 'hidden';
+  } else {
+    styles.visibility = 'visible';
+  }
+  return {
+    ...styles,
+    ...selectControlButtonPositionStyles({
+      positionVariant: previousNextNavigationPosition,
+      buttonWidth: previousNextNavigationButtonWidth,
+      positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
+      spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+      enablePeeking,
+      enableDisplayMultipleItemsPerSlide,
+      enableHero,
+      viewport
+    })
+  };
+};
+const getPeekingProps = viewport => {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
+    return {
+      peekingFirstSpace: 48,
+      peekingGap: 16,
+      peekingLastSpace: 48,
+      peekingMarginLeft: 24,
+      peekingMarginRight: 24,
+      peekingMiddleSpace: 28
+    };
+  }
+  return {
+    peekingFirstSpace: 48,
+    peekingGap: 16,
+    peekingLastSpace: 48,
+    peekingMarginLeft: 16,
+    peekingMarginRight: 16,
+    peekingMiddleSpace: 24
+  };
+};
+const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return childrenArray.length;
+      case 'md':
+        return Math.ceil(childrenArray.length / ITEMS_PER_VIEWPORT_MD);
+      case 'lg':
+      case 'xl':
+        return Math.ceil(childrenArray.length / ITEMS_PER_VIEWPORT_LG_XL);
+      default:
+        break;
+    }
+  }
+  return childrenArray.length;
+};
+const selectRootContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      alignItems: 'center'
+    };
+  }
+  return {};
+};
+const selectMainContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      width: '100%',
+      maxWidth: 1200
+    };
+  }
+  return {};
+};
+const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
+  let marginTop = 0;
+  let marginHorizontal = 0;
+  if (enableHero && tabs) {
+    marginTop = -tabsPanelHeight;
+    marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN;
+  }
+  return {
+    marginTop,
+    marginHorizontal
+  };
+};
+
+/**
+ * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ *
+ * @param {number} containerWidth - The initial width of the container.
+ * @param {boolean} enablePeeking - Flag indicating if peeking is enabled.
+ * @param {object} viewport - The viewport properties.
+ * @param {object} activeIndexRef - A ref object holding the current active index.
+ * @param {number} totalItems - The total number of items in the carousel.
+ * @param {number} calcDelta - The delta value used for calculations.
+ * @returns {number} - The final calculated width of the container.
+ *
+ * The function adjusts the container width for displacement purposes based on the peeking properties and the position
+ * of the active item (first, middle, or last). It considers different peeking spaces and gaps
+ * to ensure the correct width is calculated for the carousel to display properly.
+ */
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta) => {
+  let finalWidth = containerWidth;
+  if (enablePeeking) {
+    const {
+      peekingFirstSpace,
+      peekingGap,
+      peekingLastSpace,
+      peekingMiddleSpace
+    } = getPeekingProps(viewport);
+    const isFirst = activeIndexRef.current === 0;
+    const isLast = activeIndexRef.current + 1 >= totalItems;
+    const isMiddle = !isFirst && !isLast;
+    const basePeekingSpace = peekingFirstSpace + peekingGap + peekingMiddleSpace;
+    const middlePeekingSpace = peekingMiddleSpace * 2 + peekingGap;
+    if (isFirst) {
+      finalWidth -= basePeekingSpace;
+      if (activeIndexRef.current + 1 === totalItems - 1) {
+        finalWidth -= peekingLastSpace - peekingMiddleSpace;
+      }
+    } else if (isMiddle) {
+      if (calcDelta > 0) {
+        finalWidth -= basePeekingSpace + middlePeekingSpace * activeIndexRef.current;
+        if (activeIndexRef.current + 1 === totalItems - 1) {
+          finalWidth -= peekingLastSpace - peekingMiddleSpace;
+        }
+      } else {
+        finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
+        if (activeIndexRef.current - 1 === 0) {
+          finalWidth -= peekingFirstSpace - peekingMiddleSpace;
+        }
+      }
+    } else if (isLast) {
+      finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
+      if (activeIndexRef.current - 1 === 0) {
+        finalWidth -= peekingLastSpace - peekingMiddleSpace;
+      }
+    }
+  }
+  return finalWidth;
+};
+const selectIconStyles = _ref2 => {
+  let {
+    iconBackgroundColor
+  } = _ref2;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+/**
+ * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
+
+  ## Usage
+  - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel
+  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide
+  - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout
+  - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content
+  - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need
+
+  ## `useCarousel` custom hook
+
+  ```jsx
+  import { useCarousel } from '@telus-uds/components-base'
+
+  const SomeComponentWithinCarouselItem = () => {
+    const {
+      activeIndex,
+      totalItems,
+      width,
+      goTo
+    } = useCarousel()
+    return <Text>Hi!</Text>
+  }
+  ```
+
+  You can use `useCarousel` to hook into internal state of the Carousel component like:
+  - `activeIndex`: Index of the current slide
+  - `totalItems`: Total number of items/slides passed to the Carousel
+  - `width`: Width of the individual carousel slide
+  - `goTo`: A function to go to a particular slide by passing the index of that slide, e.g: goTo(0) where `0` is the index of the first slide
+
+  ## Accessibility
+
+  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props
+  - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides
+
+  ## Platform considerations
+  The component is available on both native platforms and web.
+
+  ## Other considerations
+  - You may want to use the same kind of layout in all your slides to avoid visual and height differences
+  - `previous` and `next` navigation buttons are automatically removed in `sm` and `xs` viewports, as these smaller viewports offers swipe functionality
+
+  ## Tokens
+
+  You can override the following tokens in exceptional circumstances:
+  - `previousIcon` - Icon of the previous button
+  - `nextIcon` - Icon of the next button
+  - `showPreviousNextNavigation` - If you want to show/hide the previous/next navigation
+  - `showPanelNavigation` - If you want to show/hide the panel navigation
+  - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
+  - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
+ */
+const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    itemLabel = 'item',
+    previousNextNavigationPosition = 'inside',
+    stepTrackerVariant,
+    previousNextIconSize = 'default',
+    minDistanceToCapture = 5,
+    minDistanceForAction = 0.2,
+    onAnimationStart,
+    onAnimationEnd,
+    onIndexChanged,
+    skipLinkHref,
+    tabs,
+    refocus = Boolean(tabs),
+    title = 'carousel',
+    springConfig = undefined,
+    thumbnails = undefined,
+    enableDisplayMultipleItemsPerSlide = false,
+    enableHero = false,
+    panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
+      thumbnails: thumbnails
+    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
+      variant: stepTrackerVariant,
+      enableDisplayMultipleItemsPerSlide: enableDisplayMultipleItemsPerSlide
+    }),
+    tag = 'ul',
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityLiveRegion = 'polite',
+    copy,
+    slideDuration = 0,
+    transitionDuration = 0,
+    autoPlay = false,
+    enablePeeking = false,
+    ...rest
+  } = _ref3;
+  let childrenArray = unpackFragment(children);
+  const viewport = useViewport();
+  const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
+  const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
+  // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
+  if (!Array.isArray(childrenArray)) {
+    childrenArray = [childrenArray];
+  }
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const themeTokens = useThemeTokens('Carousel', tokens, variant, {
+    viewport
+  });
+  const {
+    previousIcon,
+    nextIcon,
+    playIcon,
+    pauseIcon,
+    showPreviousNextNavigation,
+    showPanelNavigation,
+    showPanelTabs,
+    spaceBetweenSlideAndPreviousNextNavigation
+  } = themeTokens;
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const activeIndexRef = React.useRef(activeIndex);
+  const {
+    reduceMotionEnabled
+  } = useA11yInfo();
+  const reduceMotionRef = React.useRef(reduceMotionEnabled);
+  const [containerLayout, setContainerLayout] = React.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const containerLayoutRef = React.useRef(containerLayout);
+  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
+  const firstFocusRef = React.useRef(null);
+  const pan = React.useRef(new Animated.ValueXY()).current;
+  const animatedX = React.useRef(0);
+  const animatedY = React.useRef(0);
+  const [isAnimating, setIsAnimating] = 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] = React.useState(autoPlayFeatureEnabled);
+  const [isCarouselPlaying, setisCarouselPlaying] = React.useState(autoPlayFeatureEnabled);
+  const isSwiping = React.useRef(false);
+  const autoPlayRef = React.useRef(null);
+  const isFirstSlide = !activeIndex;
+  const isLastSlide = activeIndex + 1 >= totalItems;
+  const handleAnimationStart = React.useCallback(function () {
+    if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
+    setIsAnimating(true);
+  }, [onAnimationStart]);
+  const handleAnimationEnd = React.useCallback(function () {
+    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+    setIsAnimating(false);
+  }, [onAnimationEnd]);
+  const updateOffset = React.useCallback(() => {
+    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
+    animatedY.current = 0;
+    pan.setOffset({
+      x: animatedX.current,
+      y: animatedY.current
+    });
+    pan.setValue({
+      x: 0,
+      y: 0
+    });
+  }, [pan, animatedX]);
+  const animate = 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 (reduceMotionRef.current || isSwiping.current) {
+      Animated.timing(pan, {
+        toValue,
+        duration: 1,
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isAutoPlayEnabled) {
+      Animated.timing(pan, {
+        ...springConfig,
+        toValue,
+        useNativeDriver: false,
+        duration: transitionDuration * 1000
+      }).start(handleAnimationEndToIndex);
+    } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
+      Animated.timing(pan, {
+        ...springConfig,
+        toValue,
+        useNativeDriver: false,
+        duration: transitionDuration ? transitionDuration * 1000 : 1000
+      }).start(handleAnimationEndToIndex);
+    } else {
+      Animated.spring(pan, {
+        ...springConfig,
+        toValue,
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    }
+  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  const stopAutoplay = React.useCallback(() => {
+    if (autoPlayRef?.current) {
+      clearTimeout(autoPlayRef?.current);
+    }
+  }, []);
+  const triggerRefocus = React.useCallback(() => {
+    if (refocus && Platform.OS === 'web') {
+      firstFocusRef.current?.focus({
+        preventScroll: true,
+        focusVisible: false
+      });
+    }
+  }, [refocus, firstFocusRef]);
+  const updateIndex = 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 (activeIndexRef.current <= 0 && delta < 0) {
+      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      calcDelta = totalItems + delta;
+    } else if (activeIndexRef.current + 1 >= totalItems && delta > 0) {
+      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      calcDelta = -1 * activeIndexRef.current + delta - 1;
+    }
+    const index = activeIndexRef.current + calcDelta;
+    if (skipChanges) {
+      animate(toValue, index);
+      return calcDelta;
+    }
+    stopAutoplay();
+    setActiveIndex(index);
+    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
+    toValue.x = finalWidth * -1 * calcDelta;
+    animate(toValue, index);
+    if (isCarouselPlaying) {
+      stopAutoplay();
+      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === TRANSITION_MODES.AUTOMATIC) {
+        setisCarouselPlaying(false);
+      } else if (isAutoPlayEnabled) {
+        autoPlayRef.current = setTimeout(() => {
+          updateOffset();
+          handleAnimationStart(activeIndexRef.current);
+          updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+          triggerRefocus();
+        }, Math.abs(slideDuration) * 1000);
+      }
+    }
+    if (onIndexChanged) onIndexChanged(calcDelta, index);
+    return calcDelta;
+  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, totalItems, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled, viewport, enablePeeking]);
+  const startAutoplay = React.useCallback(() => {
+    stopAutoplay();
+    if (isAutoPlayEnabled) {
+      autoPlayRef.current = setTimeout(() => {
+        updateOffset();
+        handleAnimationStart(activeIndexRef.current);
+        updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+        triggerRefocus();
+      }, Math.abs(slideDuration) * 1000);
+    }
+  }, [handleAnimationStart, triggerRefocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
+  const fixOffsetAndGo = React.useCallback((delta, transitionMode) => {
+    updateOffset();
+    handleAnimationStart(activeIndexRef.current);
+    updateIndex(delta, transitionMode);
+    triggerRefocus();
+  }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
+  const goToNeighboring = React.useCallback(function () {
+    let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
+    fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
+  }, [fixOffsetAndGo]);
+  const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0);
+  React.useEffect(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+  React.useEffect(() => {
+    reduceMotionRef.current = reduceMotionEnabled;
+  }, [reduceMotionEnabled]);
+  React.useEffect(() => {
+    containerLayoutRef.current = containerLayout;
+  }, [containerLayout]);
+  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]);
+  React.useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', () => {
+      updateOffset();
+    });
+    return () => {
+      if (subscription.remove) {
+        subscription.remove();
+      } else {
+        Dimensions.removeEventListener('change', updateOffset);
+      }
+    };
+  }, [updateOffset]);
+  React.useEffect(() => {
+    setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1);
+  }, [autoPlay, slideDuration, transitionDuration, totalItems]);
+  React.useEffect(() => {
+    return () => {
+      stopAutoplay();
+    };
+  }, [stopAutoplay]);
+  const onTabsPanelLayout = event => {
+    setTabsPanelHeight(event.nativeEvent.layout.height);
+  };
+  const onContainerLayout = _ref6 => {
+    let {
+      nativeEvent: {
+        layout: {
+          x,
+          y,
+          width,
+          height
+        }
+      }
+    } = _ref6;
+    return setContainerLayout(prevState => ({
+      ...prevState,
+      x,
+      y,
+      width,
+      height
+    }));
+  };
+  const onPreviousNextNavigationButtonLayout = _ref7 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref7;
+    return setPreviousNextNavigationButtonWidth(width);
+  };
+  const isSwipeAllowed = React.useCallback(() => {
+    if (totalItems === 1) {
+      return false;
+    }
+    if (Platform.OS === 'web') {
+      return !!(viewport === 'xs' || viewport === 'sm');
+    }
+    return true;
+  }, [viewport, totalItems]);
+  const panResponder = React.useMemo(() => PanResponder.create({
+    onPanResponderTerminationRequest: () => false,
+    onMoveShouldSetResponderCapture: () => true,
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      if (!isSwipeAllowed()) {
+        return false;
+      }
+      handleAnimationStart(activeIndexRef.current);
+      const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
+      if (allow) {
+        isSwiping.current = true;
+        stopAutoplay();
+      }
+      return allow;
+    },
+    onPanResponderGrant: () => {
+      updateOffset();
+    },
+    onPanResponderMove: Animated.event([null, {
+      dx: pan.x
+    }], {
+      useNativeDriver: false
+    }),
+    onPanResponderRelease: (_, gesture) => {
+      if (isCarouselPlaying) {
+        startAutoplay();
+      }
+      const correction = gesture.moveX - gesture.x0;
+      if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
+        animate({
+          x: 0,
+          y: 0
+        }, 0);
+      } else {
+        const delta = correction > 0 ? -1 : 1;
+        updateIndex(delta, TRANSITION_MODES.SWIPE);
+      }
+      isSwiping.current = false;
+    }
+  }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
+  const goToNext = React.useCallback(() => {
+    goToNeighboring();
+  }, [goToNeighboring]);
+  const goToPrev = React.useCallback(() => {
+    goToNeighboring(true);
+  }, [goToNeighboring]);
+  const goTo = React.useCallback(function () {
+    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    const delta = index - activeIndexRef.current;
+    if (delta) {
+      fixOffsetAndGo(delta, TRANSITION_MODES.MANUAL);
+    }
+  }, [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.
+  // Related discussion - https://github.com/telus/universal-design-system/issues/1549
+  const previousNextIconButtonVariants = {
+    size: previousNextIconSize,
+    raised: !variant?.inverse && true,
+    inverse: variant?.inverse
+  };
+  const getCopyWithPlaceholders = React.useCallback(copyKey => {
+    const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, totalItems);
+
+    // First word might be a lowercase placeholder: capitalize the first letter
+    return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
+  }, [activeIndex, itemLabel, getCopy, title, totalItems]);
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
+    items: tabs
+  }) : panelNavigation;
+  const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
+  const containerRef = element => {
+    // Apply both firstFocusRef to the container
+    firstFocusRef.current = element;
+    // Also apply forwarded ref if there is one (which could be a function ref)
+    if (ref) {
+      if (typeof ref === 'object') {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = element;
+      } else if (typeof ref === 'function') {
+        ref(element);
+      }
+    }
+  };
+  const systemProps = selectProps({
+    ...rest,
+    accessibilityRole,
+    accessibilityLabel
+  });
+
+  // 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;
+  const containerProps = {
+    accessibilityLabel: containerAccessibilityLabel,
+    // If used for focus, attach the ref and draw a focus box around the whole carousel
+    ...(isFirstFocusContainer && {
+      ref: containerRef,
+      focusable: true
+    })
+  };
+  const onAnimationControlButtonPress = React.useCallback(() => {
+    if (isCarouselPlaying) {
+      stopAutoplay();
+    } else {
+      startAutoplay();
+    }
+    setisCarouselPlaying(prevState => !prevState);
+  }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
+  return /*#__PURE__*/_jsx(View, {
+    style: selectRootContainerStyles(enableHero, viewport),
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectMainContainerStyles(enableHero, viewport),
+      children: /*#__PURE__*/_jsxs(CarouselProvider, {
+        activeIndex: activeIndex,
+        goTo: goTo,
+        getCopyWithPlaceholders: getCopyWithPlaceholders,
+        itemLabel: itemLabel,
+        totalItems: totalItems,
+        themeTokens: themeTokens,
+        firstFocusRef: firstFocusRef,
+        refocus: refocus,
+        width: containerLayout.width,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [staticStyles.root],
+          onLayout: onContainerLayout,
+          ref: ref,
+          ...systemProps,
+          ...containerProps,
+          children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
+            style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
+              positionVariant: previousNextNavigationPosition,
+              buttonWidth: previousNextNavigationButtonWidth,
+              positionProperty: getDynamicPositionProperty(),
+              spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+              enablePeeking,
+              enableDisplayMultipleItemsPerSlide,
+              enableHero,
+              viewport
+            })],
+            children: /*#__PURE__*/_jsx(IconButton, {
+              icon: isCarouselPlaying ? pauseIcon : playIcon,
+              accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
+              variant: previousNextIconButtonVariants,
+              onPress: onAnimationControlButtonPress
+            })
+          }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            testID: "previous-button-container",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onLayout: onPreviousNextNavigationButtonLayout,
+              icon: previousIcon,
+              onPress: goToPrev,
+              variant: previousNextIconButtonVariants,
+              accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+              tokens: selectIconStyles(themeTokens)
+            })
+          }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
+            ref: firstFocusRef,
+            href: skipLinkHref,
+            children: getCopyWithPlaceholders('skipLink')
+          }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText
+          // Read the current slide position to screen readers on slide.
+          // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+          , {
+            accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
+            text: getCopyWithPlaceholders('stepTrackerLabel')
+          }), /*#__PURE__*/_jsx(View, {
+            style: selectContainerStyles(containerLayout.width),
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
+                transform: [{
+                  translateX: pan.x
+                }, {
+                  translateY: pan.y
+                }]
+              }]),
+              ...panResponder.panHandlers,
+              ...getA11yPropsFromHtmlTag(tag),
+              // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
+              // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
+              accessibilityLiveRegion: accessibilityLiveRegion,
+              children: childrenArray.map((element, index) => {
+                const hidden = !isAnimating && index !== activeIndex;
+                const clonedElement = /*#__PURE__*/React.cloneElement(element, {
+                  elementIndex: index,
+                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  enablePeeking,
+                  peekingProps: getPeekingProps(viewport),
+                  enableDisplayMultipleItemsPerSlide,
+                  viewport,
+                  backgroundColor: element.props.backgroundColor,
+                  enableHero,
+                  tabsPanelHeight
+                });
+                return /*#__PURE__*/_jsx(React.Fragment, {
+                  children: clonedElement
+                }, index.toFixed(2));
+              })
+            })
+          }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            testID: "next-button-container",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onLayout: onPreviousNextNavigationButtonLayout,
+              icon: nextIcon,
+              onPress: goToNext,
+              variant: previousNextIconButtonVariants,
+              accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+              tokens: selectIconStyles(themeTokens)
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport),
+          onLayout: tabs && onTabsPanelLayout,
+          children: showPanelNavigation ? activePanelNavigation : null
+        })]
+      })
+    })
+  });
+});
+Carousel.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Carousel'),
+  variant: variantProp.propType,
+  /**
+   * Prop related to StepTracker Variants
+   */
+  stepTrackerVariant: variantProp.propType,
+  /**
+   * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
+   * This is used when generating item labels. For example, if a carousel contains offers,
+   * pass itemLabel="summer offer" (or copy="fr" and an appropriate French translation) to genereate
+   * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
+   */
+  itemLabel: PropTypes.string,
+  /**
+   * `inside` renders the previous and next buttons inside the slide
+   * `outside` renders the previous and next buttons outside the slide
+   * `edge` renders the previous and next buttons at the edge of the slide
+   */
+  previousNextNavigationPosition: PropTypes.oneOf(['inside', 'outside', 'edge']),
+  /**
+   * Defines the size of the `IconButton` which is being used to render next and previous buttons
+   */
+  previousNextIconSize: PropTypes.oneOf(['default', 'small', 'large']),
+  /**
+   * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
+   */
+  springConfig: PropTypes.object,
+  /**
+   * An array of objects containing information on the thumbnails to be rendered as navigation panel
+   */
+  thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    accessibilityLabel: PropTypes.string,
+    alt: PropTypes.string,
+    src: PropTypes.string
+  })),
+  /**
+   * Minimal part of slide width must be swiped for changing index.
+   * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
+   */
+  minDistanceForAction: PropTypes.number,
+  /**
+   * Initiate animation after swipe this distance.
+   */
+  minDistanceToCapture: PropTypes.number,
+  /**
+   * Called when active index changed
+   * 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) => {
+   *      console.log(changedIndex)
+   *    }, [])  // pass local dependencies as per your component
+   *    <Carousel
+   *      onIndexChanged={onIndexChangedCallback}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
+   */
+  onIndexChanged: PropTypes.func,
+  /**
+   * If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link
+   * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
+   */
+  skipLinkHref: PropTypes.string,
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
+  /**
+   * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
+   *
+   * Pass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.
+   *
+   * If skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content.
+   */
+  refocus: PropTypes.bool,
+  /**
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
+   * Use it as follows:
+   * ```js
+   *    <Carousel
+   *      panelNavigation={<CustomPanelNavigation />}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   */
+  panelNavigation: PropTypes.element,
+  /**
+   * When slide animation start
+   * 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) => {
+   *      console.log(currentIndex)
+   *    }, [])  // pass local dependencies as per your component
+   *    <Carousel
+   *      onAnimationStart={onAnimationStartCallback}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
+   */
+  onAnimationStart: PropTypes.func,
+  /**
+   * When slide animation end with parameter of current index (after animation ends)
+   * 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) => {
+   *      console.log(changedIndex)
+   *    }, [])  // pass local dependencies as per your component
+   *    <Carousel
+   *      onAnimationEnd={onAnimationEndCallback}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
+   */
+  onAnimationEnd: PropTypes.func,
+  /**
+   * Use this to override the default text for panel navigation
+   */
+  panelNavigationTextDictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      stepTrackerLabel: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      stepTrackerLabel: PropTypes.string.isRequired
+    })
+  }),
+  /**
+   * Provide custom accessibilityRole for Carousel container
+   */
+  accessibilityRole: PropTypes.string,
+  /**
+   * Provide custom accessibilityLabel for Carousel container
+   */
+  accessibilityLabel: PropTypes.string,
+  /**
+   * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
+   * assistive technology tools know to intepret the carousel as a list.
+   *
+   * 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.oneOf(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.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.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.number,
+  /**
+   * If set to `true`, the Carousel will show the previous and next slides
+   * - Default value is `false`
+   */
+  enablePeeking: PropTypes.bool,
+  /**
+   * If set to `true`, the Carousel will show multiple slides at once
+   * - Default value is `false`
+   */
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool
+};
+Carousel.Item = CarouselItem;
+Carousel.displayName = 'Carousel';
+export default Carousel;