@telus-uds/components-base 3.2.0 → 3.4.0

package/lib/esm/Link/Link.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,5 +25,11 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = LinkBase.propTypes;
+Link.propTypes = {
+  ...LinkBase.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
+};
 export default Link;

package/lib/esm/Link/LinkBase.js

@@ -136,6 +136,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     tokens = {},
     children,
+    dataSet,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -170,6 +171,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, {
     ...selectedProps,
+    dataSet: dataSet,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
     ,

package/lib/esm/List/ListItemBase.js

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

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -286,9 +286,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           },
           children: subtitle
         })
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
       })]
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 4
     }), /*#__PURE__*/_jsx(View, {
       style: styles.options,
       children: /*#__PURE__*/_jsx(ScrollView, {

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

@@ -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/esm/utils/useUniqueId.js

@@ -1,11 +1,7 @@
-import { useState } from 'react';
-let id = 0;
+import { useId } from 'react';
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [uniqueId] = useState(() => {
-    id += 1;
-    return `${prefix}-${id}`;
-  });
-  return uniqueId;
+  const id = useId();
+  return `${prefix ? `${prefix}-` : ''}${id}`;
 }
 export default useUniqueId;

package/lib/package.json

@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.2.0",
+  "version": "3.4.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.2.0",
+  "version": "3.4.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonBase.jsx

@@ -15,7 +15,8 @@ import {
   selectSystemProps,
   viewProps,
   wrapStringsInText,
-  withLinkRouter
+  withLinkRouter,
+  contentfulProps
 } from '../utils'
 import { IconText } from '../Icon'
 
@@ -23,7 +24,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   focusHandlerProps,
   linkProps,
-  viewProps
+  viewProps,
+  contentfulProps
 ])
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>

package/src/Button/ButtonLink.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
+import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 
@@ -16,6 +16,7 @@ const ButtonLink = React.forwardRef(
     const viewport = useViewport()
     const buttonVariant = { viewport, ...variant }
     const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+
     return (
       <ButtonBase
         ref={ref}
@@ -34,6 +35,7 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
+  ...contentfulProps.types,
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string

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>