@telus-uds/components-base 3.28.0 → 3.28.1

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 18 Feb 2026 02:50:19 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Feb 2026 23:53:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.28.1
+
+Fri, 20 Feb 2026 23:53:11 GMT
+
+### Patches
+
+- `MultiSelectFilter`: onOpen callback now triggers when filter opens instead of when it closes (josue.higueroscalderon@telus.com)
+- `Carousel`: fix peeking when using a larger maxWidth (guillermo.peitzner@telus.com)
+
 ## 3.28.0
 
 Wed, 18 Feb 2026 02:50:19 GMT
@@ -18,7 +27,7 @@ Wed, 18 Feb 2026 02:50:19 GMT
 ### Patches
 
 - `Card`: background image hidden behind the default background color issue fixed (josue.higueroscalderon@telus.com)
-- `IconButton`: Fix wrong specific padding calculation  (david.melara1@telus.com)
+- `IconButton`: Fix wrong specific padding calculation (david.melara1@telus.com)
 
 ## 3.27.0
 

package/lib/cjs/Carousel/Carousel.js

@@ -91,7 +91,7 @@ const selectControlButtonPositionStyles = _ref => {
     isAutoPlayEnabled,
     viewport,
     maxWidth,
-    viewportWidth
+    containerWidth
   } = _ref;
   const styles = {};
   let positionOffset = 0;
@@ -107,18 +107,19 @@ const selectControlButtonPositionStyles = _ref => {
     }
   }
   if (enablePeeking) {
-    if (positionProperty === _Constants.POSITION_PROPERTIES.RIGHT) {
-      const rightMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += rightMargin;
-    } else if (positionProperty === _Constants.POSITION_PROPERTIES.LEFT) {
-      const leftMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += leftMargin;
-    }
+    const {
+      peekingMiddleSpace,
+      peekingGap
+    } = getPeekingProps(viewport);
+    const clampedMaxWidth = Math.min(maxWidth || containerWidth, containerWidth);
+    const slideRightEdge = (containerWidth + clampedMaxWidth) / 2 - peekingMiddleSpace;
+    const buttonCenter = slideRightEdge + peekingGap / 2;
+    positionOffset = containerWidth - buttonCenter - buttonWidth / 2;
   }
   styles[positionProperty] = positionOffset;
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, viewportWidth) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerWidth) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -142,7 +143,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       isAutoPlayEnabled,
       viewport,
       maxWidth,
-      viewportWidth
+      containerWidth
     })
   };
 };
@@ -279,7 +280,7 @@ const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth)
       peekingGap,
       peekingMiddleSpace
     } = getPeekingProps(viewport);
-    const baseWidth = maxWidth || containerWidth;
+    const baseWidth = Math.min(maxWidth || containerWidth, containerWidth);
     finalWidth = baseWidth - peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER + peekingGap;
   }
   return finalWidth;
@@ -499,7 +500,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         peekingMiddleSpace
       } = getPeekingProps(viewport);
       let finalWidth;
-      const baseWidth = maxWidth || containerLayoutRef.current.width;
+      const baseWidth = Math.min(maxWidth || containerLayoutRef.current.width, containerLayoutRef.current.width);
       const slideWide = baseWidth - peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER;
       if (activeIndexRef.current === 0) {
         finalWidth = 0;
@@ -1021,7 +1022,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               isAutoPlayEnabled,
               viewport,
               maxWidth,
-              viewportWidth: currentViewportWidth
+              containerWidth: containerLayout.width
             })],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -1030,7 +1031,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "previous-button-container",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -1090,7 +1091,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "next-button-container",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,

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

@@ -31,10 +31,10 @@ const selectContainerStyle = _ref => {
   let marginLeft = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    const baseWidth = maxWidth || width;
-    adjustedWidth = baseWidth - peekingMiddleSpace * 2;
+    const clampedMaxWidth = Math.min(maxWidth || width, width);
+    adjustedWidth = clampedMaxWidth - peekingMiddleSpace * 2;
     if (isFirst) {
-      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2;
+      marginLeft = peekingMiddleSpace + (viewportWidth - clampedMaxWidth) / 2;
     } else {
       marginLeft = peekingGap;
     }

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -185,6 +185,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     setMaxWidth(items.length >= rowLimit);
   }, [items.length, rowLimit]);
   _react.default.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  _react.default.useEffect(() => {
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
   const uniqueFields = ['id', 'label'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -197,7 +202,6 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers?.onPress(event);
-    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {

package/lib/esm/Carousel/Carousel.js

@@ -84,7 +84,7 @@ const selectControlButtonPositionStyles = _ref => {
     isAutoPlayEnabled,
     viewport,
     maxWidth,
-    viewportWidth
+    containerWidth
   } = _ref;
   const styles = {};
   let positionOffset = 0;
@@ -100,18 +100,19 @@ const selectControlButtonPositionStyles = _ref => {
     }
   }
   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;
-    }
+    const {
+      peekingMiddleSpace,
+      peekingGap
+    } = getPeekingProps(viewport);
+    const clampedMaxWidth = Math.min(maxWidth || containerWidth, containerWidth);
+    const slideRightEdge = (containerWidth + clampedMaxWidth) / 2 - peekingMiddleSpace;
+    const buttonCenter = slideRightEdge + peekingGap / 2;
+    positionOffset = containerWidth - buttonCenter - buttonWidth / 2;
   }
   styles[positionProperty] = positionOffset;
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, viewportWidth) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerWidth) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -135,7 +136,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       isAutoPlayEnabled,
       viewport,
       maxWidth,
-      viewportWidth
+      containerWidth
     })
   };
 };
@@ -272,7 +273,7 @@ const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth)
       peekingGap,
       peekingMiddleSpace
     } = getPeekingProps(viewport);
-    const baseWidth = maxWidth || containerWidth;
+    const baseWidth = Math.min(maxWidth || containerWidth, containerWidth);
     finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap;
   }
   return finalWidth;
@@ -492,7 +493,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         peekingMiddleSpace
       } = getPeekingProps(viewport);
       let finalWidth;
-      const baseWidth = maxWidth || containerLayoutRef.current.width;
+      const baseWidth = Math.min(maxWidth || containerLayoutRef.current.width, containerLayoutRef.current.width);
       const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER;
       if (activeIndexRef.current === 0) {
         finalWidth = 0;
@@ -1014,7 +1015,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               isAutoPlayEnabled,
               viewport,
               maxWidth,
-              viewportWidth: currentViewportWidth
+              containerWidth: containerLayout.width
             })],
             children: /*#__PURE__*/_jsx(IconButton, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -1023,7 +1024,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "previous-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -1083,7 +1084,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "next-button-container",
             children: /*#__PURE__*/_jsx(IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,

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

@@ -24,10 +24,10 @@ const selectContainerStyle = _ref => {
   let marginLeft = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    const baseWidth = maxWidth || width;
-    adjustedWidth = baseWidth - peekingMiddleSpace * 2;
+    const clampedMaxWidth = Math.min(maxWidth || width, width);
+    adjustedWidth = clampedMaxWidth - peekingMiddleSpace * 2;
     if (isFirst) {
-      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2;
+      marginLeft = peekingMiddleSpace + (viewportWidth - clampedMaxWidth) / 2;
     } else {
       marginLeft = peekingGap;
     }

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -178,6 +178,11 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setMaxWidth(items.length >= rowLimit);
   }, [items.length, rowLimit]);
   React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  React.useEffect(() => {
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -190,7 +195,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers?.onPress(event);
-    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {

package/lib/package.json

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

package/package.json

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

package/src/Carousel/Carousel.jsx

@@ -125,7 +125,7 @@ const selectControlButtonPositionStyles = ({
   isAutoPlayEnabled,
   viewport,
   maxWidth,
-  viewportWidth
+  containerWidth
 }) => {
   const styles = {}
 
@@ -148,13 +148,11 @@ const selectControlButtonPositionStyles = ({
   }
 
   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
-    }
+    const { peekingMiddleSpace, peekingGap } = getPeekingProps(viewport)
+    const clampedMaxWidth = Math.min(maxWidth || containerWidth, containerWidth)
+    const slideRightEdge = (containerWidth + clampedMaxWidth) / 2 - peekingMiddleSpace
+    const buttonCenter = slideRightEdge + peekingGap / 2
+    positionOffset = containerWidth - buttonCenter - buttonWidth / 2
   }
 
   styles[positionProperty] = positionOffset
@@ -173,7 +171,7 @@ const selectPreviousNextNavigationButtonStyles = (
   isAutoPlayEnabled,
   viewport,
   maxWidth,
-  viewportWidth
+  containerWidth
 ) => {
   const styles = {
     zIndex: 1,
@@ -199,7 +197,7 @@ const selectPreviousNextNavigationButtonStyles = (
       isAutoPlayEnabled,
       viewport,
       maxWidth,
-      viewportWidth
+      containerWidth
     })
   }
 }
@@ -343,7 +341,7 @@ const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth)
 
   if (enablePeeking) {
     const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
-    const baseWidth = maxWidth || containerWidth
+    const baseWidth = Math.min(maxWidth || containerWidth, containerWidth)
     finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap
   }
 
@@ -572,7 +570,10 @@ const Carousel = React.forwardRef(
         const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
 
         let finalWidth
-        const baseWidth = maxWidth || containerLayoutRef.current.width
+        const baseWidth = Math.min(
+          maxWidth || containerLayoutRef.current.width,
+          containerLayoutRef.current.width
+        )
         const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER
 
         if (activeIndexRef.current === 0) {
@@ -1177,7 +1178,7 @@ const Carousel = React.forwardRef(
                       isAutoPlayEnabled,
                       viewport,
                       maxWidth,
-                      viewportWidth: currentViewportWidth
+                      containerWidth: containerLayout.width
                     })
                   ]}
                 >
@@ -1205,7 +1206,7 @@ const Carousel = React.forwardRef(
                     isAutoPlayEnabled,
                     viewport,
                     maxWidth,
-                    currentViewportWidth
+                    containerLayout.width
                   )}
                   testID="previous-button-container"
                 >
@@ -1303,7 +1304,7 @@ const Carousel = React.forwardRef(
                     isAutoPlayEnabled,
                     viewport,
                     maxWidth,
-                    currentViewportWidth
+                    containerLayout.width
                   )}
                   testID="next-button-container"
                 >

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -31,10 +31,10 @@ const selectContainerStyle = ({
 
   if (enablePeeking) {
     const isFirst = elementIndex === 0
-    const baseWidth = maxWidth || width
-    adjustedWidth = baseWidth - peekingMiddleSpace * 2
+    const clampedMaxWidth = Math.min(maxWidth || width, width)
+    adjustedWidth = clampedMaxWidth - peekingMiddleSpace * 2
     if (isFirst) {
-      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2
+      marginLeft = peekingMiddleSpace + (viewportWidth - clampedMaxWidth) / 2
     } else {
       marginLeft = peekingGap
     }

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -185,6 +185,12 @@ const MultiSelectFilter = React.forwardRef(
 
     React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
 
+    React.useEffect(() => {
+      if (isOpen && onOpen) {
+        onOpen()
+      }
+    }, [isOpen, onOpen])
+
     const uniqueFields = ['id', 'label']
     if (!containUniqueFields(items, uniqueFields)) {
       throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
@@ -194,7 +200,6 @@ const MultiSelectFilter = React.forwardRef(
 
     const handleChange = (event) => {
       if (pressHandlers.onPress) pressHandlers?.onPress(event)
-      if (isOpen) onOpen()
       setIsOpen(!isOpen)
     }