@telus-uds/components-base 1.87.0 → 1.88.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 24 Jun 2024 16:19:28 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Jul 2024 19:28:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.88.0
+
+Thu, 04 Jul 2024 19:28:59 GMT
+
+### Minor changes
+
+- Add data masking to validator component (Mauricio.BatresMontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.59.0
+
+### Patches
+
+- Remove label like unique field in RadioGroup component (Mauricio.BatresMontejo@telus.com)
+- `OrderedList`: fix numbered text alignment (guillermo.peitzner@telus.com)
+
 ## 1.87.0
 
-Mon, 24 Jun 2024 16:19:28 GMT
+Mon, 24 Jun 2024 16:28:34 GMT
 
 ### Minor changes
 

package/lib/OrderedList/Item.js

@@ -10,7 +10,6 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _utils = require("../utils");
 var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireDefault(require("../StackView"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _ItemBase = _interopRequireDefault(require("./ItemBase"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,20 +35,18 @@ const selectItemTextStyles = (_ref, themeOptions) => {
 const selectItemCounterStyles = _ref2 => {
   let {
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
     itemLineHeight,
     themeOptions,
-    listGutter,
     itemColor
   } = _ref2;
   return {
     color: itemColor,
     width: itemBulletContainerWidth,
-    paddingRight: listGutter,
-    textAlign: itemBulletContainerAlign,
+    textAlign: itemBulletTextAlign,
     ...(0, _ThemeProvider.applyTextStyles)({
       fontWeight: itemFontWeight,
       fontSize: itemFontSize,
@@ -62,10 +59,12 @@ const selectItemCounterStyles = _ref2 => {
 const selectItemContentStyles = (_ref3, isLastChild) => {
   let {
     interItemMargin,
+    listGutter,
     ...themeTokens
   } = _ref3;
   return {
     ...themeTokens,
+    marginLeft: listGutter,
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
@@ -106,27 +105,19 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
       children: itemCounter
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.itemContent,
-      children: title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-        tokens: {
-          flexShrink: 1
-        },
-        space: 0,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
             size: 'h4'
           },
           tokens: headingTokens,
           children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectItemContentStyles(themeTokens, isLastChild),
-          children: itemContent
-        })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectItemContentStyles(themeTokens, isLastChild),
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         children: itemContent
-      })
+      })]
     })]
   });
 });
@@ -162,13 +153,13 @@ var _default = Item;
 exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   container: {
+    flex: 1,
     flexDirection: 'row'
   },
   itemCounter: {
-    flexWrap: 'wrap'
+    alignItems: 'flex-end'
   },
   itemContent: {
-    flexDirection: 'column',
-    marginLeft: 8
+    flexShrink: 1
   }
 });

package/lib/Radio/RadioGroup.js

@@ -121,7 +121,7 @@ const RadioGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     readOnly: readOnly || inactive
   });
-  const uniqueFields = ['id', 'label'];
+  const uniqueFields = ['id'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }

package/lib/Validator/Validator.js

@@ -32,6 +32,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
+    mask = '',
     onChange,
     tokens = {},
     variant = {},
@@ -77,32 +78,36 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       [codeId]: val
     });
   };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
   const handleChangeCode = () => {
     let code = '';
     for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
     if (typeof onChange === 'function') onChange(code, singleCodes);
   };
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
     const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
     const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     if (Number(val).toString() === 'NaN') {
       codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
-      const oldValue = singleCodes[codeId];
-      const newValue = codeElement.value.replace(oldValue, '');
-      codeElement.value = newValue;
-      handleSingleCodes(codeId, codeElement.value, 'success');
-    }
     handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
       codeElement.blur();
+      changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
   };
   const handleKeyPress = (event, currentIndex, previousIndex) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
@@ -150,7 +155,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   /* eslint-disable react-hooks/exhaustive-deps */
   _react.default.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      codeReferences[prefix + i].current.value = text[i] ?? '';
+      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
@@ -207,6 +212,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: _propTypes.default.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: _propTypes.default.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */

package/lib-module/OrderedList/Item.js

@@ -4,7 +4,6 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import StackView from '../StackView';
 import Typography from '../Typography';
 import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -30,20 +29,18 @@ const selectItemTextStyles = (_ref, themeOptions) => {
 const selectItemCounterStyles = _ref2 => {
   let {
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
     itemLineHeight,
     themeOptions,
-    listGutter,
     itemColor
   } = _ref2;
   return {
     color: itemColor,
     width: itemBulletContainerWidth,
-    paddingRight: listGutter,
-    textAlign: itemBulletContainerAlign,
+    textAlign: itemBulletTextAlign,
     ...applyTextStyles({
       fontWeight: itemFontWeight,
       fontSize: itemFontSize,
@@ -56,10 +53,12 @@ const selectItemCounterStyles = _ref2 => {
 const selectItemContentStyles = (_ref3, isLastChild) => {
   let {
     interItemMargin,
+    listGutter,
     ...themeTokens
   } = _ref3;
   return {
     ...themeTokens,
+    marginLeft: listGutter,
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
@@ -100,27 +99,19 @@ const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     children: [/*#__PURE__*/_jsx(View, {
       style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
       children: itemCounter
-    }), /*#__PURE__*/_jsx(View, {
-      style: staticStyles.itemContent,
-      children: title ? /*#__PURE__*/_jsxs(StackView, {
-        tokens: {
-          flexShrink: 1
-        },
-        space: 0,
-        children: [/*#__PURE__*/_jsx(Typography, {
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
+      children: [title && /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'h4'
           },
           tokens: headingTokens,
           children: title
-        }), /*#__PURE__*/_jsx(View, {
-          style: selectItemContentStyles(themeTokens, isLastChild),
-          children: itemContent
-        })]
-      }) : /*#__PURE__*/_jsx(View, {
-        style: selectItemContentStyles(themeTokens, isLastChild),
+        })
+      }), /*#__PURE__*/_jsx(View, {
         children: itemContent
-      })
+      })]
     })]
   });
 });
@@ -155,13 +146,13 @@ Item.displayName = 'OrderedListItem';
 export default Item;
 const staticStyles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'row'
   },
   itemCounter: {
-    flexWrap: 'wrap'
+    alignItems: 'flex-end'
   },
   itemContent: {
-    flexDirection: 'column',
-    marginLeft: 8
+    flexShrink: 1
   }
 });

package/lib-module/Radio/RadioGroup.js

@@ -114,7 +114,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     readOnly: readOnly || inactive
   });
-  const uniqueFields = ['id', 'label'];
+  const uniqueFields = ['id'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }

package/lib-module/Validator/Validator.js

@@ -25,6 +25,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
+    mask = '',
     onChange,
     tokens = {},
     variant = {},
@@ -70,32 +71,36 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [codeId]: val
     });
   };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
   const handleChangeCode = () => {
     let code = '';
     for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
     if (typeof onChange === 'function') onChange(code, singleCodes);
   };
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
     const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
     const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     if (Number(val).toString() === 'NaN') {
       codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
-      const oldValue = singleCodes[codeId];
-      const newValue = codeElement.value.replace(oldValue, '');
-      codeElement.value = newValue;
-      handleSingleCodes(codeId, codeElement.value, 'success');
-    }
     handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
       codeElement.blur();
+      changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
   };
   const handleKeyPress = (event, currentIndex, previousIndex) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
@@ -143,7 +148,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      codeReferences[prefix + i].current.value = text[i] ?? '';
+      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
@@ -200,6 +205,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: PropTypes.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: PropTypes.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */

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.58.0",
+    "@telus-uds/system-theme-tokens": "^2.59.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.87.0",
+  "version": "1.88.0",
   "types": "types/index.d.ts"
 }

package/src/OrderedList/Item.jsx

@@ -11,7 +11,6 @@ import {
   wrapStringsInText
 } from '../utils'
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import StackView from '../StackView'
 import Typography from '../Typography'
 import ItemBase from './ItemBase'
 
@@ -32,19 +31,17 @@ const selectItemTextStyles = (
 
 const selectItemCounterStyles = ({
   itemBulletContainerWidth,
-  itemBulletContainerAlign,
+  itemBulletTextAlign,
   itemFontWeight,
   itemFontSize,
   itemFontName,
   itemLineHeight,
   themeOptions,
-  listGutter,
   itemColor
 }) => ({
   color: itemColor,
   width: itemBulletContainerWidth,
-  paddingRight: listGutter,
-  textAlign: itemBulletContainerAlign,
+  textAlign: itemBulletTextAlign,
   ...applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
@@ -54,8 +51,9 @@ const selectItemCounterStyles = ({
   lineHeight: itemLineHeight * itemFontSize
 })
 
-const selectItemContentStyles = ({ interItemMargin, ...themeTokens }, isLastChild) => ({
+const selectItemContentStyles = ({ interItemMargin, listGutter, ...themeTokens }, isLastChild) => ({
   ...themeTokens,
+  marginLeft: listGutter,
   marginBottom: !isLastChild ? interItemMargin : 0
 })
 
@@ -87,17 +85,15 @@ const Item = React.forwardRef(
         <View style={[staticStyles.itemCounter, selectItemCounterStyles(themeTokens)]}>
           {itemCounter}
         </View>
-        <View style={staticStyles.itemContent}>
-          {title ? (
-            <StackView tokens={{ flexShrink: 1 }} space={0}>
+        <View style={[staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)]}>
+          {title && (
+            <View>
               <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
                 {title}
               </Typography>
-              <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
-            </StackView>
-          ) : (
-            <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+            </View>
           )}
+          <View>{itemContent}</View>
         </View>
       </ItemBase>
     )
@@ -138,13 +134,13 @@ export default Item
 
 const staticStyles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'row'
   },
   itemCounter: {
-    flexWrap: 'wrap'
+    alignItems: 'flex-end'
   },
   itemContent: {
-    flexDirection: 'column',
-    marginLeft: 8
+    flexShrink: 1
   }
 })

package/src/Radio/RadioGroup.jsx

@@ -131,7 +131,7 @@ const RadioGroup = React.forwardRef(
       readOnly: readOnly || inactive
     })
 
-    const uniqueFields = ['id', 'label']
+    const uniqueFields = ['id']
     if (!containUniqueFields(items, uniqueFields)) {
       throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`)
     }

package/src/Validator/Validator.jsx

@@ -18,7 +18,7 @@ const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) =
 }
 
 const Validator = React.forwardRef(
-  ({ value = '', inactive, onChange, tokens = {}, variant = {}, ...rest }, ref) => {
+  ({ value = '', inactive, mask = '', onChange, tokens = {}, variant = {}, ...rest }, ref) => {
     const defaultRef = React.useRef()
     const codeRef = ref ?? defaultRef
 
@@ -62,6 +62,15 @@ const Validator = React.forwardRef(
       })
     }
 
+    const changeDataMasking = (boxElement) => {
+      let charMasking = ''
+      const element = boxElement
+      if (mask && mask.length === 1) charMasking = mask
+      else if (mask && mask.length > 1) charMasking = mask.substring(0, 1)
+
+      if (charMasking) element.value = charMasking
+    }
+
     const handleChangeCode = () => {
       let code = ''
       for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
@@ -76,20 +85,18 @@ const Validator = React.forwardRef(
         codeElement.value = singleCodes[codeId] ?? ''
         return
       }
-      if (codeElement?.value?.length > 1) {
-        const oldValue = singleCodes[codeId]
-        const newValue = codeElement.value.replace(oldValue, '')
-        codeElement.value = newValue
-        handleSingleCodes(codeId, codeElement.value, 'success')
-      }
 
       handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
       handleChangeCode()
       if (nextIndex === validatorsLength) {
         codeElement.blur()
+        changeDataMasking(codeElement)
         return
       }
-      if (codeElement?.value?.length > 0) codeReferences[prefix + nextIndex].current.focus()
+      if (codeElement?.value?.length > 0) {
+        codeReferences[prefix + nextIndex].current.focus()
+        changeDataMasking(codeElement)
+      }
     }
 
     const handleKeyPress = (event, currentIndex, previousIndex) => {
@@ -138,7 +145,8 @@ const Validator = React.forwardRef(
     /* eslint-disable react-hooks/exhaustive-deps */
     React.useEffect(() => {
       for (let i = 0; i < validatorsLength; i += 1) {
-        codeReferences[prefix + i].current.value = text[i] ?? ''
+        if (mask && text[i]) codeReferences[prefix + i].current.value = mask
+        else codeReferences[prefix + i].current.value = text[i] ?? ''
         handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
       }
     }, [text])
@@ -203,6 +211,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: PropTypes.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: PropTypes.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */