@telus-uds/components-base 1.85.1 → 1.86.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 23 May 2024 16:27:45 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Jun 2024 22:36:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.86.0
+
+Fri, 07 Jun 2024 22:36:16 GMT
+
+### Minor changes
+
+- `List`: Add `itemTextColor` token (kristina.kirpichnikova@telus.com)
+- Select: data-di-mask attribute added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.57.0
+
+### Patches
+
+- `Modal`: `cancelButtonText` wrapping fixed when rendered with longer text (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.85.1
 
-Thu, 23 May 2024 16:27:45 GMT
+Thu, 23 May 2024 16:30:28 GMT
 
 ### Patches
 

package/lib/Link/TextButton.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _utils = require("../utils");
@@ -25,15 +27,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     ...linkProps
   } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
-    onPress: onPress,
-    accessibilityRole: accessibilityRole,
-    tokens: getTokens,
-    ref: ref,
-    ...linkProps,
-    children: children
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: styles.textButton,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+      onPress: onPress,
+      accessibilityRole: accessibilityRole,
+      tokens: getTokens,
+      ref: ref,
+      ...linkProps,
+      children: children
+    })
   });
 });
+const styles = _StyleSheet.default.create({
+  textButton: {
+    flex: 1
+  }
+});
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
   ..._LinkBase.default.propTypes,

package/lib/List/ListItemContent.js

@@ -26,10 +26,11 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemFontColor
+    itemFontColor,
+    itemTextColor
   } = _ref;
   return (0, _ThemeProvider.applyTextStyles)({
-    fontColor: itemFontColor,
+    fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/lib/Modal/ModalContent.js

@@ -141,14 +141,12 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
-          tokens: {
-            color: cancelButtonColor
-          },
-          onPress: onCancel,
-          children: cancelButtonText
-        })
+      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+        tokens: {
+          color: cancelButtonColor
+        },
+        onPress: onCancel,
+        children: cancelButtonText
       }) : null]
     })]
   });

package/lib/Select/Picker.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     value,
@@ -25,6 +26,7 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     testID,
     ...rest
   } = _ref;
+  const selectedProps = selectProps(rest);
   const {
     accessibilityLabel,
     accessibilityDescribedBy,
@@ -45,6 +47,7 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "aria-describedby": accessibilityDescribedBy,
     "aria-invalid": accessibilityInvalid,
     "data-testid": testID,
+    ...selectedProps,
     children: [placeholder !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
       value: placeholder.value,
       disabled: true,
@@ -57,6 +60,7 @@ Picker.displayName = 'Picker';
 var _default = Picker;
 exports.default = _default;
 Picker.propTypes = {
+  ...selectedSystemPropTypes,
   value: _propTypes.default.string,
   onChange: _propTypes.default.func,
   onFocus: _propTypes.default.func,

package/lib/Select/Select.js

@@ -16,7 +16,7 @@ var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps, _utils.htmlAttrs]);
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,

package/lib-module/Link/TextButton.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { variantProp } from '../utils';
@@ -20,15 +22,23 @@ const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...linkProps
   } = _ref;
   const getTokens = useThemeTokensCallback('Link', tokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, {
-    onPress: onPress,
-    accessibilityRole: accessibilityRole,
-    tokens: getTokens,
-    ref: ref,
-    ...linkProps,
-    children: children
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.textButton,
+    children: /*#__PURE__*/_jsx(LinkBase, {
+      onPress: onPress,
+      accessibilityRole: accessibilityRole,
+      tokens: getTokens,
+      ref: ref,
+      ...linkProps,
+      children: children
+    })
   });
 });
+const styles = StyleSheet.create({
+  textButton: {
+    flex: 1
+  }
+});
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
   ...LinkBase.propTypes,

package/lib-module/List/ListItemContent.js

@@ -18,10 +18,11 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemFontColor
+    itemFontColor,
+    itemTextColor
   } = _ref;
   return applyTextStyles({
-    fontColor: itemFontColor,
+    fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/lib-module/Modal/ModalContent.js

@@ -135,14 +135,12 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/_jsx(View, {
-        children: /*#__PURE__*/_jsx(CancelButton, {
-          tokens: {
-            color: cancelButtonColor
-          },
-          onPress: onCancel,
-          children: cancelButtonText
-        })
+      }), hasCancelButton ? /*#__PURE__*/_jsx(CancelButton, {
+        tokens: {
+          color: cancelButtonColor
+        },
+        onPress: onCancel,
+        children: cancelButtonText
       }) : null]
     })]
   });

package/lib-module/Select/Picker.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
+import { componentPropType, selectSystemProps, htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
@@ -19,6 +20,7 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     testID,
     ...rest
   } = _ref;
+  const selectedProps = selectProps(rest);
   const {
     accessibilityLabel,
     accessibilityDescribedBy,
@@ -39,6 +41,7 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "aria-describedby": accessibilityDescribedBy,
     "aria-invalid": accessibilityInvalid,
     "data-testid": testID,
+    ...selectedProps,
     children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
       value: placeholder.value,
       disabled: true,
@@ -50,6 +53,7 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Picker.displayName = 'Picker';
 export default Picker;
 Picker.propTypes = {
+  ...selectedSystemPropTypes,
   value: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

package/lib-module/Select/Select.js

@@ -4,13 +4,13 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
+import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps, htmlAttrs } from '../utils';
 import Picker from './Picker';
 import InputSupports from '../InputSupports';
 import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps, htmlAttrs]);
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.56.0",
+    "@telus-uds/system-theme-tokens": "^2.57.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.85.1",
+  "version": "1.86.0",
   "types": "types/index.d.ts"
 }

package/src/Link/TextButton.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 import { variantProp } from '../utils'
@@ -13,18 +14,25 @@ const TextButton = React.forwardRef(
   ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
-      <LinkBase
-        onPress={onPress}
-        accessibilityRole={accessibilityRole}
-        tokens={getTokens}
-        ref={ref}
-        {...linkProps}
-      >
-        {children}
-      </LinkBase>
+      <View style={styles.textButton}>
+        <LinkBase
+          onPress={onPress}
+          accessibilityRole={accessibilityRole}
+          tokens={getTokens}
+          ref={ref}
+          {...linkProps}
+        >
+          {children}
+        </LinkBase>
+      </View>
     )
   }
 )
+const styles = StyleSheet.create({
+  textButton: {
+    flex: 1
+  }
+})
 TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {

package/src/List/ListItemContent.jsx

@@ -14,11 +14,11 @@ export const tokenTypes = {
 }
 
 const selectItemTextStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemFontColor },
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemFontColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
-    fontColor: itemFontColor,
+    fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/src/Modal/ModalContent.jsx

@@ -133,11 +133,9 @@ const ModalContent = React.forwardRef(
               </Button>
             )}
             {hasCancelButton ? (
-              <View>
-                <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
-                  {cancelButtonText}
-                </CancelButton>
-              </View>
+              <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
+                {cancelButtonText}
+              </CancelButton>
             ) : null}
           </View>
         )}

package/src/Select/Picker.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
 import PropTypes from 'prop-types'
-import { componentPropType } from '../utils'
+import { componentPropType, selectSystemProps, htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Picker = React.forwardRef(
   (
@@ -22,6 +24,7 @@ const Picker = React.forwardRef(
     },
     ref
   ) => {
+    const selectedProps = selectProps(rest)
     const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
 
     return (
@@ -40,6 +43,7 @@ const Picker = React.forwardRef(
         aria-describedby={accessibilityDescribedBy}
         aria-invalid={accessibilityInvalid}
         data-testid={testID}
+        {...selectedProps}
       >
         {placeholder !== undefined && (
           <option value={placeholder.value} disabled hidden>
@@ -56,6 +60,7 @@ Picker.displayName = 'Picker'
 export default Picker
 
 Picker.propTypes = {
+  ...selectedSystemPropTypes,
   value: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

package/src/Select/Select.jsx

@@ -11,7 +11,8 @@ import {
   selectSystemProps,
   useInputValue,
   variantProp,
-  viewProps
+  viewProps,
+  htmlAttrs
 } from '../utils'
 import Picker from './Picker'
 import InputSupports from '../InputSupports'
@@ -21,7 +22,8 @@ import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   inputSupportsProps,
-  viewProps
+  viewProps,
+  htmlAttrs
 ])
 
 const selectInputStyles = (