@telus-uds/components-base 3.21.0 → 3.23.0

package/src/Validator/Validator.jsx

@@ -24,12 +24,12 @@ const Validator = React.forwardRef(
 
     const { supportsProps } = selectProps(rest)
     const strValidation = supportsProps.validation
-    const [, setIndividualCodes] = React.useState({})
-    const [text, setText] = React.useState(value)
     const validatorsLength = 6
     const prefix = 'code'
     const sufixValidation = 'Validation'
 
+    const [codes, setCodes] = React.useState(() => Array(validatorsLength).fill(''))
+
     const [isHover, setIsHover] = React.useState(false)
     const handleMouseOver = () => {
       setIsHover(true)
@@ -41,110 +41,99 @@ const Validator = React.forwardRef(
 
     const themeTokens = useThemeTokens('TextInput', tokens, variant, { hover: isHover })
 
-    const [codeReferences, singleCodes] = React.useMemo(() => {
-      const codes = []
-      const valueCodes = {}
-      Array.from({ length: validatorsLength }, (_, i) => {
-        codes[prefix + i] = React.createRef()
-        valueCodes[prefix + i] = ''
-        valueCodes[prefix + i + sufixValidation] = ''
-        return null
-      })
-      return [codes, valueCodes]
-    }, [validatorsLength, prefix, sufixValidation])
-
-    const handleSingleCodes = React.useCallback(
-      (codeId, val, validation) => {
-        singleCodes[codeId] = val
-        singleCodes[codeId + sufixValidation] = validation
-        setIndividualCodes((prev) => ({
-          ...prev,
-          [codeId]: val
-        }))
-      },
-      [singleCodes, sufixValidation]
-    )
+    // Create refs for input elements
+    const codeReferences = React.useMemo(() => {
+      return Array.from({ length: validatorsLength }, () => React.createRef())
+    }, [validatorsLength])
 
-    const changeDataMasking = React.useCallback(
-      (boxElement) => {
-        let charMasking = ''
-        const element = boxElement
-        if (mask && mask.length === 1) {
-          charMasking = mask
-        } else if (mask && mask.length > 1) {
-          charMasking = mask.substring(0, 1)
-        }
+    // Keep onChange and mask in refs to avoid re-creating event listeners
+    const onChangeRef = React.useRef(onChange)
+    const maskRef = React.useRef(mask)
+    React.useEffect(() => {
+      onChangeRef.current = onChange
+      maskRef.current = mask
+    }, [onChange, mask])
+
+    // Update a single code digit
+    const updateCode = React.useCallback(
+      (index, digit) => {
+        setCodes((prevCodes) => {
+          const newCodes = [...prevCodes]
+          newCodes[index] = digit
+
+          if (onChangeRef.current) {
+            const codeString = newCodes.join('')
+            const singleCodesObj = {}
+            newCodes.forEach((code, i) => {
+              singleCodesObj[prefix + i] = code
+              singleCodesObj[prefix + i + sufixValidation] = code ? 'success' : ''
+            })
+            onChangeRef.current(codeString, singleCodesObj)
+          }
 
-        if (charMasking && element) {
-          element.value = charMasking
-        }
+          return newCodes
+        })
       },
-      [mask]
+      [prefix, sufixValidation]
     )
 
-    const handleChangeCode = React.useCallback(() => {
-      const code = Array.from(
-        { length: validatorsLength },
-        (_, i) => singleCodes[prefix + i] || ''
-      ).join('')
-      if (typeof onChange === 'function') {
-        onChange(code, singleCodes)
-      }
-    }, [validatorsLength, singleCodes, prefix, onChange])
-
-    const handleChangeCodeValues = React.useCallback(
-      (event, codeId, nextIndex) => {
-        const codeElement = codeReferences[codeId]?.current
+    // Handle input change
+    const handleInputChange = React.useCallback(
+      (index, event) => {
         const val = event.nativeEvent?.value || event.target?.value
 
-        // Only allow numeric characters and limit to single digit
-        const numericOnly = val.replace(/\D/g, '').substring(0, 1)
-
-        if (codeElement && codeElement.value) {
-          codeElement.value = numericOnly
+        // This prevents the infinite loop where setting element.value triggers another input event
+        if (maskRef.current && val === maskRef.current.substring(0, 1)) {
+          return
         }
 
-        handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '')
-        handleChangeCode()
+        const numericOnly = val.replace(/\D/g, '').substring(0, 1)
+
+        // Update state
+        updateCode(index, numericOnly)
 
-        if (nextIndex === validatorsLength) {
-          codeElement?.blur()
-          changeDataMasking(codeElement)
-          return
+        // Update DOM element
+        const element = codeReferences[index]?.current
+        if (element) {
+          if (maskRef.current && numericOnly) {
+            element.value = maskRef.current.substring(0, 1)
+          } else {
+            element.value = numericOnly
+          }
         }
 
-        if (numericOnly.length > 0) {
-          const nextElement = codeReferences[prefix + nextIndex]?.current
+        // Move to next field if digit entered
+        if (numericOnly && index < validatorsLength - 1) {
+          const nextElement = codeReferences[index + 1]?.current
           nextElement?.focus()
-          changeDataMasking(codeElement)
+        } else if (index === validatorsLength - 1) {
+          element?.blur()
         }
       },
-      [
-        codeReferences,
-        handleSingleCodes,
-        handleChangeCode,
-        validatorsLength,
-        changeDataMasking,
-        prefix
-      ]
+      [codeReferences, updateCode, validatorsLength]
     )
 
-    const handleKeyPress = (event, currentIndex, previousIndex) => {
-      if (!(event.keyCode === 8 || event.code === 'Backspace')) {
-        return
-      }
-      if (currentIndex > 0) {
-        const currentElement = codeReferences[prefix + currentIndex]?.current
-        const previousElement = codeReferences[prefix + previousIndex]?.current
+    // Handle backspace
+    const handleKeyPress = React.useCallback(
+      (index, event) => {
+        if (!(event.keyCode === 8 || event.code === 'Backspace')) {
+          return
+        }
+
+        const currentElement = codeReferences[index]?.current
 
-        if (currentElement && currentElement.value) {
+        if (currentElement) {
           currentElement.value = ''
         }
-        previousElement?.focus()
-      }
-      handleSingleCodes(prefix + currentIndex, '', '')
-      handleChangeCode()
-    }
+        updateCode(index, '')
+
+        if (index > 0) {
+          const previousElement = codeReferences[index - 1]?.current
+          previousElement?.focus()
+        }
+      },
+      [codeReferences, updateCode]
+    )
 
     const getCodeComponents = () => {
       return Array.from({ length: validatorsLength }, (_, i) => {
@@ -152,11 +141,14 @@ const Validator = React.forwardRef(
         const codeInputProps = {
           nativeID: codeId,
           keyboardType: 'numeric',
-          ref: codeReferences[codeId] ?? null,
-          validation: strValidation || singleCodes[codeId + sufixValidation],
+          ref: codeReferences[i] ?? null,
+          validation: strValidation || (codes[i] ? 'success' : ''),
           tokens: selectCodeTextInputTokens(themeTokens),
+          // Only use secureTextEntry in React Native, web handles mask differently
+          secureTextEntry: !!(Platform.OS !== 'web' && mask),
+          selectTextOnFocus: Platform.OS !== 'web',
           onFocus: () => {
-            const element = codeReferences[codeId]?.current
+            const element = codeReferences[i]?.current
             if (Platform.OS === 'web' && element?.select) {
               return element.select() ?? null
             }
@@ -165,11 +157,39 @@ const Validator = React.forwardRef(
             }
             return null
           },
-          onKeyPress: (event) => handleKeyPress(event, i, i - 1),
+          onKeyPress: (event) => handleKeyPress(i, event),
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
           inactive
         }
+
+        // For React Native, use onChangeText and maxLength
+        if (Platform.OS !== 'web') {
+          codeInputProps.maxLength = 1
+          codeInputProps.value = codes[i]
+          codeInputProps.onChange = () => {}
+
+          codeInputProps.onChangeText = (text) => {
+            if (text) {
+              updateCode(i, text)
+
+              if (i < validatorsLength - 1) {
+                setTimeout(() => {
+                  codeReferences[i + 1]?.current?.focus()
+                }, 50)
+              }
+            } else {
+              updateCode(i, '')
+
+              if (i > 0) {
+                setTimeout(() => {
+                  codeReferences[i - 1]?.current?.focus()
+                }, 50)
+              }
+            }
+          }
+        }
+
         if (!codeInputProps.validation) {
           delete codeInputProps.validation
         }
@@ -182,100 +202,101 @@ const Validator = React.forwardRef(
       })
     }
 
+    // Sync external value prop to internal state
     React.useEffect(() => {
-      if (Number(value).toString() !== 'NaN') {
-        setText(value)
+      if (value && Number(value).toString() !== 'NaN') {
+        const digits = value.split('').slice(0, validatorsLength)
+        const newCodes = Array(validatorsLength).fill('')
+        digits.forEach((digit, i) => {
+          if (/\d/.test(digit)) {
+            newCodes[i] = digit
+          }
+        })
+        setCodes(newCodes)
       }
-    }, [value])
+    }, [value, validatorsLength])
 
+    // Sync codes state to DOM elements
     React.useEffect(() => {
-      Array.from({ length: validatorsLength }, (_, i) => {
-        const element = codeReferences[prefix + i]?.current
+      codes.forEach((code, i) => {
+        const element = codeReferences[i]?.current
         if (element && element.value !== undefined) {
-          if (mask && text[i]) {
-            element.value = mask
+          if (mask && code) {
+            element.value = mask.substring(0, 1)
           } else {
-            element.value = text[i] ?? ''
+            element.value = code
           }
         }
-        handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
-        return null
       })
-    }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes])
+    }, [codes, codeReferences, mask])
 
+    // Setup event listeners - only runs once on mount
     React.useEffect(() => {
-      const handlePasteCode = (event) => {
-        event.preventDefault()
-
-        // Clear current state first
-        setText('')
-
-        // Clear all individual input fields and their state
-        Array.from({ length: validatorsLength }, (_, i) => {
-          const element = codeReferences[prefix + i]?.current
-          if (element && element.value !== undefined) {
-            element.value = ''
-          }
-          handleSingleCodes(prefix + i, '', '')
-          return null
-        })
+      if (Platform.OS !== 'web') {
+        return undefined
+      }
 
+      const handlePaste = (event) => {
+        event.preventDefault()
         const clipBoardText = event.clipboardData.getData('text')
-
-        // Validate that input contains only digits and truncate to 6 characters
         const numericOnly = clipBoardText.replace(/\D/g, '').substring(0, validatorsLength)
 
-        if (numericOnly.length > 0) {
-          setText(numericOnly)
+        const newCodes = Array(validatorsLength).fill('')
+        numericOnly.split('').forEach((digit, i) => {
+          newCodes[i] = digit
+        })
+        setCodes(newCodes)
+
+        if (onChangeRef.current) {
+          const singleCodesObj = {}
+          newCodes.forEach((code, i) => {
+            singleCodesObj[prefix + i] = code
+            singleCodesObj[prefix + i + sufixValidation] = code ? 'success' : ''
+          })
+          onChangeRef.current(numericOnly, singleCodesObj)
         }
       }
 
       const handleCopy = (event) => {
-        const clipBoardText = Array.from(
-          { length: validatorsLength },
-          (_, i) => singleCodes[prefix + i] || ''
-        ).join('')
-        event.clipboardData.setData('text/plain', clipBoardText)
-        event.preventDefault()
+        setCodes((currentCodes) => {
+          const clipBoardText = currentCodes.join('')
+          event.clipboardData.setData('text/plain', clipBoardText)
+          event.preventDefault()
+          return currentCodes
+        })
       }
 
-      if (Platform.OS === 'web') {
-        Array.from({ length: validatorsLength }, (_, i) => {
-          const element = codeReferences[prefix + i]?.current
-          if (element && typeof element.addEventListener === 'function') {
-            element.addEventListener('paste', handlePasteCode)
-            element.addEventListener('copy', handleCopy)
-            element.addEventListener('input', (event) =>
-              handleChangeCodeValues(event, prefix + i, i + 1)
+      // Add event listeners to each input
+      codeReferences.forEach((inputRef, i) => {
+        const element = inputRef?.current
+        if (element && typeof element.addEventListener === 'function') {
+          element.addEventListener('paste', handlePaste)
+          element.addEventListener('copy', handleCopy)
+          element.addEventListener('input', (event) => handleInputChange(i, event))
+        }
+      })
+
+      // Cleanup
+      return () => {
+        codeReferences.forEach((inputRef) => {
+          const element = inputRef?.current
+          if (element && typeof element.removeEventListener === 'function') {
+            element.removeEventListener('paste', handlePaste)
+            element.removeEventListener('copy', handleCopy)
+            element.removeEventListener('input', (event) =>
+              handleInputChange(event.target.dataset.index, event)
             )
           }
-          return null
         })
       }
-
-      return () => {
-        if (Platform.OS === 'web') {
-          Array.from({ length: validatorsLength }, (_, i) => {
-            const element = codeReferences[prefix + i]?.current
-            if (element && typeof element.removeEventListener === 'function') {
-              element.removeEventListener('paste', handlePasteCode)
-              element.removeEventListener('copy', handleCopy)
-              element.removeEventListener('input', (event) =>
-                handleChangeCodeValues(event, prefix + i, i + 1)
-              )
-            }
-            return null
-          })
-        }
-      }
-    }, [
-      validatorsLength,
-      prefix,
-      codeReferences,
-      handleChangeCodeValues,
-      handleSingleCodes,
-      singleCodes
-    ])
+      /*
+       * codeReferences and handleInputChange are intentionally omitted from dependencies
+       * because we want event listeners to be registered ONLY ONCE when the component mounts.
+       * codeReferences is stable (created with useMemo) and handleInputChange is stable (useCallback).
+       * Including them would cause unnecessary re-registration of listeners on each render.
+       */
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
 
     return (
       <InputSupports

package/src/index.js

@@ -83,7 +83,8 @@ export {
   applyOuterBorder,
   applyTextStyles,
   applyShadowToken,
-  useResponsiveThemeTokens
+  useResponsiveThemeTokens,
+  useResponsiveThemeTokensCallback
 } from './ThemeProvider'
 
 export * from './utils'