@telus-uds/components-base 3.2.0 → 3.4.0

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -12,7 +12,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps, _utils.contentfulProps]);
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -37,6 +37,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     open,
     initialOpen,
     onChange,
+    dataSet,
     ...rest
   } = _ref;
   const {
@@ -56,6 +57,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: staticStyles.container,
     ref: ref,
     ...selectProps(rest),
+    dataSet: dataSet,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectBorderStyles(themeTokens),
       children: typeof children === 'function' ? children({

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -11,6 +11,7 @@ var _utils = require("../utils");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.contentfulProps]);
 const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
@@ -18,6 +19,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     tokens = {},
     nativeID,
     initialOpen = false,
+    dataSet,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
@@ -31,6 +33,8 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
+    ...selectContainerProps(rest),
+    dataSet: dataSet,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
@@ -41,7 +45,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
         // 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
@@ -60,6 +64,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
   ..._ExpandCollapseMiniControl.default.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -79,6 +84,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini')
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = exports.default = ExpandCollapseMini;

package/lib/cjs/Link/Link.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,5 +32,11 @@ const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = _LinkBase.default.propTypes;
+Link.propTypes = {
+  ..._LinkBase.default.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
+};
 var _default = exports.default = Link;

package/lib/cjs/Link/LinkBase.js

@@ -143,6 +143,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     variant,
     tokens = {},
     children,
+    dataSet,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -177,6 +178,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, {
     ...selectedProps,
+    dataSet: dataSet,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
     ,

package/lib/cjs/List/ListItemBase.js

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

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/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

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

@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-let id = 0;
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [uniqueId] = (0, _react.useState)(() => {
-    id += 1;
-    return `${prefix}-${id}`;
-  });
-  return uniqueId;
+  const id = (0, _react.useId)();
+  return `${prefix ? `${prefix}-` : ''}${id}`;
 }
 var _default = exports.default = useUniqueId;

package/lib/esm/Button/ButtonBase.js

@@ -6,10 +6,10 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps } from '../utils';
 import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps, contentfulProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,

package/lib/esm/Button/ButtonLink.js

@@ -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';
 
@@ -43,6 +43,7 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
+  ...contentfulProps.types,
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string

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
   });