@telus-uds/components-base 3.28.1 → 3.29.0

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/Card/CardBase.jsx

@@ -59,9 +59,21 @@ const setBackgroundImage = ({
         case 'left-center':
           backgroundPosition = 'left center'
           break
+        case 'left-start':
+          backgroundPosition = 'left top'
+          break
+        case 'left-end':
+          backgroundPosition = 'left bottom'
+          break
         case 'right-center':
           backgroundPosition = 'right center'
           break
+        case 'right-start':
+          backgroundPosition = 'right top'
+          break
+        case 'right-end':
+          backgroundPosition = 'right bottom'
+          break
         default:
           backgroundPosition = 'center center'
       }

package/src/Carousel/Carousel.jsx

@@ -1056,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(

package/src/ColourToggle/ColourBubble.jsx

@@ -5,6 +5,7 @@ import { View, Pressable, Platform } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
+import Tooltip from '../Tooltip'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -52,14 +53,14 @@ const selectBorderBubbleTokens = ({
 })
 
 const ColourBubble = React.forwardRef(
-  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
+  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress, showTooltip }, ref) => {
     const defaultTokens = tokens({ selected: isSelected })
 
     const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
 
     const themeTokens = React.useMemo(() => tokens(), [tokens])
 
-    return (
+    const pressable = (
       <Pressable
         style={(state) => [
           selectGeneralBubbleTokens(resolveColourBubbleTokens(state)),
@@ -76,6 +77,16 @@ const ColourBubble = React.forwardRef(
         <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
       </Pressable>
     )
+
+    if (showTooltip) {
+      return (
+        <Tooltip content={colourName} activateOnHover>
+          {pressable}
+        </Tooltip>
+      )
+    }
+
+    return pressable
   }
 )
 ColourBubble.displayName = 'ColourBubble'
@@ -106,7 +117,11 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: PropTypes.bool
 }
 
 export default ColourBubble

package/src/ColourToggle/ColourToggle.jsx

@@ -11,7 +11,7 @@ import ColourBubble from './ColourBubble'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const ColourToggle = React.forwardRef(
-  ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
+  ({ tokens, variant, defaultColourId, items, onChange, showTooltips, ...rest }, ref) => {
     const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
     const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
 
@@ -40,6 +40,7 @@ const ColourToggle = React.forwardRef(
                 colourHexCode={colourHexCode}
                 colourName={colourName}
                 onPress={handleChangeColour}
+                showTooltip={showTooltips}
               />
             )
           })}
@@ -77,7 +78,11 @@ ColourToggle.propTypes = {
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: PropTypes.bool
 }
 
 export default ColourToggle

package/src/ExpandCollapse/Control.jsx

@@ -54,10 +54,11 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
-function selectTextContainerStyles({ textLine }) {
+function selectTextContainerStyles({ textLine, controlAlign }) {
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && { alignItems: controlAlign })
   }
 }
 
@@ -70,7 +71,16 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = React.forwardRef(
   (
-    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    {
+      onPress,
+      isExpanded,
+      children,
+      tokens,
+      controlAlign,
+      accessibilityRole = 'button',
+      variant,
+      ...rest
+    },
     ref
   ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
@@ -110,7 +120,13 @@ const ExpandCollapseControl = React.forwardRef(
                 </View>
               )}
               <View
-                style={[selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+                style={[
+                  selectTextContainerStyles({
+                    ...themeTokens,
+                    ...(controlAlign && { controlAlign })
+                  }),
+                  staticStyles.bubblePointerEvents
+                ]}
               >
                 {typeof children === 'function'
                   ? children(getControlState(pressableState))
@@ -144,6 +160,10 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: PropTypes.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */

package/src/ExpandCollapse/Panel.jsx

@@ -90,6 +90,7 @@ const ExpandCollapsePanel = React.forwardRef(
       onPress,
       control,
       controlTokens,
+      controlAlign,
       children,
       tokens,
       variant,
@@ -174,6 +175,7 @@ const ExpandCollapsePanel = React.forwardRef(
             {...selectedProps}
             isExpanded={isExpanded}
             tokens={controlTokens}
+            controlAlign={controlAlign}
             variant={variant}
             onPress={handleControlPress}
             ref={controlRef}
@@ -284,6 +286,10 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -7,9 +7,24 @@ import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
 
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 const ExpandCollapseMini = React.forwardRef(
   (
-    { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
+    {
+      children,
+      onToggle = () => {},
+      tokens = {},
+      nativeID,
+      initialOpen = false,
+      dataSet,
+      align,
+      ...rest
+    },
     ref
   ) => {
     const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
@@ -40,10 +55,11 @@ const ExpandCollapseMini = React.forwardRef(
               textLine: tokens.textLine ?? 'none',
               backgroundColor: 'transparent'
             }}
+            controlAlign={align && alignMap[align]}
             // TODO refactor
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => (
-              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+              <ExpandCollapseMiniControl pressableState={pressableState} align={align} {...rest} />
             )}
             controlRef={ref}
             nativeID={nativeID}
@@ -87,7 +103,11 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
 
 export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -7,6 +7,12 @@ import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
 const presentationOnly = {
@@ -24,6 +30,7 @@ const ExpandCollapseMiniControl = React.forwardRef(
       iconPosition = 'right',
       tokens,
       variant = {},
+      align,
       ...rest
     },
     ref
@@ -96,7 +103,8 @@ const ExpandCollapseMiniControl = React.forwardRef(
           ...getTokens(linkState),
           iconSize,
           blockFontSize: fontSize,
-          blockLineHeight: lineHeight
+          blockLineHeight: lineHeight,
+          ...(align && { alignSelf: alignSelfMap[align] })
         })}
         ref={ref}
         {...presentationOnly}
@@ -132,7 +140,11 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
 
 export default ExpandCollapseMiniControl

package/src/Link/ChevronLink.jsx

@@ -34,6 +34,7 @@ const ChevronLink = React.forwardRef(
     return (
       <LinkBase
         {...otherlinkProps}
+        useMeasuredMobileIconLayout
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}