@moda/om 21.7.2 → 21.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +305 -30
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +305 -31
- package/dist/index.esm.js.map +1 -1
- package/dist/src/components/Field/Field.d.ts +1 -1
- package/dist/src/components/OtpInput/OtpInput.d.ts +14 -0
- package/dist/src/components/OtpInput/OtpInput.stories.d.ts +7 -0
- package/dist/src/components/OtpInput/OtpInput.test.d.ts +1 -0
- package/dist/src/components/OtpInput/index.d.ts +1 -0
- package/dist/src/components/Tabs/TabList.d.ts +1 -0
- package/dist/src/components/Tabs/Tabs.d.ts +1 -0
- package/dist/src/components/index.d.ts +1 -0
- package/dist/styles.css +1 -1
- package/package.json +54 -53
- package/src/components/OtpInput/OtpInput.scss +24 -0
- package/src/components/OtpInput/OtpInput.stories.tsx +26 -0
- package/src/components/OtpInput/OtpInput.test.tsx +45 -0
- package/src/components/OtpInput/OtpInput.tsx +95 -0
- package/src/components/OtpInput/index.ts +1 -0
- package/src/components/Tabs/TabList.tsx +15 -9
- package/src/components/Tabs/Tabs.tsx +8 -1
- package/src/components/index.ts +1 -0
- package/src/global.d.ts +9 -0
package/dist/index.esm.js
CHANGED
|
@@ -336,18 +336,18 @@ requireFocusVisible();
|
|
|
336
336
|
|
|
337
337
|
var dist$4 = {};
|
|
338
338
|
|
|
339
|
-
var colors = {};
|
|
339
|
+
var colors$1 = {};
|
|
340
340
|
|
|
341
341
|
var hasRequiredColors;
|
|
342
342
|
function requireColors() {
|
|
343
|
-
if (hasRequiredColors) return colors;
|
|
343
|
+
if (hasRequiredColors) return colors$1;
|
|
344
344
|
hasRequiredColors = 1;
|
|
345
|
-
Object.defineProperty(colors, "__esModule", {
|
|
345
|
+
Object.defineProperty(colors$1, "__esModule", {
|
|
346
346
|
value: true
|
|
347
347
|
});
|
|
348
|
-
colors.colors = void 0;
|
|
348
|
+
colors$1.colors = void 0;
|
|
349
349
|
// THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
|
|
350
|
-
colors.colors = {
|
|
350
|
+
colors$1.colors = {
|
|
351
351
|
"all": {
|
|
352
352
|
"coal": "rgb(0, 0, 0)",
|
|
353
353
|
"ink": "rgb(25, 26, 27)",
|
|
@@ -432,7 +432,7 @@ function requireColors() {
|
|
|
432
432
|
"silver": "rgb(217, 217, 217)"
|
|
433
433
|
}
|
|
434
434
|
};
|
|
435
|
-
return colors;
|
|
435
|
+
return colors$1;
|
|
436
436
|
}
|
|
437
437
|
|
|
438
438
|
var typography = {};
|
|
@@ -574,7 +574,7 @@ function requireBreakpoints() {
|
|
|
574
574
|
|
|
575
575
|
var helpers = {};
|
|
576
576
|
|
|
577
|
-
var
|
|
577
|
+
var colors = {
|
|
578
578
|
aliceblue: [240, 248, 255],
|
|
579
579
|
antiquewhite: [250, 235, 215],
|
|
580
580
|
aqua: [0, 255, 255],
|
|
@@ -724,6 +724,8 @@ var colorNames = {
|
|
|
724
724
|
yellow: [255, 255, 0],
|
|
725
725
|
yellowgreen: [154, 205, 50]
|
|
726
726
|
};
|
|
727
|
+
for (var key in colors) Object.freeze(colors[key]);
|
|
728
|
+
var colorNames = Object.freeze(colors);
|
|
727
729
|
|
|
728
730
|
var reverseNames = Object.create(null);
|
|
729
731
|
|
|
@@ -775,8 +777,8 @@ cs.get.rgb = function (string) {
|
|
|
775
777
|
}
|
|
776
778
|
var abbr = /^#([a-f\d]{3,4})$/i;
|
|
777
779
|
var hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
|
|
778
|
-
var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|/]\s*([+-]?
|
|
779
|
-
var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)
|
|
780
|
+
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;
|
|
781
|
+
var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[\s,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/i;
|
|
780
782
|
var keyword = /^(\w+)$/;
|
|
781
783
|
var rgb = [0, 0, 0, 1];
|
|
782
784
|
var match;
|
|
@@ -804,7 +806,7 @@ cs.get.rgb = function (string) {
|
|
|
804
806
|
}
|
|
805
807
|
} else if (match = string.match(rgba)) {
|
|
806
808
|
for (i = 0; i < 3; i++) {
|
|
807
|
-
rgb[i] = Number.
|
|
809
|
+
rgb[i] = Number.parseFloat(match[i + 1]);
|
|
808
810
|
}
|
|
809
811
|
if (match[4]) {
|
|
810
812
|
rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
|
|
@@ -816,14 +818,16 @@ cs.get.rgb = function (string) {
|
|
|
816
818
|
if (match[4]) {
|
|
817
819
|
rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
|
|
818
820
|
}
|
|
819
|
-
} else if (match = string.match(keyword)) {
|
|
821
|
+
} else if (match = string.toLowerCase().match(keyword)) {
|
|
820
822
|
if (match[1] === 'transparent') {
|
|
821
823
|
return [0, 0, 0, 0];
|
|
822
824
|
}
|
|
823
825
|
if (!Object.hasOwn(colorNames, match[1])) {
|
|
824
826
|
return null;
|
|
825
827
|
}
|
|
826
|
-
|
|
828
|
+
|
|
829
|
+
// eslint-disable-next-line unicorn/prefer-spread
|
|
830
|
+
rgb = colorNames[match[1]].slice();
|
|
827
831
|
rgb[3] = 1;
|
|
828
832
|
return rgb;
|
|
829
833
|
} else {
|
|
@@ -839,7 +843,7 @@ cs.get.hsl = function (string) {
|
|
|
839
843
|
if (!string) {
|
|
840
844
|
return null;
|
|
841
845
|
}
|
|
842
|
-
var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[
|
|
846
|
+
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;
|
|
843
847
|
var match = string.match(hsl);
|
|
844
848
|
if (match) {
|
|
845
849
|
var alpha = Number.parseFloat(match[4]);
|
|
@@ -855,7 +859,7 @@ cs.get.hwb = function (string) {
|
|
|
855
859
|
if (!string) {
|
|
856
860
|
return null;
|
|
857
861
|
}
|
|
858
|
-
var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s
|
|
862
|
+
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;
|
|
859
863
|
var match = string.match(hwb);
|
|
860
864
|
if (match) {
|
|
861
865
|
var alpha = Number.parseFloat(match[4]);
|
|
@@ -3096,8 +3100,6 @@ var extractRef$2 = function extractRef(ref) {
|
|
|
3096
3100
|
var effectCar = createSidecarMedium();
|
|
3097
3101
|
var focusHiddenMarker = 'data-focus-on-hidden';
|
|
3098
3102
|
|
|
3099
|
-
__assign$a({}, RemoveScroll.classNames);
|
|
3100
|
-
|
|
3101
3103
|
var PREVENT_SCROLL = {
|
|
3102
3104
|
preventScroll: true
|
|
3103
3105
|
};
|
|
@@ -4870,6 +4872,13 @@ function RemoveScrollSideCar(props) {
|
|
|
4870
4872
|
if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
|
|
4871
4873
|
return false;
|
|
4872
4874
|
}
|
|
4875
|
+
// allow drag selection (iOS); check if selection's anchorNode is the same as target or contains target
|
|
4876
|
+
var selection = window.getSelection();
|
|
4877
|
+
var anchorNode = selection && selection.anchorNode;
|
|
4878
|
+
var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
|
|
4879
|
+
if (isTouchingSelection) {
|
|
4880
|
+
return false;
|
|
4881
|
+
}
|
|
4873
4882
|
var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
4874
4883
|
if (!canBeScrolledInMainDirection) {
|
|
4875
4884
|
return true;
|
|
@@ -9546,14 +9555,13 @@ function requireClone() {
|
|
|
9546
9555
|
Object.defineProperty(clone, "__esModule", {
|
|
9547
9556
|
value: true
|
|
9548
9557
|
});
|
|
9549
|
-
clone.clone =
|
|
9558
|
+
clone.clone = clone$1;
|
|
9550
9559
|
function clone$1(originalObject) {
|
|
9551
9560
|
if (!originalObject) {
|
|
9552
9561
|
return null;
|
|
9553
9562
|
}
|
|
9554
9563
|
return JSON.parse(JSON.stringify(originalObject));
|
|
9555
9564
|
}
|
|
9556
|
-
clone.clone = clone$1;
|
|
9557
9565
|
return clone;
|
|
9558
9566
|
}
|
|
9559
9567
|
|
|
@@ -9569,7 +9577,7 @@ function requireMatches() {
|
|
|
9569
9577
|
Object.defineProperty(matches, "__esModule", {
|
|
9570
9578
|
value: true
|
|
9571
9579
|
});
|
|
9572
|
-
matches.matches =
|
|
9580
|
+
matches.matches = matches$1;
|
|
9573
9581
|
function matchesRange(cardNumber, min, max) {
|
|
9574
9582
|
var maxLengthToCheck = String(min).length;
|
|
9575
9583
|
var substr = cardNumber.substr(0, maxLengthToCheck);
|
|
@@ -9588,7 +9596,6 @@ function requireMatches() {
|
|
|
9588
9596
|
}
|
|
9589
9597
|
return matchesPattern(cardNumber, pattern);
|
|
9590
9598
|
}
|
|
9591
|
-
matches.matches = matches$1;
|
|
9592
9599
|
return matches;
|
|
9593
9600
|
}
|
|
9594
9601
|
|
|
@@ -9599,7 +9606,7 @@ function requireAddMatchingCardsToResults() {
|
|
|
9599
9606
|
Object.defineProperty(addMatchingCardsToResults, "__esModule", {
|
|
9600
9607
|
value: true
|
|
9601
9608
|
});
|
|
9602
|
-
addMatchingCardsToResults.addMatchingCardsToResults =
|
|
9609
|
+
addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
|
|
9603
9610
|
var clone_1 = requireClone();
|
|
9604
9611
|
var matches_1 = requireMatches();
|
|
9605
9612
|
function addMatchingCardsToResults$1(cardNumber, cardConfiguration, results) {
|
|
@@ -9622,7 +9629,6 @@ function requireAddMatchingCardsToResults() {
|
|
|
9622
9629
|
break;
|
|
9623
9630
|
}
|
|
9624
9631
|
}
|
|
9625
|
-
addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
|
|
9626
9632
|
return addMatchingCardsToResults;
|
|
9627
9633
|
}
|
|
9628
9634
|
|
|
@@ -9635,11 +9641,10 @@ function requireIsValidInputType() {
|
|
|
9635
9641
|
Object.defineProperty(isValidInputType, "__esModule", {
|
|
9636
9642
|
value: true
|
|
9637
9643
|
});
|
|
9638
|
-
isValidInputType.isValidInputType =
|
|
9644
|
+
isValidInputType.isValidInputType = isValidInputType$1;
|
|
9639
9645
|
function isValidInputType$1(cardNumber) {
|
|
9640
9646
|
return typeof cardNumber === "string" || cardNumber instanceof String;
|
|
9641
9647
|
}
|
|
9642
|
-
isValidInputType.isValidInputType = isValidInputType$1;
|
|
9643
9648
|
return isValidInputType;
|
|
9644
9649
|
}
|
|
9645
9650
|
|
|
@@ -9652,7 +9657,7 @@ function requireFindBestMatch() {
|
|
|
9652
9657
|
Object.defineProperty(findBestMatch, "__esModule", {
|
|
9653
9658
|
value: true
|
|
9654
9659
|
});
|
|
9655
|
-
findBestMatch.findBestMatch =
|
|
9660
|
+
findBestMatch.findBestMatch = findBestMatch$1;
|
|
9656
9661
|
function hasEnoughResultsToDetermineBestMatch(results) {
|
|
9657
9662
|
var numberOfResultsWithMaxStrengthProperty = results.filter(function (result) {
|
|
9658
9663
|
return result.matchStrength;
|
|
@@ -9682,7 +9687,6 @@ function requireFindBestMatch() {
|
|
|
9682
9687
|
return bestMatch;
|
|
9683
9688
|
});
|
|
9684
9689
|
}
|
|
9685
|
-
findBestMatch.findBestMatch = findBestMatch$1;
|
|
9686
9690
|
return findBestMatch;
|
|
9687
9691
|
}
|
|
9688
9692
|
|
|
@@ -12314,6 +12318,273 @@ var Paginator = function Paginator(_ref) {
|
|
|
12314
12318
|
})));
|
|
12315
12319
|
};
|
|
12316
12320
|
|
|
12321
|
+
var isStyleObject = function isStyleObject(obj) {
|
|
12322
|
+
return _typeof$1(obj) === 'object' && obj !== null;
|
|
12323
|
+
};
|
|
12324
|
+
var OTPInput = function OTPInput(_a) {
|
|
12325
|
+
var _b = _a.value,
|
|
12326
|
+
value = _b === void 0 ? '' : _b,
|
|
12327
|
+
_c = _a.numInputs,
|
|
12328
|
+
numInputs = _c === void 0 ? 4 : _c,
|
|
12329
|
+
onChange = _a.onChange,
|
|
12330
|
+
onPaste = _a.onPaste,
|
|
12331
|
+
renderInput = _a.renderInput,
|
|
12332
|
+
_d = _a.shouldAutoFocus,
|
|
12333
|
+
shouldAutoFocus = _d === void 0 ? false : _d,
|
|
12334
|
+
_e = _a.inputType,
|
|
12335
|
+
inputType = _e === void 0 ? 'text' : _e,
|
|
12336
|
+
renderSeparator = _a.renderSeparator,
|
|
12337
|
+
placeholder = _a.placeholder,
|
|
12338
|
+
containerStyle = _a.containerStyle,
|
|
12339
|
+
inputStyle = _a.inputStyle,
|
|
12340
|
+
_f = _a.skipDefaultStyles,
|
|
12341
|
+
skipDefaultStyles = _f === void 0 ? false : _f;
|
|
12342
|
+
var _g = React__default.useState(0),
|
|
12343
|
+
activeInput = _g[0],
|
|
12344
|
+
setActiveInput = _g[1];
|
|
12345
|
+
var inputRefs = React__default.useRef([]);
|
|
12346
|
+
var getOTPValue = function getOTPValue() {
|
|
12347
|
+
return value ? value.toString().split('') : [];
|
|
12348
|
+
};
|
|
12349
|
+
var isInputNum = inputType === 'number' || inputType === 'tel';
|
|
12350
|
+
React__default.useEffect(function () {
|
|
12351
|
+
inputRefs.current = inputRefs.current.slice(0, numInputs);
|
|
12352
|
+
}, [numInputs]);
|
|
12353
|
+
React__default.useEffect(function () {
|
|
12354
|
+
var _a;
|
|
12355
|
+
if (shouldAutoFocus) {
|
|
12356
|
+
(_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
12357
|
+
}
|
|
12358
|
+
}, [shouldAutoFocus]);
|
|
12359
|
+
var getPlaceholderValue = function getPlaceholderValue() {
|
|
12360
|
+
if (typeof placeholder === 'string') {
|
|
12361
|
+
if (placeholder.length === numInputs) {
|
|
12362
|
+
return placeholder;
|
|
12363
|
+
}
|
|
12364
|
+
if (placeholder.length > 0) {
|
|
12365
|
+
console.error('Length of the placeholder should be equal to the number of inputs.');
|
|
12366
|
+
}
|
|
12367
|
+
}
|
|
12368
|
+
return undefined;
|
|
12369
|
+
};
|
|
12370
|
+
var isInputValueValid = function isInputValueValid(value) {
|
|
12371
|
+
var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
|
|
12372
|
+
return isTypeValid && value.trim().length === 1;
|
|
12373
|
+
};
|
|
12374
|
+
var handleChange = function handleChange(event) {
|
|
12375
|
+
var value = event.target.value;
|
|
12376
|
+
if (isInputValueValid(value)) {
|
|
12377
|
+
changeCodeAtFocus(value);
|
|
12378
|
+
focusInput(activeInput + 1);
|
|
12379
|
+
}
|
|
12380
|
+
};
|
|
12381
|
+
var handleInputChange = function handleInputChange(event) {
|
|
12382
|
+
var nativeEvent = event.nativeEvent;
|
|
12383
|
+
var value = event.target.value;
|
|
12384
|
+
if (!isInputValueValid(value)) {
|
|
12385
|
+
// Pasting from the native autofill suggestion on a mobile device can pass
|
|
12386
|
+
// the pasted string as one long input to one of the cells. This ensures
|
|
12387
|
+
// that we handle the full input and not just the first character.
|
|
12388
|
+
if (value.length === numInputs) {
|
|
12389
|
+
var hasInvalidInput = value.split('').some(function (cellInput) {
|
|
12390
|
+
return !isInputValueValid(cellInput);
|
|
12391
|
+
});
|
|
12392
|
+
if (!hasInvalidInput) {
|
|
12393
|
+
handleOTPChange(value.split(''));
|
|
12394
|
+
focusInput(numInputs - 1);
|
|
12395
|
+
}
|
|
12396
|
+
}
|
|
12397
|
+
// @ts-expect-error - This was added previously to handle and edge case
|
|
12398
|
+
// for dealing with keyCode "229 Unidentified" on Android. Check if this is
|
|
12399
|
+
// still needed.
|
|
12400
|
+
if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
|
|
12401
|
+
event.preventDefault();
|
|
12402
|
+
changeCodeAtFocus('');
|
|
12403
|
+
focusInput(activeInput - 1);
|
|
12404
|
+
}
|
|
12405
|
+
// Clear the input if it's not valid value because firefox allows
|
|
12406
|
+
// pasting non-numeric characters in a number type input
|
|
12407
|
+
event.target.value = '';
|
|
12408
|
+
}
|
|
12409
|
+
};
|
|
12410
|
+
var handleFocus = function handleFocus(event) {
|
|
12411
|
+
return function (index) {
|
|
12412
|
+
setActiveInput(index);
|
|
12413
|
+
event.target.select();
|
|
12414
|
+
};
|
|
12415
|
+
};
|
|
12416
|
+
var handleBlur = function handleBlur() {
|
|
12417
|
+
setActiveInput(activeInput - 1);
|
|
12418
|
+
};
|
|
12419
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
12420
|
+
var otp = getOTPValue();
|
|
12421
|
+
if ([event.code, event.key].includes('Backspace')) {
|
|
12422
|
+
event.preventDefault();
|
|
12423
|
+
changeCodeAtFocus('');
|
|
12424
|
+
focusInput(activeInput - 1);
|
|
12425
|
+
} else if (event.code === 'Delete') {
|
|
12426
|
+
event.preventDefault();
|
|
12427
|
+
changeCodeAtFocus('');
|
|
12428
|
+
} else if (event.code === 'ArrowLeft') {
|
|
12429
|
+
event.preventDefault();
|
|
12430
|
+
focusInput(activeInput - 1);
|
|
12431
|
+
} else if (event.code === 'ArrowRight') {
|
|
12432
|
+
event.preventDefault();
|
|
12433
|
+
focusInput(activeInput + 1);
|
|
12434
|
+
}
|
|
12435
|
+
// React does not trigger onChange when the same value is entered
|
|
12436
|
+
// again. So we need to focus the next input manually in this case.
|
|
12437
|
+
else if (event.key === otp[activeInput]) {
|
|
12438
|
+
event.preventDefault();
|
|
12439
|
+
focusInput(activeInput + 1);
|
|
12440
|
+
} else if (event.code === 'Spacebar' || event.code === 'Space' || event.code === 'ArrowUp' || event.code === 'ArrowDown') {
|
|
12441
|
+
event.preventDefault();
|
|
12442
|
+
}
|
|
12443
|
+
};
|
|
12444
|
+
var focusInput = function focusInput(index) {
|
|
12445
|
+
var _a, _b;
|
|
12446
|
+
var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
|
|
12447
|
+
if (inputRefs.current[activeInput]) {
|
|
12448
|
+
(_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
12449
|
+
(_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
|
|
12450
|
+
setActiveInput(activeInput);
|
|
12451
|
+
}
|
|
12452
|
+
};
|
|
12453
|
+
var changeCodeAtFocus = function changeCodeAtFocus(value) {
|
|
12454
|
+
var otp = getOTPValue();
|
|
12455
|
+
otp[activeInput] = value[0];
|
|
12456
|
+
handleOTPChange(otp);
|
|
12457
|
+
};
|
|
12458
|
+
var handleOTPChange = function handleOTPChange(otp) {
|
|
12459
|
+
var otpValue = otp.join('');
|
|
12460
|
+
onChange(otpValue);
|
|
12461
|
+
};
|
|
12462
|
+
var handlePaste = function handlePaste(event) {
|
|
12463
|
+
var _a;
|
|
12464
|
+
event.preventDefault();
|
|
12465
|
+
var otp = getOTPValue();
|
|
12466
|
+
var nextActiveInput = activeInput;
|
|
12467
|
+
// Get pastedData in an array of max size (num of inputs - current position)
|
|
12468
|
+
var pastedData = event.clipboardData.getData('text/plain').slice(0, numInputs - activeInput).split('');
|
|
12469
|
+
// Prevent pasting if the clipboard data contains non-numeric values for number inputs
|
|
12470
|
+
if (isInputNum && pastedData.some(function (value) {
|
|
12471
|
+
return isNaN(Number(value));
|
|
12472
|
+
})) {
|
|
12473
|
+
return;
|
|
12474
|
+
}
|
|
12475
|
+
// Paste data from focused input onwards
|
|
12476
|
+
for (var pos = 0; pos < numInputs; ++pos) {
|
|
12477
|
+
if (pos >= activeInput && pastedData.length > 0) {
|
|
12478
|
+
otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
|
|
12479
|
+
nextActiveInput++;
|
|
12480
|
+
}
|
|
12481
|
+
}
|
|
12482
|
+
focusInput(nextActiveInput);
|
|
12483
|
+
handleOTPChange(otp);
|
|
12484
|
+
};
|
|
12485
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
12486
|
+
style: Object.assign({
|
|
12487
|
+
display: 'flex',
|
|
12488
|
+
alignItems: 'center'
|
|
12489
|
+
}, isStyleObject(containerStyle) && containerStyle),
|
|
12490
|
+
className: typeof containerStyle === 'string' ? containerStyle : undefined,
|
|
12491
|
+
onPaste: onPaste
|
|
12492
|
+
}, Array.from({
|
|
12493
|
+
length: numInputs
|
|
12494
|
+
}, function (_, index) {
|
|
12495
|
+
return index;
|
|
12496
|
+
}).map(function (index) {
|
|
12497
|
+
var _a, _b, _c;
|
|
12498
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
12499
|
+
key: index
|
|
12500
|
+
}, renderInput({
|
|
12501
|
+
value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
|
|
12502
|
+
placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
|
|
12503
|
+
ref: function ref(element) {
|
|
12504
|
+
return inputRefs.current[index] = element;
|
|
12505
|
+
},
|
|
12506
|
+
onChange: handleChange,
|
|
12507
|
+
onFocus: function onFocus(event) {
|
|
12508
|
+
return handleFocus(event)(index);
|
|
12509
|
+
},
|
|
12510
|
+
onBlur: handleBlur,
|
|
12511
|
+
onKeyDown: handleKeyDown,
|
|
12512
|
+
onPaste: handlePaste,
|
|
12513
|
+
autoComplete: 'off',
|
|
12514
|
+
'aria-label': "Please enter OTP character ".concat(index + 1),
|
|
12515
|
+
style: Object.assign(!skipDefaultStyles ? {
|
|
12516
|
+
width: '1em',
|
|
12517
|
+
textAlign: 'center'
|
|
12518
|
+
} : {}, isStyleObject(inputStyle) ? inputStyle : {}),
|
|
12519
|
+
className: typeof inputStyle === 'string' ? inputStyle : undefined,
|
|
12520
|
+
type: inputType,
|
|
12521
|
+
inputMode: isInputNum ? 'numeric' : 'text',
|
|
12522
|
+
onInput: handleInputChange
|
|
12523
|
+
}, index), index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator));
|
|
12524
|
+
}));
|
|
12525
|
+
};
|
|
12526
|
+
|
|
12527
|
+
var getInputAriaLabel = function getInputAriaLabel(index, inputCount, ariaLabel, label) {
|
|
12528
|
+
var baseLabel = ariaLabel || label || 'One-time password digit';
|
|
12529
|
+
return "".concat(baseLabel, " ").concat(index + 1, " of ").concat(inputCount);
|
|
12530
|
+
};
|
|
12531
|
+
var OtpInput = function OtpInput(_ref) {
|
|
12532
|
+
var ariaDescribedBy = _ref['aria-describedby'],
|
|
12533
|
+
ariaLabel = _ref['aria-label'],
|
|
12534
|
+
_ref$autoComplete = _ref.autoComplete,
|
|
12535
|
+
autoComplete = _ref$autoComplete === void 0 ? 'one-time-code' : _ref$autoComplete,
|
|
12536
|
+
className = _ref.className,
|
|
12537
|
+
disabled = _ref.disabled,
|
|
12538
|
+
error = _ref.error,
|
|
12539
|
+
focus = _ref.focus,
|
|
12540
|
+
id = _ref.id,
|
|
12541
|
+
inputClassName = _ref.inputClassName,
|
|
12542
|
+
_ref$inputType = _ref.inputType,
|
|
12543
|
+
inputType = _ref$inputType === void 0 ? 'tel' : _ref$inputType,
|
|
12544
|
+
label = _ref.label,
|
|
12545
|
+
name = _ref.name,
|
|
12546
|
+
_ref$numInputs = _ref.numInputs,
|
|
12547
|
+
numInputs = _ref$numInputs === void 0 ? 4 : _ref$numInputs,
|
|
12548
|
+
onChange = _ref.onChange,
|
|
12549
|
+
onPaste = _ref.onPaste,
|
|
12550
|
+
placeholder = _ref.placeholder,
|
|
12551
|
+
renderSeparator = _ref.renderSeparator,
|
|
12552
|
+
required = _ref.required,
|
|
12553
|
+
shouldAutoFocus = _ref.shouldAutoFocus,
|
|
12554
|
+
_ref$value = _ref.value,
|
|
12555
|
+
value = _ref$value === void 0 ? '' : _ref$value;
|
|
12556
|
+
return /*#__PURE__*/React__default.createElement(OTPInput, {
|
|
12557
|
+
containerStyle: classNames('OtpInput', className),
|
|
12558
|
+
inputType: inputType,
|
|
12559
|
+
numInputs: numInputs,
|
|
12560
|
+
onChange: onChange,
|
|
12561
|
+
onPaste: onPaste,
|
|
12562
|
+
placeholder: placeholder,
|
|
12563
|
+
renderSeparator: renderSeparator,
|
|
12564
|
+
shouldAutoFocus: shouldAutoFocus,
|
|
12565
|
+
skipDefaultStyles: true,
|
|
12566
|
+
value: value,
|
|
12567
|
+
renderInput: function renderInput(inputProps, index) {
|
|
12568
|
+
return /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
|
|
12569
|
+
id: id ? "".concat(id, "-").concat(index + 1) : undefined,
|
|
12570
|
+
autoComplete: autoComplete,
|
|
12571
|
+
"aria-describedby": ariaDescribedBy,
|
|
12572
|
+
"aria-invalid": error ? true : undefined,
|
|
12573
|
+
"aria-label": getInputAriaLabel(index, numInputs, ariaLabel, label),
|
|
12574
|
+
className: classNames(inputProps.className, 'OtpInput__input', inputClassName, {
|
|
12575
|
+
'OtpInput__input--disabled': disabled,
|
|
12576
|
+
'OtpInput__input--error': error,
|
|
12577
|
+
'OtpInput__input--focus': focus
|
|
12578
|
+
}),
|
|
12579
|
+
disabled: disabled,
|
|
12580
|
+
name: name,
|
|
12581
|
+
required: required
|
|
12582
|
+
}));
|
|
12583
|
+
}
|
|
12584
|
+
});
|
|
12585
|
+
};
|
|
12586
|
+
OtpInput.displayName = 'OtpInput';
|
|
12587
|
+
|
|
12317
12588
|
var PasswordInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
12318
12589
|
var rest = _extends$1({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
12319
12590
|
var _useState = useState(false),
|
|
@@ -12655,9 +12926,10 @@ var Tab = function Tab(_ref) {
|
|
|
12655
12926
|
var TabList = function TabList(_ref) {
|
|
12656
12927
|
var tabs = _ref.tabs,
|
|
12657
12928
|
onTabSelected = _ref.onTabSelected,
|
|
12658
|
-
activePanel = _ref.activePanel
|
|
12929
|
+
activePanel = _ref.activePanel,
|
|
12930
|
+
className = _ref.className;
|
|
12659
12931
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
12660
|
-
className:
|
|
12932
|
+
className: classNames('TabList', className)
|
|
12661
12933
|
}, tabs.map(function (tab) {
|
|
12662
12934
|
return /*#__PURE__*/React__default.createElement(Tab, {
|
|
12663
12935
|
key: tab.name,
|
|
@@ -12689,13 +12961,14 @@ var TabPanels = function TabPanels(_ref) {
|
|
|
12689
12961
|
}));
|
|
12690
12962
|
};
|
|
12691
12963
|
|
|
12692
|
-
var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className"];
|
|
12964
|
+
var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className", "tabListClassName"];
|
|
12693
12965
|
var Tabs = function Tabs(_ref) {
|
|
12694
12966
|
var tabs = _ref.tabs,
|
|
12695
12967
|
onTabClicked = _ref.onTabClicked,
|
|
12696
12968
|
defaultActiveTab = _ref.defaultActiveTab,
|
|
12697
12969
|
activeTab = _ref.activeTab,
|
|
12698
12970
|
className = _ref.className,
|
|
12971
|
+
tabListClassName = _ref.tabListClassName,
|
|
12699
12972
|
rest = _objectWithoutProperties(_ref, _excluded$4);
|
|
12700
12973
|
var _useState = useState(activeTab || defaultActiveTab || tabs[0].name),
|
|
12701
12974
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -12713,7 +12986,8 @@ var Tabs = function Tabs(_ref) {
|
|
|
12713
12986
|
}, rest), /*#__PURE__*/React__default.createElement(TabList, {
|
|
12714
12987
|
tabs: tabs,
|
|
12715
12988
|
onTabSelected: handleTabClick,
|
|
12716
|
-
activePanel: activePanel
|
|
12989
|
+
activePanel: activePanel,
|
|
12990
|
+
className: tabListClassName
|
|
12717
12991
|
}), /*#__PURE__*/React__default.createElement(TabPanels, {
|
|
12718
12992
|
panels: tabs,
|
|
12719
12993
|
activePanel: activePanel
|
|
@@ -12809,4 +13083,4 @@ var Utilities = {
|
|
|
12809
13083
|
States: States
|
|
12810
13084
|
};
|
|
12811
13085
|
|
|
12812
|
-
export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };
|
|
13086
|
+
export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, OtpInput, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };
|