@telus-uds/components-base 3.25.0 → 3.27.0

package/src/Carousel/Carousel.jsx

@@ -1,5 +1,13 @@
 import React from 'react'
-import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
+import {
+  View,
+  Animated,
+  PanResponder,
+  StyleSheet,
+  Platform,
+  Dimensions,
+  Easing
+} from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, useTheme } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
@@ -37,16 +45,15 @@ import {
   LARGE_VIEWPORT_MARGIN,
   DEFAULT_VIEWPORT_MARGIN,
   PEEKING_MULTIPLIER,
-  ACTIVE_INDEX_OFFSET_MULTIPLIER,
-  NEGATIVE_MULTIPLIER
+  NEGATIVE_MULTIPLIER,
+  TRANSITION_MODES,
+  SWIPE_RELEASE_STYLES,
+  INSTANT_ANIMATION_DURATION,
+  DEFAULT_SWIPE_RELEASE_DURATION,
+  POSITION_VARIANTS,
+  POSITION_PROPERTIES
 } from './Constants'
 
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-}
-
 const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
@@ -106,7 +113,7 @@ const selectHeroContainerStyles = (width, hidden) => ({
 })
 
 const getDynamicPositionProperty = (areStylesAppliedOnPreviousButton) =>
-  areStylesAppliedOnPreviousButton ? 'left' : 'right'
+  areStylesAppliedOnPreviousButton ? POSITION_PROPERTIES.LEFT : POSITION_PROPERTIES.RIGHT
 
 const selectControlButtonPositionStyles = ({
   positionVariant,
@@ -116,24 +123,41 @@ const selectControlButtonPositionStyles = ({
   enablePeeking,
   enableDisplayMultipleItemsPerSlide,
   isAutoPlayEnabled,
-  viewport
+  viewport,
+  maxWidth,
+  viewportWidth
 }) => {
   const styles = {}
-  if (positionVariant === 'edge') {
-    styles[positionProperty] = -1 * (buttonWidth / 2)
-  } else if (positionVariant === 'inside') {
-    styles[positionProperty] = DEFAULT_POSITION_OFFSET
-  } else if (positionVariant === 'outside') {
+
+  let positionOffset = 0
+
+  if (positionVariant === POSITION_VARIANTS.EDGE) {
+    positionOffset = -1 * (buttonWidth / 2)
+  } else if (positionVariant === POSITION_VARIANTS.INSIDE) {
+    positionOffset = DEFAULT_POSITION_OFFSET
+  } else if (positionVariant === POSITION_VARIANTS.OUTSIDE) {
     if (
       enablePeeking ||
       enableDisplayMultipleItemsPerSlide ||
       (isAutoPlayEnabled && viewport === 'xs')
     ) {
-      styles[positionProperty] = 0
+      positionOffset = 0
     } else {
-      styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth)
+      positionOffset = -1 * (spaceBetweenSlideAndButton + buttonWidth)
     }
   }
+
+  if (enablePeeking) {
+    if (positionProperty === POSITION_PROPERTIES.RIGHT) {
+      const rightMargin = (viewportWidth - maxWidth) / 2
+      positionOffset += rightMargin
+    } else if (positionProperty === POSITION_PROPERTIES.LEFT) {
+      const leftMargin = (viewportWidth - maxWidth) / 2
+      positionOffset += leftMargin
+    }
+  }
+
+  styles[positionProperty] = positionOffset
   return styles
 }
 
@@ -147,7 +171,9 @@ const selectPreviousNextNavigationButtonStyles = (
   enablePeeking,
   enableDisplayMultipleItemsPerSlide,
   isAutoPlayEnabled,
-  viewport
+  viewport,
+  maxWidth,
+  viewportWidth
 ) => {
   const styles = {
     zIndex: 1,
@@ -171,7 +197,9 @@ const selectPreviousNextNavigationButtonStyles = (
       enablePeeking,
       enableDisplayMultipleItemsPerSlide,
       isAutoPlayEnabled,
-      viewport
+      viewport,
+      maxWidth,
+      viewportWidth
     })
   }
 }
@@ -240,7 +268,7 @@ const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) =
   return ITEMS_PER_VIEWPORT_XS_SM
 }
 
-const selectRootContainerStyles = (enableHero, viewport) => {
+const selectRootContainerStyles = (enableHero, viewport, enablePeeking) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
       alignItems: 'center'
@@ -251,16 +279,26 @@ const selectRootContainerStyles = (enableHero, viewport) => {
       paddingHorizontal: 16
     }
   }
+  if (enablePeeking) {
+    return {
+      width: '100%'
+    }
+  }
   return {}
 }
 
-const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
-  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+const selectMainContainerStyles = (enableHero, viewport, maxWidth, enablePeeking) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web' && !enablePeeking) {
     return {
       width: '100%',
       maxWidth: maxWidth || 1200
     }
   }
+  if (enablePeeking) {
+    return {
+      width: '100%'
+    }
+  }
   if (maxWidth !== null && maxWidth !== undefined) {
     return {
       maxWidth,
@@ -271,16 +309,24 @@ const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
   return {}
 }
 
-const selectNavigationStyles = (tabs, enableHero, viewport) => {
+const selectNavigationStyles = (tabs, enableHero, viewport, enablePeeking, maxWidth) => {
   let marginHorizontal = 0
 
   if (enableHero && tabs) {
     marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN
   }
 
-  return {
+  const styles = {
     marginHorizontal
   }
+
+  if (enablePeeking && maxWidth) {
+    styles.maxWidth = maxWidth
+    styles.alignSelf = 'center'
+    styles.width = '100%'
+  }
+
+  return styles
 }
 
 /**
@@ -289,22 +335,16 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
  * @param {number} containerWidth - The width of the carousel container.
  * @param {boolean} enablePeeking - Flag indicating whether peeking is enabled.
  * @param {Object} viewport - The viewport configuration object used to determine peeking properties.
- * @param {React.MutableRefObject<number>} activeIndexRef - A ref object holding the current active index of the carousel.
+ * @param {number} maxWidth - The maximum width constraint for the carousel content.
  * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth) => {
   let finalWidth = containerWidth
 
   if (enablePeeking) {
-    const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
-    const slideWide =
-      containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
-
-    if (activeIndexRef.current === 0) {
-      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace
-    } else {
-      finalWidth = slideWide + peekingGap
-    }
+    const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
+    const baseWidth = maxWidth || containerWidth
+    finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap
   }
 
   return finalWidth
@@ -412,6 +452,8 @@ const Carousel = React.forwardRef(
       autoPlay = false,
       enablePeeking = false,
       contentMaxWidth,
+      swipeReleaseStyle = SWIPE_RELEASE_STYLES.INSTANT,
+      swipeReleaseDuration = DEFAULT_SWIPE_RELEASE_DURATION,
       ...rest
     },
     ref
@@ -423,7 +465,15 @@ const Carousel = React.forwardRef(
 
     const contentMaxWidthValue = useResponsiveProp(contentMaxWidth)
     const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
-    const maxWidth = resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
+
+    let maxWidth = null
+    if (enablePeeking || contentMaxWidth !== undefined) {
+      maxWidth =
+        contentMaxWidthValue === undefined
+          ? responsiveWidth
+          : resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
+    }
+
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
       autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
@@ -486,8 +536,17 @@ const Carousel = React.forwardRef(
     const isSwiping = React.useRef(false)
     const autoPlayRef = React.useRef(null)
 
+    const [rootContainerLayout, setRootContainerLayout] = React.useState({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+    const rootContainerLayoutRef = React.useRef(rootContainerLayout)
+
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= totalItems
+    const currentViewportWidth = rootContainerLayout.width
 
     const handleAnimationStart = React.useCallback(
       (...args) => {
@@ -510,21 +569,16 @@ const Carousel = React.forwardRef(
 
     const updateOffset = React.useCallback(() => {
       if (enablePeeking) {
-        const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
+        const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
 
         let finalWidth
-        const slideWide =
-          containerLayoutRef.current.width -
-          (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
+        const baseWidth = maxWidth || containerLayoutRef.current.width
+        const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER
 
         if (activeIndexRef.current === 0) {
           finalWidth = 0
         } else {
-          finalWidth =
-            slideWide +
-            peekingMarginLeft -
-            peekingMiddleSpace +
-            (slideWide + peekingGap) * (activeIndexRef.current - ACTIVE_INDEX_OFFSET_MULTIPLIER)
+          finalWidth = (slideWide + peekingGap) * activeIndexRef.current
         }
 
         animatedX.current = finalWidth * NEGATIVE_MULTIPLIER
@@ -550,17 +604,32 @@ const Carousel = React.forwardRef(
         })
         heroPan.setValue({ x: 0, y: 0 })
       }
-    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking, maxWidth])
 
     const animate = React.useCallback(
-      (panToAnimate, toValue, toIndex) => {
+      (panToAnimate, toValue, toIndex, isSwipeRelease = false) => {
         const applicableTransitionDuration =
           isLastSlide && toIndex === 0 ? loopDuration : transitionDuration
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
-        if (reduceMotionRef.current || isSwiping.current) {
-          Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
-            handleAnimationEndToIndex
-          )
+        if (reduceMotionRef.current) {
+          Animated.timing(panToAnimate, {
+            toValue,
+            duration: INSTANT_ANIMATION_DURATION,
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
+        } else if (isSwipeRelease && swipeReleaseStyle === SWIPE_RELEASE_STYLES.EASE_OUT) {
+          Animated.timing(panToAnimate, {
+            toValue,
+            duration: swipeReleaseDuration,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
+        } else if (isSwiping.current || isSwipeRelease) {
+          Animated.timing(panToAnimate, {
+            toValue,
+            duration: INSTANT_ANIMATION_DURATION,
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
         } else if (isAutoPlayEnabled) {
           Animated.timing(panToAnimate, {
             ...springConfig,
@@ -591,7 +660,9 @@ const Carousel = React.forwardRef(
         isLastSlide,
         isAutoPlayEnabled,
         enablePeeking,
-        enableDisplayMultipleItemsPerSlide
+        enableDisplayMultipleItemsPerSlide,
+        swipeReleaseStyle,
+        swipeReleaseDuration
       ]
     )
 
@@ -612,6 +683,7 @@ const Carousel = React.forwardRef(
         const toValue = { x: 0, y: 0 }
         let skipChanges = !delta
         let calcDelta = delta
+        const isSwipeRelease = transitionMode === TRANSITION_MODES.SWIPE
         if (activeIndexRef.current <= 0 && delta < 0) {
           skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC
           calcDelta = totalItems + delta
@@ -623,10 +695,10 @@ const Carousel = React.forwardRef(
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
           isTransitioningRef.current = true
-          animate(pan, toValue, index)
+          animate(pan, toValue, index, isSwipeRelease)
 
           if (enableHero) {
-            animate(heroPan, toValue, index)
+            animate(heroPan, toValue, index, isSwipeRelease)
           }
           return calcDelta
         }
@@ -638,16 +710,16 @@ const Carousel = React.forwardRef(
           containerLayoutRef.current.width,
           enablePeeking,
           viewport,
-          activeIndexRef
+          maxWidth
         )
 
         toValue.x = finalWidth * -1 * calcDelta
         const heroToValue = { x: 0, y: 0 }
         heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
         isTransitioningRef.current = true
-        animate(pan, toValue, index)
+        animate(pan, toValue, index, isSwipeRelease)
         if (enableHero) {
-          animate(heroPan, heroToValue, index)
+          animate(heroPan, heroToValue, index, isSwipeRelease)
         }
         if (isCarouselPlaying) {
           stopAutoplay()
@@ -684,7 +756,8 @@ const Carousel = React.forwardRef(
         enablePeeking,
         pan,
         heroPan,
-        enableHero
+        enableHero,
+        maxWidth
       ]
     )
 
@@ -741,6 +814,10 @@ const Carousel = React.forwardRef(
       heroContainerLayoutRef.current = heroContainerLayout
     }, [heroContainerLayout])
 
+    React.useEffect(() => {
+      rootContainerLayoutRef.current = rootContainerLayout
+    }, [rootContainerLayout])
+
     React.useEffect(() => {
       pan.x.addListener(({ value }) => {
         animatedX.current = value
@@ -823,6 +900,12 @@ const Carousel = React.forwardRef(
       }
     }) => setPreviousNextNavigationButtonWidth(width)
 
+    const onRootContainerLayout = ({
+      nativeEvent: {
+        layout: { x, y, width, height }
+      }
+    }) => setRootContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
+
     const isSwipeAllowed = React.useCallback(() => {
       if (totalItems === 1) {
         return false
@@ -866,14 +949,14 @@ const Carousel = React.forwardRef(
             }
             const correction = gesture.moveX - gesture.x0
 
+            isSwiping.current = false
+
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate(pan, { x: 0, y: 0 }, 0)
+              animate(pan, { x: 0, y: 0 }, activeIndexRef.current, true)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
             }
-
-            isSwiping.current = false
           }
         }),
       [
@@ -924,14 +1007,14 @@ const Carousel = React.forwardRef(
             }
             const correction = gesture.moveX - gesture.x0
 
+            isSwiping.current = false
+
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate(heroPan, { x: 0, y: 0 }, 0)
+              animate(heroPan, { x: 0, y: 0 }, activeIndexRef.current, true)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
             }
-
-            isSwiping.current = false
           }
         }),
       [
@@ -1045,8 +1128,11 @@ const Carousel = React.forwardRef(
     )
 
     return (
-      <View style={selectRootContainerStyles(enableHero, viewport)}>
-        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth)}>
+      <View
+        style={selectRootContainerStyles(enableHero, viewport, enablePeeking)}
+        onLayout={onRootContainerLayout}
+      >
+        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth, enablePeeking)}>
           <CarouselProvider
             activeIndex={activeIndex}
             goTo={goTo}
@@ -1061,6 +1147,8 @@ const Carousel = React.forwardRef(
               enableDisplayMultipleItemsPerSlide,
               viewport
             )}
+            maxWidth={maxWidth}
+            viewportWidth={currentViewportWidth}
           >
             <View
               style={[
@@ -1087,7 +1175,9 @@ const Carousel = React.forwardRef(
                       enablePeeking,
                       enableDisplayMultipleItemsPerSlide,
                       isAutoPlayEnabled,
-                      viewport
+                      viewport,
+                      maxWidth,
+                      viewportWidth: currentViewportWidth
                     })
                   ]}
                 >
@@ -1113,7 +1203,9 @@ const Carousel = React.forwardRef(
                     enablePeeking,
                     enableDisplayMultipleItemsPerSlide,
                     isAutoPlayEnabled,
-                    viewport
+                    viewport,
+                    maxWidth,
+                    currentViewportWidth
                   )}
                   testID="previous-button-container"
                 >
@@ -1166,22 +1258,7 @@ const Carousel = React.forwardRef(
                     let hidden = !isAnimating && index !== activeIndex
 
                     if (enablePeeking && !isAnimating) {
-                      if (enableDisplayMultipleItemsPerSlide) {
-                        const maxItemsForSlide = getMaximumItemsForSlide(
-                          enableDisplayMultipleItemsPerSlide,
-                          viewport
-                        )
-                        if (
-                          index >= activeIndex * maxItemsForSlide - 1 &&
-                          index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1
-                        ) {
-                          hidden = false
-                        } else {
-                          hidden = true
-                        }
-                      } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
-                        hidden = false
-                      }
+                      hidden = false
                     } else if (
                       !enablePeeking &&
                       enableDisplayMultipleItemsPerSlide &&
@@ -1224,7 +1301,9 @@ const Carousel = React.forwardRef(
                     enablePeeking,
                     enableDisplayMultipleItemsPerSlide,
                     isAutoPlayEnabled,
-                    viewport
+                    viewport,
+                    maxWidth,
+                    currentViewportWidth
                   )}
                   testID="next-button-container"
                 >
@@ -1242,7 +1321,9 @@ const Carousel = React.forwardRef(
                 </View>
               ) : null}
             </View>
-            <View style={selectNavigationStyles(tabs, enableHero, viewport)}>
+            <View
+              style={selectNavigationStyles(tabs, enableHero, viewport, enablePeeking, maxWidth)}
+            >
               {showPanelNavigation ? activePanelNavigation : null}
             </View>
           </CarouselProvider>
@@ -1495,7 +1576,23 @@ Carousel.propTypes = {
     md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
-  })
+  }),
+  /**
+   * Animation style for swipe release transitions.
+   * - `'instant'`: Immediate snap to position (current default)
+   * - `'ease-out'`: Smooth deceleration animation
+   * - Default value is `'instant'`
+   * - Use `swipeReleaseDuration` to customize the animation duration when using `'ease-out'`
+   *
+   * @deprecated The default will change to `'ease-out'` in Q2 2026 (introduced Jan 2026).
+   */
+  swipeReleaseStyle: PropTypes.oneOf(['instant', 'ease-out']),
+  /**
+   * Duration in milliseconds of the ease-out animation when releasing a swipe gesture.
+   * Only applies when `swipeReleaseStyle` is set to `'ease-out'`.
+   * - Default value is `500` (500ms)
+   */
+  swipeReleaseDuration: PropTypes.number
 }
 
 Carousel.Item = CarouselItem

package/src/Carousel/CarouselContext.jsx

@@ -14,7 +14,9 @@ const CarouselProvider = ({
   themeTokens,
   totalItems,
   width,
-  maximumItemsForSlide
+  maximumItemsForSlide,
+  maxWidth,
+  viewportWidth
 }) => {
   const value = React.useMemo(
     () => ({
@@ -26,7 +28,9 @@ const CarouselProvider = ({
       themeTokens,
       totalItems,
       width,
-      maximumItemsForSlide
+      maximumItemsForSlide,
+      maxWidth,
+      viewportWidth
     }),
     [
       activeIndex,
@@ -37,7 +41,9 @@ const CarouselProvider = ({
       totalItems,
       themeTokens,
       width,
-      maximumItemsForSlide
+      maximumItemsForSlide,
+      maxWidth,
+      viewportWidth
     ]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
@@ -61,7 +67,9 @@ CarouselProvider.propTypes = {
   themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  maximumItemsForSlide: PropTypes.number
+  maximumItemsForSlide: PropTypes.number,
+  maxWidth: PropTypes.number,
+  viewportWidth: PropTypes.number
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -18,27 +18,28 @@ const selectContainerStyle = ({
   width,
   elementIndex,
   enablePeeking,
-  peekingMarginLeft,
   peekingGap,
   hidden,
   enableDisplayMultipleItemsPerSlide,
   viewport,
-  peekingMiddleSpace
+  peekingMiddleSpace,
+  maxWidth,
+  viewportWidth
 }) => {
   let adjustedWidth = width
   let marginLeft = 0
 
   if (enablePeeking) {
     const isFirst = elementIndex === 0
-    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2)
+    const baseWidth = maxWidth || width
+    adjustedWidth = baseWidth - peekingMiddleSpace * 2
     if (isFirst) {
-      marginLeft = peekingMarginLeft
+      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2
     } else {
       marginLeft = peekingGap
     }
   }
 
-  // Adjust width and margins for multiple items per slide.
   if (enableDisplayMultipleItemsPerSlide) {
     switch (viewport) {
       case 'xs':
@@ -102,7 +103,8 @@ const CarouselItem = React.forwardRef(
     },
     ref
   ) => {
-    const { width, activeIndex, goTo, maximumItemsForSlide } = useCarousel()
+    const { width, activeIndex, goTo, maximumItemsForSlide, maxWidth, viewportWidth } =
+      useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
@@ -162,6 +164,8 @@ const CarouselItem = React.forwardRef(
           enablePeeking,
           enableDisplayMultipleItemsPerSlide,
           viewport,
+          maxWidth,
+          viewportWidth,
           ...peekingProps
         })}
         {...selectedProps}

package/src/Carousel/Constants.js

@@ -9,3 +9,27 @@ export const DEFAULT_VIEWPORT_MARGIN = 10
 export const PEEKING_MULTIPLIER = 2
 export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1
 export const NEGATIVE_MULTIPLIER = -1
+
+export const TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+}
+
+export const SWIPE_RELEASE_STYLES = {
+  INSTANT: 'instant',
+  EASE_OUT: 'ease-out'
+}
+
+export const INSTANT_ANIMATION_DURATION = 1
+export const DEFAULT_SWIPE_RELEASE_DURATION = 500
+export const POSITION_VARIANTS = {
+  EDGE: 'edge',
+  INSIDE: 'inside',
+  OUTSIDE: 'outside'
+}
+
+export const POSITION_PROPERTIES = {
+  LEFT: 'left',
+  RIGHT: 'right'
+}