@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/esm/Validator/Validator.js

@@ -37,11 +37,10 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     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);
@@ -52,84 +51,87 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = React.useMemo(() => {
-    const codes = [];
-    const valueCodes = {};
-    Array.from({
+
+  // Create refs for input elements
+  const codeReferences = React.useMemo(() => {
+    return Array.from({
       length: validatorsLength
-    }, (_, i) => {
-      codes[prefix + i] = /*#__PURE__*/React.createRef();
-      valueCodes[prefix + i] = '';
-      valueCodes[prefix + i + sufixValidation] = '';
-      return null;
+    }, () => /*#__PURE__*/React.createRef());
+  }, [validatorsLength]);
+
+  // 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);
+      }
+      return newCodes;
     });
-    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]);
-  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);
-    }
-    if (charMasking && element) {
-      element.value = charMasking;
-    }
-  }, [mask]);
-  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;
+  }, [prefix, sufixValidation]);
+
+  // 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;
-    }
-    handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '');
-    handleChangeCode();
-    if (nextIndex === validatorsLength) {
-      codeElement?.blur();
-      changeDataMasking(codeElement);
+    // This prevents the infinite loop where setting element.value triggers another input event
+    if (maskRef.current && val === maskRef.current.substring(0, 1)) {
       return;
     }
-    if (numericOnly.length > 0) {
-      const nextElement = codeReferences[prefix + nextIndex]?.current;
+    const numericOnly = val.replace(/\D/g, '').substring(0, 1);
+
+    // Update state
+    updateCode(index, numericOnly);
+
+    // 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;
+      }
+    }
+
+    // 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]);
-  const handleKeyPress = (event, currentIndex, previousIndex) => {
+  }, [codeReferences, updateCode, validatorsLength]);
+
+  // Handle backspace
+  const handleKeyPress = React.useCallback((index, event) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) {
       return;
     }
-    if (currentIndex > 0) {
-      const currentElement = codeReferences[prefix + currentIndex]?.current;
-      const previousElement = codeReferences[prefix + previousIndex]?.current;
-      if (currentElement && currentElement.value) {
-        currentElement.value = '';
-      }
+    const currentElement = codeReferences[index]?.current;
+    if (currentElement) {
+      currentElement.value = '';
+    }
+    updateCode(index, '');
+    if (index > 0) {
+      const previousElement = codeReferences[index - 1]?.current;
       previousElement?.focus();
     }
-    handleSingleCodes(prefix + currentIndex, '', '');
-    handleChangeCode();
-  };
+  }, [codeReferences, updateCode]);
   const getCodeComponents = () => {
     return Array.from({
       length: validatorsLength
@@ -138,11 +140,14 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       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;
           }
@@ -151,11 +156,35 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           }
           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;
       }
@@ -167,89 +196,96 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }, codeId);
     });
   };
+
+  // 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 => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handlePaste = 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;
-      });
       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 /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
     feedbackProps: {

package/lib/esm/index.js

@@ -47,6 +47,7 @@ export { default as RadioCard, RadioCardGroup } from './RadioCard';
 export { default as Responsive } from './Responsive';
 export { default as Search } from './Search';
 export { default as Select } from './Select';
+export { default as Shortcuts, ShortcutsItem } from './Shortcuts';
 export { default as SideNav } from './SideNav';
 export { default as Skeleton } from './Skeleton';
 export { default as SkipLink } from './SkipLink';

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.15.1",
+    "@telus-uds/system-theme-tokens": "^4.17.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.22.0",
+  "version": "3.24.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.15.1",
+    "@telus-uds/system-theme-tokens": "^4.17.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.22.0",
+  "version": "3.24.0",
   "types": "types/index.d.ts"
 }

package/src/Button/Button.jsx

@@ -11,7 +11,7 @@ import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 
 const Button = React.forwardRef(
-  ({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
+  ({ accessibilityRole = 'button', tokens, variant, heightFull = true, ...props }, ref) => {
     const viewport = useViewport()
     const {
       themeOptions: { enableMediaQueryStyleSheet }
@@ -29,6 +29,7 @@ const Button = React.forwardRef(
       <ButtonBase
         {...props}
         tokens={getTokens}
+        heightFull={heightFull}
         accessibilityRole={accessibilityRole}
         ref={ref}
         viewport={viewport}

package/src/Button/ButtonBase.jsx

@@ -49,21 +49,26 @@ const selectFlexAndWidthStyles = ({ width, flex }) => {
   return styles
 }
 
-const selectOuterContainerStyles = ({
+const selectOuterContainerStyles = (
+  {
+    opacity,
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBackgroundColor,
+    alignSelf
+  },
+  heightFull
+) => ({
+  backgroundColor: outerBackgroundColor,
   opacity,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBackgroundColor
-}) => ({
   ...Platform.select({
     native: {
-      alignSelf: 'flex-start'
-    }
+      alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+    },
+    web: heightFull ? {} : { alignSelf: 'flex-start' }
   }),
-  backgroundColor: outerBackgroundColor,
-  opacity,
   ...applyOuterBorder({
     outerBorderGap,
     outerBorderWidth,
@@ -219,6 +224,7 @@ const ButtonBase = React.forwardRef(
       icon,
       iconPosition = icon ? 'left' : undefined,
       iconProps,
+      heightFull = true,
       ...rawRest
     },
     ref
@@ -284,7 +290,7 @@ const ButtonBase = React.forwardRef(
       return [
         staticStyles.row,
         selectWebOnlyStyles(inactive, themeTokens, systemProps),
-        selectOuterContainerStyles(themeTokens),
+        selectOuterContainerStyles(themeTokens, heightFull),
         ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []),
         selectOuterSizeStyles(themeTokens)
       ]

package/src/Button/ButtonDropdown.jsx

@@ -105,6 +105,7 @@ const ButtonDropdown = React.forwardRef(
       accessibilityRole = 'radio',
       description,
       singleOption,
+      heightFull = true,
       ...props
     },
     ref
@@ -151,6 +152,7 @@ const ButtonDropdown = React.forwardRef(
         {...pressHandlers}
         onPress={handlePress}
         tokens={getButtonTokens}
+        heightFull={heightFull}
         inactive={singleOption || inactive}
         icon={() => null}
         accessibilityRole={accessibilityRole}

package/src/Button/ButtonGroup.jsx

@@ -1,21 +1,20 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-import { Platform } from 'react-native'
+import { Platform, View, StyleSheet } from 'react-native'
 
 import ButtonBase from './ButtonBase'
-import { StackWrap } from '../StackView'
 import Fieldset from '../Fieldset'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
+  useSpacingScale,
   a11yProps,
   containUniqueFields,
   focusHandlerProps,
   pressProps,
   getTokensPropType,
   selectSystemProps,
-  selectTokens,
   useMultipleInputValues,
   variantProp,
   viewProps
@@ -30,16 +29,6 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const getStackWrapTokens = (variant) => {
-  return Platform.select({
-    web: {
-      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
-      width: variant?.width === 'equal' ? '100%' : 'auto'
-    },
-    default: {}
-  })
-}
-
 const ButtonGroup = React.forwardRef(
   (
     {
@@ -72,25 +61,52 @@ const ButtonGroup = React.forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
-    const themeStackTokens = selectTokens('StackView', themeTokens)
-    const variantStackTokens = getStackWrapTokens(variant)
-    const stackTokens = {
-      ...themeStackTokens,
-      ...variantStackTokens
-    }
     const { direction, space, fieldSpace, borderRadius, backgroundColor, padding, gap } =
       themeTokens
 
+    const isMobileNonContained =
+      Platform.OS !== 'web' && (!variant || variant?.style !== 'contained')
+
     const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+    const gapValue = useSpacingScale(gap || space)
 
-    const getButtonTokens = (state) => {
-      const themeButtonTokens = themeButtonTokensCallback(state)
-      return {
-        ...themeButtonTokens,
-        width: variant?.width === 'equal' ? '100%' : 'auto',
-        flex: variant?.width === 'equal' ? 1 : undefined
-      }
-    }
+    const getButtonTokens = useCallback(
+      (state) => {
+        const themeButtonTokens = themeButtonTokensCallback(state)
+
+        const shouldUseTransparentBackground =
+          isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus
+
+        return {
+          ...themeButtonTokens,
+          ...(variant?.width === 'equal' && staticStyles.equalWidth),
+          ...(shouldUseTransparentBackground && { backgroundColor: 'transparent' }),
+          alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
+        }
+      },
+      [themeButtonTokensCallback, isMobileNonContained, variant?.width]
+    )
+
+    const fieldsetStyles = useMemo(
+      () => ({
+        ...staticStyles.fieldsetBase,
+        borderRadius,
+        backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+        padding,
+        width: variant?.width === 'equal' ? '100%' : 'auto'
+      }),
+      [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]
+    )
+
+    const viewStyles = useMemo(
+      () => ({
+        ...staticStyles.viewBase,
+        flexDirection: direction === 'column' ? 'column' : 'row',
+        gap: gapValue || 0,
+        justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
+      }),
+      [direction, gapValue, variant?.width]
+    )
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,
@@ -130,24 +146,10 @@ const ButtonGroup = React.forwardRef(
         inactive={inactive}
         validation={validation}
         accessibilityRole={accessibilityRole}
-        style={{
-          borderRadius,
-          backgroundColor,
-          padding,
-          ...(Platform.OS === 'web'
-            ? { gap, width: variant?.width === 'equal' ? '100%' : 'auto' }
-            : { alignSelf: 'flex-start' })
-        }}
+        style={fieldsetStyles}
         {...selectProps(rest)}
       >
-        <StackWrap
-          accessibilityRole={innerRole}
-          space={space}
-          direction={direction}
-          tokens={stackTokens}
-          gap={gap}
-          ref={ref}
-        >
+        <View accessibilityRole={innerRole} style={viewStyles}>
           {items.map(
             ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
               const isSelected = currentValues.includes(id)
@@ -193,7 +195,7 @@ const ButtonGroup = React.forwardRef(
               )
             }
           )}
-        </StackWrap>
+        </View>
       </Fieldset>
     )
   }
@@ -309,4 +311,19 @@ ButtonGroup.propTypes = {
   copy: PropTypes.oneOf(['en', 'fr'])
 }
 
+const staticStyles = StyleSheet.create({
+  fieldsetBase: {
+    alignSelf: 'flex-start',
+    display: 'inline'
+  },
+  viewBase: {
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  },
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  }
+})
+
 export default ButtonGroup