@telus-uds/components-base 3.19.0 → 3.21.0

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}

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -59,7 +59,7 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
-  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }

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/StackView/StackView.jsx

@@ -13,10 +13,12 @@ import {
   spacingProps,
   useResponsiveProp,
   variantProp,
-  viewProps
+  viewProps,
+  StyleSheet as StyleSheetUtils,
+  createMediaQueryStyles,
+  useAllViewportTokens
 } from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import useTheme from '../ThemeProvider/useTheme'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
@@ -75,24 +77,70 @@ const StackView = React.forwardRef(
       tokens,
       tag,
       accessibilityRole,
+      dataSet,
       ...rest
     },
     ref
   ) => {
-    const viewport = useViewport()
     const direction = useResponsiveProp(directionProp, 'column')
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
     const selectedProps = selectProps({
       accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...rest
     })
     const content = getStackedContent(children, { direction, divider, space })
-    const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
-    const flexStyles = selectFlexStyles(themeTokens)
-    const size = { width: themeTokens.width }
+
+    const allTokens = useAllViewportTokens('StackView', tokens, variant)
+
+    let stackViewStyles
+    let dataSetValue = dataSet
+
+    if (enableMediaQueryStyleSheet) {
+      const stylesByViewport = {
+        xs: {
+          ...selectFlexStyles(allTokens.xs),
+          width: allTokens.xs.width
+        },
+        sm: {
+          ...selectFlexStyles(allTokens.sm),
+          width: allTokens.sm.width
+        },
+        md: {
+          ...selectFlexStyles(allTokens.md),
+          width: allTokens.md.width
+        },
+        lg: {
+          ...selectFlexStyles(allTokens.lg),
+          width: allTokens.lg.width
+        },
+        xl: {
+          ...selectFlexStyles(allTokens.xl),
+          width: allTokens.xl.width
+        }
+      }
+
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+
+      const { ids, styles } = StyleSheetUtils.create({
+        stackView: {
+          ...mediaQueryStyles
+        }
+      })
+
+      stackViewStyles = [staticStyles[direction], styles.stackView]
+      dataSetValue = { media: ids.stackView, ...dataSet }
+    } else {
+      const flexStyles = selectFlexStyles(allTokens.current)
+      const size = { width: allTokens.current.width }
+      stackViewStyles = [flexStyles, staticStyles[direction], size]
+    }
 
     return (
-      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction], size]}>
+      <View ref={ref} {...selectedProps} style={stackViewStyles} dataSet={dataSetValue}>
         {content}
       </View>
     )
@@ -132,7 +180,12 @@ StackView.propTypes = {
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * 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
 }
 
 export default StackView

package/src/Tabs/TabsDropdown.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider'
 import {
   a11yProps,
@@ -245,20 +245,21 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%'
   },
-  pressable: {
-    outlineWidth: 0,
-    outlineStyle: 'none',
-    outlineColor: 'transparent'
-  },
+  pressable:
+    Platform.OS === 'web'
+      ? {
+          outlineWidth: 0,
+          outlineStyle: 'none',
+          outlineColor: 'transparent'
+        }
+      : {},
   buttonContent: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    minHeight: 44,
-    outline: 'none',
-    boxSizing: 'border-box'
+    minHeight: 44
   }
 })
 

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'

package/src/utils/ssr-media-query/index.js

@@ -1,8 +1,9 @@
 import createStyleSheet from './create-stylesheet'
 import createMediaQueryStyles from './utils/create-media-query-styles'
+import useAllViewportTokens from './utils/use-all-viewport-tokens'
 
 const StyleSheet = {
   create: createStyleSheet
 }
 
-export { StyleSheet, createMediaQueryStyles }
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens }

package/src/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -0,0 +1,32 @@
+import { useThemeTokens } from '../../../ThemeProvider'
+import { useViewport } from '../../../ViewportProvider'
+
+/**
+ * Hook to get theme tokens for all viewports at once.
+ * This is useful for components that need to support React Native Media Queries (RNMQ).
+ *
+ * All hooks are called unconditionally to comply with React's Rules of Hooks.
+ *
+ * @param {string} componentName - The name of the component to get tokens for
+ * @param {object|function} tokens - Custom tokens or token function
+ * @param {object} variant - Variant configuration
+ * @returns {object} Object with tokens for each viewport (xs, sm, md, lg, xl, current)
+ *
+ * @example
+ * const allTokens = useAllViewportTokens('StackView', tokens, variant)
+ * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
+ */
+const useAllViewportTokens = (componentName, tokens, variant) => {
+  const viewport = useViewport()
+
+  const xs = useThemeTokens(componentName, tokens, variant, { viewport: 'xs' })
+  const sm = useThemeTokens(componentName, tokens, variant, { viewport: 'sm' })
+  const md = useThemeTokens(componentName, tokens, variant, { viewport: 'md' })
+  const lg = useThemeTokens(componentName, tokens, variant, { viewport: 'lg' })
+  const xl = useThemeTokens(componentName, tokens, variant, { viewport: 'xl' })
+  const current = useThemeTokens(componentName, tokens, variant, { viewport })
+
+  return { xs, sm, md, lg, xl, current }
+}
+
+export default useAllViewportTokens

package/src/utils/useMediaQuerySpacing.js

@@ -0,0 +1,124 @@
+import { useThemeTokens } from '../ThemeProvider'
+import { resolveResponsiveProp } from './useResponsiveProp'
+
+/**
+ * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
+ * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
+ */
+
+/**
+ * A utility hook that simplifies implementing media query-based responsive spacing.
+ *
+ * This hook handles the complexity of:
+ * - Detecting if a space value is responsive (has viewport keys)
+ * - Fetching theme tokens for each viewport
+ * - Resolving the correct space index for each viewport
+ * - Extracting actual pixel values from theme tokens
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * const { sizeByViewport } = useMediaQuerySpacing(space, 'spacingScale')
+ *
+ * // Use sizeByViewport to create media query styles
+ * const stylesByViewport = {
+ *   xs: { padding: sizeByViewport.xs },
+ *   sm: { padding: sizeByViewport.sm },
+ *   md: { padding: sizeByViewport.md },
+ *   lg: { padding: sizeByViewport.lg },
+ *   xl: { padding: sizeByViewport.xl }
+ * }
+ * const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+ * ```
+ *
+ * ## Parameters
+ *
+ * @param {SpacingValue} spaceValue - A spacing value (number or responsive object with viewport keys)
+ * @param {string} tokenKey - The theme token key to use (e.g., 'spacingScale', 'Typography')
+ * @param {object} [tokens={}] - Additional tokens to pass to useThemeTokens
+ * @param {object} [variant={}] - Variant to pass to useThemeTokens
+ *
+ * ## Returns
+ *
+ * @returns {{
+ *   spaceIndexByViewport: { xs: number, sm: number, md: number, lg: number, xl: number },
+ *   sizeByViewport: { xs: number, sm: number, md: number, lg: number, xl: number },
+ *   tokensByViewport: { xs: object, sm: object, md: object, lg: object, xl: object }
+ * }}
+ *
+ * - `spaceIndexByViewport`: The resolved space index for each viewport
+ * - `sizeByViewport`: The actual pixel/number values for each viewport
+ * - `tokensByViewport`: The full theme tokens for each viewport (for advanced use cases)
+ */
+const useMediaQuerySpacing = (spaceValue, tokenKey = 'spacingScale', tokens = {}, variant = {}) => {
+  const isResponsive =
+    typeof spaceValue === 'object' &&
+    spaceValue !== null &&
+    !spaceValue.space &&
+    !spaceValue.options
+
+  const getSpaceIndex = (viewport) => {
+    if (isResponsive) {
+      return resolveResponsiveProp(spaceValue, viewport)
+    }
+    if (typeof spaceValue === 'number') {
+      return spaceValue
+    }
+    return spaceValue?.space ?? 1
+  }
+
+  const spaceIndexByViewport = {
+    xs: getSpaceIndex('xs'),
+    sm: getSpaceIndex('sm'),
+    md: getSpaceIndex('md'),
+    lg: getSpaceIndex('lg'),
+    xl: getSpaceIndex('xl')
+  }
+
+  const tokensXs = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xs,
+    viewport: 'xs'
+  })
+  const tokensSm = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.sm,
+    viewport: 'sm'
+  })
+  const tokensMd = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.md,
+    viewport: 'md'
+  })
+  const tokensLg = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.lg,
+    viewport: 'lg'
+  })
+  const tokensXl = useThemeTokens(tokenKey, tokens, variant, {
+    space: spaceIndexByViewport.xl,
+    viewport: 'xl'
+  })
+
+  const sizeByViewport = {
+    xs: tokensXs.size ?? 0,
+    sm: tokensSm.size ?? 0,
+    md: tokensMd.size ?? 0,
+    lg: tokensLg.size ?? 0,
+    xl: tokensXl.size ?? 0
+  }
+
+  const tokensByViewport = {
+    xs: tokensXs,
+    sm: tokensSm,
+    md: tokensMd,
+    lg: tokensLg,
+    xl: tokensXl
+  }
+
+  return {
+    spaceIndexByViewport,
+    sizeByViewport,
+    tokensByViewport
+  }
+}
+
+export default useMediaQuerySpacing