@telus-uds/components-base 1.30.0 → 1.31.0

package/lib-module/Tooltip/Backdrop.js

@@ -8,7 +8,15 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
+  node.style.cssText = `
+  position: absolute; 
+  top: ${window.scrollY}px;
+  left: ${window.scrollX}px; 
+  right: 0; 
+  bottom: 0; 
+  z-index: 9999; 
+  pointer-events: none;
+  `;
   document.body.appendChild(node);
   return node;
 }
@@ -29,7 +37,7 @@ function Backdrop(_ref) {
   } = _ref;
   const [portalNode, setPortalNode] = useState();
   useEffect(() => {
-    const nodeId = "tooltip-backdrop-".concat(Date.now());
+    const nodeId = `tooltip-backdrop-${Date.now()}`;
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib-module/Tooltip/Tooltip.js

@@ -236,8 +236,8 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       style: [selectTooltipShadowStyles(themeTokens), staticStyles.tooltip, // applied separately so that it doesn't cover the arrow
       selectMobileTooltipPositionStyles({
         position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0
+        top: y ?? 0,
+        left: x ?? 0
       })],
       onLayout: onTooltipLayout,
       accessibilityRole: "alert",

package/lib-module/Validator/Validator.js

@@ -33,7 +33,7 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const defaultRef = useRef();
-  const codeRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+  const codeRef = ref ?? defaultRef;
   const {
     supportsProps
   } = selectProps(rest);
@@ -88,15 +88,13 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
   };
 
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2, _codeElement$value3;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
 
     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') {
-      var _singleCodes$codeId;
-
-      codeElement.value = (_singleCodes$codeId = singleCodes[codeId]) !== null && _singleCodes$codeId !== void 0 ? _singleCodes$codeId : '';
+      codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
 
@@ -107,7 +105,7 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
       handleSingleCodes(codeId, codeElement.value, 'success');
     }
 
-    handleSingleCodes(codeId, (_codeElement$value2 = codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) !== null && _codeElement$value2 !== void 0 ? _codeElement$value2 : singleCodes[codeId], 'success');
+    handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
 
     if (nextIndex === validatorsLength) {
@@ -115,7 +113,7 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
       return;
     }
 
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value3 = codeElement.value) === null || _codeElement$value3 === void 0 ? void 0 : _codeElement$value3.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    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();
   };
 
   const handleKeyPress = (event, currentIndex, previousIndex) => {
@@ -134,15 +132,18 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
     const components = [];
 
     for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      var _codeReferences$codeI2;
-
       const codeId = prefix + i;
       const codeInputProps = {
         nativeID: codeId,
-        ref: (_codeReferences$codeI2 = codeReferences[codeId]) !== null && _codeReferences$codeI2 !== void 0 ? _codeReferences$codeI2 : null,
+        keyboardType: 'numeric',
+        ref: codeReferences[codeId] ?? null,
         validation: strValidation || singleCodes[codeId + sufixValidation],
         tokens: selectCodeTextInputTokens(themeTokens),
-        onFocus: () => codeReferences[codeId].current.select(),
+        onFocus: () => {
+          var _codeReferences$codeI2, _codeReferences$codeI3;
+
+          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 ? void 0 : (_codeReferences$codeI3 = _codeReferences$codeI2.current) === null || _codeReferences$codeI3 === void 0 ? void 0 : _codeReferences$codeI3.select()) ?? null;
+        },
         onKeyPress: event => handleKeyPress(event, i, i - 1),
         onMouseOver: handleMouseOver,
         onMouseOut: handleMouseOut,
@@ -167,10 +168,8 @@ const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
 
   useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      var _text$i, _text$i2;
-
-      codeReferences[prefix + i].current.value = (_text$i = text[i]) !== null && _text$i !== void 0 ? _text$i : '';
-      handleSingleCodes(prefix + i, (_text$i2 = text[i]) !== null && _text$i2 !== void 0 ? _text$i2 : '', text[i] ? 'success' : '');
+      codeReferences[prefix + i].current.value = text[i] ?? '';
+      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
   /* eslint-disable react-hooks/exhaustive-deps */

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

@@ -72,7 +72,7 @@ function useVerticalExpandAnimation(_ref) {
     }
   } else if (Platform.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
     containerStyles.height = isExpanded ? containerHeight : 0;
   } else if (Platform.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
     // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where

package/lib-module/utils/children.js

@@ -55,7 +55,7 @@ const isWrapable = child => {
   return isStringOrNumber(child) || child.type === A11yText || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 
 
 const wrapChild = (child, wrappedText) => {
@@ -64,7 +64,7 @@ const wrapChild = (child, wrappedText) => {
 
   if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
     /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
+    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
   } else {
     wrappedText.push(child);
   }

package/lib-module/utils/input.js

@@ -21,23 +21,29 @@ const validateProps = (_ref, _ref2, hookName) => {
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
+    throw new Error(`${hookName} ${error}.
+
+Consumers of this hook must be one of:
+1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
+2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
+3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
+`);
   };
 
   if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
 
   if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
 /**
@@ -98,7 +104,7 @@ export const useInputValue = function () {
 
     if (!isControlled) {
       setOwnValue(newValue);
-      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue !== null && newValue !== void 0 ? newValue : '';
+      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
     } // Call onChange handler if there's something for it to handle (event or a changed value)
 
 
@@ -156,7 +162,7 @@ export const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
   }, 'useMultipleInputValues');
   const enforceMaxValues = useCallback(newValues => {
     if (!maxValues) return newValues;

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

@@ -26,8 +26,8 @@ export default function componentPropType(passedName) {
     const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
 
     if (!nameInProp || !passedNames.includes(nameInProp)) {
-      const propDescription = nameInProp ? "Component ".concat(nameInProp) : typeof props[propName];
-      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
+      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
     }
 
     return undefined;
@@ -35,7 +35,7 @@ export default function componentPropType(passedName) {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
     }
 
     return undefined;

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

@@ -3,7 +3,7 @@
 export default function selectSystemProps(systemPropHelpers) {
   const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
     if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
-      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ".concat(propHelper));
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
     }
 
     return { ...acc,
@@ -13,7 +13,7 @@ export default function selectSystemProps(systemPropHelpers) {
 
   const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
     if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
-      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ".concat(propHelper));
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
     }
 
     return { ...acc,

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

@@ -9,7 +9,7 @@ export const getTokenNames = componentName => {
   const componentTokenSchema = tokenKeys[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
 
   return Object.keys(componentTokenSchema);
@@ -47,7 +47,7 @@ export const getTokenNames = componentName => {
 export const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token

package/lib-module/utils/useSpacingScale.js

@@ -101,8 +101,6 @@ const resolveSpacingOptions = space => {
 
 
 const useSpacingScale = spaceValue => {
-  var _spaceValue$space;
-
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = useViewport();
@@ -112,7 +110,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : resolveResponsiveProp(spaceValue, viewport, 0));
+  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
   } = useThemeTokens('spacingScale', tokens, variant, {

package/lib-module/utils/useUniqueId.js

@@ -5,7 +5,7 @@ function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = useState(() => {
     id += 1;
-    return "".concat(prefix, "-").concat(id);
+    return `${prefix}-${id}`;
   });
   return uniqueId;
 }

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.13.0",
+    "@telus-uds/system-theme-tokens": "^2.15.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.30.0"
+  "version": "1.31.0"
 }

package/src/List/ListItemContent.jsx

@@ -9,14 +9,16 @@ export const tokenTypes = {
   itemFontWeight: PropTypes.string.isRequired,
   itemFontSize: PropTypes.number.isRequired,
   itemLineHeight: PropTypes.number.isRequired,
-  itemFontName: PropTypes.string.isRequired
+  itemFontName: PropTypes.string.isRequired,
+  itemFontColor: PropTypes.string
 }
 
 const selectItemTextStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemFontColor },
   themeOptions
 ) =>
   applyTextStyles({
+    fontColor: itemFontColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/src/List/PressableListItemBase.jsx

@@ -19,6 +19,7 @@ import ListItemMark from './ListItemMark'
 
 const selectPressableStyles = ({
   backgroundColor,
+  itemFontColor,
   paddingLeft,
   paddingRight,
   paddingTop,
@@ -26,6 +27,7 @@ const selectPressableStyles = ({
   interItemMargin
 }) => ({
   backgroundColor,
+  itemFontColor,
   paddingLeft,
   paddingRight,
   paddingTop,

package/src/ThemeProvider/utils/styles.js

@@ -8,6 +8,7 @@ import { fontBasePixels } from '@telus-uds/system-constants'
 
 // Make design tokens fit React Native's text styles' specific requirements and quirks
 export function applyTextStyles({
+  fontColor,
   fontSize,
   fontScaleCap,
   lineHeight,
@@ -51,6 +52,10 @@ export function applyTextStyles({
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight
   }
 
+  if (fontColor) {
+    styles.color = fontColor
+  }
+
   // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
   // Do while implementing advanced typography e.g. paragraph etc
   // https://github.com/telus/universal-design-system/issues/89

package/src/Validator/Validator.jsx

@@ -109,10 +109,11 @@ const Validator = forwardRef(
         const codeId = prefix + i
         const codeInputProps = {
           nativeID: codeId,
+          keyboardType: 'numeric',
           ref: codeReferences[codeId] ?? null,
           validation: strValidation || singleCodes[codeId + sufixValidation],
           tokens: selectCodeTextInputTokens(themeTokens),
-          onFocus: () => codeReferences[codeId].current.select(),
+          onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
           onKeyPress: (event) => handleKeyPress(event, i, i - 1),
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,