@moda/om 21.8.0 → 21.9.0

package/dist/index.cjs.js

@@ -12338,6 +12338,273 @@ var Paginator = function Paginator(_ref) {
   })));
 };
 
+var isStyleObject = function isStyleObject(obj) {
+  return _typeof$1(obj) === 'object' && obj !== null;
+};
+var OTPInput = function OTPInput(_a) {
+  var _b = _a.value,
+    value = _b === void 0 ? '' : _b,
+    _c = _a.numInputs,
+    numInputs = _c === void 0 ? 4 : _c,
+    onChange = _a.onChange,
+    onPaste = _a.onPaste,
+    renderInput = _a.renderInput,
+    _d = _a.shouldAutoFocus,
+    shouldAutoFocus = _d === void 0 ? false : _d,
+    _e = _a.inputType,
+    inputType = _e === void 0 ? 'text' : _e,
+    renderSeparator = _a.renderSeparator,
+    placeholder = _a.placeholder,
+    containerStyle = _a.containerStyle,
+    inputStyle = _a.inputStyle,
+    _f = _a.skipDefaultStyles,
+    skipDefaultStyles = _f === void 0 ? false : _f;
+  var _g = React.useState(0),
+    activeInput = _g[0],
+    setActiveInput = _g[1];
+  var inputRefs = React.useRef([]);
+  var getOTPValue = function getOTPValue() {
+    return value ? value.toString().split('') : [];
+  };
+  var isInputNum = inputType === 'number' || inputType === 'tel';
+  React.useEffect(function () {
+    inputRefs.current = inputRefs.current.slice(0, numInputs);
+  }, [numInputs]);
+  React.useEffect(function () {
+    var _a;
+    if (shouldAutoFocus) {
+      (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [shouldAutoFocus]);
+  var getPlaceholderValue = function getPlaceholderValue() {
+    if (typeof placeholder === 'string') {
+      if (placeholder.length === numInputs) {
+        return placeholder;
+      }
+      if (placeholder.length > 0) {
+        console.error('Length of the placeholder should be equal to the number of inputs.');
+      }
+    }
+    return undefined;
+  };
+  var isInputValueValid = function isInputValueValid(value) {
+    var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
+    return isTypeValid && value.trim().length === 1;
+  };
+  var handleChange = function handleChange(event) {
+    var value = event.target.value;
+    if (isInputValueValid(value)) {
+      changeCodeAtFocus(value);
+      focusInput(activeInput + 1);
+    }
+  };
+  var handleInputChange = function handleInputChange(event) {
+    var nativeEvent = event.nativeEvent;
+    var value = event.target.value;
+    if (!isInputValueValid(value)) {
+      // Pasting from the native autofill suggestion on a mobile device can pass
+      // the pasted string as one long input to one of the cells. This ensures
+      // that we handle the full input and not just the first character.
+      if (value.length === numInputs) {
+        var hasInvalidInput = value.split('').some(function (cellInput) {
+          return !isInputValueValid(cellInput);
+        });
+        if (!hasInvalidInput) {
+          handleOTPChange(value.split(''));
+          focusInput(numInputs - 1);
+        }
+      }
+      // @ts-expect-error - This was added previously to handle and edge case
+      // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+      // still needed.
+      if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
+        event.preventDefault();
+        changeCodeAtFocus('');
+        focusInput(activeInput - 1);
+      }
+      // Clear the input if it's not valid value because firefox allows
+      // pasting non-numeric characters in a number type input
+      event.target.value = '';
+    }
+  };
+  var handleFocus = function handleFocus(event) {
+    return function (index) {
+      setActiveInput(index);
+      event.target.select();
+    };
+  };
+  var handleBlur = function handleBlur() {
+    setActiveInput(activeInput - 1);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    var otp = getOTPValue();
+    if ([event.code, event.key].includes('Backspace')) {
+      event.preventDefault();
+      changeCodeAtFocus('');
+      focusInput(activeInput - 1);
+    } else if (event.code === 'Delete') {
+      event.preventDefault();
+      changeCodeAtFocus('');
+    } else if (event.code === 'ArrowLeft') {
+      event.preventDefault();
+      focusInput(activeInput - 1);
+    } else if (event.code === 'ArrowRight') {
+      event.preventDefault();
+      focusInput(activeInput + 1);
+    }
+    // React does not trigger onChange when the same value is entered
+    // again. So we need to focus the next input manually in this case.
+    else if (event.key === otp[activeInput]) {
+      event.preventDefault();
+      focusInput(activeInput + 1);
+    } else if (event.code === 'Spacebar' || event.code === 'Space' || event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+      event.preventDefault();
+    }
+  };
+  var focusInput = function focusInput(index) {
+    var _a, _b;
+    var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+    if (inputRefs.current[activeInput]) {
+      (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+      (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+      setActiveInput(activeInput);
+    }
+  };
+  var changeCodeAtFocus = function changeCodeAtFocus(value) {
+    var otp = getOTPValue();
+    otp[activeInput] = value[0];
+    handleOTPChange(otp);
+  };
+  var handleOTPChange = function handleOTPChange(otp) {
+    var otpValue = otp.join('');
+    onChange(otpValue);
+  };
+  var handlePaste = function handlePaste(event) {
+    var _a;
+    event.preventDefault();
+    var otp = getOTPValue();
+    var nextActiveInput = activeInput;
+    // Get pastedData in an array of max size (num of inputs - current position)
+    var pastedData = event.clipboardData.getData('text/plain').slice(0, numInputs - activeInput).split('');
+    // Prevent pasting if the clipboard data contains non-numeric values for number inputs
+    if (isInputNum && pastedData.some(function (value) {
+      return isNaN(Number(value));
+    })) {
+      return;
+    }
+    // Paste data from focused input onwards
+    for (var pos = 0; pos < numInputs; ++pos) {
+      if (pos >= activeInput && pastedData.length > 0) {
+        otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
+        nextActiveInput++;
+      }
+    }
+    focusInput(nextActiveInput);
+    handleOTPChange(otp);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: Object.assign({
+      display: 'flex',
+      alignItems: 'center'
+    }, isStyleObject(containerStyle) && containerStyle),
+    className: typeof containerStyle === 'string' ? containerStyle : undefined,
+    onPaste: onPaste
+  }, Array.from({
+    length: numInputs
+  }, function (_, index) {
+    return index;
+  }).map(function (index) {
+    var _a, _b, _c;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, renderInput({
+      value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
+      placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+      ref: function ref(element) {
+        return inputRefs.current[index] = element;
+      },
+      onChange: handleChange,
+      onFocus: function onFocus(event) {
+        return handleFocus(event)(index);
+      },
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      autoComplete: 'off',
+      'aria-label': "Please enter OTP character ".concat(index + 1),
+      style: Object.assign(!skipDefaultStyles ? {
+        width: '1em',
+        textAlign: 'center'
+      } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
+      className: typeof inputStyle === 'string' ? inputStyle : undefined,
+      type: inputType,
+      inputMode: isInputNum ? 'numeric' : 'text',
+      onInput: handleInputChange
+    }, index), index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator));
+  }));
+};
+
+var getInputAriaLabel = function getInputAriaLabel(index, inputCount, ariaLabel, label) {
+  var baseLabel = ariaLabel || label || 'One-time password digit';
+  return "".concat(baseLabel, " ").concat(index + 1, " of ").concat(inputCount);
+};
+var OtpInput = function OtpInput(_ref) {
+  var ariaDescribedBy = _ref['aria-describedby'],
+    ariaLabel = _ref['aria-label'],
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? 'one-time-code' : _ref$autoComplete,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    focus = _ref.focus,
+    id = _ref.id,
+    inputClassName = _ref.inputClassName,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? 'tel' : _ref$inputType,
+    label = _ref.label,
+    name = _ref.name,
+    _ref$numInputs = _ref.numInputs,
+    numInputs = _ref$numInputs === void 0 ? 4 : _ref$numInputs,
+    onChange = _ref.onChange,
+    onPaste = _ref.onPaste,
+    placeholder = _ref.placeholder,
+    renderSeparator = _ref.renderSeparator,
+    required = _ref.required,
+    shouldAutoFocus = _ref.shouldAutoFocus,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value;
+  return /*#__PURE__*/React.createElement(OTPInput, {
+    containerStyle: classNames('OtpInput', className),
+    inputType: inputType,
+    numInputs: numInputs,
+    onChange: onChange,
+    onPaste: onPaste,
+    placeholder: placeholder,
+    renderSeparator: renderSeparator,
+    shouldAutoFocus: shouldAutoFocus,
+    skipDefaultStyles: true,
+    value: value,
+    renderInput: function renderInput(inputProps, index) {
+      return /*#__PURE__*/React.createElement("input", _extends$1({}, inputProps, {
+        id: id ? "".concat(id, "-").concat(index + 1) : undefined,
+        autoComplete: autoComplete,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": error ? true : undefined,
+        "aria-label": getInputAriaLabel(index, numInputs, ariaLabel, label),
+        className: classNames(inputProps.className, 'OtpInput__input', inputClassName, {
+          'OtpInput__input--disabled': disabled,
+          'OtpInput__input--error': error,
+          'OtpInput__input--focus': focus
+        }),
+        disabled: disabled,
+        name: name,
+        required: required
+      }));
+    }
+  });
+};
+OtpInput.displayName = 'OtpInput';
+
 var PasswordInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var rest = _extends$1({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useState = React.useState(false),
@@ -12891,6 +13158,7 @@ exports.Modal = Modal;
 exports.ModalOverlay = ModalOverlay;
 exports.MultiSelect = MultiSelect;
 exports.NoLineDivider = NoLineDivider;
+exports.OtpInput = OtpInput;
 exports.Oval = Oval;
 exports.Overlay = Overlay;
 exports.POPOVER_MOUSEOUT_DELAY_MS = POPOVER_MOUSEOUT_DELAY_MS;