@telus-uds/components-base 3.2.0 → 3.3.0

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -29,7 +29,7 @@ const ExpandCollapseMini = React.forwardRef(
               // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
               icon: null,
               borderColor: 'transparent',
-              textLine: 'none',
+              textLine: tokens.textLine ?? 'none',
               backgroundColor: 'transparent'
             }}
             // TODO refactor

package/src/List/ListItemBase.jsx

@@ -110,8 +110,7 @@ const staticStyles = StyleSheet.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1,
-    textAlign: 'justify'
+    flexGrow: 1
   }
 })
 

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -275,9 +275,9 @@ const MultiSelectFilter = React.forwardRef(
                 {subtitle}
               </Typography>
             </Row>
-            <Spacer space={4} />
           </>
         )}
+        <Spacer space={4} />
         <View style={styles.options}>
           <ScrollView onLayout={handleScrollViewLayout}>
             <Row distribute="between" onLayout={handleRowLayout}>

package/src/TextInput/TextArea.jsx

@@ -54,6 +54,8 @@ const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TextArea', tokens, variant)
   const [inputHeight, setInputHeight] = React.useState()
 
+  const isUpdatingHeight = React.useRef(false)
+
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = ({
     nativeEvent: {
@@ -61,8 +63,16 @@ const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
     }
   }) => {
     // on native this is happens out of the box
-    if (Platform.OS === 'web') {
+    if (Platform.OS === 'web' && !isUpdatingHeight.current) {
+      isUpdatingHeight.current = true
       setInputHeight(height)
+      // setTimeout is used to “wait” for the next update cycle before allowing a new height adjustment,
+      // avoiding multiple updates in the same render and preventing a possible infinite loop or constant re-renders.
+      setTimeout(() => {
+        isUpdatingHeight.current = false
+      }, 0)
+    } else {
+      setInputHeight(null)
     }
   }
 

package/src/Typography/Typography.jsx

@@ -138,6 +138,12 @@ const Typography = React.forwardRef(
         : styles
     }
 
+    /**
+     * Added to maintain previous behavior, as the 'auto' value for the 'align' prop now defaults to 'inherit' on the web,
+     * maintaining the previous behavior that was changed in the Text component of react-native.
+     */
+    const resolvedAlign = Platform.OS === 'web' && align === 'auto' ? 'inherit' : align
+
     let textStyles
     let mediaIds
 
@@ -146,7 +152,7 @@ const Typography = React.forwardRef(
         (acc, [vp, viewportTokens]) => {
           acc[vp] = selectTextStyles(
             {
-              textAlign: align,
+              textAlign: resolvedAlign,
               textDecorationLine,
               ...viewportTokens
             },
@@ -177,7 +183,7 @@ const Typography = React.forwardRef(
     } else {
       textStyles = selectTextStyles(
         {
-          textAlign: align,
+          textAlign: resolvedAlign,
           textDecorationLine,
           ...themeTokens
         },