@telus-uds/components-base 3.30.0 → 3.32.0

package/lib/esm/Card/CardBase.js

@@ -15,9 +15,7 @@ import FlexGridCol from '../FlexGrid/Col';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const GRID_COLUMNS = 12;
-const isOverlayColor = color => {
-  return color && typeof color === 'string' && color.startsWith('rgba(');
-};
+const isOverlayColor = color => color && typeof color === 'string' && color.startsWith('rgba(');
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -26,7 +24,8 @@ const setBackgroundImage = _ref => {
     backgroundImagePosition,
     backgroundImageAlign,
     content,
-    cardStyle
+    cardStyle,
+    testID
   } = _ref;
   const borderRadius = cardStyle?.borderRadius || 0;
   const borderWidth = cardStyle?.borderWidth || 0;
@@ -86,6 +85,7 @@ const setBackgroundImage = _ref => {
         style: [staticStyles.imageBackground, backgroundImageStyle],
         role: "img",
         "aria-label": alt,
+        testID: testID,
         children: content
       });
     }
@@ -100,7 +100,8 @@ const setBackgroundImage = _ref => {
         style: [staticStyles.containImage, positionStyles],
         accessible: true,
         accessibilityLabel: alt,
-        accessibilityIgnoresInvertColors: true
+        accessibilityIgnoresInvertColors: true,
+        testID: testID
       }), /*#__PURE__*/_jsx(View, {
         style: staticStyles.contentOverlay,
         children: content
@@ -116,6 +117,7 @@ const setBackgroundImage = _ref => {
     style: staticStyles.imageBackground,
     accessible: true,
     accessibilityLabel: alt,
+    testID: testID,
     children: content
   });
 };
@@ -124,22 +126,13 @@ const selectPaddedContentStyles = _ref2 => {
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    hasInteractiveBorder
+    paddingRight
   } = _ref2;
   return {
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight,
-    ...(hasInteractiveBorder ? {
-      borderWidth,
-      borderColor,
-      borderRadius
-    } : {})
+    paddingRight
   };
 };
 const selectInteractiveOverlayStyles = _ref3 => {
@@ -158,12 +151,31 @@ const selectInteractiveOverlayStyles = _ref3 => {
     backgroundColor,
     borderRadius: adjustedBorderRadius,
     pointerEvents: 'none',
-    zIndex: 1
+    zIndex: 3
+  };
+};
+const selectOuterContainerStyles = _ref4 => {
+  let {
+    containerStyle,
+    backgroundColor,
+    borderRadius,
+    borderColor,
+    borderWidth,
+    hasGradientToken
+  } = _ref4;
+  return {
+    ...containerStyle,
+    backgroundColor,
+    borderRadius,
+    ...(hasGradientToken ? {} : {
+      borderColor,
+      borderWidth
+    })
   };
 };
 
 // Ensure explicit selection of tokens
-export const selectStyles = _ref4 => {
+export const selectStyles = function (_ref5) {
   let {
     flex,
     backgroundColor,
@@ -184,7 +196,10 @@ export const selectStyles = _ref4 => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref4;
+  } = _ref5;
+  let {
+    hasBgImage = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web';
   let backgroundImageValue = null;
   if (hasGradient) {
@@ -213,7 +228,11 @@ export const selectStyles = _ref4 => {
     ...(gradient && Platform.OS === 'web' ? {
       backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px ${boxShadowColor}`,
+      // bgImage child fills the content-box and replaces what the inset shadow
+      // used to cover, so we omit it to avoid hiding the image.
+      ...(hasBgImage ? {} : {
+        boxShadow: `inset 0 1000px ${boxShadowColor}`
+      }),
       border: `${borderWidth}px solid transparent`
     } : {}),
     ...(backgroundGradient && Platform.OS === 'web' ? {
@@ -230,7 +249,7 @@ export const selectStyles = _ref4 => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -238,15 +257,14 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     backgroundImage,
     fullBleedContent,
     cardState,
+    testID,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens;
-  const tokensToUse = backgroundImage && backgroundImage.src ? {
-    ...resolvedTokens,
-    gradient: undefined,
-    backgroundGradient: undefined
-  } : resolvedTokens;
-  const cardStyle = selectStyles(tokensToUse);
+  const hasBgImage = Boolean(backgroundImage && backgroundImage.src);
+  const cardStyle = selectStyles(resolvedTokens, {
+    hasBgImage
+  });
   const props = selectProps(rest);
   let content = children;
   const {
@@ -279,31 +297,29 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       ...containerStyle
     } = cardStyle;
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
-    const hasInteractiveBorder = borderWidth && borderWidth > 0;
     const hasInteractiveOverlay = isOverlayColor(backgroundColor);
-    const paddedContent = hasPadding || hasInteractiveBorder ? /*#__PURE__*/_jsx(View, {
+    const outerBackgroundColor = hasInteractiveOverlay ? undefined : backgroundColor;
+    const hasGradientToken = Boolean(resolvedTokens.gradient) && Platform.OS === 'web';
+    const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
       style: selectPaddedContentStyles({
         paddingTop,
         paddingBottom,
         paddingLeft,
-        paddingRight,
-        borderWidth,
-        borderColor,
-        borderRadius,
-        hasInteractiveBorder
+        paddingRight
       }),
       children: children
     }) : children;
     const contentWithOverlay = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [hasInteractiveOverlay && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: paddedContent
+      }), hasInteractiveOverlay && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
         style: selectInteractiveOverlayStyles({
           backgroundColor,
           borderRadius,
           borderWidth
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: staticStyles.contentOverlay,
-        children: paddedContent
+        }),
+        testID: testID && `${testID}-card-base-bg-overlay`
       })]
     });
     content = setBackgroundImage({
@@ -314,17 +330,23 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       backgroundImageAlign,
       content: contentWithOverlay,
       cardStyle: {
-        ...containerStyle,
-        borderRadius
-      }
+        borderRadius,
+        borderWidth
+      },
+      testID: testID && `${testID}-card-base-bg-image`
     });
     return /*#__PURE__*/_jsx(View, {
-      style: {
-        ...containerStyle,
-        borderRadius
-      },
+      style: selectOuterContainerStyles({
+        containerStyle,
+        backgroundColor: outerBackgroundColor,
+        borderRadius,
+        borderColor,
+        borderWidth,
+        hasGradientToken
+      }),
       dataSet: dataSet,
       ref: ref,
+      testID: testID,
       ...props,
       children: content
     });
@@ -364,6 +386,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       style: containerStyle,
       dataSet: dataSet,
       ref: ref,
+      testID: testID,
       ...props,
       children: /*#__PURE__*/_jsx(FlexGrid, {
         children: /*#__PURE__*/_jsx(FlexGridRow, {
@@ -380,6 +403,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
+    testID: testID,
     ...props,
     children: content
   });
@@ -422,6 +446,10 @@ CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
+  /**
+   * Identifier for testing purposes.
+   */
+  testID: PropTypes.string,
   /**
    * Apply background image to the card.
    */

package/lib/esm/ColourToggle/ColourBubble.js

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { resolvePressableTokens } from '../utils/pressability';
 import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType } from '../utils';
 import Tooltip from '../Tooltip';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { UNAVAILABLE_VARIANT } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectGeneralBubbleTokens = _ref => {
   let {
     outerBubbleHeight,
@@ -63,37 +65,70 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const selectOverlayStyles = _ref4 => {
   let {
-    tokens = {},
+    overlayColor,
+    innerBubbleBorderRadius
+  } = _ref4;
+  return {
+    borderRadius: innerBubbleBorderRadius,
+    backgroundColor: overlayColor
+  };
+};
+const selectSlashStyles = (_ref5, unavailable) => {
+  let {
+    slashLightColor,
+    slashDarkColor,
+    slashWidth,
+    slashOffset
+  } = _ref5;
+  return {
+    width: slashWidth,
+    backgroundColor: unavailable === UNAVAILABLE_VARIANT.DARK ? slashDarkColor : slashLightColor,
+    marginLeft: slashOffset
+  };
+};
+const ColourBubble = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    tokens = () => ({}),
     id,
     colourHexCode,
     colourName,
     isSelected,
     onPress,
-    showTooltip
-  } = _ref4;
+    showTooltip,
+    unavailable,
+    isDisabled
+  } = _ref6;
   const defaultTokens = tokens({
     selected: isSelected
   });
-  const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
-  const themeTokens = React.useMemo(() => tokens(), [tokens]);
-  const pressable = /*#__PURE__*/_jsx(Pressable, {
+  const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, isDisabled ? {} : pressState, {});
+  const themeTokens = tokens();
+  const pressable = /*#__PURE__*/_jsxs(Pressable, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
+    disabled: isDisabled,
+    focusable: !isDisabled,
     accessible: true,
     accessibilityRole: "radio",
     accessibilityLabel: colourName,
     accessibilityState: {
-      checked: isSelected
+      checked: isSelected,
+      disabled: isDisabled
     },
     ref: ref,
     testID: id,
-    children: /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(View, {
       style: [selectInnerBubbleTokens(themeTokens), {
         backgroundColor: colourHexCode
-      }]
-    })
+      }],
+      children: unavailable && /*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFillObject, selectOverlayStyles(themeTokens)]
+      })
+    }), unavailable && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.indicator, selectSlashStyles(themeTokens, unavailable)]
+    })]
   });
   if (showTooltip) {
     return /*#__PURE__*/_jsx(Tooltip, {
@@ -135,6 +170,24 @@ ColourBubble.propTypes = {
   /**
    * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
    */
-  showTooltip: PropTypes.bool
+  showTooltip: PropTypes.bool,
+  /**
+   * When set, renders a diagonal indicator over the bubble. Accepts either 'dark' or 'light' to determine the colour of the indicator.
+   */
+  unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+  /**
+   * When true, disables interaction on the bubble.
+   */
+  isDisabled: PropTypes.bool
 };
+const staticStyles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    top: '50%',
+    height: 2,
+    transform: [{
+      rotate: '-45deg'
+    }]
+  }
+});
 export default ColourBubble;

package/lib/esm/ColourToggle/ColourToggle.js

@@ -2,10 +2,12 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
 import { StackWrap } from '../StackView';
 import Typography from '../Typography';
 import ColourBubble from './ColourBubble';
+import { UNAVAILABLE_VARIANT, DICTIONARY_CONTENT_SHAPE } from './constants';
+import DEFAULT_COLOUR_TOGGLE_DICTIONARY from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -16,37 +18,49 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     items,
     onChange,
     showTooltips,
+    copy = 'en',
+    dictionary = DEFAULT_COLOUR_TOGGLE_DICTIONARY,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
   const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const {
     space
   } = getTokens();
-  const {
-    colourName: currentColourName = ''
-  } = items.find(item => item.id === currentColourId) || '';
+  const currentItem = items.find(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    return id === currentColourId;
+  });
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Typography, {
-      children: currentColourName
+      children: currentItem?.unavailable ? `${currentItem.colourName} ${getCopy('unavailable')}` : currentItem?.colourName ?? ''
     }), /*#__PURE__*/_jsx(StackWrap, {
       space: space,
       accessibilityRole: "radiogroup",
-      children: items.map((_ref2, index) => {
+      children: items.map((_ref3, index) => {
         let {
           id,
           colourHexCode,
-          colourName
-        } = _ref2;
+          colourName,
+          unavailable,
+          disabled
+        } = _ref3;
         const colourBubbleId = id || `ColourBubble[${index}]`;
         const handleChangeColour = event => {
           setCurrentColourId(id);
           onChange?.(event, {
             id,
             colourHexCode,
-            colourName
+            colourName,
+            unavailable
           });
         };
         return /*#__PURE__*/_jsx(ColourBubble, {
@@ -56,7 +70,9 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           colourHexCode: colourHexCode,
           colourName: colourName,
           onPress: handleChangeColour,
-          showTooltip: showTooltips
+          showTooltip: showTooltips,
+          unavailable: unavailable,
+          isDisabled: !!disabled
         }, colourBubbleId);
       })
     })]
@@ -83,7 +99,9 @@ ColourToggle.propTypes = {
   items: PropTypes.arrayOf(PropTypes.exact({
     colourHexCode: PropTypes.string,
     colourName: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    unavailable: PropTypes.oneOf(Object.values(UNAVAILABLE_VARIANT)),
+    disabled: PropTypes.bool
   })),
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
@@ -92,6 +110,17 @@ ColourToggle.propTypes = {
   /**
    * When true, displays each colour's name as a tooltip on hover (web only).
    */
-  showTooltips: PropTypes.bool
+  showTooltips: PropTypes.bool,
+  /**
+   * Select English or French copy.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Override default labels.
+   */
+  dictionary: PropTypes.shape({
+    en: DICTIONARY_CONTENT_SHAPE,
+    fr: DICTIONARY_CONTENT_SHAPE
+  })
 };
 export default ColourToggle;

package/lib/esm/ColourToggle/constants.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export const UNAVAILABLE_VARIANT = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+export const DICTIONARY_CONTENT_SHAPE = PropTypes.shape({
+  unavailable: PropTypes.string
+});

package/lib/esm/ColourToggle/dictionary.js

@@ -0,0 +1,9 @@
+const DEFAULT_COLOUR_TOGGLE_DICTIONARY = {
+  en: {
+    unavailable: '(Out of stock)'
+  },
+  fr: {
+    unavailable: '(En rupture de stock)'
+  }
+};
+export default DEFAULT_COLOUR_TOGGLE_DICTIONARY;

package/lib/esm/Listbox/ListboxOverlay.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import Portal from '../Portal';
 import { useThemeTokens } from '../ThemeProvider';
 import Card from '../Card';
@@ -60,7 +61,12 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         paddingLeft: paddingHorizontal,
         paddingRight: paddingHorizontal
       },
-      children: children
+      children: Platform.OS !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          maxHeight
+        },
+        children: children
+      }) : children
     })
   });
 });

package/lib/esm/MultiSelectFilter/ModalOverlay.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { Portal } from '@gorhom/portal';
+import { Portal as GorhomPortal } from '@gorhom/portal';
+import LocalPortal from '../Portal/Portal';
 import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
@@ -116,7 +117,12 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     copy
   });
   const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/_jsx(Portal, {
+
+  // On web, use the local Portal (always appends to document.body) to ensure correct
+  // absolute positioning in MFE/iframe contexts. @gorhom/portal may render its host
+  // outside the iframe's document, causing coordinate mismatches when scrolled.
+  const PortalComponent = Platform.OS === 'web' ? LocalPortal : GorhomPortal;
+  return /*#__PURE__*/_jsx(PortalComponent, {
     children: /*#__PURE__*/_jsx(View, {
       ref: containerRef,
       onLayout: onLayout,

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Portal } from '@gorhom/portal';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Dimensions from "react-native-web/dist/exports/Dimensions";
@@ -212,20 +211,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsOpen(false);
     onCancel();
   };
-  const appRootRef = React.useRef(null);
-  const [rootOffsets, setRootOffsets] = React.useState(null);
-  React.useEffect(() => {
-    if (rootOffsets) return;
-    appRootRef.current?.measureInWindow((x, y) => {
-      // Only set offsets if they are positive
-      // this is because we want to avoid negative offsets that could cause
-      // the dropdown to be positioned incorrectly in some situations
-      if (y > 0) setRootOffsets({
-        horizontal: x,
-        vertical: y
-      });
-    });
-  }, [isOpen, rootOffsets]);
   const {
     align,
     offsets
@@ -242,8 +227,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         left: 'left'
       },
       offsets: {
-        vertical: 4 - (rootOffsets?.vertical || 0),
-        horizontal: -rootOffsets?.horizontal || 0
+        vertical: 4
       }
     }
   });
@@ -380,12 +364,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     })]
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(View, {
-        ref: appRootRef,
-        style: styles.appRootRef
-      })
-    }), /*#__PURE__*/_jsx(ButtonDropdown, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -466,11 +445,6 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
-  },
-  appRootRef: {
-    position: 'absolute',
-    top: 0,
-    left: 0
   }
 });
 

package/lib/esm/TextInput/TextInputBase.js

@@ -272,7 +272,8 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   }, [element, pattern]);
   const handleChangeText = event => {
     const text = event.nativeEvent?.text ?? event.target?.value;
-    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text;
+    // Do NOT use `|| undefined`: empty string is falsy and would break the controlled contract
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') ?? '' : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');

package/lib/esm/Validator/Validator.js

@@ -199,7 +199,11 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   // Sync external value prop to internal state
   React.useEffect(() => {
-    if (value && Number(value).toString() !== 'NaN') {
+    if (value === '') {
+      setCodes(Array(validatorsLength).fill(''));
+      return;
+    }
+    if (Number(value).toString() !== 'NaN') {
       const digits = value.split('').slice(0, validatorsLength);
       const newCodes = Array(validatorsLength).fill('');
       digits.forEach((digit, i) => {