@telus-uds/components-base 3.21.0 → 3.23.0

package/lib/cjs/Validator/Validator.js

@@ -44,11 +44,10 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [, setIndividualCodes] = _react.default.useState({});
-  const [text, setText] = _react.default.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
   const sufixValidation = 'Validation';
+  const [codes, setCodes] = _react.default.useState(() => Array(validatorsLength).fill(''));
   const [isHover, setIsHover] = _react.default.useState(false);
   const handleMouseOver = () => {
     setIsHover(true);
@@ -59,84 +58,87 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = _react.default.useMemo(() => {
-    const codes = [];
-    const valueCodes = {};
-    Array.from({
+
+  // Create refs for input elements
+  const codeReferences = _react.default.useMemo(() => {
+    return Array.from({
       length: validatorsLength
-    }, (_, i) => {
-      codes[prefix + i] = /*#__PURE__*/_react.default.createRef();
-      valueCodes[prefix + i] = '';
-      valueCodes[prefix + i + sufixValidation] = '';
-      return null;
+    }, () => /*#__PURE__*/_react.default.createRef());
+  }, [validatorsLength]);
+
+  // Keep onChange and mask in refs to avoid re-creating event listeners
+  const onChangeRef = _react.default.useRef(onChange);
+  const maskRef = _react.default.useRef(mask);
+  _react.default.useEffect(() => {
+    onChangeRef.current = onChange;
+    maskRef.current = mask;
+  }, [onChange, mask]);
+
+  // Update a single code digit
+  const updateCode = _react.default.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.default.useCallback((codeId, val, validation) => {
-    singleCodes[codeId] = val;
-    singleCodes[codeId + sufixValidation] = validation;
-    setIndividualCodes(prev => ({
-      ...prev,
-      [codeId]: val
-    }));
-  }, [singleCodes, sufixValidation]);
-  const changeDataMasking = _react.default.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.default.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.default.useCallback((event, codeId, nextIndex) => {
-    const codeElement = codeReferences[codeId]?.current;
+  }, [prefix, sufixValidation]);
+
+  // Handle input change
+  const handleInputChange = _react.default.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.default.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
@@ -145,11 +147,14 @@ const Validator = /*#__PURE__*/_react.default.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.default.OS !== 'web' && mask),
+        selectTextOnFocus: _Platform.default.OS !== 'web',
         onFocus: () => {
-          const element = codeReferences[codeId]?.current;
+          const element = codeReferences[i]?.current;
           if (_Platform.default.OS === 'web' && element?.select) {
             return element.select() ?? null;
           }
@@ -158,11 +163,35 @@ const Validator = /*#__PURE__*/_react.default.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.default.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;
       }
@@ -174,89 +203,96 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }, codeId);
     });
   };
+
+  // Sync external value prop to internal state
   _react.default.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.default.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.default.useEffect(() => {
-    const handlePasteCode = event => {
+    if (_Platform.default.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.default.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.default.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__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
     ...supportsProps,
     feedbackProps: {

package/lib/cjs/index.js

@@ -93,6 +93,7 @@ var _exportNames = {
   applyTextStyles: true,
   applyShadowToken: true,
   useResponsiveThemeTokens: true,
+  useResponsiveThemeTokensCallback: true,
   Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
@@ -605,6 +606,12 @@ Object.defineProperty(exports, "useResponsiveThemeTokens", {
     return _ThemeProvider.useResponsiveThemeTokens;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useResponsiveThemeTokensCallback;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {

package/lib/esm/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokensCallback, useResponsiveThemeTokensCallback, useTheme } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,19 +10,28 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityRole = 'button',
     tokens,
     variant,
+    heightFull = true,
     ...props
   } = _ref;
   const viewport = useViewport();
-  const buttonVariant = {
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokensCallback : useThemeTokensCallback;
+  const getTokens = useTokens('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, {
     ...props,
     tokens: getTokens,
+    heightFull: heightFull,
     accessibilityRole: accessibilityRole,
-    ref: ref
+    ref: ref,
+    viewport: viewport
   });
 });
 Button.displayName = 'Button';

package/lib/esm/Button/ButtonBase.js

@@ -6,7 +6,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps, createMediaQueryStyles, StyleSheet as StyleSheetUtils } from '../utils';
 import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps, contentfulProps]);
@@ -33,23 +33,27 @@ const selectFlexAndWidthStyles = _ref2 => {
   }
   return styles;
 };
-const selectOuterContainerStyles = _ref3 => {
+const selectOuterContainerStyles = (_ref3, heightFull) => {
   let {
     opacity,
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     borderRadius,
-    outerBackgroundColor
+    outerBackgroundColor,
+    alignSelf
   } = _ref3;
   return {
+    backgroundColor: outerBackgroundColor,
+    opacity,
     ...Platform.select({
       native: {
+        alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+      },
+      web: heightFull ? {} : {
         alignSelf: 'flex-start'
       }
     }),
-    backgroundColor: outerBackgroundColor,
-    opacity,
     ...applyOuterBorder({
       outerBorderGap,
       outerBorderWidth,
@@ -248,8 +252,16 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     icon,
     iconPosition = icon ? 'left' : undefined,
     iconProps,
+    heightFull = true,
     ...rawRest
   } = _ref12;
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    viewport
+  } = rawRest;
+  const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport;
   const {
     onPress,
     ...rest
@@ -261,15 +273,55 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   };
   const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
+  let layoutMediaQueryStyles;
+  let flexAndWidthStylesIds;
+  if (enableMediaQueryStyleSheet) {
+    const defaultPressableState = {
+      pressed: false,
+      hovered: false,
+      focused: false
+    };
+    const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
+      let [vp, viewportTokens] = _ref13;
+      const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
+      acc[vp] = {
+        ...staticStyles.row,
+        ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+        ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+        ...selectOuterSizeStyles(viewportTokens)
+      };
+      return acc;
+    }, {});
+    const mediaQueryStyles = createMediaQueryStyles(layoutTokensByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheetUtils.create({
+      layout: {
+        ...mediaQueryStyles
+      }
+    });
+    layoutMediaQueryStyles = styles.layout;
+    flexAndWidthStylesIds = ids.layout;
+  }
   const getPressableStyle = pressableState => {
+    if (enableMediaQueryStyleSheet) {
+      const themeTokens = resolveButtonTokens(pressableState)[viewport];
+      return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)];
+    }
     const themeTokens = resolveButtonTokens(pressableState);
-    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens, heightFull), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
-  const {
-    themeOptions
-  } = useTheme();
+  const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
+    dataSet: {
+      ...(flexAndWidthStylesIds ? {
+        media: flexAndWidthStylesIds
+      } : {}),
+      ...rawRest.dataSet
+    }
+  } : {};
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -281,8 +333,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     disabled: inactive,
     hrefAttrs: hrefAttrs,
     ...systemProps,
+    ...dataSetProp,
     children: pressableState => {
-      const themeTokens = resolveButtonTokens(pressableState);
+      const themeTokens = enableMediaQueryStyleSheet ? resolveButtonTokens(pressableState)[viewport] : resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({

package/lib/esm/Button/ButtonDropdown.js

@@ -103,6 +103,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     accessibilityRole = 'radio',
     description,
     singleOption,
+    heightFull = true,
     ...props
   } = _ref2;
   const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
@@ -145,6 +146,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
+    heightFull: heightFull,
     inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,