@telus-uds/components-base 3.18.0 → 3.20.0

package/src/Box/backgroundImageStylesMap.js

@@ -1,21 +1,54 @@
-export default {
-  'top-start': { top: 0 },
-  'top-center': { left: 0, right: 0, marginHorizontal: 'auto' },
+import { Platform } from 'react-native'
+
+const webStyles = {
+  'top-start': { top: 0, left: 0 },
+  'top-center': { top: 0, left: '50%', transform: [{ translateX: '-50%' }] },
   'top-end': { top: 0, right: 0 },
   'right-start': { top: 0, right: 0 },
-  'left-start': { top: 0 },
-  'left-center': { top: 0, bottom: 0, marginVertical: 'auto' },
-  'none-start': { top: 0, bottom: 0, marginVertical: 'auto' },
-  'none-center': { top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' },
-  'right-center': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
-  'none-end': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'left-start': { top: 0, left: 0 },
+  'left-center': { top: '50%', left: 0, transform: [{ translateY: '-50%' }] },
+  'right-center': { top: '50%', right: 0, transform: [{ translateY: '-50%' }] },
   'bottom-start': { bottom: 0, left: 0 },
   'left-end': { bottom: 0, left: 0 },
-  'bottom-center': { left: 0, right: 0, bottom: 0, marginHorizontal: 'auto' },
-  'bottom-end': { right: 0, bottom: 0 },
-  'right-end': { right: 0, bottom: 0 },
-  'top-stretch': { left: 0, right: 0, width: '100%' },
-  'left-stretch': { top: 0, bottom: 0, height: '100%' },
+  'bottom-center': { bottom: 0, left: '50%', transform: [{ translateX: '-50%' }] },
+  'bottom-end': { bottom: 0, right: 0 },
+  'right-end': { bottom: 0, right: 0 },
+  'top-stretch': { top: 0, left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, left: 0, height: '100%' },
   'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
-  'bottom-stretch': { left: 0, right: 0, bottom: 0, width: '100%' }
+  'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
 }
+
+const webBackgroundPositions = {
+  'top-start': 'left top',
+  'top-center': 'center top',
+  'top-end': 'right top',
+  'bottom-start': 'left bottom',
+  'bottom-center': 'center bottom',
+  'bottom-end': 'right bottom',
+  'left-center': 'left center',
+  'right-center': 'right center'
+}
+
+const nativeStyles = {
+  'top-start': { top: 0, left: 0, width: 150, height: 200 },
+  'top-center': { top: 0, left: '50%', marginLeft: -75, width: 150, height: 200 },
+  'top-end': { top: 0, right: 0, width: 150, height: 200 },
+  'right-start': { top: 0, right: 0, width: 150, height: 200 },
+  'left-start': { top: 0, left: 0, width: 150, height: 200 },
+  'left-center': { left: 0, top: '50%', marginTop: -100, width: 150, height: 200 },
+  'right-center': { right: 0, top: '50%', marginTop: -100, width: 150, height: 200 },
+  'bottom-start': { bottom: 0, left: 0, width: 150, height: 200 },
+  'left-end': { bottom: 0, left: 0, width: 150, height: 200 },
+  'bottom-center': { bottom: 0, left: '50%', marginLeft: -75, width: 150, height: 200 },
+  'bottom-end': { bottom: 0, right: 0, width: 150, height: 200 },
+  'right-end': { bottom: 0, right: 0, width: 150, height: 200 },
+  'top-stretch': { top: 0, left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, left: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
+}
+
+export const backgroundPositions = Platform.OS === 'web' ? webBackgroundPositions : {}
+
+export default Platform.OS === 'web' ? webStyles : nativeStyles

package/src/Button/ButtonDropdown.jsx

@@ -56,6 +56,7 @@ const selectDescriptionTextStyles = (tokens) => ({
     fontName: tokens?.descriptionFontName,
     fontSize: tokens?.descriptionFontSize,
     fontWeight: tokens?.descriptionFontWeight,
+    lineHeight: tokens?.descriptionLineHeight,
     fontColor: tokens?.color
   }),
   paddingBottom: tokens?.descriptionTextPaddingBottom

package/src/Carousel/Carousel.jsx

@@ -12,7 +12,8 @@ import {
   a11yProps,
   viewProps,
   useCopy,
-  unpackFragment
+  unpackFragment,
+  isTouchDevice
 } from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
@@ -799,7 +800,7 @@ const Carousel = React.forwardRef(
         return false
       }
       if (Platform.OS === 'web') {
-        return !!(viewport === 'xs' || viewport === 'sm')
+        return !!(viewport === 'xs' || viewport === 'sm' || (viewport === 'md' && isTouchDevice()))
       }
       return true
     }, [viewport, totalItems])

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -62,36 +62,28 @@ const ExpandCollapseMiniControl = React.forwardRef(
       const iconBaselineOffset = 0
       const hoverTranslateY = 4
 
-      // Calculate baseline alignment to vertically center icon with text
-      // This combines font and icon metrics with adjustments for visual balance
-      const fontBaseline = fontSize / hoverTranslateY // Quarter of font size - adjusts for text's visual center point
-      const iconBaseline = iconSize / hoverTranslateY // Quarter of icon size - adjusts for icon's visual center point
-      const staticOffset = hoverTranslateY // Fixed downward adjustment to fine-tune vertical alignment
-      const sizeCompensation = -Math.abs(iconSize - fontSize) // Compensates when icon and text sizes differ significantly
+      const fontBaseline = fontSize / hoverTranslateY
+      const iconBaseline = iconSize / hoverTranslateY
+      const staticOffset = hoverTranslateY
+      const sizeCompensation = -Math.abs(iconSize - fontSize)
 
       const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation
 
-      if (Platform.OS !== 'web') {
-        // For native platforms, use baseline alignment with optional offset
-        return { iconTranslateY: baselineAlignment + iconBaselineOffset }
-      }
+      const mobileAdjustment = Platform.OS !== 'web' ? -2 : 0
 
       if (isHovered) {
-        // Apply animation offset to the baseline-aligned position
-        // When expanded: move icon UP (1.3 the hover distance for clear movement)
-        // When collapsed: move icon DOWN (single hover distance)
         const hoverMovementDistance = 1.3
         const animationOffset = expanded
           ? -(hoverTranslateY * hoverMovementDistance)
           : hoverTranslateY
 
         return {
-          iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
+          iconTranslateY:
+            baselineAlignment + iconBaselineOffset + animationOffset + mobileAdjustment
         }
       }
 
-      // Default state uses baseline alignment with optional offset
-      return { iconTranslateY: baselineAlignment + iconBaselineOffset }
+      return { iconTranslateY: baselineAlignment + iconBaselineOffset + mobileAdjustment }
     }
 
     return (
@@ -103,6 +95,7 @@ const ExpandCollapseMiniControl = React.forwardRef(
           ...linkTokens,
           ...getTokens(linkState),
           iconSize,
+          blockFontSize: fontSize,
           blockLineHeight: lineHeight
         })}
         ref={ref}

package/src/Link/LinkBase.jsx

@@ -171,9 +171,12 @@ const LinkBase = React.forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
+
+          const mobileCompensation = null
+
           return [
             outerBorderStyles,
-            staticStyles.outerBorderStyles,
+            mobileCompensation,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -191,11 +194,14 @@ const LinkBase = React.forwardRef(
           const IconComponent = icon || themeTokens.icon
           const { iconSpace } = themeTokens
 
+          const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link'
+          const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace
+
           return (
             <IconText
               icon={IconComponent}
               iconPosition={iconPosition}
-              space={iconSpace}
+              space={adjustedIconSpace}
               iconProps={{
                 ...iconProps,
                 tokens: iconTokens,
@@ -274,15 +280,11 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderStyles: {
+  outerBorderCompensation: {
     ...(Platform.OS !== 'web' && {
-      margin: 0,
       marginHorizontal: 2,
-      padding: 0
-    }),
-    ...(Platform.OS === 'android' && {
-      paddingHorizontal: 2,
-      paddingTop: 2
+      paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
+      paddingTop: Platform.OS === 'android' ? 2 : 0
     })
   }
 })

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -65,7 +65,6 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
 })
 
 const TOTAL_COLUMNS = 12
-const MAX_ITEMS_THRESHOLD = 12
 
 const MultiSelectFilter = React.forwardRef(
   (
@@ -174,13 +173,15 @@ const MultiSelectFilter = React.forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const colSizeNotMobile = items.length > rowLimit ? 2 : 1
     const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
-    const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
-    const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
+
+    let rowLength = items.length
+    if (viewport !== 'xs' && colSize === 2) {
+      rowLength = Math.ceil(items.length / 2)
+    }
 
     React.useEffect(() => {
-      if (colSize === 1) return setMaxWidth(false)
-      return colSize === 2 && setMaxWidth(true)
-    }, [colSize])
+      setMaxWidth(items.length >= rowLimit)
+    }, [items.length, rowLimit])
 
     React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
 
@@ -414,14 +415,14 @@ const MultiSelectFilter = React.forwardRef(
             dismissWhenPressedOutside={dismissWhenPressedOutside}
             onClose={onClose}
             overlaidPosition={overlaidPosition}
-            maxHeight={items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight}
+            maxHeight={items.length >= rowLimit ? true : maxHeight}
             maxHeightSize={maxHeightSize}
             maxWidthSize={maxWidthSize}
             minHeight={minHeight}
             minWidth={minWidth}
             tokens={{
               ...tokens,
-              maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth,
+              maxWidth: items.length >= rowLimit ? true : maxWidth,
               borderColor: containerBorderColor
             }}
             copy={copy}
@@ -479,9 +480,9 @@ MultiSelectFilter.propTypes = {
    */
   label: PropTypes.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: PropTypes.string,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/src/Spacer/Spacer.jsx

@@ -1,7 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
-import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils'
+import { View, StyleSheet } from 'react-native'
+import {
+  a11yProps,
+  selectSystemProps,
+  spacingProps,
+  useSpacingScale,
+  viewProps,
+  StyleSheet as StyleSheetUtils,
+  createMediaQueryStyles
+} from '../utils'
+import useMediaQuerySpacing from '../utils/useMediaQuerySpacing'
+import useTheme from '../ThemeProvider/useTheme'
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
@@ -56,11 +66,43 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = React.forwardRef(({ space = 1, direction = 'column', ...rest }, ref) => {
-  const size = useSpacingScale(space)
-  const sizeStyle = selectSizeStyle(size, direction)
+const Spacer = React.forwardRef(({ space = 1, direction = 'column', dataSet, ...rest }, ref) => {
+  const {
+    themeOptions: { enableMediaQueryStyleSheet }
+  } = useTheme()
 
-  return <View ref={ref} style={[staticStyles.stretch, sizeStyle]} {...selectProps(rest)} />
+  const { sizeByViewport } = useMediaQuerySpacing(space)
+
+  const fallbackSize = useSpacingScale(space)
+  const sizeStyle = selectSizeStyle(fallbackSize, direction)
+
+  let spacerStyles
+  let dataSetValue = dataSet
+
+  if (enableMediaQueryStyleSheet) {
+    const sizeKey = direction === 'row' ? 'width' : 'height'
+    const stylesByViewport = {
+      xs: { [sizeKey]: sizeByViewport.xs, ...staticStyles.stretch },
+      sm: { [sizeKey]: sizeByViewport.sm, ...staticStyles.stretch },
+      md: { [sizeKey]: sizeByViewport.md, ...staticStyles.stretch },
+      lg: { [sizeKey]: sizeByViewport.lg, ...staticStyles.stretch },
+      xl: { [sizeKey]: sizeByViewport.xl, ...staticStyles.stretch }
+    }
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+
+    const { ids, styles } = StyleSheetUtils.create({
+      spacer: {
+        ...mediaQueryStyles
+      }
+    })
+
+    spacerStyles = styles.spacer
+    dataSetValue = { media: ids.spacer, ...dataSet }
+  } else {
+    spacerStyles = [staticStyles.stretch, sizeStyle]
+  }
+
+  return <View ref={ref} style={spacerStyles} dataSet={dataSetValue} {...selectProps(rest)} />
 })
 Spacer.displayName = 'Spacer'
 
@@ -78,7 +120,12 @@ Spacer.propTypes = {
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: PropTypes.oneOf(['column', 'row'])
+  direction: PropTypes.oneOf(['column', 'row']),
+  /**
+   * Data attributes to be applied to the element. When media query stylesheet is enabled,
+   * this will include media query IDs for responsive styling.
+   */
+  dataSet: PropTypes.object
 }
 
 const staticStyles = StyleSheet.create({

package/src/StepTracker/Step.jsx

@@ -137,12 +137,24 @@ const getStepTestID = (isCompleted, isCurrent) => {
 
   return testID
 }
+const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
+  backgroundColor: isCompleted
+    ? themeTokens.barCompletedBackgroundColor
+    : themeTokens.barBackgroundColor,
+  height: themeTokens.barHeight,
+  ...(isCurrent && {
+    backgroundColor: themeTokens.barCurrentBackgroundColor
+  })
+})
 
 /**
  * A single step of a StepTracker.
  */
 const Step = React.forwardRef(
-  ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }, ref) => {
+  (
+    { label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, isBarVariant, ...rest },
+    ref
+  ) => {
     const { completedIcon, showStepLabel, showStepName, textStepTrackerLabel, ...themeTokens } =
       tokens
     const isFirst = stepIndex === 0
@@ -162,35 +174,43 @@ const Step = React.forwardRef(
         ref={ref}
         {...selectProps(rest)}
       >
-        <StackView
-          direction="row"
-          space={0}
-          tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
-        >
+        {isBarVariant && (
           <View
-            style={[
-              staticStyles.connector,
-              !isFirst && selectConnectorStyles(themeTokens, isActive)
-            ]}
-          />
-          <View
-            style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
+            style={selectBarContainerStyles(themeTokens, isCompleted, isCurrent)}
             testID={getStepTestID(isCompleted, isCurrent)}
-          >
-            {isCompleted && completedIcon && (
-              <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
-            )}
-            {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
-              <View style={selectCurrentInnerStyles(themeTokens)} />
-            )}
-          </View>
-          <View
-            style={[
-              staticStyles.connector,
-              !isLast && selectConnectorStyles(themeTokens, isCompleted)
-            ]}
           />
-        </StackView>
+        )}
+        {!isBarVariant && (
+          <StackView
+            direction="row"
+            space={0}
+            tokens={{ alignItems: 'center', flexGrow: 0, justifyContent: 'center' }}
+          >
+            <View
+              style={[
+                staticStyles.connector,
+                !isFirst && selectConnectorStyles(themeTokens, isActive)
+              ]}
+            />
+            <View
+              style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
+              testID={getStepTestID(isCompleted, isCurrent)}
+            >
+              {isCompleted && completedIcon && (
+                <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
+              )}
+              {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
+                <View style={selectCurrentInnerStyles(themeTokens)} />
+              )}
+            </View>
+            <View
+              style={[
+                staticStyles.connector,
+                !isLast && selectConnectorStyles(themeTokens, isCompleted)
+              ]}
+            />
+          </StackView>
+        )}
         {showStepLabel && (
           <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
             {showStepName && (

package/src/StepTracker/StepTracker.jsx

@@ -9,6 +9,8 @@ import useCopy from '../utils/useCopy'
 import Step from './Step'
 import defaultDictionary from './dictionary'
 
+const STYLE_BAR_VARIANT = 'bar'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectContainerStyles = ({
@@ -38,6 +40,10 @@ const selectStepTrackerLabelStyles = (
     themeOptions
   })
 
+const selectStepsContainerStyles = ({ barGap }) => ({
+  gap: barGap
+})
+
 /**
  * StepTracker component shows the current position in a sequence of steps.
  *
@@ -83,6 +89,7 @@ const StepTracker = React.forwardRef(
     },
     ref
   ) => {
+    const isBarVariant = variant?.style === STYLE_BAR_VARIANT
     const viewport = useViewport()
     const { showStepTrackerLabel, ...themeTokens } = useThemeTokens(
       'StepTracker',
@@ -135,7 +142,7 @@ const StepTracker = React.forwardRef(
       <View ref={ref} style={selectContainerStyles(themeTokens)} {...selectedProps}>
         <StackView space={0}>
           <View
-            style={staticStyles.stepsContainer}
+            style={[staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)]}
             accessibilityRole={stepsContainerAccessibilityRole}
           >
             {steps.map((label, index) => {
@@ -150,6 +157,7 @@ const StepTracker = React.forwardRef(
                   tokens={themeTokens}
                   accessibilityRole={stepAccessibilityRole}
                   accessibilityCurrent={current === index && Platform.OS === 'web' && 'step'}
+                  isBarVariant={isBarVariant}
                 />
               )
             })}

package/src/TabBar/TabBar.jsx

@@ -74,6 +74,7 @@ const TabBar = React.forwardRef(
               onPress={() => handlePress(item.id)}
               id={`tab-item-${index}`}
               accessibilityRole="tablist"
+              tokens={item.tokens}
             />
           ))}
         </View>
@@ -93,7 +94,8 @@ TabBar.propTypes = {
       icon: PropTypes.node,
       iconActive: PropTypes.node,
       label: PropTypes.string.isRequired,
-      href: PropTypes.string
+      href: PropTypes.string,
+      tokens: getTokensPropType('TabBarItem')
     })
   ).isRequired,
   /** Id of the initially selected item. */

package/src/TabBar/index.js

@@ -1,3 +1,6 @@
 import TabBar from './TabBar'
+import TabBarItem from './TabBarItem'
+
+TabBar.Item = TabBarItem
 
 export default TabBar

package/src/Tooltip/Backdrop.jsx

@@ -16,7 +16,7 @@ function createPortalNode(nodeId) {
   left: ${window.scrollX}px; 
   right: 0; 
   bottom: 0; 
-  z-index: 9999; 
+  z-index: 100000; 
   pointer-events: none;
   `
 

package/src/utils/index.js

@@ -9,6 +9,7 @@ export { default as info } from './info'
 export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
+export { default as useMediaQuerySpacing } from './useMediaQuerySpacing'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export { default as useOverlaidPosition } from './useOverlaidPosition'
 export { default as useSafeLayoutEffect } from './useSafeLayoutEffect'
@@ -25,3 +26,4 @@ export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByt
 export { default as formatImageSource } from './formatImageSource'
 export { default as getSpacingScale } from './getSpacingScale'
 export { default as useVariants } from './useVariants'
+export { default as isTouchDevice } from './isTouchDevice'

package/src/utils/isTouchDevice.js

@@ -0,0 +1,34 @@
+import { Platform } from 'react-native'
+
+/**
+ * Determines if the current device supports touch interactions
+ *
+ * @returns {boolean} True if the device supports touch, false otherwise
+ */
+const isTouchDevice = () => {
+  if (Platform.OS !== 'web') {
+    return true
+  }
+
+  if (typeof window !== 'undefined') {
+    if ('ontouchstart' in window) {
+      return true
+    }
+
+    if (window.navigator && window.navigator.maxTouchPoints > 0) {
+      return true
+    }
+
+    if (window.navigator && window.navigator.msMaxTouchPoints > 0) {
+      return true
+    }
+
+    if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export default isTouchDevice