@telus-uds/components-base 3.18.0 → 3.19.0

package/lib/esm/utils/isTouchDevice.js

@@ -0,0 +1,27 @@
+import Platform from "react-native-web/dist/exports/Platform";
+/**
+ * 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;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.14.0",
+    "@telus-uds/system-theme-tokens": "^4.15.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.18.0",
+  "version": "3.19.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.14.0",
+    "@telus-uds/system-theme-tokens": "^4.15.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.18.0",
+  "version": "3.19.0",
   "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -21,9 +21,10 @@ import {
   variantProp,
   viewProps,
   StyleSheet as RNMQStyleSheet,
-  getSpacingScale
+  getSpacingScale,
+  formatImageSource
 } from '../utils'
-import backgroundImageStylesMap from './backgroundImageStylesMap'
+import backgroundImageStylesMap, { backgroundPositions } from './backgroundImageStylesMap'
 import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -87,38 +88,60 @@ const setBackgroundImage = ({
   backgroundImageResizeMode,
   backgroundImagePosition,
   backgroundImageAlign,
-  backgroundImageWidth,
-  backgroundImageHeight,
-  content
+  content,
+  testID
 }) => {
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined
+
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`
+
+    if (Platform.OS === 'web') {
+      const backgroundPosition = backgroundPositions[positionKey] || 'center center'
+
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      }
+
+      return (
+        <View
+          style={[staticStyles.imageBackground, backgroundImageStyle]}
+          aria-label={alt}
+          testID={backgroundImageTestID}
+        >
+          {content}
+        </View>
+      )
     }
+    const positionStyles = backgroundImageStylesMap[positionKey] || {}
 
     return (
-      <View style={staticStyles.containedContainer}>
-        <View style={containedViewStyle}>
-          <Image
-            source={{ uri: src }}
-            alt={alt}
-            style={staticStyles.containedImage}
-            accessibilityIgnoresInvertColors
-          />
-        </View>
-        {content}
+      <View style={staticStyles.containContainer}>
+        <Image
+          source={src}
+          resizeMode={backgroundImageResizeMode}
+          style={[staticStyles.containImage, positionStyles]}
+          accessible={true}
+          accessibilityLabel={alt}
+          accessibilityIgnoresInvertColors={true}
+          testID={backgroundImageTestID}
+        />
+        <View style={staticStyles.contentOverlay}>{content}</View>
       </View>
     )
   }
+
   return (
     <ImageBackground
-      source={{ uri: src }}
-      alt={alt}
-      style={staticStyles.backgroundImageContainer}
+      source={src}
       resizeMode={backgroundImageResizeMode}
+      style={staticStyles.imageBackground}
+      accessible={true}
+      accessibilityLabel={alt}
+      testID={backgroundImageTestID}
     >
       {content}
     </ImageBackground>
@@ -279,33 +302,47 @@ const Box = React.forwardRef(
 
     const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
-    const backgroundImagePosition = useResponsiveProp(position, 'none')
-    const backgroundImageAlign = useResponsiveProp(align, 'stretch')
-    const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0)
-    const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0)
-    if (backgroundImage)
+    const backgroundImagePosition = useResponsiveProp(position)
+    const backgroundImageAlign = useResponsiveProp(align)
+    const imageSourceViewport = formatImageSource(useResponsiveProp(src))
+
+    if (backgroundImage && src) {
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = boxStyles
+
+      const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
+      const paddedContent = hasPadding ? (
+        <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
+      ) : (
+        children
+      )
+
       content = setBackgroundImage({
-        src,
+        src: imageSourceViewport,
         alt,
         backgroundImageResizeMode,
         backgroundImagePosition,
         backgroundImageAlign,
-        backgroundImageWidth,
-        backgroundImageHeight,
-        content
+        content: paddedContent,
+        testID
       })
 
-    React.useEffect(() => {
-      if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-        Image.getSize(src, (width, height) => {
-          // Only update the state if the size has changed
-          if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-            setBackgroundImageWidth(width)
-            setBackgroundImageHeight(height)
-          }
-        })
+      const dataSetValue = boxMediaIds ? { media: boxMediaIds, ...dataSet } : dataSet
+
+      if (scroll) {
+        const scrollProps = typeof scroll === 'object' ? scroll : {}
+        scrollProps.contentContainerStyle = [containerStyle, scrollProps.contentContainerStyle]
+        return (
+          <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSetValue} ref={ref}>
+            {content}
+          </ScrollView>
+        )
       }
-    }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src])
+      return (
+        <View {...props} style={containerStyle} testID={testID} dataSet={dataSetValue} ref={ref}>
+          {content}
+        </View>
+      )
+    }
 
     const dataSetValue = boxMediaIds ? { media: boxMediaIds, ...dataSet } : dataSet
 
@@ -416,10 +453,12 @@ Box.propTypes = {
   */
   customGradient: PropTypes.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: PropTypes.shape({
-    src: PropTypes.string.isRequired,
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
@@ -436,18 +475,21 @@ Box.propTypes = {
 export default Box
 
 const staticStyles = StyleSheet.create({
-  backgroundImageContainer: {
-    flex: 1
-  },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
+  imageBackground: { width: '100%', height: '100%' },
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
   },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
   },
-  containedImage: {
+  containImage: {
+    position: 'absolute',
     width: '100%',
     height: '100%'
   }

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

@@ -479,9 +479,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/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

@@ -25,3 +25,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