@telus-uds/components-base 1.18.1 → 1.19.1

package/lib/Tooltip/Tooltip.native.js

@@ -0,0 +1,357 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _shared = _interopRequireDefault(require("./shared"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _Backdrop = _interopRequireDefault(require("./Backdrop"));
+
+var _getTooltipPosition = _interopRequireDefault(require("./getTooltipPosition"));
+
+var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
+
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const selectTooltipStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  };
+};
+
+const selectTooltipShadowStyles = _ref2 => {
+  let {
+    shadow,
+    borderRadius
+  } = _ref2;
+  return {
+    borderRadius,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
+
+const selectTooltipPositionStyles = _ref3 => {
+  let {
+    top,
+    left,
+    width
+  } = _ref3;
+  return {
+    top,
+    left,
+    width
+  };
+};
+
+const selectArrowStyles = (_ref4, _ref5) => {
+  let {
+    backgroundColor,
+    arrowWidth,
+    arrowBorderRadius,
+    shadow
+  } = _ref4;
+  let {
+    position,
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = _ref5;
+  // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
+  const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2); // position the arrow at the side and center of the tooltip - this happens before rotation
+  // so we use the rectangle size as basis
+
+  const verticalOffset = -1 * rectangleSide / 2;
+  const horizontalOffset = rectangleSide / 2; // percentage-based absolute positioning doesn't act well on native, so we have to
+  // calculate the pixel values
+
+  const directionalStyles = {
+    above: {
+      bottom: verticalOffset,
+      left: tooltipWidth / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '45deg'
+      }]
+    },
+    below: {
+      top: verticalOffset,
+      left: tooltipWidth / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '-135deg'
+      }]
+    },
+    left: {
+      right: verticalOffset,
+      top: tooltipHeight / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '-45deg'
+      }]
+    },
+    right: {
+      left: verticalOffset,
+      top: tooltipHeight / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '135deg'
+      }]
+    }
+  };
+  return {
+    backgroundColor,
+    width: rectangleSide,
+    height: rectangleSide,
+    borderBottomRightRadius: arrowBorderRadius,
+    // this corner will be the arrow tip after rotation
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...directionalStyles[position]
+  };
+};
+
+const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+
+const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+  pressableState: pressableState,
+  variant: variant
+});
+/**
+ * Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
+ * to help a user fill it in, or as a standalone component.
+ *
+ * By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach
+ * a tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).
+ *
+ * ### Positioning
+ * By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.
+ * You may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.
+ *
+ * ### Usage criteria
+ * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
+ * - Tooltips may also be useful when vertical space is an issue.
+ */
+
+
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    children,
+    content,
+    position = 'auto',
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref6;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const controlRef = (0, _react.useRef)();
+  const [controlLayout, setControlLayout] = (0, _react.useState)(null);
+  const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(_Dimensions.default.get('window'));
+  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)(null);
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
+  const {
+    arrowWidth,
+    arrowOffset
+  } = themeTokens;
+  (0, _react.useEffect)(() => {
+    const subscription = _Dimensions.default.addEventListener('change', _ref7 => {
+      let {
+        window
+      } = _ref7;
+      setWindowDimensions(window);
+    });
+
+    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+  });
+
+  const toggleIsOpen = () => setIsOpen(!isOpen);
+
+  const close = () => setIsOpen(false);
+
+  const getPressableState = _ref8 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref8;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused
+    };
+  };
+
+  const onTooltipLayout = _ref9 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref9;
+
+    if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
+      setTooltipDimensions({
+        width: _Platform.default.select({
+          web: width + 0.3,
+          // avoids often unnecessary line breaks due to subpixel rendering of fonts
+          native: width
+        }),
+        height
+      });
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      controlRef.current.measureInWindow((x, y, width, height) => {
+        setControlLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    } else {
+      setControlLayout(null);
+      setTooltipDimensions(null);
+      setTooltipPosition(null);
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    setIsOpen(false);
+  }, [windowDimensions]);
+  (0, _react.useEffect)(() => {
+    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
+      return;
+    }
+
+    const updatedPosition = (0, _getTooltipPosition.default)(position, {
+      controlLayout,
+      tooltipDimensions,
+      windowDimensions,
+      arrowWidth,
+      arrowOffset
+    }); // avoid ending up in an infinite normalization loop
+
+    if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
+      return;
+    }
+
+    setTooltipPosition(updatedPosition);
+  }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
+  const control = children !== undefined ? children : defaultControl;
+  const pressableStyles = control === defaultControl ? _Platform.default.select({
+    web: {
+      outline: 'none'
+    }
+  }) : undefined;
+  const pressableHitSlop = control === defaultControl ? {
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10
+  } : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      onPress: toggleIsOpen,
+      ref: controlRef,
+      onBlur: close,
+      style: pressableStyles,
+      hitSlop: pressableHitSlop,
+      accessibilityLabel: getCopy('a11yText'),
+      accessibilityRole: "button",
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+      onPress: close,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        ref: ref,
+        style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
+        tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        ],
+        onLayout: onTooltipLayout,
+        accessibilityRole: "alert",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectTooltipStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: selectTextStyles(themeTokens),
+            children: content
+          })
+        })]
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'NativeTooltip';
+Tooltip.propTypes = { ...selectedSystemPropTypes,
+  ..._shared.default
+};
+var _default = Tooltip;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    alignItems: 'flex-start'
+  },
+  tooltip: {
+    position: 'absolute',
+    maxWidth: 240,
+    top: 0,
+    left: 0
+  },
+  tooltipHidden: {
+    opacity: 0
+  },
+  arrow: {
+    position: 'absolute'
+  }
+});

package/lib/Tooltip/shared.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const propTypes = {
+  /**
+   * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
+   * pressable state and tooltip variant as an argument.
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+
+  /**
+   * The message. Can be raw text or text components.
+   */
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * Use to place the tooltip in a specific location (only if it fits within viewport).
+   */
+  position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  tokens: (0, _utils.getTokensPropType)('Tooltip'),
+  variant: _utils.variantProp.propType
+};
+var _default = propTypes;
+exports.default = _default;

package/lib/Validator/Validator.js

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../utils");
+
+var _TextInput = require("../TextInput");
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.inputSupportsProps]);
+
+const selectCodeTextInputTokens = _ref => {
+  let {
+    outerBorderColor,
+    outerBackgroundColor
+  } = _ref;
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  };
+};
+
+const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    value = '',
+    inactive,
+    onChange,
+    tokens = {},
+    variant = {},
+    ...rest
+  } = _ref2;
+  const defaultRef = (0, _react.useRef)();
+  const codeRef = ref ?? defaultRef;
+  const {
+    supportsProps
+  } = selectProps(rest);
+  const strValidation = supportsProps.validation;
+  const [individualCodes, setIndividualCodes] = (0, _react.useState)({});
+  const [text, setText] = (0, _react.useState)(value);
+  const validatorsLength = 6;
+  const prefix = 'code';
+  const sufixValidation = 'Validation';
+  const [isHover, setIsHover] = (0, _react.useState)(false);
+
+  const handleMouseOver = () => {
+    setIsHover(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHover(false);
+  };
+
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
+    hover: isHover
+  });
+  const [codeReferences, singleCodes] = (0, _react.useMemo)(() => {
+    const codes = [];
+    const valueCodes = {};
+
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      codes[prefix + i] = /*#__PURE__*/(0, _react.createRef)();
+      valueCodes[prefix + i] = '';
+      valueCodes[prefix + i + sufixValidation] = '';
+    }
+
+    return [codes, valueCodes];
+  }, []);
+
+  const handleSingleCodes = (codeId, val, validation) => {
+    singleCodes[codeId] = val;
+    singleCodes[codeId + sufixValidation] = validation;
+    /* eslint-disable no-unused-expressions */
+
+    setIndividualCodes({ ...individualCodes,
+      [codeId]: val
+    });
+  };
+
+  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) => {
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
+
+    const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
+    const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+
+    if (Number(val).toString() === 'NaN') {
+      codeElement.value = singleCodes[codeId] ?? '';
+      return;
+    }
+
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
+      const oldValue = singleCodes[codeId];
+      const newValue = codeElement.value.replace(oldValue, '');
+      codeElement.value = newValue;
+      handleSingleCodes(codeId, codeElement.value, 'success');
+    }
+
+    handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
+    handleChangeCode();
+
+    if (nextIndex === validatorsLength) {
+      codeElement.blur();
+      return;
+    }
+
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+  };
+
+  const handleKeyPress = (event, currentIndex, previousIndex) => {
+    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
+
+    if (currentIndex > 0) {
+      codeReferences[prefix + currentIndex].current.value = '';
+      codeReferences[prefix + previousIndex].current.focus();
+    }
+
+    handleSingleCodes(prefix + currentIndex, '', '');
+    handleChangeCode();
+  };
+
+  const getCodeComponents = () => {
+    const components = [];
+
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      const codeId = prefix + i;
+      const codeInputProps = {
+        nativeID: codeId,
+        keyboardType: 'numeric',
+        ref: codeReferences[codeId] ?? null,
+        validation: strValidation || singleCodes[codeId + sufixValidation],
+        tokens: selectCodeTextInputTokens(themeTokens),
+        onFocus: () => {
+          var _codeReferences$codeI2, _codeReferences$codeI3;
+
+          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 ? void 0 : (_codeReferences$codeI3 = _codeReferences$codeI2.current) === null || _codeReferences$codeI3 === void 0 ? void 0 : _codeReferences$codeI3.select()) ?? 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, {
+        style: staticStyles.codeInputWidth,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, { ...codeInputProps
+        })
+      }, codeId));
+    }
+
+    return components;
+  };
+
+  (0, _react.useEffect)(() => {
+    /* eslint-disable no-unused-expressions */
+    if (Number(value).toString() !== 'NaN') setText(value);
+  }, [value]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+  (0, _react.useEffect)(() => {
+    for (let i = 0; i < validatorsLength; i += 1) {
+      codeReferences[prefix + i].current.value = text[i] ?? '';
+      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
+    }
+  }, [text]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+  (0, _react.useEffect)(() => {
+    const handlePasteCode = event => {
+      setText('');
+      const clipBoardText = event.clipboardData.getData('text');
+      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
+    };
+
+    const handleCopy = event => {
+      let clipBoardText = '';
+
+      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
+
+      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));
+      }
+    }
+
+    return () => {
+      if (_Platform.default.oldValue === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          var _codeReferences, _codeReferences$curre, _codeReferences2, _codeReferences2$curr, _codeReferences3, _codeReferences3$curr;
+
+          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 ? void 0 : (_codeReferences$curre = _codeReferences.current) === null || _codeReferences$curre === void 0 ? void 0 : _codeReferences$curre.removeEventListener('paste', handlePasteCode);
+          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 ? void 0 : (_codeReferences2$curr = _codeReferences2.current) === null || _codeReferences2$curr === void 0 ? void 0 : _codeReferences2$curr.removeEventListener('copy', handleCopy);
+          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 ? void 0 : (_codeReferences3$curr = _codeReferences3.current) === null || _codeReferences3$curr === void 0 ? void 0 : _codeReferences3$curr.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      space: 2,
+      direction: "row",
+      ref: codeRef,
+      children: getCodeComponents()
+    })
+  });
+});
+Validator.displayName = 'Validator';
+Validator.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
+   */
+  onChange: _propTypes.default.func
+};
+var _default = Validator;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  codeInputWidth: {
+    width: 43
+  }
+});

package/lib/Validator/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Validator = _interopRequireDefault(require("./Validator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Validator.default;
+exports.default = _default;