@telus-uds/components-base 3.1.0 → 3.3.0

package/lib/esm/Notification/Notification.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
 import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet } from '../utils';
 import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -64,12 +64,12 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 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
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -83,7 +83,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
     styles: containerStyles
   } = StyleSheet.create({
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
@@ -95,22 +95,9 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       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'
       })
     }
   });
@@ -175,7 +162,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' || Platform.OS === 'android' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -184,7 +171,10 @@ 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: {
@@ -302,7 +292,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
+  const maxWidth = viewports.map.get(viewports.xl);
   const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -324,7 +314,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
   } else {
     notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
   }

package/lib/esm/TextInput/TextArea.js

@@ -40,6 +40,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _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 = _ref2 => {
@@ -51,8 +52,16 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     } = _ref2;
     // 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);
     }
   };
   const {

package/lib/esm/Typography/Typography.js

@@ -63,7 +63,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     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,
@@ -112,13 +112,19 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       backgroundClip: 'text'
     } : 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;
   if (enableMediaQueryStyleSheet) {
     const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
       let [vp, viewportTokens] = _ref4;
       acc[vp] = selectTextStyles({
-        textAlign: align,
+        textAlign: resolvedAlign,
         textDecorationLine,
         ...viewportTokens
       }, themeOptions);
@@ -147,7 +153,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     mediaIds = ids.text;
   } else {
     textStyles = selectTextStyles({
-      textAlign: align,
+      textAlign: resolvedAlign,
       textDecorationLine,
       ...themeTokens
     }, themeOptions);

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.1.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.1.0",
+  "version": "3.3.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.1.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.1.0",
+  "version": "3.3.0",
   "types": "types/index.d.ts"
 }

package/src/Card/CardBase.jsx

@@ -72,11 +72,12 @@ const CardBase = React.forwardRef(
       <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
         {src ? (
           <ImageBackground
-            alt={alt}
             source={imageSourceViewport}
             imageStyle={{ borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth }}
             resizeMode={backgroundImageResizeMode}
             style={styles.imageBackground}
+            accessible={true}
+            accessibilityLabel={alt}
           >
             {children}
           </ImageBackground>