@telus-uds/components-base 3.28.1 → 3.29.0

package/src/Link/LinkBase.jsx

@@ -16,6 +16,7 @@ import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
+import MobileIconTextContent from './MobileIconTextContent'
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
@@ -133,6 +134,7 @@ const LinkBase = React.forwardRef(
       tokens = {},
       children,
       dataSet,
+      useMeasuredMobileIconLayout = false,
       accessibilityRole = 'link',
       ...rawRest
     },
@@ -171,12 +173,14 @@ const LinkBase = React.forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-
-          const mobileCompensation = null
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
 
           return [
             outerBorderStyles,
-            mobileCompensation,
+            shouldUseMeasuredMobileContent
+              ? staticStyles.measuredMobileOuterBorderCompensation
+              : null,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -196,28 +200,50 @@ const LinkBase = React.forwardRef(
 
           const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link'
           const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
+          const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline
+
+          const linkTextContent = (
+            <Text
+              style={[
+                textStyles,
+                blockTextStyles,
+                textBaselineStyle,
+                staticStyles.bubblePointerEvents
+              ]}
+            >
+              {typeof children === 'function' ? children(linkState) : children}
+            </Text>
+          )
+
+          const sharedIconProps = {
+            ...iconProps,
+            tokens: iconTokens,
+            style: staticStyles.bubblePointerEvents
+          }
+
+          if (shouldUseMeasuredMobileContent) {
+            return (
+              <MobileIconTextContent
+                icon={IconComponent}
+                iconPosition={iconPosition}
+                space={adjustedIconSpace}
+                iconProps={sharedIconProps}
+              >
+                {linkTextContent}
+              </MobileIconTextContent>
+            )
+          }
 
           return (
             <IconText
               icon={IconComponent}
               iconPosition={iconPosition}
               space={adjustedIconSpace}
-              iconProps={{
-                ...iconProps,
-                tokens: iconTokens,
-                style: staticStyles.bubblePointerEvents
-              }}
+              iconProps={sharedIconProps}
             >
-              <Text
-                style={[
-                  textStyles,
-                  blockTextStyles,
-                  staticStyles.baseline,
-                  staticStyles.bubblePointerEvents
-                ]}
-              >
-                {typeof children === 'function' ? children(linkState) : children}
-              </Text>
+              {linkTextContent}
             </IconText>
           )
         }}
@@ -280,11 +306,12 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 })

package/src/Link/MobileIconTextContent.jsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text, View, StyleSheet } from 'react-native'
+
+import Icon, { iconComponentPropTypes } from '../Icon/Icon'
+import { spacingProps } from '../utils'
+
+const MobileIconTextContent = React.forwardRef(
+  ({ space = 0, iconPosition = 'left', icon: IconComponent, iconProps = {}, children }, ref) => {
+    const [translateY, setTranslateY] = React.useState(0)
+    const latestTranslateYRef = React.useRef(0)
+    const layoutsRef = React.useRef({
+      container: null,
+      text: null,
+      icon: null
+    })
+
+    const applyAlignment = React.useCallback(() => {
+      const { container, text, icon } = layoutsRef.current
+
+      if (!container || !icon || !icon.height) return
+
+      const targetY = text ? text.y + text.height / 2 : container.height / 2
+      const iconY = icon.y + icon.height / 2
+      const nextTranslateY = Math.round((targetY - iconY) * 100) / 100
+
+      if (!Number.isFinite(nextTranslateY)) return
+      if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return
+
+      latestTranslateYRef.current = nextTranslateY
+      setTranslateY(nextTranslateY)
+    }, [])
+
+    const handleContainerLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.container = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleTextLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.text = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleIconLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.icon = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const iconContent = IconComponent ? (
+      <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
+    ) : null
+
+    const iconWrapper = IconComponent ? (
+      <View
+        onLayout={handleIconLayout}
+        style={[staticStyles.iconContainer, { transform: [{ translateY }] }]}
+      >
+        {iconContent}
+      </View>
+    ) : null
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text onLayout={handleContainerLayout}>
+          <Text onLayout={handleTextLayout}>{children}</Text>{' '}
+          <View style={staticStyles.inlineIconContainer}>{iconWrapper}</View>
+        </Text>
+      )
+    }
+
+    const iconSpaceStyle = iconPosition === 'left' ? { marginRight: space } : { marginLeft: space }
+
+    return (
+      <View onLayout={handleContainerLayout} style={staticStyles.rowContainer}>
+        {iconPosition === 'left' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+        <View onLayout={handleTextLayout}>{children}</View>
+        {iconPosition === 'right' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+      </View>
+    )
+  }
+)
+
+MobileIconTextContent.displayName = 'MobileIconTextContent'
+
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+}
+
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+})
+
+export default MobileIconTextContent

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

@@ -42,12 +42,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
 
 const TabBar = React.forwardRef(
-  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+  (
+    {
+      items = [],
+      initiallySelectedItem = '0',
+      onChange,
+      variant,
+      tokens,
+      accessibilityLabel,
+      ...rest
+    },
+    ref
+  ) => {
     const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
     const themeTokens = useThemeTokens('TabBar', tokens, variant)
 
@@ -62,7 +74,11 @@ const TabBar = React.forwardRef(
         style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+        <View
+          style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}
+          accessibilityRole="tablist"
+          accessibilityLabel={accessibilityLabel}
+        >
           {items.map((item, index) => (
             <TabBarItem
               key={item.id}
@@ -73,7 +89,6 @@ const TabBar = React.forwardRef(
               iconActive={item.iconActive}
               onPress={() => handlePress(item.id)}
               id={`tab-item-${index}`}
-              accessibilityRole="tablist"
               tokens={item.tokens}
             />
           ))}
@@ -105,7 +120,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 }
 
 const styles = StyleSheet.create({

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