@telus-uds/components-base 3.28.0 → 3.28.2

package/CHANGELOG.md

@@ -1,9 +1,27 @@
 # 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 Tue, 03 Mar 2026 23:02:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.28.2
+
+Tue, 03 Mar 2026 23:02:55 GMT
+
+### Patches
+
+- `Carousel`: inverse variant navigation arrows fixed by always using raised style even in the inverse state (josue.higueros@telus.com)
+- `Autocomplete`: add the ability to show all values and filter them (josue.higueroscalderon@telus.com)
+
+## 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 +36,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/Autocomplete/Autocomplete.js

@@ -51,22 +51,36 @@ const highlightAllMatches = function (str) {
       tokens: {
         color: resultsTextColor
       },
-      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc,
-      // Add a piece of the string up to the first occurrence of the substring
-      index === 0 && (str.slice(0, matchIndex) ?? ''),
-      /*#__PURE__*/
-      // Unbold the occurrence of the substring (while keeping the original casing)
-      (0, _jsxRuntime.jsx)(_Typography.default, {
-        variant: {
-          bold: true
-        },
-        tokens: {
-          color: resultsTextColor
-        },
-        children: str.slice(matchIndex, matchIndex + substring.length)
-      }, matchIndex),
-      // Add the rest of the string until the next occurrence or the end of it
-      str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
+      children: matchIndexes.reduce((acc, matchIndex, index) => {
+        const prefix = index === 0 ? str.slice(0, matchIndex) : null;
+        const match = str.slice(matchIndex, matchIndex + substring.length);
+        const suffix = str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length);
+        return [...acc, prefix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: prefix
+        }, `pre-${matchIndex}`) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: match
+        }, matchIndex), suffix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: suffix
+        }, `post-${matchIndex}`) : null];
+      }, []).filter(Boolean)
     })
   );
 };
@@ -100,12 +114,14 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     isLoading = false,
     items,
     maxSuggestions = _constants.DEFAULT_MAX_SUGGESTIONS,
+    maxDropdownHeight = _constants.DEFAULT_MAX_DROPDOWN_HEIGHT,
     minToSuggestion = _constants.DEFAULT_MIN_TO_SUGGESTION,
     noResults,
     onChange,
     onClear,
     onSelect,
     readOnly,
+    showOptionsOnFocus = false,
     validation,
     value,
     helpText = '',
@@ -154,7 +170,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     hint,
     label: inputLabel
   } = supportsProps;
-  const hintExpansionEnabled = isFocused && helpText && !currentValue;
+  const hintExpansionEnabled = isFocused && !!helpText && !currentValue;
   const {
     overlaidPosition,
     sourceRef: inputRef,
@@ -208,9 +224,10 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     }
   };
   const handleChange = newValue => {
-    onChange?.(newValue || '');
+    onChange?.(newValue);
     setCurrentValue(newValue);
-    setIsExpanded(newValue?.length >= minToSuggestion);
+    const shouldExpand = newValue?.length >= minToSuggestion || showOptionsOnFocus && isFocused && newValue?.length === 0;
+    setIsExpanded(shouldExpand);
     if (!isControlled && initialItems !== undefined) {
       setCurrentItems(initialItems.filter(_ref3 => {
         let {
@@ -222,25 +239,29 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   };
   const handleSelect = selectedId => {
     onSelect?.(selectedId);
-    const {
-      label: newValue,
-      nested,
-      title
-    } = (isControlled ? items : currentItems)?.find(_ref4 => {
+    const selectedItem = (isControlled ? items : currentItems)?.find(_ref4 => {
       let {
         id
       } = _ref4;
       return id === selectedId;
     });
+    const {
+      label,
+      nested,
+      title
+    } = selectedItem;
     if (title) return;
     if (!nested) {
       setNestedSelectedValue(null);
-      onChange?.(newValue);
+      onChange?.(label);
       setIsExpanded(false);
+      setCurrentValue(label);
+    }
+    if (!isControlled && inputRef?.current) inputRef.current.value = label;
+    if (nested) {
+      setNestedSelectedValue(label);
+      setCurrentValue(label);
     }
-    setCurrentValue(newValue);
-    if (!isControlled && inputRef?.current) inputRef.current.value = newValue;
-    if (nested) setNestedSelectedValue(newValue);
     inputRef.current.focus();
   };
 
@@ -288,15 +309,33 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     };
   }, [inputRef]);
   const handleClose = event => {
-    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !openOverlayRef?.current?.contains(event.target) || event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
+    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
+      return;
+    }
+    if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
       event.preventDefault();
       targetRef.current.focus();
+      return;
+    }
+    if (event.type === 'click' || event.type === 'touchstart') {
+      const clickTarget = event.type === 'click' ? event.target : event.touches[0]?.target;
+      const isOutsideOverlay = openOverlayRef?.current && !openOverlayRef.current.contains(clickTarget);
+      const isOutsideInput = inputRef?.current && !inputRef.current.contains(clickTarget);
+      if (isOutsideOverlay && isOutsideInput) {
+        setIsExpanded(false);
+        setNestedSelectedValue(null);
+      }
     }
   };
-  const itemsToShow = currentValue ? itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)) : [];
+  // Calculate items to show based on current state
+  let itemsToShow = [];
+  if (currentValue?.length > 0) {
+    itemsToShow = itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor));
+  } else if (showOptionsOnFocus && isFocused) {
+    itemsToShow = itemsToSuggest(isControlled ? items : currentItems || initialItems);
+  }
   const helpTextToShow = isFocused && !currentValue ? helpText : noResults ?? getCopy('noResults');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
@@ -333,9 +372,15 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           onChange: handleChange,
           onFocus: () => {
             setisFocused(true);
+            if (showOptionsOnFocus && (!currentValue || currentValue.length === 0)) {
+              setIsExpanded(true);
+            }
           },
           onBlur: () => {
             setisFocused(false);
+            if (showOptionsOnFocus && (!currentValue || currentValue.length === 0)) {
+              setIsExpanded(false);
+            }
           },
           onClear: onClear,
           onKeyPress: handleClose,
@@ -367,12 +412,13 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
         minWidth: fullWidth ? inputWidth : _constants.MIN_LISTBOX_WIDTH,
         maxWidth: inputWidth,
+        maxHeight: maxDropdownHeight,
         onLayout: handleMeasure,
         tokens: restOfTokens,
         ref: openOverlayRef,
@@ -456,6 +502,10 @@ Autocomplete.propTypes = {
    * Maximum number of suggestions provided at the same time
    */
   maxSuggestions: _propTypes.default.number,
+  /**
+   * Maximum height (in pixels) of the dropdown before scrolling is enabled
+   */
+  maxDropdownHeight: _propTypes.default.number,
   /**
    * Text or JSX to render when no results are available
    */
@@ -476,6 +526,10 @@ Autocomplete.propTypes = {
    * Callback function to be called when an item is selected from the list
    */
   onSelect: _propTypes.default.func,
+  /**
+   * When true, displays all available options when the input receives focus (even without typing)
+   */
+  showOptionsOnFocus: _propTypes.default.bool,
   /**
    * Input value for controlled usage
    */

package/lib/cjs/Autocomplete/constants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = void 0;
+exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = void 0;
 const DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MIN_TO_SUGGESTION = 1;
 const DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_SUGGESTIONS = 5;
+const DEFAULT_MAX_DROPDOWN_HEIGHT = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
 const INPUT_LEFT_PADDING = exports.INPUT_LEFT_PADDING = 16;
 const MIN_LISTBOX_WIDTH = exports.MIN_LISTBOX_WIDTH = 288;

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;
@@ -923,8 +924,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   // Related discussion - https://github.com/telus/universal-design-system/issues/1549
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: !variant?.inverse && true,
-    inverse: variant?.inverse
+    raised: true
   };
   const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, totalItems);
@@ -1021,7 +1021,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 +1030,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 +1090,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/Listbox/ListboxOverlay.js

@@ -35,6 +35,7 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     isReady = false,
     overlaidPosition,
     maxWidth,
+    maxHeight,
     minWidth,
     onLayout,
     tokens,
@@ -50,12 +51,16 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       maxWidth,
       minWidth
     }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    onMouseDown: e => {
+      e.preventDefault();
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       tokens: {
         shadow: systemTokens.shadow,
         borderRadius: systemTokens.borderRadius,
         ...(_Platform.default.OS === 'web' && {
-          overflowY: 'hidden'
+          maxHeight,
+          overflowY: 'auto'
         }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
@@ -85,6 +90,7 @@ DropdownOverlay.propTypes = {
     width: _propTypes.default.number
   }),
   maxWidth: _propTypes.default.number,
+  maxHeight: _propTypes.default.number,
   minWidth: _propTypes.default.number,
   onLayout: _propTypes.default.func,
   tokens: _propTypes.default.object,

package/lib/cjs/Listbox/PressableItem.js

@@ -129,9 +129,9 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       onPress(event);
     },
     children: pressableState => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: selectTextStyles(resolveButtonTokens(pressableState)),
-        children: [children, " "]
+        children: children
       });
     }
   });

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/cjs/TextInput/TextInputBase.js

@@ -278,8 +278,8 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     }
   }, [element, pattern]);
   const handleChangeText = event => {
-    const text = event.nativeEvent?.text || event.target?.value;
-    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text;
+    const text = event.nativeEvent?.text ?? event.target?.value;
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');