@telus-uds/components-base 3.28.0 → 3.28.2

package/src/Autocomplete/Autocomplete.jsx

@@ -24,6 +24,7 @@ import Suggestions from './Suggestions'
 import {
   DEFAULT_MAX_SUGGESTIONS,
   DEFAULT_MIN_TO_SUGGESTION,
+  DEFAULT_MAX_DROPDOWN_HEIGHT,
   INPUT_LEFT_PADDING,
   MIN_LISTBOX_WIDTH
 } from './constants'
@@ -51,20 +52,44 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 const highlightAllMatches = (str, substring = '', matchIndexes = [], resultsTextColor) => (
   // Wrapping all in bold
   <Typography variant={{ bold: false }} tokens={{ color: resultsTextColor }}>
-    {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) ?? ''),
-        // Unbold the occurrence of the substring (while keeping the original casing)
-        <Typography key={matchIndex} variant={{ bold: true }} tokens={{ color: resultsTextColor }}>
-          {str.slice(matchIndex, matchIndex + substring.length)}
-        </Typography>,
-        // 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)
-      ],
-      []
-    )}
+    {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 ? (
+            <Typography
+              key={`pre-${matchIndex}`}
+              variant={{ bold: false }}
+              tokens={{ color: resultsTextColor }}
+            >
+              {prefix}
+            </Typography>
+          ) : null,
+          <Typography
+            key={matchIndex}
+            variant={{ bold: true }}
+            tokens={{ color: resultsTextColor }}
+          >
+            {match}
+          </Typography>,
+          suffix ? (
+            <Typography
+              key={`post-${matchIndex}`}
+              variant={{ bold: false }}
+              tokens={{ color: resultsTextColor }}
+            >
+              {suffix}
+            </Typography>
+          ) : null
+        ]
+      }, [])
+      .filter(Boolean)}
   </Typography>
 )
 const highlight = (items = [], text = '', color) =>
@@ -94,12 +119,14 @@ const Autocomplete = React.forwardRef(
       isLoading = false,
       items,
       maxSuggestions = DEFAULT_MAX_SUGGESTIONS,
+      maxDropdownHeight = DEFAULT_MAX_DROPDOWN_HEIGHT,
       minToSuggestion = DEFAULT_MIN_TO_SUGGESTION,
       noResults,
       onChange,
       onClear,
       onSelect,
       readOnly,
+      showOptionsOnFocus = false,
       validation,
       value,
       helpText = '',
@@ -144,7 +171,7 @@ const Autocomplete = React.forwardRef(
 
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
-    const hintExpansionEnabled = isFocused && helpText && !currentValue
+    const hintExpansionEnabled = isFocused && !!helpText && !currentValue
     const {
       overlaidPosition,
       sourceRef: inputRef,
@@ -198,9 +225,12 @@ const Autocomplete = React.forwardRef(
     }
 
     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(({ label }) =>
@@ -211,21 +241,24 @@ const Autocomplete = React.forwardRef(
     }
     const handleSelect = (selectedId) => {
       onSelect?.(selectedId)
-      const {
-        label: newValue,
-        nested,
-        title
-      } = (isControlled ? items : currentItems)?.find(({ id }) => id === selectedId)
+      const selectedItem = (isControlled ? items : currentItems)?.find(
+        ({ id }) => id === selectedId
+      )
+      const { label, nested, title } = selectedItem
+
       if (title) return
       if (!nested) {
         setNestedSelectedValue(null)
-        onChange?.(newValue)
+        onChange?.(label)
         setIsExpanded(false)
+        setCurrentValue(label)
       }
-      setCurrentValue(newValue)
-      if (!isControlled && inputRef?.current) inputRef.current.value = newValue
+      if (!isControlled && inputRef?.current) inputRef.current.value = label
 
-      if (nested) setNestedSelectedValue(newValue)
+      if (nested) {
+        setNestedSelectedValue(label)
+        setCurrentValue(label)
+      }
 
       inputRef.current.focus()
     }
@@ -278,17 +311,13 @@ const Autocomplete = React.forwardRef(
     }, [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 (
+        return
+      }
+
+      if (
         event.type === 'keydown' &&
         (event.key === 'ArrowDown' || event.key === 'Tab') &&
         isExpanded &&
@@ -297,13 +326,30 @@ const Autocomplete = React.forwardRef(
       ) {
         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 (
@@ -337,9 +383,15 @@ const Autocomplete = React.forwardRef(
                 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}
@@ -368,45 +420,50 @@ const Autocomplete = React.forwardRef(
             )
           }}
         </InputSupports>
-        {(isExpanded || hintExpansionEnabled) && isInputVisible && (
-          <>
-            <Listbox.Overlay
-              overlaidPosition={overlaidPosition}
-              isReady={isReady}
-              minWidth={fullWidth ? inputWidth : MIN_LISTBOX_WIDTH}
-              maxWidth={inputWidth}
-              onLayout={handleMeasure}
-              tokens={restOfTokens}
-              ref={openOverlayRef}
-            >
-              {isLoading ? (
-                <Loading label={loadingLabel ?? getCopy('loading')} />
-              ) : (
-                <Suggestions
-                  hasResults={getCopy('hasResults')}
-                  id="autocomplete"
-                  items={
-                    nestedSelectedValue
-                      ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor))
-                      : itemsToShow
-                  }
-                  noResults={helpTextToShow}
-                  onClose={handleClose}
-                  onSelect={handleSelect}
-                  parentRef={inputRef}
-                  ref={targetRef}
+        {(isExpanded || hintExpansionEnabled) &&
+          isInputVisible &&
+          (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && (
+            <>
+              <Listbox.Overlay
+                overlaidPosition={overlaidPosition}
+                isReady={isReady}
+                minWidth={fullWidth ? inputWidth : MIN_LISTBOX_WIDTH}
+                maxWidth={inputWidth}
+                maxHeight={maxDropdownHeight}
+                onLayout={handleMeasure}
+                tokens={restOfTokens}
+                ref={openOverlayRef}
+              >
+                {isLoading ? (
+                  <Loading label={loadingLabel ?? getCopy('loading')} />
+                ) : (
+                  <Suggestions
+                    hasResults={getCopy('hasResults')}
+                    id="autocomplete"
+                    items={
+                      nestedSelectedValue
+                        ? itemsToSuggest(
+                            highlight(otherItems, nestedSelectedValue, resultsTextColor)
+                          )
+                        : itemsToShow
+                    }
+                    noResults={helpTextToShow}
+                    onClose={handleClose}
+                    onSelect={handleSelect}
+                    parentRef={inputRef}
+                    ref={targetRef}
+                  />
+                )}
+              </Listbox.Overlay>
+              {targetRef?.current && (
+                <View
+                  // This catches and shifts focus to other interactive elements.
+                  onFocus={() => targetRef?.current?.focus()}
+                  tabIndex={0}
                 />
               )}
-            </Listbox.Overlay>
-            {targetRef?.current && (
-              <View
-                // This catches and shifts focus to other interactive elements.
-                onFocus={() => targetRef?.current?.focus()}
-                tabIndex={0}
-              />
-            )}
-          </>
-        )}
+            </>
+          )}
       </View>
     )
   }
@@ -468,6 +525,10 @@ Autocomplete.propTypes = {
    * Maximum number of suggestions provided at the same time
    */
   maxSuggestions: PropTypes.number,
+  /**
+   * Maximum height (in pixels) of the dropdown before scrolling is enabled
+   */
+  maxDropdownHeight: PropTypes.number,
   /**
    * Text or JSX to render when no results are available
    */
@@ -488,6 +549,10 @@ Autocomplete.propTypes = {
    * Callback function to be called when an item is selected from the list
    */
   onSelect: PropTypes.func,
+  /**
+   * When true, displays all available options when the input receives focus (even without typing)
+   */
+  showOptionsOnFocus: PropTypes.bool,
   /**
    * Input value for controlled usage
    */

package/src/Autocomplete/constants.js

@@ -1,4 +1,5 @@
 export const DEFAULT_MIN_TO_SUGGESTION = 1
 export const DEFAULT_MAX_SUGGESTIONS = 5
+export const DEFAULT_MAX_DROPDOWN_HEIGHT = 336 // Approximately 7 items (48px each)
 export const INPUT_LEFT_PADDING = 16
 export const MIN_LISTBOX_WIDTH = 288

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) {
@@ -1055,8 +1056,7 @@ const Carousel = React.forwardRef(
     // 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.useCallback(
@@ -1177,7 +1177,7 @@ const Carousel = React.forwardRef(
                       isAutoPlayEnabled,
                       viewport,
                       maxWidth,
-                      viewportWidth: currentViewportWidth
+                      containerWidth: containerLayout.width
                     })
                   ]}
                 >
@@ -1205,7 +1205,7 @@ const Carousel = React.forwardRef(
                     isAutoPlayEnabled,
                     viewport,
                     maxWidth,
-                    currentViewportWidth
+                    containerLayout.width
                   )}
                   testID="previous-button-container"
                 >
@@ -1303,7 +1303,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/Listbox/ListboxOverlay.jsx

@@ -28,6 +28,7 @@ const DropdownOverlay = React.forwardRef(
       isReady = false,
       overlaidPosition,
       maxWidth,
+      maxHeight,
       minWidth,
       onLayout,
       tokens,
@@ -50,12 +51,18 @@ const DropdownOverlay = React.forwardRef(
           staticStyles.positioner,
           !isReady && staticStyles.hidden
         ]}
+        onMouseDown={(e) => {
+          e.preventDefault()
+        }}
       >
         <Card
           tokens={{
             shadow: systemTokens.shadow,
             borderRadius: systemTokens.borderRadius,
-            ...(Platform.OS === 'web' && { overflowY: 'hidden' }),
+            ...(Platform.OS === 'web' && {
+              maxHeight,
+              overflowY: 'auto'
+            }),
             paddingBottom: paddingVertical,
             paddingTop: paddingVertical,
             paddingLeft: paddingHorizontal,
@@ -89,6 +96,7 @@ DropdownOverlay.propTypes = {
     width: PropTypes.number
   }),
   maxWidth: PropTypes.number,
+  maxHeight: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
   tokens: PropTypes.object,

package/src/Listbox/PressableItem.jsx

@@ -120,7 +120,7 @@ const PressableItem = React.forwardRef(
       >
         {(pressableState) => {
           return (
-            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children} </Text>
+            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children}</Text>
           )
         }}
       </Pressable>

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)
     }
 

package/src/TextInput/TextInputBase.jsx

@@ -255,8 +255,8 @@ const TextInputBase = React.forwardRef(
     }, [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')