@moda/om 21.7.2 → 21.9.0

package/dist/index.cjs.js

@@ -356,18 +356,18 @@ requireFocusVisible();
 
 var dist$4 = {};
 
-var colors = {};
+var colors$1 = {};
 
 var hasRequiredColors;
 function requireColors() {
-  if (hasRequiredColors) return colors;
+  if (hasRequiredColors) return colors$1;
   hasRequiredColors = 1;
-  Object.defineProperty(colors, "__esModule", {
+  Object.defineProperty(colors$1, "__esModule", {
     value: true
   });
-  colors.colors = void 0;
+  colors$1.colors = void 0;
   // THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
-  colors.colors = {
+  colors$1.colors = {
     "all": {
       "coal": "rgb(0, 0, 0)",
       "ink": "rgb(25, 26, 27)",
@@ -452,7 +452,7 @@ function requireColors() {
       "silver": "rgb(217, 217, 217)"
     }
   };
-  return colors;
+  return colors$1;
 }
 
 var typography = {};
@@ -594,7 +594,7 @@ function requireBreakpoints() {
 
 var helpers = {};
 
-var colorNames = {
+var colors = {
   aliceblue: [240, 248, 255],
   antiquewhite: [250, 235, 215],
   aqua: [0, 255, 255],
@@ -744,6 +744,8 @@ var colorNames = {
   yellow: [255, 255, 0],
   yellowgreen: [154, 205, 50]
 };
+for (var key in colors) Object.freeze(colors[key]);
+var colorNames = Object.freeze(colors);
 
 var reverseNames = Object.create(null);
 
@@ -795,8 +797,8 @@ cs.get.rgb = function (string) {
   }
   var abbr = /^#([a-f\d]{3,4})$/i;
   var hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
-  var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
-  var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
+  var rgba = /^rgba?\(\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)\s*(?:[\s,|/]\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(%?)\s*)?\)$/i;
+  var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[\s,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/i;
   var keyword = /^(\w+)$/;
   var rgb = [0, 0, 0, 1];
   var match;
@@ -824,7 +826,7 @@ cs.get.rgb = function (string) {
     }
   } else if (match = string.match(rgba)) {
     for (i = 0; i < 3; i++) {
-      rgb[i] = Number.parseInt(match[i + 1], 10);
+      rgb[i] = Number.parseFloat(match[i + 1]);
     }
     if (match[4]) {
       rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
@@ -836,14 +838,16 @@ cs.get.rgb = function (string) {
     if (match[4]) {
       rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
     }
-  } else if (match = string.match(keyword)) {
+  } else if (match = string.toLowerCase().match(keyword)) {
     if (match[1] === 'transparent') {
       return [0, 0, 0, 0];
     }
     if (!Object.hasOwn(colorNames, match[1])) {
       return null;
     }
-    rgb = colorNames[match[1]];
+
+    // eslint-disable-next-line unicorn/prefer-spread
+    rgb = colorNames[match[1]].slice();
     rgb[3] = 1;
     return rgb;
   } else {
@@ -859,7 +863,7 @@ cs.get.hsl = function (string) {
   if (!string) {
     return null;
   }
-  var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+  var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
   var match = string.match(hsl);
   if (match) {
     var alpha = Number.parseFloat(match[4]);
@@ -875,7 +879,7 @@ cs.get.hwb = function (string) {
   if (!string) {
     return null;
   }
-  var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+  var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*[\s,]\s*([+-]?[\d.]+)%\s*[\s,]\s*([+-]?[\d.]+)%\s*(?:[\s,]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
   var match = string.match(hwb);
   if (match) {
     var alpha = Number.parseFloat(match[4]);
@@ -3116,8 +3120,6 @@ var extractRef$2 = function extractRef(ref) {
 var effectCar = createSidecarMedium();
 var focusHiddenMarker = 'data-focus-on-hidden';
 
-__assign$a({}, RemoveScroll.classNames);
-
 var PREVENT_SCROLL = {
   preventScroll: true
 };
@@ -4890,6 +4892,13 @@ function RemoveScrollSideCar(props) {
     if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
       return false;
     }
+    // allow drag selection (iOS); check if selection's anchorNode is the same as target or contains target
+    var selection = window.getSelection();
+    var anchorNode = selection && selection.anchorNode;
+    var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
+    if (isTouchingSelection) {
+      return false;
+    }
     var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
     if (!canBeScrolledInMainDirection) {
       return true;
@@ -9566,14 +9575,13 @@ function requireClone() {
   Object.defineProperty(clone, "__esModule", {
     value: true
   });
-  clone.clone = void 0;
+  clone.clone = clone$1;
   function clone$1(originalObject) {
     if (!originalObject) {
       return null;
     }
     return JSON.parse(JSON.stringify(originalObject));
   }
-  clone.clone = clone$1;
   return clone;
 }
 
@@ -9589,7 +9597,7 @@ function requireMatches() {
   Object.defineProperty(matches, "__esModule", {
     value: true
   });
-  matches.matches = void 0;
+  matches.matches = matches$1;
   function matchesRange(cardNumber, min, max) {
     var maxLengthToCheck = String(min).length;
     var substr = cardNumber.substr(0, maxLengthToCheck);
@@ -9608,7 +9616,6 @@ function requireMatches() {
     }
     return matchesPattern(cardNumber, pattern);
   }
-  matches.matches = matches$1;
   return matches;
 }
 
@@ -9619,7 +9626,7 @@ function requireAddMatchingCardsToResults() {
   Object.defineProperty(addMatchingCardsToResults, "__esModule", {
     value: true
   });
-  addMatchingCardsToResults.addMatchingCardsToResults = void 0;
+  addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
   var clone_1 = requireClone();
   var matches_1 = requireMatches();
   function addMatchingCardsToResults$1(cardNumber, cardConfiguration, results) {
@@ -9642,7 +9649,6 @@ function requireAddMatchingCardsToResults() {
       break;
     }
   }
-  addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
   return addMatchingCardsToResults;
 }
 
@@ -9655,11 +9661,10 @@ function requireIsValidInputType() {
   Object.defineProperty(isValidInputType, "__esModule", {
     value: true
   });
-  isValidInputType.isValidInputType = void 0;
+  isValidInputType.isValidInputType = isValidInputType$1;
   function isValidInputType$1(cardNumber) {
     return typeof cardNumber === "string" || cardNumber instanceof String;
   }
-  isValidInputType.isValidInputType = isValidInputType$1;
   return isValidInputType;
 }
 
@@ -9672,7 +9677,7 @@ function requireFindBestMatch() {
   Object.defineProperty(findBestMatch, "__esModule", {
     value: true
   });
-  findBestMatch.findBestMatch = void 0;
+  findBestMatch.findBestMatch = findBestMatch$1;
   function hasEnoughResultsToDetermineBestMatch(results) {
     var numberOfResultsWithMaxStrengthProperty = results.filter(function (result) {
       return result.matchStrength;
@@ -9702,7 +9707,6 @@ function requireFindBestMatch() {
       return bestMatch;
     });
   }
-  findBestMatch.findBestMatch = findBestMatch$1;
   return findBestMatch;
 }
 
@@ -12334,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),
@@ -12675,9 +12946,10 @@ var Tab = function Tab(_ref) {
 var TabList = function TabList(_ref) {
   var tabs = _ref.tabs,
     onTabSelected = _ref.onTabSelected,
-    activePanel = _ref.activePanel;
+    activePanel = _ref.activePanel,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: "TabList"
+    className: classNames('TabList', className)
   }, tabs.map(function (tab) {
     return /*#__PURE__*/React.createElement(Tab, {
       key: tab.name,
@@ -12709,13 +12981,14 @@ var TabPanels = function TabPanels(_ref) {
   }));
 };
 
-var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className"];
+var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className", "tabListClassName"];
 var Tabs = function Tabs(_ref) {
   var tabs = _ref.tabs,
     onTabClicked = _ref.onTabClicked,
     defaultActiveTab = _ref.defaultActiveTab,
     activeTab = _ref.activeTab,
     className = _ref.className,
+    tabListClassName = _ref.tabListClassName,
     rest = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = React.useState(activeTab || defaultActiveTab || tabs[0].name),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12733,7 +13006,8 @@ var Tabs = function Tabs(_ref) {
   }, rest), /*#__PURE__*/React.createElement(TabList, {
     tabs: tabs,
     onTabSelected: handleTabClick,
-    activePanel: activePanel
+    activePanel: activePanel,
+    className: tabListClassName
   }), /*#__PURE__*/React.createElement(TabPanels, {
     panels: tabs,
     activePanel: activePanel
@@ -12884,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;