@telus-uds/components-base 3.1.0 → 3.3.0

package/lib/cjs/List/ListItemMark.js

@@ -51,10 +51,12 @@ const selectBulletPositioningStyles = _ref3 => {
 const selectBulletContainerStyles = _ref4 => {
   let {
     itemBulletContainerWidth,
+    itemBulletContainerHeight,
     itemBulletContainerAlign
   } = _ref4;
   return {
     width: itemBulletContainerWidth,
+    height: itemBulletContainerHeight,
     alignItems: itemBulletContainerAlign
   };
 };
@@ -76,10 +78,11 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: sideItemContainerStyles,
+      style: [sideItemContainerStyles, bulletContainerStyles],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
         size: iconSize || iconTokens.size,
         color: iconColor || iconTokens.color
@@ -101,7 +104,8 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: bulletIcon,
         tokens: {
-          color: bulletColor
+          color: bulletColor,
+          size: themeTokens.itemIconSize
         }
       })
     })

package/lib/cjs/Modal/ModalContent.js

@@ -135,7 +135,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           },
           children: subHeading
         })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
         space: 3
       })]
     }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -293,9 +293,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           },
           children: subtitle
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-        space: 4
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      space: 4
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: styles.options,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {

package/lib/cjs/Notification/Notification.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _systemConstants = require("@telus-uds/system-constants");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -71,12 +71,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({
@@ -90,7 +90,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
     styles: containerStyles
   } = _utils.StyleSheet.create({
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerMediaQueryStyles
     }
   });
@@ -102,22 +102,9 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...(0, _utils.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'
       })
     }
   });
@@ -182,7 +169,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' || _Platform.default.OS === 'android' ? 'row' : 'inherit',
+      flexDirection: 'column',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -191,7 +178,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: {
@@ -309,7 +299,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
   const notificationComponentRef = _react.default.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -331,7 +321,7 @@ const Notification = /*#__PURE__*/_react.default.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/cjs/TextInput/TextArea.js

@@ -47,6 +47,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = _react.default.useState();
+  const isUpdatingHeight = _react.default.useRef(false);
 
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = _ref2 => {
@@ -58,8 +59,16 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     } = _ref2;
     // on native this is happens out of the box
-    if (_Platform.default.OS === 'web') {
+    if (_Platform.default.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/cjs/Typography/Typography.js

@@ -69,7 +69,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     tag = typeof heading === 'string' ? heading : undefined,
     accessibilityRole = heading === true ? 'header' : undefined,
     block = false,
-    align = undefined,
+    align = _Platform.default.OS === 'web' ? 'inherit' : undefined,
     tokens,
     dataSet,
     strikeThrough = false,
@@ -118,13 +118,19 @@ const Typography = /*#__PURE__*/_react.default.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.default.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);
@@ -153,7 +159,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     mediaIds = ids.text;
   } else {
     textStyles = selectTextStyles({
-      textAlign: align,
+      textAlign: resolvedAlign,
       textDecorationLine,
       ...themeTokens
     }, themeOptions);

package/lib/esm/Card/CardBase.js

@@ -84,13 +84,14 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref,
     ...props,
     children: src ? /*#__PURE__*/_jsx(ImageBackground, {
-      alt: alt,
       source: imageSourceViewport,
       imageStyle: {
         borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth
       },
       resizeMode: backgroundImageResizeMode,
       style: styles.imageBackground,
+      accessible: true,
+      accessibilityLabel: alt,
       children: children
     }) : children
   });