@telus-uds/components-base 2.0.2 → 2.2.0

package/CHANGELOG.md

@@ -1,12 +1,50 @@
 # Change Log - @telus-uds/components-base
 
-<!-- This log was last generated on Sat, 23 Nov 2024 01:38:59 GMT and should not be manually modified. -->
+<!-- This log was last generated on Fri, 06 Dec 2024 02:03:26 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.2.0
+
+Fri, 06 Dec 2024 02:03:26 GMT
+
+### Minor changes
+
+- `PressableItem`: pass event to on-press function (guillermo.peitzner@telus.com)
+- `ChevronLink`, `Search` & `ResponsiveImage`: new `dataSet` prop added to the components to allow the capability to pass data (35577399+JoshHC@users.noreply.github.com)
+
+### Patches
+
+- `Typography`: fix gradient when enableMediaQueryStyleSheet is true (Mauricio.BatresMontejo@telus.com)
+
+## 2.1.0
+
+Mon, 02 Dec 2024 20:29:26 GMT
+
+### Minor changes
+
+- `Validator`: feedback icon added in the validation of the component (35577399+JoshHC@users.noreply.github.com)
+- `Carousel`: add enableDisplayMultipleItemsPerSlide prop (guillermo.peitzner@telus.com)
+- `InputLabel`: Implemented/Updated storybook InputLabel theme-casa (shivam.gupta3@telus.com)
+- `CheckBoxGroup`: `inactive` prop added for the items to be able to set inactive any item of the `CheckBoxGroup` component (35577399+JoshHC@users.noreply.github.com)
+- `ChevronLink`, `Search` & `ResponsiveImage`: new contentful props data-contentful-field-id and data-contentful-entry-id added to the components (35577399+JoshHC@users.noreply.github.com)
+- `Progress`: Added rules for `subtle` and `inverse` variants. Deprecated `inactive` and `negative` appearances and moved them to `style` appearances. Enabled `offset` object for controlling the position of the `ProgressBar` component. (jaime.tuyuc@telus.com)
+- Customized/optional props implemented `Status` and `Icon` components (shivam.gupta3@telus.com)
+- `Tooltip`: Customized/optional props implemented, max width and min width (shivam.gupta3@telus.com)
+- `Modal`: update component to enable heading bottom border and content spacing (eduardo.pereira1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v3.1.0
+
+### Patches
+
+- `Select`: fixing tokens for Android (Mauricio.BatresMontejo@telus.com)
+- `Tabs`: fixed the problem of not displaying the lower border that encloses the items in Android (35577399+JoshHC@users.noreply.github.com)
+- `Card`: fix console log warnings (guillermo.peitzner@telus.com)
+- `TextInput`: Remove mask interactivity when input is inactive (jaime.tuyuc@telus.com)
+- `TextInput`: Arial-label fixed in correct order - Password variant (sergio.ramirez@telus.com)
+
 ## 2.0.2
 
-Sat, 23 Nov 2024 01:38:59 GMT
+Sat, 23 Nov 2024 01:40:21 GMT
 
 ### Patches
 

package/lib/Card/PressableCardBase.js

@@ -45,7 +45,8 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const getCardState = pressableState => resolvePressableState(pressableState, additionalState);
   const getTokens = pressableState => validateThemeTokens(resolvePressableTokens(tokens, pressableState, additionalState), getTokensSetPropType(tokenKeys, {
-    requireAll: true
+    partial: true,
+    allowFunction: true
   }), 'PressableCard');
   const getCardTokens = pressableState => selectTokens('Card', getTokens(pressableState));
   const getOuterBorderStyle = pressableState => {

package/lib/Carousel/Carousel.js

@@ -20,6 +20,7 @@ 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 } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -47,9 +48,9 @@ const selectContainerStyles = width => ({
   overflow: 'hidden',
   width
 });
-const selectSwipeAreaStyles = (count, width, enablePeeking) => ({
+const selectSwipeAreaStyles = (count, width, enablePeeking, enableDisplayMultipleItemsPerSlide) => ({
   width: width * count,
-  justifyContent: enablePeeking ? 'flex-start' : 'space-between',
+  justifyContent: enablePeeking || enableDisplayMultipleItemsPerSlide ? 'flex-start' : 'space-between',
   flexDirection: 'row'
 });
 const getDynamicPositionProperty = areStylesAppliedOnPreviousButton => areStylesAppliedOnPreviousButton ? 'left' : 'right';
@@ -59,7 +60,8 @@ const selectControlButtonPositionStyles = _ref => {
     buttonWidth,
     positionProperty = getDynamicPositionProperty(),
     spaceBetweenSlideAndButton,
-    enablePeeking
+    enablePeeking,
+    enableDisplayMultipleItemsPerSlide
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
@@ -67,7 +69,7 @@ const selectControlButtonPositionStyles = _ref => {
   } else if (positionVariant === 'inside') {
     styles[positionProperty] = 0;
   } else if (positionVariant === 'outside') {
-    if (enablePeeking) {
+    if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0;
     } else {
       styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
@@ -75,7 +77,7 @@ const selectControlButtonPositionStyles = _ref => {
   }
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -94,7 +96,8 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       buttonWidth: previousNextNavigationButtonWidth,
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-      enablePeeking
+      enablePeeking,
+      enableDisplayMultipleItemsPerSlide
     })
   };
 };
@@ -118,6 +121,79 @@ const getPeekingProps = viewport => {
     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;
+};
+
+/**
+ * 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
@@ -202,10 +278,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     title = 'carousel',
     springConfig = undefined,
     thumbnails = undefined,
+    enableDisplayMultipleItemsPerSlide = false,
     panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
     }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
-      variant: stepTrackerVariant
+      variant: stepTrackerVariant,
+      enableDisplayMultipleItemsPerSlide: enableDisplayMultipleItemsPerSlide
     }),
     tag = 'ul',
     accessibilityRole,
@@ -219,7 +297,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   let childrenArray = unpackFragment(children);
-  const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1;
+  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];
@@ -228,7 +308,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     dictionary,
     copy
   });
-  const viewport = useViewport();
   const themeTokens = useThemeTokens('Carousel', tokens, variant, {
     viewport
   });
@@ -271,7 +350,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const isSwiping = React.useRef(false);
   const autoPlayRef = React.useRef(null);
   const isFirstSlide = !activeIndex;
-  const isLastSlide = activeIndex + 1 >= childrenArray.length;
+  const isLastSlide = activeIndex + 1 >= totalItems;
   const handleAnimationStart = React.useCallback(function () {
     if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
     setIsAnimating(true);
@@ -312,7 +391,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false,
         duration: transitionDuration * 1000
       }).start(handleAnimationEndToIndex);
-    } else if (enablePeeking) {
+    } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       Animated.timing(pan, {
         ...springConfig,
         toValue,
@@ -326,7 +405,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking]);
+  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
       clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
@@ -352,8 +431,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     let calcDelta = delta;
     if (activeIndexRef.current <= 0 && delta < 0) {
       skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
-      calcDelta = childrenArray.length + delta;
-    } else if (activeIndexRef.current + 1 >= childrenArray.length && delta > 0) {
+      calcDelta = totalItems + delta;
+    } else if (activeIndexRef.current + 1 >= totalItems && delta > 0) {
       skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
       calcDelta = -1 * activeIndexRef.current + delta - 1;
     }
@@ -364,11 +443,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     stopAutoplay();
     setActiveIndex(index);
-    toValue.x = containerLayoutRef.current.width * -1 * calcDelta;
+    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 === childrenArray.length && transitionMode === TRANSITION_MODES.AUTOMATIC) {
+      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === TRANSITION_MODES.AUTOMATIC) {
         setisCarouselPlaying(false);
       } else if (isAutoPlayEnabled) {
         autoPlayRef.current = setTimeout(() => {
@@ -381,7 +461,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
-  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
+  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, totalItems, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled, viewport, enablePeeking]);
   const startAutoplay = React.useCallback(() => {
     stopAutoplay();
     if (isAutoPlayEnabled) {
@@ -448,8 +528,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     };
   }, [updateOffset]);
   React.useEffect(() => {
-    setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1);
-  }, [autoPlay, slideDuration, transitionDuration, childrenArray.length]);
+    setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1);
+  }, [autoPlay, slideDuration, transitionDuration, totalItems]);
   React.useEffect(() => {
     return () => {
       stopAutoplay();
@@ -483,14 +563,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = React.useCallback(() => {
-    if (childrenArray.length === 1) {
+    if (totalItems === 1) {
       return false;
     }
     if (Platform.OS === 'web') {
       return !!(viewport === 'xs' || viewport === 'sm');
     }
     return true;
-  }, [viewport, childrenArray.length]);
+  }, [viewport, totalItems]);
   const panResponder = React.useMemo(() => PanResponder.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
@@ -554,11 +634,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     inverse: variant === null || variant === void 0 ? void 0 : 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, childrenArray.length);
+    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, childrenArray.length, itemLabel, getCopy, title]);
+  }, [activeIndex, itemLabel, getCopy, title, totalItems]);
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
     items: tabs
   }) : panelNavigation;
@@ -606,7 +686,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     goTo: goTo,
     getCopyWithPlaceholders: getCopyWithPlaceholders,
     itemLabel: itemLabel,
-    totalItems: childrenArray.length,
+    totalItems: totalItems,
     themeTokens: themeTokens,
     firstFocusRef: firstFocusRef,
     refocus: refocus,
@@ -629,7 +709,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           buttonWidth: previousNextNavigationButtonWidth,
           positionProperty: getDynamicPositionProperty(),
           spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-          enablePeeking
+          enablePeeking,
+          enableDisplayMultipleItemsPerSlide
         })],
         children: /*#__PURE__*/_jsx(IconButton, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -637,8 +718,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           variant: previousNextIconButtonVariants,
           onPress: onAnimationControlButtonPress
         })
-      }) : null, showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking),
+      }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide),
         testID: "previous-button-container",
         children: /*#__PURE__*/_jsx(IconButton, {
           onLayout: onPreviousNextNavigationButtonLayout,
@@ -661,7 +742,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }), /*#__PURE__*/_jsx(View, {
         style: selectContainerStyles(containerLayout.width),
         children: /*#__PURE__*/_jsx(Animated.View, {
-          style: StyleSheet.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking), {
+          style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
             transform: [{
               translateX: pan.x
             }, {
@@ -677,17 +758,19 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             const hidden = !isAnimating && index !== activeIndex;
             const clonedElement = /*#__PURE__*/React.cloneElement(element, {
               elementIndex: index,
-              hidden: enablePeeking ? false : hidden,
+              hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
               enablePeeking,
-              peekingProps: getPeekingProps(viewport)
+              peekingProps: getPeekingProps(viewport),
+              enableDisplayMultipleItemsPerSlide,
+              viewport
             });
             return /*#__PURE__*/_jsx(React.Fragment, {
               children: clonedElement
             }, index.toFixed(2));
           })
         })
-      }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking),
+      }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide),
         testID: "next-button-container",
         children: /*#__PURE__*/_jsx(IconButton, {
           onLayout: onPreviousNextNavigationButtonLayout,
@@ -886,7 +969,12 @@ Carousel.propTypes = {
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`
    */
-  enablePeeking: PropTypes.bool
+  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';

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -4,47 +4,61 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
 import { useCarousel } from '../CarouselContext';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyle = _ref => {
   let {
     width,
-    activeIndex,
     elementIndex,
-    totalItems,
     enablePeeking,
     peekingMarginLeft,
     peekingFirstSpace,
-    peekingLastSpace,
-    peekingMiddleSpace,
     peekingGap,
-    hidden
+    hidden,
+    enableDisplayMultipleItemsPerSlide,
+    viewport
   } = _ref;
   let adjustedWidth = width;
   let marginLeft = 0;
   const marginRight = 0;
   if (enablePeeking) {
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
     const isFirst = elementIndex === 0;
-    const isActive = activeIndex === elementIndex;
-    if (isActive) {
-      if (isFirst) {
-        marginLeft = peekingMarginLeft;
-      } else {
-        marginLeft = peekingGap;
-      }
-    } else if (isFirst) {
-      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace;
-      if (activeIndex > 1) {
-        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1);
-      }
-      if (activeIndex === totalItems - 1) {
-        marginLeft += peekingLastSpace - peekingMiddleSpace;
-      }
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    if (isFirst) {
+      marginLeft = peekingMarginLeft;
     } else {
       marginLeft = peekingGap;
     }
   }
+
+  // Adjust width and margins for multiple items per slide.
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        break;
+      case 'md':
+        if (enablePeeking) {
+          adjustedWidth = adjustedWidth / ITEMS_PER_VIEWPORT_MD - peekingGap * 1 / ITEMS_PER_VIEWPORT_MD;
+        } else {
+          adjustedWidth = width / ITEMS_PER_VIEWPORT_MD - GAP_BETWEEN_ITEMS * 2 / ITEMS_PER_VIEWPORT_MD;
+          marginLeft = GAP_BETWEEN_ITEMS;
+        }
+        break;
+      case 'lg':
+      case 'xl':
+        if (enablePeeking) {
+          adjustedWidth = adjustedWidth / ITEMS_PER_VIEWPORT_LG_XL - peekingGap * 2 / ITEMS_PER_VIEWPORT_LG_XL;
+        } else {
+          adjustedWidth = width / ITEMS_PER_VIEWPORT_LG_XL - GAP_BETWEEN_ITEMS * 3 / ITEMS_PER_VIEWPORT_LG_XL;
+          marginLeft = GAP_BETWEEN_ITEMS;
+        }
+        break;
+      default:
+        break;
+    }
+  }
   const style = {
     width: adjustedWidth,
     marginLeft,
@@ -68,12 +82,13 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     hidden,
     enablePeeking,
     peekingProps,
+    enableDisplayMultipleItemsPerSlide,
+    viewport,
     ...rest
   } = _ref2;
   const {
     width,
     activeIndex,
-    totalItems,
     height
   } = useCarousel();
   const selectedProps = selectProps({
@@ -84,12 +99,12 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   return /*#__PURE__*/_jsx(View, {
     style: selectContainerStyle({
       width,
-      activeIndex,
       elementIndex,
-      totalItems,
       hidden,
       height,
       enablePeeking,
+      enableDisplayMultipleItemsPerSlide,
+      viewport,
       ...peekingProps
     }),
     ...selectedProps,