@telus-uds/components-base 3.22.0 → 3.23.0

package/src/Carousel/Carousel.jsx

@@ -407,6 +407,7 @@ const Carousel = React.forwardRef(
     ref
   ) => {
     let childrenArray = unpackFragment(children)
+    const isTransitioningRef = React.useRef(false)
     const viewport = useViewport()
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
@@ -482,10 +483,14 @@ const Carousel = React.forwardRef(
     )
     const handleAnimationEnd = React.useCallback(
       (...args) => {
-        if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
-        setIsAnimating(false)
+        const result = args[args.length - 1]
+        if (result?.finished) {
+          if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
+          setIsAnimating(false)
+          isTransitioningRef.current = false
+        }
       },
-      [onAnimationEnd]
+      [onAnimationEnd, isTransitioningRef]
     )
 
     const updateOffset = React.useCallback(() => {
@@ -602,7 +607,9 @@ const Carousel = React.forwardRef(
 
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
+          isTransitioningRef.current = true
           animate(pan, toValue, index)
+
           if (enableHero) {
             animate(heroPan, toValue, index)
           }
@@ -622,6 +629,7 @@ const Carousel = React.forwardRef(
         toValue.x = finalWidth * -1 * calcDelta
         const heroToValue = { x: 0, y: 0 }
         heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
+        isTransitioningRef.current = true
         animate(pan, toValue, index)
         if (enableHero) {
           animate(heroPan, heroToValue, index)
@@ -1012,6 +1020,15 @@ const Carousel = React.forwardRef(
       setisCarouselPlaying((prevState) => !prevState)
     }, [isCarouselPlaying, stopAutoplay, startAutoplay])
 
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (isTransitioningRef.current && event.key === 'Tab') {
+          event.preventDefault()
+        }
+      },
+      [isTransitioningRef]
+    )
+
     return (
       <View style={selectRootContainerStyles(enableHero, viewport)}>
         <View style={selectMainContainerStyles(enableHero, viewport)}>
@@ -1041,6 +1058,7 @@ const Carousel = React.forwardRef(
               ref={ref}
               {...systemProps}
               {...containerProps}
+              {...(Platform.OS === 'web' ? { onKeyDown: handleKeyDown } : {})}
             >
               {isAutoPlayEnabled ? (
                 <View
@@ -1130,10 +1148,45 @@ const Carousel = React.forwardRef(
                   accessibilityLiveRegion={accessibilityLiveRegion}
                 >
                   {childrenArray.map((element, index) => {
-                    const hidden = !isAnimating && index !== activeIndex
+                    let hidden = !isAnimating && index !== activeIndex
+
+                    if (enablePeeking && !isAnimating) {
+                      if (enableDisplayMultipleItemsPerSlide) {
+                        const maxItemsForSlide = getMaximumItemsForSlide(
+                          enableDisplayMultipleItemsPerSlide,
+                          viewport
+                        )
+                        if (
+                          index >= activeIndex * maxItemsForSlide - 1 &&
+                          index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1
+                        ) {
+                          hidden = false
+                        } else {
+                          hidden = true
+                        }
+                      } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
+                        hidden = false
+                      }
+                    } else if (
+                      !enablePeeking &&
+                      enableDisplayMultipleItemsPerSlide &&
+                      !isAnimating
+                    ) {
+                      const maxItemsForSlide = getMaximumItemsForSlide(
+                        enableDisplayMultipleItemsPerSlide,
+                        viewport
+                      )
+                      if (
+                        index >= activeIndex * maxItemsForSlide &&
+                        index < activeIndex * maxItemsForSlide + maxItemsForSlide
+                      ) {
+                        hidden = false
+                      }
+                    }
+
                     const clonedElement = React.cloneElement(element, {
                       elementIndex: index,
-                      hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                      hidden,
                       enablePeeking,
                       peekingProps: getPeekingProps(viewport),
                       enableDisplayMultipleItemsPerSlide,

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -114,15 +114,43 @@ const CarouselItem = React.forwardRef(
 
     const handleFocus = React.useCallback(
       (event) => {
-        if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-          goTo(activeIndex + 1)
+        if (Platform.OS === 'web') {
+          if (enablePeeking) {
+            if (enableDisplayMultipleItemsPerSlide) {
+              const startIndex = maximumItemsForSlide * activeIndex
+              const endIndex = startIndex + maximumItemsForSlide - 1
+              if (elementIndex < startIndex) {
+                if (activeIndex - 1 < 0) {
+                  goTo(0)
+                } else {
+                  goTo(activeIndex - 1)
+                }
+              } else if (elementIndex > endIndex) {
+                goTo(activeIndex + 1)
+              }
+            } else if (elementIndex !== activeIndex) {
+              if (elementIndex > activeIndex) {
+                goTo(activeIndex + 1)
+              } else if (elementIndex < activeIndex) {
+                goTo(activeIndex - 1)
+              }
+            }
+          }
         }
 
         if (rest.onFocus) {
           rest.onFocus(event)
         }
       },
-      [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]
+      [
+        elementIndex,
+        activeIndex,
+        goTo,
+        maximumItemsForSlide,
+        rest,
+        enablePeeking,
+        enableDisplayMultipleItemsPerSlide
+      ]
     )
 
     return (

package/src/Icon/Icon.jsx

@@ -43,20 +43,17 @@ const Icon = React.forwardRef(
         }
 
     const getIconContentForMobile = () => {
-      if (Object.keys(paddingStyles).length) {
-        return (
-          <View
-            style={{
-              backgroundColor: themeTokens.backgroundColor,
-              borderRadius: themeTokens.borderRadius,
-              ...paddingStyles
-            }}
-          >
-            {iconContent}
-          </View>
-        )
-      }
-      return iconContent
+      return (
+        <View
+          style={{
+            backgroundColor: themeTokens.backgroundColor,
+            borderRadius: themeTokens.borderRadius,
+            ...paddingStyles
+          }}
+        >
+          {iconContent}
+        </View>
+      )
     }
 
     return Platform.OS === 'web' ? (

package/src/Icon/IconText.jsx

@@ -90,7 +90,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
-  /* eslint-enable react/no-unused-prop-types */
 }
 
 const staticStyles = StyleSheet.create({

package/src/Listbox/GroupControl.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Text } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import Icon from '../Icon'
 import Spacer from '../Spacer'
 import { useListboxContext } from './ListboxContext'
 
 const styles = StyleSheet.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -17,6 +17,36 @@ const styles = StyleSheet.create({
   }
 })
 
+const selectTextStyles = (tokens) => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+})
+
+const selectContainerStyles = (tokens) => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  minHeight: tokens.groupHeight,
+  borderRadius: tokens.groupBorderRadius,
+  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
+  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
+  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
+  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
+  borderLeftWidth: tokens.groupBorderLeftWidth,
+  borderLeftColor: tokens.groupBorderLeftColor,
+  borderRightWidth: tokens.groupBorderRightWidth,
+  borderRightColor: tokens.groupBorderRightColor,
+  borderTopWidth: tokens.groupBorderTopWidth,
+  borderTopColor: tokens.groupBorderTopColor,
+  borderBottomWidth: tokens.groupBorderBottomWidth,
+  borderBottomColor: tokens.groupBorderBottomColor
+})
+
 const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label, id }, ref) => {
   const { selectedId, setSelectedId } = useListboxContext()
   const tokens = useThemeTokens(
@@ -31,58 +61,22 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
       focus
     }
   )
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens
-
-  const getTextStyles = () => ({
-    color: groupColor
-  })
 
   return (
     <View
       onPress={() => setSelectedId(id)}
-      style={[
-        styles.controlWrapper,
-        {
-          fontFamily: `${groupFontName}${groupFontWeight}normal`,
-          fontSize: groupFontSize,
-          color: groupColor,
-          textDecoration: itemTextDecoration,
-          backgroundColor: groupBackgroundColor,
-          outline: itemOutline,
-          height: groupHeight,
-          border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-          borderRadius: groupBorderRadius,
-          paddingLeft: groupPaddingLeft - groupBorderWidth,
-          paddingRight: groupPaddingRight - groupBorderWidth,
-          paddingTop: groupPaddingTop - groupBorderWidth,
-          paddingBottom: groupPaddingBottom - groupBorderWidth
-        }
-      ]}
+      style={[styles.container, selectContainerStyles(tokens)]}
       ref={ref}
     >
-      <Text style={getTextStyles()}>{label}</Text>
+      <Text style={selectTextStyles(tokens)}>{label}</Text>
       <Spacer space={1} direction="row" />
-      <Icon
-        icon={tokens.groupIcon}
-        tokens={{ color: tokens.groupColor }}
-        variant={{ size: 'micro' }}
-      />
+      {tokens.groupIcon && (
+        <Icon
+          icon={tokens.groupIcon}
+          tokens={{ color: tokens.groupColor }}
+          variant={{ size: 'micro' }}
+        />
+      )}
     </View>
   )
 })

package/src/Listbox/Listbox.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, Platform, StyleSheet } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
-import { withLinkRouter, getTokensPropType } from '../utils'
+import { withLinkRouter, getTokensPropType, variantProp } from '../utils'
 import ExpandCollapse from '../ExpandCollapse'
 import ListboxGroup from './ListboxGroup'
 import ListboxItem from './ListboxItem'
@@ -10,12 +10,18 @@ import { ListboxContext } from './ListboxContext'
 import DropdownOverlay from './ListboxOverlay'
 
 const styles = StyleSheet.create({
-  list: {
+  container: {
     padding: 0,
     margin: 0
   }
 })
 
+const selectContainerStyles = (tokens) => ({
+  minHeight: tokens.minHeight,
+  minWidth: tokens.minWidth,
+  backgroundColor: tokens.containerBackgroundColor
+})
+
 const getInitialOpen = (items, selectedId) =>
   items
     .filter(
@@ -36,15 +42,14 @@ const Listbox = React.forwardRef(
       itemRouterProps,
       onClose,
       variant,
-      tokens
+      tokens,
+      testID
     },
     ref
   ) => {
     const initialOpen = getInitialOpen(items, defaultSelectedId)
-
     const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
-
-    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+    const listboxTokens = useThemeTokens('Listbox', tokens, variant)
 
     // We need to keep track of each item's ref in order to be able to
     // focus on a specific item via keyboard navigation
@@ -101,7 +106,11 @@ const Listbox = React.forwardRef(
       <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
         <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
           {(expandProps) => (
-            <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+            <View
+              style={[styles.container, selectContainerStyles(listboxTokens)]}
+              accessibilityRole="combobox"
+              testID={testID}
+            >
               {items.map((item, index) => {
                 const { id, label, items: nestedItems } = item
                 const itemId = id ?? label
@@ -169,7 +178,15 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  /**
+   * Test ID for testing
+   */
+  testID: PropTypes.string,
+  /**
+   * Listbox variant
+   */
+  variant: variantProp.propType
 }
 
 Listbox.Overlay = DropdownOverlay

package/src/Listbox/ListboxGroup.jsx

@@ -74,7 +74,8 @@ const ListboxGroup = React.forwardRef(
             borderColor: 'transparent',
             borderRadius: 0,
             borderWidth: 0,
-            marginBottom: 0
+            marginBottom: 0,
+            contentPanelBackgroundColor: 'transparent'
           }}
           controlRef={ref}
         >

package/src/Listbox/ListboxOverlay.jsx

@@ -22,13 +22,17 @@ const paddingVertical = 0
 const paddingHorizontal = 0
 
 const DropdownOverlay = React.forwardRef(
-  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout, tokens }, ref) => {
+  (
+    { children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout, tokens, testID },
+    ref
+  ) => {
     const systemTokens = useThemeTokens('Listbox', {}, {})
 
     return (
       <View
         ref={ref}
         onLayout={onLayout}
+        testID={testID}
         style={[
           overlaidPosition,
           { maxWidth, minWidth },
@@ -75,7 +79,8 @@ DropdownOverlay.propTypes = {
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
-  tokens: PropTypes.object
+  tokens: PropTypes.object,
+  testID: PropTypes.string
 }
 
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -39,10 +39,14 @@ const getItemStyles = ({
   color: itemColor,
   outline: itemOutline,
   textDecoration: itemTextDecoration,
-  borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-  borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-  borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-  borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+  borderLeftWidth: itemBorderLeftWidth,
+  borderLeftColor: itemBorderLeftColor,
+  borderRightWidth: itemBorderRightWidth,
+  borderRightColor: itemBorderRightColor,
+  borderTopWidth: itemBorderTopWidth,
+  borderTopColor: itemBorderTopColor,
+  borderBottomWidth: itemBorderBottomWidth,
+  borderBottomColor: itemBorderBottomColor,
   borderRadius: itemBorderRadius,
   justifyContent: 'center'
 })

package/src/TextInput/TextInputBase.jsx

@@ -263,6 +263,10 @@ const TextInputBase = React.forwardRef(
         // Add a space every 4 digits starting from the 5th position
         filteredText = formattedValue.replace(regex, '$1 ').trim()
       }
+      // Apply maxLength if provided
+      if (rest.maxLength && filteredText && filteredText.length > rest.maxLength) {
+        filteredText = filteredText.substring(0, rest.maxLength)
+      }
       setValue(filteredText, event)
       if (typeof onChangeText === 'function') onChangeText(filteredText, event)
     }
@@ -340,7 +344,7 @@ const TextInputBase = React.forwardRef(
       onMouseOut: handleMouseOut,
       onChange: handleChangeText,
       defaultValue: initialValue,
-      maxLength: type === 'card' ? 19 : undefined,
+      maxLength: type === 'card' ? 19 : rest.maxLength,
       value: isControlled ? currentValue : undefined,
       onKeyPress
     }