@telus-uds/components-base 3.7.1 → 3.9.0

package/lib/cjs/Card/Card.js

@@ -133,6 +133,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const selected = interactiveCard?.variant?.selected;
   const inactive = interactiveCard?.variant?.inactive;
   const selectionType = interactiveCard?.selectionType;
+  const isControl = interactiveCard?.variant?.isControl === true;
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
     interactive: true,
     ...(interactiveCard?.variant || {})
@@ -200,6 +201,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     cardStyles = themeTokens;
   }
   const renderInputPerSelectionType = props => {
+    if (!isControl) {
+      return null;
+    }
     switch (selectionType) {
       case SelectionType.Checkbox:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -227,17 +231,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         return null;
     }
   };
-  const renderNoSelectionView = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight
-    },
-    children: children
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardBase.default, {
       ref: ref,
       tokens: interactiveCard?.body ? restOfTokens : cardStyles,
       backgroundImage: backgroundImage,
@@ -245,41 +240,39 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         media: mediaIds
       },
       ...selectProps(rest),
-      children: interactiveCard?.body ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
-          ref: ref,
-          tokens: getThemeTokens,
-          dataSet: dataSet,
-          onPress: onPress,
-          href: interactiveCard?.href,
-          hrefAttrs: interactiveCard?.hrefAttrs,
-          ...selectProps(rest),
-          children: cardState => {
-            const {
-              iconColor: checkColor,
-              inputBackgroundColor: boxBackgroundColor,
-              iconBackgroundColor: checkBackgroundColor
-            } = getThemeTokens({
-              ...cardState,
-              selected,
-              interactive: true,
-              isControl: true
-            }, interactiveCard?.tokens);
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [renderInputPerSelectionType(getInputProps({
-                id,
-                checkColor,
-                boxBackgroundColor,
-                checkBackgroundColor,
-                isControlled: true,
-                isChecked: selected || cardState?.hover,
-                isInactive: inactive,
-                onPress
-              })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
-            });
-          }
-        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
-      }) : children
+      children: [interactiveCard?.body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        href: interactiveCard?.href,
+        hrefAttrs: interactiveCard?.hrefAttrs,
+        ...selectProps(rest),
+        children: cardState => {
+          const {
+            iconColor: checkColor,
+            inputBackgroundColor: boxBackgroundColor,
+            iconBackgroundColor: checkBackgroundColor
+          } = getThemeTokens({
+            ...cardState,
+            selected,
+            interactive: true,
+            isControl
+          }, interactiveCard?.tokens);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [renderInputPerSelectionType(getInputProps({
+              id,
+              checkColor,
+              boxBackgroundColor,
+              checkBackgroundColor,
+              isControlled: true,
+              isChecked: selected || cardState?.hover,
+              isInactive: inactive,
+              onPress
+            })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
+          });
+        }
+      }), children]
     })
   });
 });

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -45,7 +45,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
   const isFocusVisible = _Platform.default.OS === 'web' ? focus && !pressed && !hover : expanded;
   const linkTokens = (0, _ThemeProvider.useThemeTokens)('Link', {}, {
     ...variant,
-    quiet: expanded ?? quiet
+    quiet
   }, {
     focus: isFocusVisible,
     hover,

package/lib/cjs/List/ListItemMark.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const tokenTypes = exports.tokenTypes = {
@@ -60,6 +61,7 @@ const selectBulletContainerStyles = _ref4 => {
     alignItems: itemBulletContainerAlign
   };
 };
+const getIconColorVariants = iconVariants => iconVariants?.filter(variant => variant[0] === 'color').map(variant => variant[1]);
 
 /**
  * Subcomponent used within ListItem and similar components for rendering bullets or icons
@@ -78,6 +80,10 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
+
+  // TODO: Remove it when iconColor custom colors are deprecated.
+  const iconVariants = (0, _utils.useVariants)('Icon');
+  const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -85,10 +91,15 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: icon,
         tokens: {
-          size: iconSize ?? iconTokens.size
+          size: iconSize ?? iconTokens.size,
+          ...((iconColor && !iconColorVariants?.includes(iconColor) || !iconColor) && {
+            color: iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
+          })
         },
         variant: {
-          color: iconColor ?? iconTokens.color
+          ...(iconColorVariants?.includes(iconColor) && {
+            color: iconColor
+          })
         }
       })
     });

package/lib/cjs/MultiSelectFilter/ModalOverlay.js

@@ -16,6 +16,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _Card = _interopRequireDefault(require("../Card"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _useDetectOutsideClick = _interopRequireDefault(require("../utils/useDetectOutsideClick"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const staticStyles = _StyleSheet.default.create({
@@ -62,6 +63,7 @@ const staticStyles = _StyleSheet.default.create({
 });
 const selectContainerStyle = (enableFullscreen, themeTokens) => ({
   borderColor: themeTokens.borderColor,
+  backgroundColor: themeTokens.backgroundColor,
   ..._Platform.default.select({
     web: {
       position: enableFullscreen ? 'fixed' : 'absolute'
@@ -96,13 +98,16 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     copy,
     onClose,
-    enableFullscreen = false
+    enableFullscreen = false,
+    dismissWhenPressedOutside = false
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
+  const containerRef = _react.default.useRef(ref || null);
+  (0, _useDetectOutsideClick.default)(containerRef, onClose, dismissWhenPressedOutside);
   const containerWidthHeight = {
     minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
     minHeight: maxHeight ? maxHeightSize : minHeight,
@@ -110,7 +115,8 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     maxHeight: maxHeightSize
   };
   const {
-    closeIcon: CloseIconComponent
+    closeIcon: CloseIconComponent,
+    backgroundColor
   } = themeTokens;
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
@@ -119,11 +125,14 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const closeLabel = getCopy('closeButton');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      ref: ref,
+      ref: containerRef,
       onLayout: onLayout,
       style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
-        tokens: staticStyles.card,
+        tokens: {
+          ...staticStyles.card,
+          backgroundColor
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
@@ -157,6 +166,11 @@ ModalOverlay.propTypes = {
   tokens: (0, _utils.getTokensPropType)('Modal'),
   copy: _utils.copyPropTypes,
   onClose: _propTypes.default.func,
-  enableFullscreen: _propTypes.default.bool
+  enableFullscreen: _propTypes.default.bool,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: _propTypes.default.bool
 };
 var _default = exports.default = ModalOverlay;

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -92,6 +92,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     inactive = false,
     rowLimit = 12,
     dictionary = _dictionary.default,
+    dismissWhenPressedOutside = false,
     ...rest
   } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -141,6 +142,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     buttonBackgroundColor,
     iconColorSelected,
     buttonBackgroundColorSelected,
+    containerBorderColor,
     ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
@@ -286,7 +288,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
             ...headerStyles,
             lineHeight: headerLineHeight
           },
-          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label)
         })
       })
     }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -307,6 +309,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       style: styles.options,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
         onLayout: handleScrollViewLayout,
+        style: styles.scrollContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
           distribute: "between",
           onLayout: handleRowLayout,
@@ -325,12 +328,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     })]
   });
   const controlsContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isScrolling ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+    children: [isScrolling && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
       tokens: {
         color: dividerColor
-      },
-      space: 4
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 4
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlsTokens(restTokens),
@@ -387,7 +389,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       minWidth: windowWidth,
       tokens: {
         ...tokens,
-        maxWidth: true
+        maxWidth: true,
+        borderColor: containerBorderColor
       },
       copy: copy,
       isReady: isReady,
@@ -403,8 +406,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
         })]
       })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
-      overlaidPosition: overlaidPosition,
+      dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
+      overlaidPosition: overlaidPosition,
       maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -412,7 +416,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
       minWidth: minWidth,
       tokens: {
         ...tokens,
-        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
+        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth,
+        borderColor: containerBorderColor
       },
       copy: copy,
       isReady: isReady,
@@ -440,6 +445,9 @@ const styles = _StyleSheet.default.create({
   },
   options: {
     flex: 1
+  },
+  scrollContainer: {
+    padding: 1
   }
 });
 
@@ -548,6 +556,11 @@ MultiSelectFilter.propTypes = {
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.
    */
-  rowLimit: _propTypes.default.number
+  rowLimit: _propTypes.default.number,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: _propTypes.default.bool
 };
 var _default = exports.default = MultiSelectFilter;

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -101,6 +101,17 @@ const selectSwitchStyles = _ref6 => {
     })
   };
 };
+const selectMobileTokens = tokens => ({
+  ..._Platform.default.select({
+    web: {},
+    default: {
+      switchSize: tokens?.mobileSwitchSize,
+      trackHeight: tokens?.mobileTrackHeight,
+      width: tokens?.mobileWidth,
+      trackBorderWidth: tokens?.mobileTrackBorderWidth
+    }
+  })
+});
 const selectLabelStyles = _ref7 => {
   let {
     labelMarginLeft
@@ -153,7 +164,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     onChange
   });
   const handlePress = event => setValue(!currentValue, event);
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState), getTokens(themeTokens));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState, selectMobileTokens(themeTokens)), getTokens(themeTokens, selectMobileTokens(themeTokens)));
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -186,7 +197,7 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
       onPress: handlePress,
       ...selectProps(rest),
       children: buttonState => {
-        const stateTokens = getTokens(buttonState);
+        const stateTokens = getTokens(buttonState, selectMobileTokens(themeTokens));
         const IconComponent = stateTokens.icon;
         const switchStyles = selectSwitchStyles(stateTokens);
         const trackStyles = selectTrackStyles(stateTokens);

package/lib/cjs/Validator/Validator.js

@@ -44,7 +44,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [individualCodes, setIndividualCodes] = _react.default.useState({});
+  const [, setIndividualCodes] = _react.default.useState({});
   const [text, setText] = _react.default.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
@@ -62,64 +62,85 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const [codeReferences, singleCodes] = _react.default.useMemo(() => {
     const codes = [];
     const valueCodes = {};
-    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+    Array.from({
+      length: validatorsLength
+    }, (_, i) => {
       codes[prefix + i] = /*#__PURE__*/_react.default.createRef();
       valueCodes[prefix + i] = '';
       valueCodes[prefix + i + sufixValidation] = '';
-    }
+      return null;
+    });
     return [codes, valueCodes];
-  }, []);
-  const handleSingleCodes = (codeId, val, validation) => {
+  }, [validatorsLength, prefix, sufixValidation]);
+  const handleSingleCodes = _react.default.useCallback((codeId, val, validation) => {
     singleCodes[codeId] = val;
     singleCodes[codeId + sufixValidation] = validation;
-    /* eslint-disable no-unused-expressions */
-    setIndividualCodes({
-      ...individualCodes,
+    setIndividualCodes(prev => ({
+      ...prev,
       [codeId]: val
-    });
-  };
-  const changeDataMasking = boxElement => {
+    }));
+  }, [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.value = charMasking;
-  };
-  const handleChangeCode = () => {
-    let code = '';
-    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
-    if (typeof onChange === 'function') onChange(code, singleCodes);
-  };
-  const handleChangeCodeValues = (event, codeId, nextIndex) => {
+    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;
     const val = event.nativeEvent?.value || event.target?.value;
-    if (Number(val).toString() === 'NaN') {
-      codeElement.value = singleCodes[codeId] ?? '';
-      return;
+
+    // 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, codeElement?.value ?? singleCodes[codeId], 'success');
+    handleSingleCodes(codeId, numericOnly, numericOnly ? 'success' : '');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
-      codeElement.blur();
+      codeElement?.blur();
       changeDataMasking(codeElement);
       return;
     }
-    if (codeElement?.value?.length > 0) {
-      codeReferences[prefix + nextIndex].current.focus();
+    if (numericOnly.length > 0) {
+      const nextElement = codeReferences[prefix + nextIndex]?.current;
+      nextElement?.focus();
       changeDataMasking(codeElement);
     }
-  };
+  }, [codeReferences, handleSingleCodes, handleChangeCode, validatorsLength, changeDataMasking, prefix]);
   const handleKeyPress = (event, currentIndex, previousIndex) => {
-    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
+    if (!(event.keyCode === 8 || event.code === 'Backspace')) {
+      return;
+    }
     if (currentIndex > 0) {
-      codeReferences[prefix + currentIndex].current.value = '';
-      codeReferences[prefix + previousIndex].current.focus();
+      const currentElement = codeReferences[prefix + currentIndex]?.current;
+      const previousElement = codeReferences[prefix + previousIndex]?.current;
+      if (currentElement && currentElement.value) {
+        currentElement.value = '';
+      }
+      previousElement?.focus();
     }
     handleSingleCodes(prefix + currentIndex, '', '');
     handleChangeCode();
   };
   const getCodeComponents = () => {
-    const components = [];
-    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+    return Array.from({
+      length: validatorsLength
+    }, (_, i) => {
       const codeId = prefix + i;
       const codeInputProps = {
         nativeID: codeId,
@@ -127,65 +148,115 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         ref: codeReferences[codeId] ?? null,
         validation: strValidation || singleCodes[codeId + sufixValidation],
         tokens: selectCodeTextInputTokens(themeTokens),
-        onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
+        onFocus: () => {
+          const element = codeReferences[codeId]?.current;
+          if (_Platform.default.OS === 'web' && element?.select) {
+            return element.select() ?? null;
+          }
+          if (element?.focus) {
+            return element.focus() ?? null;
+          }
+          return null;
+        },
         onKeyPress: event => handleKeyPress(event, i, i - 1),
         onMouseOver: handleMouseOver,
         onMouseOut: handleMouseOut,
         inactive
       };
-      codeInputProps.validation || delete codeInputProps.validation;
-      components.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      if (!codeInputProps.validation) {
+        delete codeInputProps.validation;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: staticStyles.codeInputWidth,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
           ...codeInputProps
         })
-      }, codeId));
-    }
-    return components;
+      }, codeId);
+    });
   };
   _react.default.useEffect(() => {
-    /* eslint-disable no-unused-expressions */
-    if (Number(value).toString() !== 'NaN') setText(value);
+    if (Number(value).toString() !== 'NaN') {
+      setText(value);
+    }
   }, [value]);
-
-  /* eslint-disable react-hooks/exhaustive-deps */
   _react.default.useEffect(() => {
-    for (let i = 0; i < validatorsLength; i += 1) {
-      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
+    Array.from({
+      length: validatorsLength
+    }, (_, i) => {
+      const element = codeReferences[prefix + i]?.current;
+      if (element && element.value !== undefined) {
+        if (mask && text[i]) {
+          element.value = mask;
+        } else {
+          element.value = text[i] ?? '';
+        }
+      }
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
-    }
-  }, [text]);
-
-  /* eslint-disable react-hooks/exhaustive-deps */
+      return null;
+    });
+  }, [text, mask, validatorsLength, prefix, codeReferences, handleSingleCodes]);
   _react.default.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;
+      });
       const clipBoardText = event.clipboardData.getData('text');
-      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
+
+      // 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 handleCopy = event => {
-      let clipBoardText = '';
-      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
+      const clipBoardText = Array.from({
+        length: validatorsLength
+      }, (_, i) => singleCodes[prefix + i] || '').join('');
       event.clipboardData.setData('text/plain', clipBoardText);
       event.preventDefault();
     };
     if (_Platform.default.OS === 'web') {
-      for (let i = 0; i < validatorsLength; i += 1) {
-        codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
-        codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
-        codeReferences[prefix + i].current.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
-      }
+      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));
+        }
+        return null;
+      });
     }
     return () => {
-      if (_Platform.default.oldValue === 'web') {
-        for (let i = 0; i < validatorsLength; i += 1) {
-          codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode);
-          codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy);
-          codeReferences[prefix + i]?.current?.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
-        }
+      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]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
     ...supportsProps,
     feedbackProps: {