@telus-uds/components-base 1.86.0 → 1.88.0

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

package/src/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/src/utils/animation/useVerticalExpandAnimation.js

@@ -53,8 +53,8 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
 
   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.
@@ -68,7 +68,7 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       // 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/src/utils/props/tokens.js

@@ -122,7 +122,7 @@ export const getTokensPropType =
  * 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]
@@ -142,7 +142,9 @@ export const getTokensSetPropType = (
           ? tokenValueType
           : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
             (props, propName, ...args) =>
-              props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)
+              props[propName] !== null &&
+              props[propName] !== undefined &&
+              tokenValueType.isRequired(props, propName, ...args)
       ])
     )
   )