@telus-uds/components-base 3.1.0 → 3.3.0

package/src/Notification/Notification.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { View, Platform } from 'react-native'
-
+import { View } from 'react-native'
 import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+
 import {
   applyTextStyles,
   useTheme,
@@ -16,7 +17,6 @@ import {
   variantProp,
   viewProps,
   wrapStringsInText,
-  useResponsiveProp,
   createMediaQueryStyles,
   StyleSheet
 } from '../utils'
@@ -65,8 +65,8 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
 })
 
 const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
+  width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 })
@@ -74,6 +74,7 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
 const getMediaQueryStyles = (
   themeTokens,
   themeOptions,
+  maxWidth,
   mediaIdsRef,
   dismissible,
   viewport,
@@ -91,7 +92,7 @@ const getMediaQueryStyles = (
 
   const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   })
@@ -101,13 +102,8 @@ const getMediaQueryStyles = (
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...createMediaQueryStyles({
-        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%' }
-      })
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && { alignSelf: 'center' })
     }
   })
 
@@ -162,8 +158,7 @@ const getMediaQueryStyles = (
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection:
-        (system === true && viewport === 'xl') || Platform.OS === 'android' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -172,7 +167,8 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
+      ...(system && { alignSelf: 'center' })
     }
   },
   staticContentContainerStyles: {
@@ -256,7 +252,7 @@ const Notification = React.forwardRef(
       system: isSystemEnabled,
       viewport
     })
-    const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = viewports.map.get(viewports.xl)
 
     const notificationComponentRef = React.useRef({
       containerStyles: {},
@@ -283,6 +279,7 @@ const Notification = React.forwardRef(
       notificationComponentRef.current = getMediaQueryStyles(
         themeTokens,
         themeOptions,
+        maxWidth,
         mediaIdsRef,
         dismissible,
         viewport,

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

@@ -74,7 +74,7 @@ const Typography = React.forwardRef(
       tag = typeof heading === 'string' ? heading : undefined,
       accessibilityRole = heading === true ? 'header' : undefined,
       block = false,
-      align = undefined,
+      align = Platform.OS === 'web' ? 'inherit' : undefined,
       tokens,
       dataSet,
       strikeThrough = false,
@@ -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
         },