@telus-uds/components-base 3.5.1 → 3.5.2

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 28 Mar 2025 01:00:41 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Apr 2025 19:33:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.5.2
+
+Tue, 08 Apr 2025 19:33:55 GMT
+
+### Patches
+
+- `Carousel`: peeking mode optimizations (guillermo.peitzner@telus.com)
+- `Notification`: fix system alignment variant when using RNMQ (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: allow scrolling to viewport beyond xs (Mauricio.BatresMontejo@telus.com)
+
 ## 3.5.1
 
-Fri, 28 Mar 2025 01:00:41 GMT
+Fri, 28 Mar 2025 01:02:45 GMT
 
 ### Patches
 

package/lib/cjs/Carousel/Carousel.js

@@ -205,56 +205,27 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
 };
 
 /**
- * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ * Calculates the final width of a carousel container based on the provided parameters.
  *
- * @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.
+ * @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.
+ * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
   let finalWidth = containerWidth;
   if (enablePeeking) {
     const {
-      peekingFirstSpace,
       peekingGap,
-      peekingLastSpace,
-      peekingMiddleSpace
+      peekingMiddleSpace,
+      peekingMarginLeft
     } = 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;
-      }
+    const slideWide = containerWidth - (peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER + peekingGap * _Constants.PEEKING_MULTIPLIER);
+    if (activeIndexRef.current === 0) {
+      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace;
+    } else {
+      finalWidth = slideWide + peekingGap;
     }
   }
   return finalWidth;
@@ -441,7 +412,23 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsAnimating(false);
   }, [onAnimationEnd]);
   const updateOffset = _react.default.useCallback(() => {
-    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
+    if (enablePeeking) {
+      const {
+        peekingGap,
+        peekingMiddleSpace,
+        peekingMarginLeft
+      } = getPeekingProps(viewport);
+      let finalWidth;
+      const slideWide = containerLayoutRef.current.width - (peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER + peekingGap * _Constants.PEEKING_MULTIPLIER);
+      if (activeIndexRef.current === 0) {
+        finalWidth = 0;
+      } else {
+        finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace + (slideWide + peekingGap) * (activeIndexRef.current - _Constants.ACTIVE_INDEX_OFFSET_MULTIPLIER);
+      }
+      animatedX.current = finalWidth * _Constants.NEGATIVE_MULTIPLIER;
+    } else {
+      animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * _Constants.NEGATIVE_MULTIPLIER;
+    }
     animatedY.current = 0;
     pan.setOffset({
       x: animatedX.current,
@@ -452,7 +439,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       y: 0
     });
     if (enableHero) {
-      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1;
+      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * _Constants.NEGATIVE_MULTIPLIER;
       heroAnimatedY.current = 0;
       heroPan.setOffset({
         x: heroAnimatedX.current,
@@ -463,7 +450,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         y: 0
       });
     }
-  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero]);
+  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -538,7 +525,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     stopAutoplay();
     setActiveIndex(index);
-    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
+    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef);
     toValue.x = finalWidth * -1 * calcDelta;
     const heroToValue = {
       x: 0,

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -20,18 +20,17 @@ const selectContainerStyle = _ref => {
     elementIndex,
     enablePeeking,
     peekingMarginLeft,
-    peekingFirstSpace,
     peekingGap,
     hidden,
     enableDisplayMultipleItemsPerSlide,
-    viewport
+    viewport,
+    peekingMiddleSpace
   } = _ref;
   let adjustedWidth = width;
   let marginLeft = 0;
-  const marginRight = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2);
     if (isFirst) {
       marginLeft = peekingMarginLeft;
     } else {
@@ -68,8 +67,7 @@ const selectContainerStyle = _ref => {
   }
   const style = {
     width: adjustedWidth,
-    marginLeft,
-    marginRight
+    marginLeft
   };
   if (hidden && _Platform.default.OS === 'web') {
     style.visibility = 'hidden';

package/lib/cjs/Carousel/Constants.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = void 0;
+exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
 const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
 const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
 const GAP_BETWEEN_ITEMS = exports.GAP_BETWEEN_ITEMS = 16;
 const HERO_POSITION_OFFSET = exports.HERO_POSITION_OFFSET = 20;
 const DEFAULT_POSITION_OFFSET = exports.DEFAULT_POSITION_OFFSET = 0;
 const LARGE_VIEWPORT_MARGIN = exports.LARGE_VIEWPORT_MARGIN = 40;
-const DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_VIEWPORT_MARGIN = 10;
+const DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_VIEWPORT_MARGIN = 10;
+const PEEKING_MULTIPLIER = exports.PEEKING_MULTIPLIER = 2;
+const ACTIVE_INDEX_OFFSET_MULTIPLIER = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
+const NEGATIVE_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = -1;

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -249,7 +249,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   const [isScrolling, setIsScrolling] = _react.default.useState(false);
   const [scrollViewHeight, setScrollViewHeight] = _react.default.useState(0);
   const [rowHeight, setRowHeight] = _react.default.useState(0);
-  const modalRef = (0, _utils.useScrollBlocking)(isOpen);
+  const modalRef = (0, _utils.useScrollBlocking)(isOpen && viewport === 'xs');
   const windowWidth = _Dimensions.default.get('window').width;
   const windowHeight = _Dimensions.default.get('window').height;
   _react.default.useEffect(() => {

package/lib/cjs/Notification/Notification.js

@@ -70,8 +70,8 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
+  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -79,9 +79,12 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
 const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
-    acc[vp] = selectContainerStyles({
-      ...viewportTokens
-    });
+    acc[vp] = {
+      ...selectContainerStyles({
+        ...viewportTokens
+      }),
+      flexDirection: 'column'
+    };
     return acc;
   }, {});
   const selectContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContainerStyles);
@@ -90,22 +93,29 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     styles: containerStyles
   } = _utils.StyleSheet.create({
     container: {
-      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
-  const {
-    ids: contentContainerIds,
-    styles: contentContainerStyles
-  } = _utils.StyleSheet.create({
-    contentContainer: {
+  const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
+    let [vp, viewportTokens] = _ref6;
+    acc[vp] = {
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
       ...(system && {
         alignSelf: 'center'
       })
+    };
+    return acc;
+  }, {});
+  const selectContentContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContentContainerStyles);
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = _utils.StyleSheet.create({
+    contentContainer: {
+      ...selectContentContainerMediaQueryStyles
     }
   });
   const {
@@ -178,7 +188,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
       ...(system && {
         alignSelf: 'center'
       })
@@ -268,7 +278,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
     system,
@@ -278,7 +288,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     variant,
     onDismiss,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isDismissed, setIsDismissed] = _react.default.useState(false);
   const viewport = (0, _ViewportProvider.useViewport)();
   const getCopy = (0, _useCopy.default)({
@@ -299,7 +309,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
+  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth, _systemConstants.viewports.map.get(_systemConstants.viewports.xl));
   const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
     contentContainerStyles: {},

package/lib/cjs/utils/useResponsiveProp.js

@@ -28,7 +28,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   _systemConstants.viewports.inherit(prop)[viewport] :
   // If no current viewport is available, default to smallest viewport
   prop[_systemConstants.viewports.keys.find(key => (0, _hasOwnProperty.default)(prop, key))];
-  return value === undefined ? defaultValue : value;
+  return value === undefined || value === null ? defaultValue : value;
 };
 
 /**

package/lib/esm/Carousel/Carousel.js

@@ -21,7 +21,7 @@ import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
 import Box from '../Box';
-import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN } from './Constants';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -198,56 +198,27 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
 };
 
 /**
- * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ * Calculates the final width of a carousel container based on the provided parameters.
  *
- * @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.
+ * @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.
+ * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
   let finalWidth = containerWidth;
   if (enablePeeking) {
     const {
-      peekingFirstSpace,
       peekingGap,
-      peekingLastSpace,
-      peekingMiddleSpace
+      peekingMiddleSpace,
+      peekingMarginLeft
     } = 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;
-      }
+    const slideWide = containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER);
+    if (activeIndexRef.current === 0) {
+      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace;
+    } else {
+      finalWidth = slideWide + peekingGap;
     }
   }
   return finalWidth;
@@ -434,7 +405,23 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsAnimating(false);
   }, [onAnimationEnd]);
   const updateOffset = React.useCallback(() => {
-    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
+    if (enablePeeking) {
+      const {
+        peekingGap,
+        peekingMiddleSpace,
+        peekingMarginLeft
+      } = getPeekingProps(viewport);
+      let finalWidth;
+      const slideWide = containerLayoutRef.current.width - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER);
+      if (activeIndexRef.current === 0) {
+        finalWidth = 0;
+      } else {
+        finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace + (slideWide + peekingGap) * (activeIndexRef.current - ACTIVE_INDEX_OFFSET_MULTIPLIER);
+      }
+      animatedX.current = finalWidth * NEGATIVE_MULTIPLIER;
+    } else {
+      animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * NEGATIVE_MULTIPLIER;
+    }
     animatedY.current = 0;
     pan.setOffset({
       x: animatedX.current,
@@ -445,7 +432,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       y: 0
     });
     if (enableHero) {
-      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1;
+      heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * NEGATIVE_MULTIPLIER;
       heroAnimatedY.current = 0;
       heroPan.setOffset({
         x: heroAnimatedX.current,
@@ -456,7 +443,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         y: 0
       });
     }
-  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero]);
+  }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -531,7 +518,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     stopAutoplay();
     setActiveIndex(index);
-    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
+    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef);
     toValue.x = finalWidth * -1 * calcDelta;
     const heroToValue = {
       x: 0,

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -13,18 +13,17 @@ const selectContainerStyle = _ref => {
     elementIndex,
     enablePeeking,
     peekingMarginLeft,
-    peekingFirstSpace,
     peekingGap,
     hidden,
     enableDisplayMultipleItemsPerSlide,
-    viewport
+    viewport,
+    peekingMiddleSpace
   } = _ref;
   let adjustedWidth = width;
   let marginLeft = 0;
-  const marginRight = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2);
     if (isFirst) {
       marginLeft = peekingMarginLeft;
     } else {
@@ -61,8 +60,7 @@ const selectContainerStyle = _ref => {
   }
   const style = {
     width: adjustedWidth,
-    marginLeft,
-    marginRight
+    marginLeft
   };
   if (hidden && Platform.OS === 'web') {
     style.visibility = 'hidden';

package/lib/esm/Carousel/Constants.js

@@ -4,4 +4,7 @@ export const GAP_BETWEEN_ITEMS = 16;
 export const HERO_POSITION_OFFSET = 20;
 export const DEFAULT_POSITION_OFFSET = 0;
 export const LARGE_VIEWPORT_MARGIN = 40;
-export const DEFAULT_VIEWPORT_MARGIN = 10;
+export const DEFAULT_VIEWPORT_MARGIN = 10;
+export const PEEKING_MULTIPLIER = 2;
+export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
+export const NEGATIVE_MULTIPLIER = -1;

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -242,7 +242,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [isScrolling, setIsScrolling] = React.useState(false);
   const [scrollViewHeight, setScrollViewHeight] = React.useState(0);
   const [rowHeight, setRowHeight] = React.useState(0);
-  const modalRef = useScrollBlocking(isOpen);
+  const modalRef = useScrollBlocking(isOpen && viewport === 'xs');
   const windowWidth = Dimensions.get('window').width;
   const windowHeight = Dimensions.get('window').height;
   React.useEffect(() => {

package/lib/esm/Notification/Notification.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet, useResponsiveProp } from '../utils';
 import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -63,8 +63,8 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
+  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -72,9 +72,12 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
 const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
-    acc[vp] = selectContainerStyles({
-      ...viewportTokens
-    });
+    acc[vp] = {
+      ...selectContainerStyles({
+        ...viewportTokens
+      }),
+      flexDirection: 'column'
+    };
     return acc;
   }, {});
   const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles);
@@ -83,22 +86,29 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     styles: containerStyles
   } = StyleSheet.create({
     container: {
-      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
-  const {
-    ids: contentContainerIds,
-    styles: contentContainerStyles
-  } = StyleSheet.create({
-    contentContainer: {
+  const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
+    let [vp, viewportTokens] = _ref6;
+    acc[vp] = {
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
       ...(system && {
         alignSelf: 'center'
       })
+    };
+    return acc;
+  }, {});
+  const selectContentContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContentContainerStyles);
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = StyleSheet.create({
+    contentContainer: {
+      ...selectContentContainerMediaQueryStyles
     }
   });
   const {
@@ -171,7 +181,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
       ...(system && {
         alignSelf: 'center'
       })
@@ -261,7 +271,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     system,
@@ -271,7 +281,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     onDismiss,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isDismissed, setIsDismissed] = React.useState(false);
   const viewport = useViewport();
   const getCopy = useCopy({
@@ -292,7 +302,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = viewports.map.get(viewports.xl);
+  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth, viewports.map.get(viewports.xl));
   const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},

package/lib/esm/utils/useResponsiveProp.js

@@ -21,7 +21,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   viewports.inherit(prop)[viewport] :
   // If no current viewport is available, default to smallest viewport
   prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
-  return value === undefined ? defaultValue : value;
+  return value === undefined || value === null ? defaultValue : value;
 };
 
 /**

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.5.1",
+  "version": "3.5.2",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.5.1",
+  "version": "3.5.2",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -31,7 +31,10 @@ import {
   ITEMS_PER_VIEWPORT_LG_XL,
   DEFAULT_POSITION_OFFSET,
   LARGE_VIEWPORT_MARGIN,
-  DEFAULT_VIEWPORT_MARGIN
+  DEFAULT_VIEWPORT_MARGIN,
+  PEEKING_MULTIPLIER,
+  ACTIVE_INDEX_OFFSET_MULTIPLIER,
+  NEGATIVE_MULTIPLIER
 } from './Constants'
 
 const TRANSITION_MODES = {
@@ -245,63 +248,26 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
 }
 
 /**
- * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ * Calculates the final width of a carousel container based on the provided parameters.
  *
- * @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.
+ * @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.
+ * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (
-  containerWidth,
-  enablePeeking,
-  viewport,
-  activeIndexRef,
-  totalItems,
-  calcDelta
-) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
   let finalWidth = containerWidth
 
   if (enablePeeking) {
-    const { peekingFirstSpace, peekingGap, peekingLastSpace, peekingMiddleSpace } =
-      getPeekingProps(viewport)
+    const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
+    const slideWide =
+      containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
 
-    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
-      }
+    if (activeIndexRef.current === 0) {
+      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace
+    } else {
+      finalWidth = slideWide + peekingGap
     }
   }
 
@@ -495,15 +461,40 @@ const Carousel = React.forwardRef(
     )
 
     const updateOffset = React.useCallback(() => {
-      animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1
+      if (enablePeeking) {
+        const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
+
+        let finalWidth
+        const slideWide =
+          containerLayoutRef.current.width -
+          (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
+
+        if (activeIndexRef.current === 0) {
+          finalWidth = 0
+        } else {
+          finalWidth =
+            slideWide +
+            peekingMarginLeft -
+            peekingMiddleSpace +
+            (slideWide + peekingGap) * (activeIndexRef.current - ACTIVE_INDEX_OFFSET_MULTIPLIER)
+        }
+
+        animatedX.current = finalWidth * NEGATIVE_MULTIPLIER
+      } else {
+        animatedX.current =
+          containerLayoutRef.current.width * activeIndexRef.current * NEGATIVE_MULTIPLIER
+      }
+
       animatedY.current = 0
       pan.setOffset({
         x: animatedX.current,
         y: animatedY.current
       })
       pan.setValue({ x: 0, y: 0 })
+
       if (enableHero) {
-        heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1
+        heroAnimatedX.current =
+          heroContainerLayoutRef.current.width * activeIndexRef.current * NEGATIVE_MULTIPLIER
         heroAnimatedY.current = 0
         heroPan.setOffset({
           x: heroAnimatedX.current,
@@ -511,7 +502,7 @@ const Carousel = React.forwardRef(
         })
         heroPan.setValue({ x: 0, y: 0 })
       }
-    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero])
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex) => {
@@ -593,9 +584,7 @@ const Carousel = React.forwardRef(
           containerLayoutRef.current.width,
           enablePeeking,
           viewport,
-          activeIndexRef,
-          totalItems,
-          calcDelta
+          activeIndexRef
         )
 
         toValue.x = finalWidth * -1 * calcDelta

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -19,19 +19,18 @@ const selectContainerStyle = ({
   elementIndex,
   enablePeeking,
   peekingMarginLeft,
-  peekingFirstSpace,
   peekingGap,
   hidden,
   enableDisplayMultipleItemsPerSlide,
-  viewport
+  viewport,
+  peekingMiddleSpace
 }) => {
   let adjustedWidth = width
   let marginLeft = 0
-  const marginRight = 0
 
   if (enablePeeking) {
     const isFirst = elementIndex === 0
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
+    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2)
     if (isFirst) {
       marginLeft = peekingMarginLeft
     } else {
@@ -73,8 +72,7 @@ const selectContainerStyle = ({
 
   const style = {
     width: adjustedWidth,
-    marginLeft,
-    marginRight
+    marginLeft
   }
 
   if (hidden && Platform.OS === 'web') {

package/src/Carousel/Constants.js

@@ -5,3 +5,6 @@ export const HERO_POSITION_OFFSET = 20
 export const DEFAULT_POSITION_OFFSET = 0
 export const LARGE_VIEWPORT_MARGIN = 40
 export const DEFAULT_VIEWPORT_MARGIN = 10
+export const PEEKING_MULTIPLIER = 2
+export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1
+export const NEGATIVE_MULTIPLIER = -1

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -236,7 +236,7 @@ const MultiSelectFilter = React.forwardRef(
     const [isScrolling, setIsScrolling] = React.useState(false)
     const [scrollViewHeight, setScrollViewHeight] = React.useState(0)
     const [rowHeight, setRowHeight] = React.useState(0)
-    const modalRef = useScrollBlocking(isOpen)
+    const modalRef = useScrollBlocking(isOpen && viewport === 'xs')
     const windowWidth = Dimensions.get('window').width
     const windowHeight = Dimensions.get('window').height
 

package/src/Notification/Notification.jsx

@@ -18,7 +18,8 @@ import {
   viewProps,
   wrapStringsInText,
   createMediaQueryStyles,
-  StyleSheet
+  StyleSheet,
+  useResponsiveProp
 } from '../utils'
 import IconButton from '../IconButton'
 import useCopy from '../utils/useCopy'
@@ -64,8 +65,8 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   placeContent: 'start'
 })
 
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
+  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -82,7 +83,7 @@ const getMediaQueryStyles = (
 ) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
-      acc[vp] = selectContainerStyles({ ...viewportTokens })
+      acc[vp] = { ...selectContainerStyles({ ...viewportTokens }), flexDirection: 'column' }
       return acc
     },
     {}
@@ -92,18 +93,31 @@ const getMediaQueryStyles = (
 
   const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
     container: {
-      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   })
 
+  const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce(
+    (acc, [vp, viewportTokens]) => {
+      acc[vp] = {
+        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+        flexDirection: 'row',
+        flexShrink: 1,
+        justifyContent: 'space-between',
+        ...(system && { alignSelf: 'center' })
+      }
+      return acc
+    },
+    {}
+  )
+
+  const selectContentContainerMediaQueryStyles = createMediaQueryStyles(
+    transformedSelectContentContainerStyles
+  )
+
   const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
     contentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1,
-      justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
-      ...(system && { alignSelf: 'center' })
+      ...selectContentContainerMediaQueryStyles
     }
   })
 
@@ -167,7 +181,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
       ...(system && { alignSelf: 'center' })
     }
   },
@@ -252,7 +266,10 @@ const Notification = React.forwardRef(
       system: isSystemEnabled,
       viewport
     })
-    const maxWidth = viewports.map.get(viewports.xl)
+    const maxWidth = useResponsiveProp(
+      themeOptions?.contentMaxWidth,
+      viewports.map.get(viewports.xl)
+    )
 
     const notificationComponentRef = React.useRef({
       containerStyles: {},

package/src/utils/useResponsiveProp.js

@@ -25,7 +25,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
     : // If no current viewport is available, default to smallest viewport
       prop[viewports.keys.find((key) => hasOwnProperty(prop, key))]
 
-  return value === undefined ? defaultValue : value
+  return value === undefined || value === null ? defaultValue : value
 }
 
 /**