@telus-uds/components-base 4.0.0-alpha.2 → 4.0.0-beta.1

package/src/Card/CardBase.jsx

@@ -19,9 +19,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const GRID_COLUMNS = 12
 
-const isOverlayColor = (color) => {
-  return color && typeof color === 'string' && color.startsWith('rgba(')
-}
+const isOverlayColor = (color) => color && typeof color === 'string' && color.startsWith('rgba(')
 
 const setBackgroundImage = ({
   src,
@@ -30,7 +28,8 @@ const setBackgroundImage = ({
   backgroundImagePosition,
   backgroundImageAlign,
   content,
-  cardStyle
+  cardStyle,
+  testID
 }) => {
   const borderRadius = cardStyle?.borderRadius || 0
   const borderWidth = cardStyle?.borderWidth || 0
@@ -96,6 +95,7 @@ const setBackgroundImage = ({
           style={[staticStyles.imageBackground, backgroundImageStyle]}
           role="img"
           aria-label={alt}
+          testID={testID}
         >
           {content}
         </View>
@@ -113,6 +113,7 @@ const setBackgroundImage = ({
           accessible={true}
           accessibilityLabel={alt}
           accessibilityIgnoresInvertColors={true}
+          testID={testID}
         />
         <View style={staticStyles.contentOverlay}>{content}</View>
       </View>
@@ -127,33 +128,18 @@ const setBackgroundImage = ({
       style={staticStyles.imageBackground}
       accessible={true}
       accessibilityLabel={alt}
+      testID={testID}
     >
       {content}
     </ImageBackground>
   )
 }
 
-const selectPaddedContentStyles = ({
+const selectPaddedContentStyles = ({ paddingTop, paddingBottom, paddingLeft, paddingRight }) => ({
   paddingTop,
   paddingBottom,
   paddingLeft,
-  paddingRight,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  hasInteractiveBorder
-}) => ({
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  ...(hasInteractiveBorder
-    ? {
-        borderWidth,
-        borderColor,
-        borderRadius
-      }
-    : {})
+  paddingRight
 })
 
 const selectInteractiveOverlayStyles = ({ backgroundColor, borderRadius, borderWidth }) => {
@@ -167,32 +153,49 @@ const selectInteractiveOverlayStyles = ({ backgroundColor, borderRadius, borderW
     backgroundColor,
     borderRadius: adjustedBorderRadius,
     pointerEvents: 'none',
-    zIndex: 1
+    zIndex: 3
   }
 }
 
-// Ensure explicit selection of tokens
-export const selectStyles = ({
-  flex,
+const selectOuterContainerStyles = ({
+  containerStyle,
   backgroundColor,
-  borderColor,
   borderRadius,
+  borderColor,
   borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  marginTop,
-  marginBottom,
-  marginLeft,
-  marginRight,
-  minWidth,
-  shadow,
-  backgroundGradient,
-  gradient,
-  maxHeight,
-  overflowY
-}) => {
+  hasGradientToken
+}) => ({
+  ...containerStyle,
+  backgroundColor,
+  borderRadius,
+  ...(hasGradientToken ? {} : { borderColor, borderWidth })
+})
+
+// Ensure explicit selection of tokens
+export const selectStyles = (
+  {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    minWidth,
+    shadow,
+    backgroundGradient,
+    gradient,
+    maxHeight,
+    overflowY
+  },
+  { hasBgImage = false } = {}
+) => {
   const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web'
 
   let backgroundImageValue = null
@@ -231,7 +234,9 @@ export const selectStyles = ({
       ? {
           backgroundImage: backgroundImageValue,
           backgroundOrigin: `border-box`,
-          boxShadow: `inset 0 1000px ${boxShadowColor}`,
+          // bgImage child fills the content-box and replaces what the inset shadow
+          // used to cover, so we omit it to avoid hiding the image.
+          ...(hasBgImage ? {} : { boxShadow: `inset 0 1000px ${boxShadowColor}` }),
           border: `${borderWidth}px solid transparent`
         }
       : {}),
@@ -249,14 +254,13 @@ export const selectStyles = ({
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 export const CardBase = React.forwardRef(
-  ({ children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, ...rest }, ref) => {
+  (
+    { children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, testID, ...rest },
+    ref
+  ) => {
     const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens
-    const tokensToUse =
-      backgroundImage && backgroundImage.src
-        ? { ...resolvedTokens, gradient: undefined, backgroundGradient: undefined }
-        : resolvedTokens
-
-    const cardStyle = selectStyles(tokensToUse)
+    const hasBgImage = Boolean(backgroundImage && backgroundImage.src)
+    const cardStyle = selectStyles(resolvedTokens, { hasBgImage })
     const props = selectProps(rest)
 
     let content = children
@@ -288,31 +292,28 @@ export const CardBase = React.forwardRef(
       } = cardStyle
 
       const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
-      const hasInteractiveBorder = borderWidth && borderWidth > 0
       const hasInteractiveOverlay = isOverlayColor(backgroundColor)
+      const outerBackgroundColor = hasInteractiveOverlay ? undefined : backgroundColor
+      const hasGradientToken = Boolean(resolvedTokens.gradient) && Platform.OS === 'web'
 
-      const paddedContent =
-        hasPadding || hasInteractiveBorder ? (
-          <View
-            style={selectPaddedContentStyles({
-              paddingTop,
-              paddingBottom,
-              paddingLeft,
-              paddingRight,
-              borderWidth,
-              borderColor,
-              borderRadius,
-              hasInteractiveBorder
-            })}
-          >
-            {children}
-          </View>
-        ) : (
-          children
-        )
+      const paddedContent = hasPadding ? (
+        <View
+          style={selectPaddedContentStyles({
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight
+          })}
+        >
+          {children}
+        </View>
+      ) : (
+        children
+      )
 
       const contentWithOverlay = (
         <>
+          <View style={staticStyles.contentOverlay}>{paddedContent}</View>
           {hasInteractiveOverlay && Platform.OS === 'web' && (
             <View
               style={selectInteractiveOverlayStyles({
@@ -320,9 +321,9 @@ export const CardBase = React.forwardRef(
                 borderRadius,
                 borderWidth
               })}
+              testID={testID && `${testID}-card-base-bg-overlay`}
             />
           )}
-          <View style={staticStyles.contentOverlay}>{paddedContent}</View>
         </>
       )
 
@@ -333,11 +334,25 @@ export const CardBase = React.forwardRef(
         backgroundImagePosition,
         backgroundImageAlign,
         content: contentWithOverlay,
-        cardStyle: { ...containerStyle, borderRadius }
+        cardStyle: { borderRadius, borderWidth },
+        testID: testID && `${testID}-card-base-bg-image`
       })
 
       return (
-        <View style={{ ...containerStyle, borderRadius }} dataSet={dataSet} ref={ref} {...props}>
+        <View
+          style={selectOuterContainerStyles({
+            containerStyle,
+            backgroundColor: outerBackgroundColor,
+            borderRadius,
+            borderColor,
+            borderWidth,
+            hasGradientToken
+          })}
+          dataSet={dataSet}
+          ref={ref}
+          testID={testID}
+          {...props}
+        >
           {content}
         </View>
       )
@@ -370,7 +385,7 @@ export const CardBase = React.forwardRef(
       )
 
       return (
-        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+        <View style={containerStyle} dataSet={dataSet} ref={ref} testID={testID} {...props}>
           <FlexGrid>
             <FlexGridRow>
               {imageFirst ? (
@@ -391,7 +406,7 @@ export const CardBase = React.forwardRef(
     }
 
     return (
-      <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
+      <View style={cardStyle} dataSet={dataSet} ref={ref} testID={testID} {...props}>
         {content}
       </View>
     )
@@ -439,6 +454,10 @@ CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
+  /**
+   * Identifier for testing purposes.
+   */
+  testID: PropTypes.string,
   /**
    * Apply background image to the card.
    */

package/src/ColourToggle/ColourBubble.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { View, Pressable, Platform } from 'react-native'
+import { View, Pressable, Platform, StyleSheet } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
 import { applyShadowToken } from '../ThemeProvider/utils/styles'
 import { getTokensPropType } from '../utils/props/tokens'
 import { Tooltip } from '../Tooltip/Tooltip.native'
+import { UNAVAILABLE_VARIANT } from './constants'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -52,13 +53,41 @@ const selectBorderBubbleTokens = ({
   borderRadius: bubbleBorderRadius
 })
 
+const selectOverlayStyles = ({ overlayColor, innerBubbleBorderRadius }) => ({
+  borderRadius: innerBubbleBorderRadius,
+  backgroundColor: overlayColor
+})
+
+const selectSlashStyles = (
+  { slashLightColor, slashDarkColor, slashWidth, slashOffset },
+  unavailable
+) => ({
+  width: slashWidth,
+  backgroundColor: unavailable === UNAVAILABLE_VARIANT.DARK ? slashDarkColor : slashLightColor,
+  marginLeft: slashOffset
+})
+
 export const ColourBubble = React.forwardRef(
-  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress, showTooltip }, ref) => {
+  (
+    {
+      tokens = () => ({}),
+      id,
+      colourHexCode,
+      colourName,
+      isSelected,
+      onPress,
+      showTooltip,
+      unavailable,
+      isDisabled
+    },
+    ref
+  ) => {
     const defaultTokens = tokens({ selected: isSelected })
 
-    const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
+    const resolveColourBubbleTokens = (pressState) =>
+      resolvePressableTokens(tokens, isDisabled ? {} : pressState, {})
 
-    const themeTokens = React.useMemo(() => tokens(), [tokens])
+    const themeTokens = tokens()
 
     const pressable = (
       <Pressable
@@ -67,14 +96,23 @@ export const ColourBubble = React.forwardRef(
           isSelected && selectBorderBubbleTokens(defaultTokens)
         ]}
         onPress={onPress}
+        disabled={isDisabled}
+        focusable={!isDisabled}
         accessible
         accessibilityRole="radio"
         accessibilityLabel={colourName}
-        accessibilityState={{ checked: isSelected }}
+        accessibilityState={{ checked: isSelected, disabled: isDisabled }}
         ref={ref}
         testID={id}
       >
-        <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
+        <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]}>
+          {unavailable && (
+            <View style={[StyleSheet.absoluteFillObject, selectOverlayStyles(themeTokens)]} />
+          )}
+        </View>
+        {unavailable && (
+          <View style={[staticStyles.indicator, selectSlashStyles(themeTokens, unavailable)]} />
+        )}
       </Pressable>
     )
 
@@ -121,5 +159,22 @@ ColourBubble.propTypes = {
   /**
    * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
    */
-  showTooltip: PropTypes.bool
+  showTooltip: PropTypes.bool,
+  /**
+   * When set, renders a diagonal indicator over the bubble. Accepts either 'dark' or 'light' to determine the colour of the indicator.
+   */
+  unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+  /**
+   * When true, disables interaction on the bubble.
+   */
+  isDisabled: PropTypes.bool
 }
+
+const staticStyles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    top: '50%',
+    height: 2,
+    transform: [{ rotate: '-45deg' }]
+  }
+})

package/src/ColourToggle/ColourToggle.jsx

@@ -8,31 +8,50 @@ import { getTokensPropType } from '../utils/props/tokens'
 import { selectSystemProps } from '../utils/props/selectSystemProps'
 import { variantProp } from '../utils/props/variantProp'
 import { viewProps } from '../utils/props/viewProps'
+import { useCopy } from '../utils/useCopy'
 import { StackWrap } from '../StackView/StackWrap'
 import { Typography } from '../Typography/Typography'
 import { ColourBubble } from './ColourBubble'
+import { UNAVAILABLE_VARIANT, DICTIONARY_CONTENT_SHAPE } from './constants'
+import { DEFAULT_COLOUR_TOGGLE_DICTIONARY } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 export const ColourToggle = React.forwardRef(
-  ({ tokens, variant, defaultColourId, items, onChange, showTooltips, ...rest }, ref) => {
+  (
+    {
+      tokens,
+      variant,
+      defaultColourId,
+      items,
+      onChange,
+      showTooltips,
+      copy = 'en',
+      dictionary = DEFAULT_COLOUR_TOGGLE_DICTIONARY,
+      ...rest
+    },
+    ref
+  ) => {
     const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
     const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
-
+    const getCopy = useCopy({ dictionary, copy })
     const { space } = getTokens()
-    const { colourName: currentColourName = '' } =
-      items.find((item) => item.id === currentColourId) || ''
+    const currentItem = items.find(({ id }) => id === currentColourId)
 
     return (
       <View ref={ref} {...selectProps(rest)}>
-        <Typography>{currentColourName}</Typography>
+        <Typography>
+          {currentItem?.unavailable
+            ? `${currentItem.colourName} ${getCopy('unavailable')}`
+            : currentItem?.colourName ?? ''}
+        </Typography>
         <StackWrap space={space} accessibilityRole="radiogroup">
-          {items.map(({ id, colourHexCode, colourName }, index) => {
+          {items.map(({ id, colourHexCode, colourName, unavailable, disabled }, index) => {
             const colourBubbleId = id || `ColourBubble[${index}]`
 
             const handleChangeColour = (event) => {
               setCurrentColourId(id)
-              onChange?.(event, { id, colourHexCode, colourName })
+              onChange?.(event, { id, colourHexCode, colourName, unavailable })
             }
 
             return (
@@ -45,6 +64,8 @@ export const ColourToggle = React.forwardRef(
                 colourName={colourName}
                 onPress={handleChangeColour}
                 showTooltip={showTooltips}
+                unavailable={unavailable}
+                isDisabled={!!disabled}
               />
             )
           })}
@@ -76,7 +97,9 @@ ColourToggle.propTypes = {
     PropTypes.exact({
       colourHexCode: PropTypes.string,
       colourName: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
+      unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+      disabled: PropTypes.bool
     })
   ),
   /**
@@ -86,5 +109,16 @@ ColourToggle.propTypes = {
   /**
    * When true, displays each colour's name as a tooltip on hover (web only).
    */
-  showTooltips: PropTypes.bool
+  showTooltips: PropTypes.bool,
+  /**
+   * Select English or French copy.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Override default labels.
+   */
+  dictionary: PropTypes.shape({
+    en: DICTIONARY_CONTENT_SHAPE,
+    fr: DICTIONARY_CONTENT_SHAPE
+  })
 }

package/src/ColourToggle/constants.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types'
+
+export const UNAVAILABLE_VARIANT = {
+  DARK: 'dark',
+  LIGHT: 'light'
+}
+
+export const DICTIONARY_CONTENT_SHAPE = PropTypes.shape({
+  unavailable: PropTypes.string
+})

package/src/ColourToggle/dictionary.js

@@ -0,0 +1,4 @@
+export const DEFAULT_COLOUR_TOGGLE_DICTIONARY = {
+  en: { unavailable: '(Out of stock)' },
+  fr: { unavailable: '(En rupture de stock)' }
+}

package/src/Listbox/ListboxOverlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet, Platform, ScrollView } from 'react-native'
 import { Portal } from '../Portal/Portal'
 import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 import { Card } from '../Card/Card'
@@ -69,7 +69,11 @@ const DropdownOverlay = React.forwardRef(
             paddingRight: paddingHorizontal
           }}
         >
-          {children}
+          {Platform.OS !== 'web' ? (
+            <ScrollView style={{ maxHeight }}>{children}</ScrollView>
+          ) : (
+            children
+          )}
         </Card>
       </View>
     )

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { Portal } from '@gorhom/portal'
+import { Portal as GorhomPortal } from '@gorhom/portal'
+import { Portal as LocalPortal } from '../Portal/Portal'
 import { useCopy } from '../utils/useCopy'
 import { copyPropTypes } from '../utils/props/copyPropTypes'
 import { getTokensPropType } from '../utils/props/tokens'
@@ -107,8 +108,13 @@ export const ModalOverlay = React.forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const closeLabel = getCopy('closeButton')
 
+    // On web, use the local Portal (always appends to document.body) to ensure correct
+    // absolute positioning in MFE/iframe contexts. @gorhom/portal may render its host
+    // outside the iframe's document, causing coordinate mismatches when scrolled.
+    const PortalComponent = Platform.OS === 'web' ? LocalPortal : GorhomPortal
+
     return (
-      <Portal>
+      <PortalComponent>
         <View
           ref={containerRef}
           onLayout={onLayout}
@@ -137,7 +143,7 @@ export const ModalOverlay = React.forwardRef(
             {children}
           </Card>
         </View>
-      </Portal>
+      </PortalComponent>
     )
   }
 )

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Portal } from '@gorhom/portal'
 import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
 import { applyTextStyles } from '../ThemeProvider/utils/styles'
@@ -218,27 +217,11 @@ export const MultiSelectFilter = React.forwardRef(
       onCancel()
     }
 
-    const appRootRef = React.useRef(null)
-    const [rootOffsets, setRootOffsets] = React.useState(null)
-
-    React.useEffect(() => {
-      if (rootOffsets) return
-      appRootRef.current?.measureInWindow((x, y) => {
-        // Only set offsets if they are positive
-        // this is because we want to avoid negative offsets that could cause
-        // the dropdown to be positioned incorrectly in some situations
-        if (y > 0) setRootOffsets({ horizontal: x, vertical: y })
-      })
-    }, [isOpen, rootOffsets])
-
     const { align, offsets } = useResponsiveProp({
       xs: { align: { top: 'top', left: 'left' } },
       sm: {
         align: { top: 'bottom', left: 'left' },
-        offsets: {
-          vertical: 4 - (rootOffsets?.vertical || 0),
-          horizontal: -rootOffsets?.horizontal || 0
-        }
+        offsets: { vertical: 4 }
       }
     })
 
@@ -364,14 +347,6 @@ export const MultiSelectFilter = React.forwardRef(
 
     return (
       <>
-        {/* 
-        This View is rendered inside a Portal to determine the application's root position.
-        Capturing it is crucial to determine offsets to position the Modal correctly, preventing
-        misalignment that can occur when the Portal does not render the Modal at the body level.
-        */}
-        <Portal>
-          <View ref={appRootRef} style={styles.appRootRef} />
-        </Portal>
         <ButtonDropdown
           ref={sourceRef}
           key={id}
@@ -460,11 +435,6 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 })
 

package/src/TextInput/TextInputBase.jsx

@@ -256,7 +256,8 @@ export const TextInputBase = React.forwardRef(
 
     const handleChangeText = (event) => {
       const text = event.nativeEvent?.text ?? event.target?.value
-      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text
+      // Do NOT use `|| undefined`: empty string is falsy and would break the controlled contract
+      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') ?? '' : 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')

package/src/Validator/Validator.jsx

@@ -205,7 +205,11 @@ export const Validator = React.forwardRef(
 
     // Sync external value prop to internal state
     React.useEffect(() => {
-      if (value && Number(value).toString() !== 'NaN') {
+      if (value === '') {
+        setCodes(Array(validatorsLength).fill(''))
+        return
+      }
+      if (Number(value).toString() !== 'NaN') {
         const digits = value.split('').slice(0, validatorsLength)
         const newCodes = Array(validatorsLength).fill('')
         digits.forEach((digit, i) => {