@telus-uds/components-base 1.86.0 → 1.88.0

package/lib-module/Notification/Notification.js

@@ -60,13 +60,17 @@ const selectDismissButtonContainerStyles = _ref4 => {
   } = _ref4;
   return {
     paddingLeft: dismissButtonGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
-const selectContentContainerStyle = maxWidth => ({
-  maxWidth: maxWidth || '100%'
+const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  paddingRight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingRight,
+  paddingLeft: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+  var _themeOptions$content, _themeOptions$content2, _themeOptions$content3, _themeOptions$content4, _themeOptions$content5;
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -80,7 +84,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
     styles: containerStyles
   } = StyleSheet.create({
     container: {
-      flexDirection: 'row',
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
       ...selectContainerMediaQueryStyles
     }
   });
@@ -94,19 +98,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
         xs: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xs) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
         },
         md: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.md) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
         },
         lg: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.lg) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
         },
         sm: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.sm) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
         },
         xl: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xl) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
         }
       })
     }
@@ -169,19 +173,20 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
     selectDismissIconPropsStyles
   };
 };
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: 'row',
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
       ...selectContainerStyles(themeTokens)
     }
   },
   contentContainerStyles: {
     contentContainer: {
+      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(maxWidth)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
     }
   },
   staticContentContainerStyles: {
@@ -317,9 +322,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, viewport, mediaIdsRef, dismissible);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, system);
   }
   if (isDismissed) {
     return null;

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/Radio.js

@@ -164,6 +164,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     onKeyDown: handleKeyDown,
     onPress: handleChange,
     ...selectedProps,
+    style: staticStyles.removeOutline,
     children: _ref5 => {
       let {
         focused: focus,
@@ -275,5 +276,8 @@ const staticStyles = StyleSheet.create({
   alignWithLabel: {
     alignSelf: 'flex-start',
     justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
   }
 });

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/Tabs/Tabs.js

@@ -106,6 +106,7 @@ const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          render,
           ...itemRest
         } = _ref3;
         const itemId = id ?? label;
@@ -131,6 +132,7 @@ const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          render: render,
           ...itemProps,
           children: label
         }, itemId);
@@ -151,7 +153,8 @@ Tabs.propTypes = {
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,
-    ref: ABBPropTypes.ref()
+    ref: ABBPropTypes.ref(),
+    render: PropTypes.func
   })),
   /**
    * `id` property of the current tab in the items array

package/lib-module/Tabs/TabsItem.js

@@ -95,6 +95,7 @@ const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       selected
     } : undefined,
     id,
+    render,
     ...rawRest
   } = _ref4;
   // Convert onClick etc to onPress etc if used in an integration
@@ -150,6 +151,10 @@ const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     }
     // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
   }, [selected, index, itemPositions]);
+  if (render) return render({
+    selected,
+    handlePress
+  });
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     onPress: handlePress,
@@ -207,7 +212,8 @@ TabsItem.propTypes = {
   selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
   children: PropTypes.string,
-  id: PropTypes.string
+  id: PropTypes.string,
+  render: PropTypes.func
 };
 const staticStyles = StyleSheet.create({
   center: {

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/lib-module/index.js

@@ -1,4 +1,5 @@
 export { default as A11yText } from './A11yText';
+export { default as ActionCard } from './ActionCard';
 export { default as ActivityIndicator } from './ActivityIndicator';
 export { default as Autocomplete } from './Autocomplete';
 export { default as Box } from './Box';

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -52,8 +52,8 @@ function useVerticalExpandAnimation(_ref) {
   if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (Platform.OS === 'web') {
-      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
-      containerStyles.visibility = 'hidden';
+      // Without `display: 'none', descendents are focusable on web even when collapsed.
+      containerStyles.display = 'none';
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
@@ -67,7 +67,7 @@ function useVerticalExpandAnimation(_ref) {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
       // this won't work on native platforms
       containerStyles.height = 0;
-      containerStyles.visibility = 'hidden';
+      containerStyles.display = 'none';
     }
   } else if (Platform.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration;

package/lib-module/utils/props/tokens.js

@@ -105,7 +105,7 @@ export const getTokensPropType = function () {
  * For example, for a set of tokens used in a common style, or for a set of tokens required by
  * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
  *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ * By default, requires an object with a complete set of tokens (allowing `null` and `undefined`).
  *
  * @param {string[]} componentTokenKeys - array of strings of token names
  * @param {object} [options]
@@ -124,7 +124,7 @@ export const getTokensSetPropType = function (componentTokenKeys) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
-    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+    return props[propName] !== null && props[propName] !== undefined && tokenValueType.isRequired(props, propName, ...args);
   }])));
   return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
 };

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.57.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.86.0",
+  "version": "1.88.0",
   "types": "types/index.d.ts"
 }