@salutejs/plasma-new-hope 0.336.0-canary.2228.17672900057.0 → 0.336.0-canary.2228.17762482450.0

package/styled-components/cjs/components/CodeField/CodeField.js

@@ -29,6 +29,7 @@ var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
 var _base2 = require("./variations/_shape/base");
 var _base3 = require("./variations/_disabled/base");
+var _useWebOTP = require("./hooks/useWebOTP");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -212,15 +213,19 @@ var codeFieldRoot = function(Root) {
             "onChange",
             "onFullCodeEnter"
         ]);
-        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, outerValue || '')), 2), code = _useState[0], setCode = _useState[1];
+        var _autocompleteRef_current;
+        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+        var code = typeof outerValue === 'string' ? (0, _utils1.getCodeValue)(codeLength, outerValue) : innerValue;
         var _useState1 = _sliced_to_array((0, _react.useState)(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
         var inputRefs = (0, _react.useRef)([]);
         var inputContainerRef = (0, _react.useRef)(null);
         var captionRef = (0, _react.useRef)(null);
+        var autocompleteRef = (0, _react.useRef)(null);
         var fieldPattern = (0, _utils1.getFieldPattern)(allowedSymbols);
         var placeholderValue = (0, _utils1.getPlaceholderValue)(codeLength, placeholder);
         var parts = codeLength === 6 ? 2 : 1;
         var widthValue = width ? (0, _utils.getSizeValueFromProp)(width, 'rem') : undefined;
+        var isWebOTPEnabled = autoComplete === 'one-time-code' && !disabled && (0, _utils1.isWebOTPSupported)();
         var getLastActiveIndex = function() {
             if (code.length && code.length < codeLength) {
                 return code.length;
@@ -230,6 +235,22 @@ var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
+        var codeSetter = function(newCode) {
+            var originalCode = newCode.join('');
+            setInnerValue((0, _utils1.getCodeValue)(codeLength, originalCode));
+            setOriginalValue(originalCode);
+            if (onChange) {
+                onChange(originalCode);
+            }
+        };
+        (0, _useWebOTP.useWebOTP)({
+            codeString: originalValue,
+            enableSMSAutoRead: autoComplete === 'one-time-code',
+            disabled: Boolean(disabled),
+            codeLength: codeLength,
+            codeSetter: codeSetter,
+            onFullCodeEnter: onFullCodeEnter
+        });
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -249,19 +270,24 @@ var codeFieldRoot = function(Root) {
                 return;
             }
             if (key === _constants.BACKSPACE_KEY) {
-                if (index > 0 && code[index] === '') {
-                    var _inputRefs_current_;
-                    (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+                if (index > 0) {
+                    var _inputRefs_current_index;
+                    var newCode = _to_consumable_array(code);
+                    newCode[index] = '';
+                    if (index >= codeLength - 1 && code[index]) {
+                        codeSetter(newCode);
+                        return;
+                    }
+                    if (!code[index]) {
+                        var _inputRefs_current_;
+                        newCode[index - 1] = '';
+                        (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+                    }
+                    (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.remove(_CodeFieldtokens.classes.itemError);
+                    codeSetter(newCode);
                 }
             }
         };
-        var codeSetter = function(newCode) {
-            setCode(newCode);
-            setOriginalValue(newCode.join(''));
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
-        };
         var handleChange = function(event, index) {
             var _inputRefs_current_index;
             if (disabled) {
@@ -282,6 +308,9 @@ var codeFieldRoot = function(Root) {
                     setIsError(false);
                 }
             }
+            if (!symbol) {
+                return;
+            }
             if (!fieldPattern) {
                 newCode[index] = symbol;
                 codeSetter(newCode);
@@ -291,11 +320,6 @@ var codeFieldRoot = function(Root) {
                 }
                 return;
             }
-            if (!symbol) {
-                newCode[index] = '';
-                codeSetter(newCode);
-                return;
-            }
             if (fieldPattern.test(symbol)) {
                 newCode[index] = symbol.charAt(symbol.length - 1);
                 codeSetter(newCode);
@@ -311,8 +335,9 @@ var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setCode: setCode,
-                    codeSetter: codeSetter
+                    setInnerValue: setInnerValue,
+                    codeSetter: codeSetter,
+                    onChange: onChange
                 });
             }
         };
@@ -358,14 +383,24 @@ var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setCode: setCode,
+                    setInnerValue: setInnerValue,
                     codeSetter: codeSetter
                 });
             }
         }, [
             isError
         ]);
-        return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
+        (0, _react.useEffect)(function() {
+            if (disabled || !autocompleteRef.current) {
+                return;
+            }
+            var autocompleteCode = autocompleteRef.current.value.split('');
+            codeSetter(autocompleteCode);
+        }, [
+            (_autocompleteRef_current = autocompleteRef.current) === null || _autocompleteRef_current === void 0 ? void 0 : _autocompleteRef_current.value,
+            disabled
+        ]);
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
@@ -373,7 +408,7 @@ var codeFieldRoot = function(Root) {
             disabled: disabled,
             onClick: handleClick,
             className: (0, _classnames.default)(className, _define_property({}, _CodeFieldtokens.classes.captionAlignLeft, captionAlign === 'left'))
-        }, rest), /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.CodeWrapper, {
+        }, !isWebOTPEnabled && _object_spread({}, rest)), /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.CodeWrapper, {
             ref: inputContainerRef
         }, _to_consumable_array(Array(parts)).map(function(_, partIndex) {
             return /*#__PURE__*/ _react.default.createElement(_react.Fragment, {
@@ -390,7 +425,6 @@ var codeFieldRoot = function(Root) {
                     },
                     className: (0, _classnames.default)((_obj = {}, _define_property(_obj, _CodeFieldtokens.classes.segmented, shape === 'segmented'), _define_property(_obj, _CodeFieldtokens.classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length), _obj)),
                     value: code[inputCorrectIndex] || '',
-                    autoComplete: autoComplete,
                     onChange: function(e) {
                         handleChange(e, inputCorrectIndex);
                     },
@@ -407,7 +441,11 @@ var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption));
+        }, caption), isWebOTPEnabled && /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.HiddenInput, _object_spread({
+            ref: autocompleteRef,
+            autoComplete: autoComplete,
+            tabIndex: -1
+        }, rest))));
     });
 };
 var codeFieldConfig = {

package/styled-components/cjs/components/CodeField/CodeField.styles.js

@@ -18,6 +18,9 @@ _export(exports, {
     get CodeWrapper () {
         return CodeWrapper;
     },
+    get HiddenInput () {
+        return HiddenInput;
+    },
     get ItemInput () {
         return ItemInput;
     },
@@ -77,32 +80,32 @@ var base = (0, _styledcomponents.css)([
 ], _CodeFieldtokens.classes.captionAlignLeft);
 var CodeWrapper = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__CodeWrapper",
-    componentId: "sc-88b863b6-0"
+    componentId: "sc-ff3d9c22-0"
 })([
     "display:flex;align-items:center;"
 ]);
 var CodeGroup = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__CodeGroup",
-    componentId: "sc-88b863b6-1"
+    componentId: "sc-ff3d9c22-1"
 })([
     "display:flex;align-items:center;"
 ]);
 var Separator = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__Separator",
-    componentId: "sc-88b863b6-2"
+    componentId: "sc-ff3d9c22-2"
 })([
     "width:var(",
     ");"
 ], _CodeFieldtokens.tokens.separatorWidth);
 var ItemInput = _styledcomponents.default.input.withConfig({
     displayName: "CodeField.styles__ItemInput",
-    componentId: "sc-88b863b6-3"
+    componentId: "sc-ff3d9c22-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"
 ]);
 var CaptionWrapper = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__CaptionWrapper",
-    componentId: "sc-88b863b6-4"
+    componentId: "sc-ff3d9c22-4"
 })([
     "text-align:",
     ";align-self:",
@@ -118,3 +121,9 @@ var CaptionWrapper = _styledcomponents.default.div.withConfig({
     var widthValue = param.widthValue;
     return widthValue || 'auto';
 });
+var HiddenInput = _styledcomponents.default.input.withConfig({
+    displayName: "CodeField.styles__HiddenInput",
+    componentId: "sc-ff3d9c22-5"
+})([
+    "display:none;"
+]);

package/styled-components/cjs/components/CodeField/hooks/useWebOTP.js

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useWebOTP", {
+    enumerable: true,
+    get: function() {
+        return useWebOTP;
+    }
+});
+var _react = require("react");
+var _utils = require("../utils");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var isOTPCredential = function(credential) {
+    return credential !== null && 'code' in credential;
+};
+var useWebOTP = function(param) {
+    var codeString = param.codeString, enableSMSAutoRead = param.enableSMSAutoRead, disabled = param.disabled, codeLength = param.codeLength, codeSetter = param.codeSetter, onFullCodeEnter = param.onFullCodeEnter;
+    var abortControllerRef = (0, _react.useRef)(null);
+    var startWebOTPListener = (0, _react.useCallback)(function() {
+        return _async_to_generator(function() {
+            var otp, otpCode, newCode, err;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!enableSMSAutoRead || disabled || !(0, _utils.isWebOTPSupported)()) {
+                            return [
+                                2
+                            ];
+                        }
+                        if (abortControllerRef.current) {
+                            abortControllerRef.current.abort();
+                        }
+                        abortControllerRef.current = new AbortController();
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            3,
+                            ,
+                            4
+                        ]);
+                        return [
+                            4,
+                            navigator.credentials.get({
+                                otp: {
+                                    transport: [
+                                        'sms'
+                                    ]
+                                },
+                                signal: abortControllerRef.current.signal
+                            })
+                        ];
+                    case 2:
+                        otp = _state.sent();
+                        if (otp && isOTPCredential(otp) && otp.code) {
+                            otpCode = otp.code;
+                            if (otpCode.length === codeLength) {
+                                newCode = (0, _utils.getCodeValue)(codeLength, otpCode);
+                                codeSetter(newCode);
+                                if (onFullCodeEnter) {
+                                    onFullCodeEnter(otpCode);
+                                }
+                            }
+                        }
+                        return [
+                            3,
+                            4
+                        ];
+                    case 3:
+                        err = _state.sent();
+                        if (_instanceof(err, DOMException)) {
+                            if (err.name !== 'AbortError' && err.name !== 'NotAllowedError') {
+                                console.warn('Web OTP API error:', err);
+                            }
+                        } else if (_instanceof(err, Error)) {
+                            console.warn('Web OTP API error:', err);
+                        } else {
+                            console.warn('Unknown Web OTP API error:', err);
+                        }
+                        return [
+                            3,
+                            4
+                        ];
+                    case 4:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    }, [
+        enableSMSAutoRead,
+        disabled,
+        codeLength,
+        onFullCodeEnter
+    ]);
+    var stopWebOTPListener = (0, _react.useCallback)(function() {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+    }, []);
+    (0, _react.useEffect)(function() {
+        if ((0, _utils.isWebOTPSupported)() && codeString === '' && enableSMSAutoRead && !disabled) {
+            startWebOTPListener();
+        } else {
+            stopWebOTPListener();
+        }
+        return function() {
+            stopWebOTPListener();
+        };
+    }, [
+        codeString,
+        enableSMSAutoRead,
+        disabled,
+        startWebOTPListener,
+        stopWebOTPListener
+    ]);
+};

package/styled-components/cjs/components/CodeField/utils/handleCodeError.js

@@ -37,7 +37,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var handleCodeError = function(param) {
-    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setCode = param.setCode, codeSetter = param.codeSetter;
+    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter;
     if (!inputContainerRef.current) {
         return;
     }
@@ -51,7 +51,7 @@ var handleCodeError = function(param) {
                 var newCode = _to_consumable_array(currentCode);
                 newCode.pop();
                 codeSetter(newCode);
-                setCode(currentCode);
+                setInnerValue(currentCode);
                 (_inputContainerRef_current = inputContainerRef.current) === null || _inputContainerRef_current === void 0 ? void 0 : _inputContainerRef_current.classList.remove(_CodeFieldtokens.classes.codeErrorAnimation);
                 setTimeout(function() {
                     var _inputRefs_current_, _inputRefs_current_1;

package/styled-components/cjs/components/CodeField/utils/handleItemError.js

@@ -36,14 +36,17 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var handleItemError = function(param) {
-    var currentSymbol = param.currentSymbol, itemErrorBehavior = param.itemErrorBehavior, index = param.index, newCode = param.newCode, inputRefs = param.inputRefs, setCode = param.setCode, codeSetter = param.codeSetter;
+    var currentSymbol = param.currentSymbol, itemErrorBehavior = param.itemErrorBehavior, index = param.index, newCode = param.newCode, inputRefs = param.inputRefs, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter, onChange = param.onChange;
     if (!inputRefs.current[index] || currentSymbol === ' ') {
         return;
     }
     switch(itemErrorBehavior){
         case 'keep':
             var _inputRefs_current_index;
-            setCode(newCode);
+            setInnerValue(newCode);
+            if (onChange) {
+                onChange(newCode.join(''));
+            }
             (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.add(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorAnimation);
             setTimeout(function() {
                 var _inputRefs_current_index;
@@ -57,11 +60,17 @@ var handleItemError = function(param) {
         case 'forbid-enter':
             newCode[index] = '';
             codeSetter(newCode);
+            if (onChange) {
+                onChange(newCode.join(''));
+            }
             break;
         case 'remove-symbol':
         default:
             var _inputRefs_current_index1;
-            setCode(newCode);
+            setInnerValue(newCode);
+            if (onChange) {
+                onChange(newCode.join(''));
+            }
             (_inputRefs_current_index1 = inputRefs.current[index]) === null || _inputRefs_current_index1 === void 0 ? void 0 : _inputRefs_current_index1.classList.add(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorFade, _CodeFieldtokens.classes.itemErrorAnimation);
             setTimeout(function() {
                 var _inputRefs_current_index;

package/styled-components/cjs/components/CodeField/utils/index.js

@@ -23,8 +23,12 @@ _export(exports, {
     },
     get handleItemError () {
         return _handleItemError.handleItemError;
+    },
+    get isWebOTPSupported () {
+        return _isWebOTPSupported.isWebOTPSupported;
     }
 });
 var _initialValuesHelper = require("./initialValuesHelper");
 var _handleItemError = require("./handleItemError");
 var _handleCodeError = require("./handleCodeError");
+var _isWebOTPSupported = require("./isWebOTPSupported");

package/styled-components/cjs/components/CodeField/utils/isWebOTPSupported.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "isWebOTPSupported", {
+    enumerable: true,
+    get: function() {
+        return isWebOTPSupported;
+    }
+});
+var isWebOTPSupported = function() {
+    return typeof window !== 'undefined' && 'OTPCredential' in window && navigator.credentials && typeof navigator.credentials.get === 'function';
+};