@telus-uds/components-base 1.94.0 → 1.96.0

package/src/Icon/IconText.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, View } from 'react-native'
-
+import { Platform, View, Text, StyleSheet } from 'react-native'
 import Icon, { iconComponentPropTypes } from './Icon'
 import { getStackedContent } from '../StackView'
 import { spacingProps } from '../utils'
@@ -46,6 +45,18 @@ const IconText = React.forwardRef(
     const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS
     const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
+    const adjustedContainerWithPosition = (
+      <View style={staticStyles.adjustedContainer}>{adjustedContainer}</View>
+    )
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text>
+          {children} {adjustedContainerWithPosition}
+        </Text>
+      )
+    }
+
     return getStackedContent(
       iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer],
       { space, direction: 'row' }
@@ -62,9 +73,9 @@ IconText.propTypes = {
    */
   space: spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -83,4 +94,10 @@ IconText.propTypes = {
   /* eslint-enable react/no-unused-prop-types */
 }
 
+const staticStyles = StyleSheet.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+})
+
 export default IconText

package/src/Link/LinkBase.jsx

@@ -240,9 +240,9 @@ LinkBase.propTypes = {
    */
   icon: PropTypes.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.

package/src/List/ListItemBase.jsx

@@ -107,7 +107,7 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
-  titleAndContentContainer: { flexDirection: 'column', flexShrink: 1 }
+  titleAndContentContainer: { flexDirection: 'column', flexShrink: 1, flexGrow: 1 }
 })
 
 ListItemBase.propTypes = {

package/src/Modal/Modal.jsx

@@ -121,6 +121,8 @@ const Modal = React.forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
     const modalRef = useScrollBlocking(isOpen)
+    const modalBodyRef = React.useRef(ref)
+    const modalContentRef = React.useRef(null)
 
     const { closeIcon: CloseIconComponent } = themeTokens
 
@@ -135,6 +137,32 @@ const Modal = React.forwardRef(
       if (event.key === 'Escape') onClose()
     }
 
+    const manageFocus = React.useCallback(
+      (event) => {
+        if (event.key === 'Tab') {
+          const focusableElements = Array.from(
+            modalBodyRef?.current?.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `)
+          )
+
+          const firstElement = focusableElements[0]
+          const lastElement = focusableElements[focusableElements.length - 1]
+
+          if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault()
+            lastElement.focus()
+          } else if (!event.shiftKey && document.activeElement === lastElement) {
+            event.preventDefault()
+            firstElement.focus()
+          }
+        }
+      },
+      [modalBodyRef]
+    )
+
     // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
     // Hide the close button if `closeButton` is `null`.
     const showCloseButton = closeButton !== null
@@ -145,22 +173,20 @@ const Modal = React.forwardRef(
 
     React.useEffect(() => {
       if (Platform.OS === 'web') {
-        const handleFocus = () => {
-          // If the focus is on the last item of the web modal container, move it to the close button
-          if (document.activeElement === focusTrapRef.current) {
-            closeButtonRef.current.focus()
-          }
-          return undefined
-        }
-
-        // Add an event listener to manage focus in the web modal container
-        document.addEventListener('focusin', handleFocus)
+        // Add an event listener to manage keydown and focus in the web modal container
+        document.addEventListener('keydown', manageFocus)
 
         // Clean up the event listener
-        return () => document.removeEventListener('focusin', handleFocus)
+        return () => document.removeEventListener('keydown', manageFocus)
       }
       return undefined
-    }, [])
+    }, [manageFocus])
+
+    React.useEffect(() => {
+      if (isOpen) {
+        modalContentRef?.current?.focus()
+      }
+    }, [isOpen, modalContentRef?.current?.focus])
 
     if (!isOpen) {
       return null
@@ -174,7 +200,7 @@ const Modal = React.forwardRef(
             pointerEvents="box-none" // don't capture backdrop press events
           >
             <View
-              ref={ref}
+              ref={modalBodyRef}
               style={[staticStyles.modal, selectModalStyles(themeTokens)]}
               onKeyUp={handleKeyUp}
             >
@@ -230,7 +256,7 @@ const Modal = React.forwardRef(
 
     if (Platform.OS === 'web') {
       return (
-        <WebModal {...selectProps(rest)}>
+        <WebModal {...selectProps(rest)} ref={modalContentRef}>
           {content}
           <View accessibilityRole="button" ref={focusTrapRef} />
         </WebModal>

package/src/Modal/ModalContent.jsx

@@ -155,7 +155,7 @@ const styles = StyleSheet.create({
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
-    flex: 1
+    display: 'flex'
   }
 })
 

package/src/Modal/WebModal.jsx

@@ -17,7 +17,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const WebModal = React.forwardRef(({ children, ...rest }, ref) => {
   return (
     <Portal>
-      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
+      <View style={staticStyles.container} {...selectProps(rest)} focusable={true} ref={ref}>
         <div style={staticStyles.content} role="dialog" aria-modal={true}>
           {children}
         </div>

package/src/Notification/Notification.jsx

@@ -102,11 +102,11 @@ const getMediaQueryStyles = (
       flexShrink: 1,
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
-        xs: { width: themeOptions?.contentMaxWidth?.xs || '100%' },
-        md: { width: themeOptions?.contentMaxWidth?.md || '100%' },
-        lg: { width: themeOptions?.contentMaxWidth?.lg || '100%' },
-        sm: { width: themeOptions?.contentMaxWidth?.sm || '100%' },
-        xl: { width: themeOptions?.contentMaxWidth?.xl || '100%' }
+        xs: { maxWidth: themeOptions?.contentMaxWidth?.xs || '100%' },
+        md: { maxWidth: themeOptions?.contentMaxWidth?.md || '100%' },
+        lg: { maxWidth: themeOptions?.contentMaxWidth?.lg || '100%' },
+        sm: { maxWidth: themeOptions?.contentMaxWidth?.sm || '100%' },
+        xl: { maxWidth: themeOptions?.contentMaxWidth?.xl || '100%' }
       })
     }
   })

package/src/PriceLockup/PriceLockup.jsx

@@ -61,6 +61,10 @@ const selectBottomTextTypographyTokens = ({ bottomTextFontSize, bottomTextLineHe
   lineHeight: bottomTextLineHeight
 })
 
+const selectContainertokens = ({ alignItemsText }) => ({
+  alignItems: alignItemsText
+})
+
 const PriceLockup = React.forwardRef(
   (
     {
@@ -106,7 +110,11 @@ const PriceLockup = React.forwardRef(
     const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
 
     return (
-      <View style={[staticStyles.priceLockupContainer]} ref={ref} {...selectProps(rest)}>
+      <View
+        style={[staticStyles.priceLockupContainer, selectContainertokens(themeTokens)]}
+        ref={ref}
+        {...selectProps(rest)}
+      >
         {topText ? (
           <View style={staticStyles.topText}>
             {renderTypography(topText, topTextTypographyTokens)}

package/src/Progress/Progress.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -12,13 +12,15 @@ const selectProgressStyles = ({
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  shadow
 }) => ({
   backgroundColor,
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  ...applyShadowToken(shadow)
 })
 
 /**
@@ -37,6 +39,7 @@ const selectProgressStyles = ({
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
  *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
  *

package/src/Progress/ProgressBar.jsx

@@ -3,19 +3,20 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
-  { backgroundColor, borderRadius, outlineWidth, outlineColor },
+  { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
   percentage
 ) => ({
   backgroundColor,
   borderRadius,
   outlineWidth,
   outlineColor,
+  ...applyShadowToken(shadow),
   width: `${percentage}%`
 })
 
@@ -34,6 +35,7 @@ const selectBarStyles = (
  *   - `borderRadius` for the rounded corners,
  *   - `outlineColor` to control the color of the border (outline),
  *   - `outlineWidth` to change the outline width.
+ *   - `shadow` to apply a box shadow to the progress bar.
  *
  * ## Variants
  *

package/src/TabBar/TabBar.jsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import TabBarItem from './TabBarItem'
+import { useThemeTokens } from '../ThemeProvider'
+import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const selectTabBarContainerStyles = ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+}) => ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+})
+
+const selectTabBarItemContainerStyles = ({ paddingLeft, paddingRight, gap }) => ({
+  paddingLeft,
+  paddingRight,
+  gap
+})
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * TabBar component renders a navigation bar with multiple TabBarItems.
+ * It allows users to switch between different views or sections.
+ *
+ * @component
+ * @example
+ * const items = [
+ *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
+ *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
+ * ]
+ * return (
+ *   <TabBar
+ *     items={items}
+ *     initiallySelectedItem="1"
+ *     onChange={(itemId) => console.log(itemId)}
+ *   />
+ * )
+ */
+
+const TabBar = React.forwardRef(
+  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+    const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
+    const themeTokens = useThemeTokens('TabBar', tokens, variant)
+
+    const handlePress = (itemId) => {
+      setIsSelected(itemId)
+      onChange?.(itemId)
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
+        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+          {items.map((item, index) => (
+            <TabBarItem
+              key={item.id}
+              label={item.label}
+              href={item.href}
+              isSelected={isSelected === item.id}
+              icon={item.icon}
+              iconActive={item.iconActive}
+              onPress={() => handlePress(item.id)}
+              id={`tab-item-${index}`}
+              accessibilityRole="tablist"
+            />
+          ))}
+        </View>
+      </View>
+    )
+  }
+)
+
+TabBar.displayName = 'TabBar'
+
+TabBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /** Array of TabBarItems to be displayed in TabBar */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      icon: PropTypes.node,
+      iconActive: PropTypes.node,
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string
+    })
+  ).isRequired,
+  /** Id of the initially selected item. */
+  initiallySelectedItem: PropTypes.number,
+  /** Callback function to handle item selection change. */
+  onChange: PropTypes.func,
+  /** Variant of TabBar for styling purposes. */
+  variant: variantProp.propType,
+  /** Tokens for theming and styling. */
+  tokens: getTokensPropType('TabBar')
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabBarItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+})
+
+export default TabBar

package/src/TabBar/TabBarItem.jsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, View, StyleSheet } from 'react-native'
+import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import Typography from '../Typography'
+import Spacer from '../Spacer'
+
+const selectTypographyStyles = (
+  { fontWeight, color, lineHeight, fontName, activeColor },
+  isSelected
+) => ({
+  fontWeight,
+  color: isSelected ? activeColor : color,
+  lineHeight,
+  fontName
+})
+
+const selectIconContainerStyles = ({ paddingTop, paddingBottom }) => ({
+  paddingTop,
+  paddingBottom,
+  alignItems: 'center'
+})
+
+const selectIconStyles = ({ iconSize, iconColor, activeColor }, isSelected) => ({
+  size: iconSize,
+  color: isSelected ? activeColor : iconColor
+})
+
+const selectContainerStyles = ({ borderRadius, backgroundColor }) => ({
+  borderRadius,
+  backgroundColor,
+  alignSelf: 'center',
+  alignItems: 'center'
+})
+
+const TabBarItem = React.forwardRef(
+  (
+    {
+      href,
+      variant,
+      tokens,
+      label,
+      isSelected,
+      id,
+      onPress,
+      icon: IconComponent,
+      iconActive: IconActiveComponent,
+      accessibilityRole = 'tab'
+    },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('TabBarItem', tokens, variant)
+
+    const getPressableStyle = ({ pressed, focused, hovered }) => {
+      const resolvedTokens = resolvePressableTokens(
+        getTokens,
+        { pressed, focused, hovered },
+        { isSelected }
+      )
+      return {
+        ...resolvedTokens,
+        outline: 'none' // removes the default browser :focus outline
+      }
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        nativeID={id}
+        onPress={onPress}
+        style={({ pressed, focused, hovered }) => [
+          styles.flexContainer,
+          getPressableStyle({ pressed, focused, hovered })
+        ]}
+        accessibilityRole={accessibilityRole}
+        testID={id}
+      >
+        {(pressableState) => {
+          const resolvedTokens = getPressableStyle(pressableState)
+
+          return (
+            <View style={selectContainerStyles(resolvedTokens)}>
+              <View style={[selectIconContainerStyles(resolvedTokens), styles.iconContainer]}>
+                {isSelected
+                  ? IconActiveComponent && (
+                      <IconActiveComponent {...selectIconStyles(resolvedTokens, isSelected)} />
+                    )
+                  : IconComponent && <IconComponent {...selectIconStyles(resolvedTokens)} />}
+              </View>
+              <Spacer space={1} />
+              <Typography
+                variant={{ size: 'micro' }}
+                tokens={selectTypographyStyles(resolvedTokens, isSelected)}
+                align="center"
+              >
+                {label}
+              </Typography>
+              <Spacer space={1} />
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+
+TabBarItem.displayName = 'TabBarItem'
+
+TabBarItem.propTypes = {
+  /** The icon to be displayed when the item is not selected. */
+  icon: PropTypes.elementType,
+  /** The icon to be displayed when the item is selected. */
+  iconActive: PropTypes.elementType,
+  /** Tokens for theming and styling the TabBarItem. */
+  tokens: getTokensPropType('TabBarItem'),
+  /** Variant of the TabBarItem for styling purposes. */
+  variant: variantProp.propType,
+  /** Callback function to handle press events. */
+  onPress: PropTypes.func,
+  /** URL to navigate to when the item is pressed. */
+  href: PropTypes.string,
+  /** Indicates whether the item is selected. */
+  isSelected: PropTypes.bool,
+  /** Unique identifier for the item. */
+  id: PropTypes.string,
+  /** Label text for the item. */
+  label: PropTypes.string.isRequired,
+  /** Accessibility role for the item. */
+  accessibilityRole: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  iconContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 44,
+    minHeight: 40,
+    aspectRatio: 1.1
+  }
+})
+
+export default TabBarItem

package/src/TabBar/index.js

@@ -0,0 +1,3 @@
+import TabBar from './TabBar'
+
+export default TabBar

package/src/TextInput/TextInputBase.jsx

@@ -61,7 +61,7 @@ const selectInputStyles = (
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
   const textStyles = applyTextStyles({
-    fontName,
+    fontName: isPassword ? undefined : fontName, // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
     lineHeight,
     fontWeight,

package/src/Tooltip/getTooltipPosition.js

@@ -1,8 +1,8 @@
-function normalizePosition(position) {
+function getAbsolutePosition(position) {
   const { left, right, bottom, top, width, ...rest } = position
 
   // adjust the coordinates so that it fits within the window
-  const normalized = {
+  const finalPosition = {
     left: Math.max(0, left),
     right: Math.max(0, right),
     top: Math.max(0, top),
@@ -12,21 +12,20 @@ function normalizePosition(position) {
   const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2))
 
   // adjust the width by whatever has been subtracted from left or right
-  normalized.width =
+  finalPosition.width =
     width -
-    Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right))
+    Math.abs(
+      getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right)
+    )
 
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top
+  if (finalPosition.top !== top) {
+    finalPosition.bottom += finalPosition.top - top
   }
 
-  const isNormalized =
-    normalized.right !== right || normalized.left !== left || normalized.top !== top
-
   return {
-    ...normalized,
+    ...finalPosition,
     ...rest,
-    isNormalized
+    isNormalized: false
   }
 }
 
@@ -151,7 +150,7 @@ function getTooltipPosition(
 
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
-  return normalizePosition(
+  return getAbsolutePosition(
     leastOverflowing.position === 'above'
       ? findRectByPosition('below', boundingRects)
       : leastOverflowing