@salutejs/plasma-new-hope 0.336.0-canary.2222.17612018746.0 → 0.336.0-canary.2224.17723650459.0

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

@@ -195,7 +195,9 @@ var textFieldRoot = function(Root) {
         contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _param_hintTrigger = _param.// hint
         hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintTargetPlacement = _param.hintTargetPlacement, hintTargetPlacement = _param_hintTargetPlacement === void 0 ? 'outer' : _param_hintTargetPlacement, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, _param_hintOffset = _param.hintOffset, hintOffset = _param_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, // variations
         view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, hasDivider = _param.hasDivider, // controlled
-        outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // events
+        outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // @ts-ignore
+        _chips = _param._chips, // @ts-ignore
+        _onChipClick = _param._onChipClick, // events
         onChange = _param.onChange, onChangeChips = _param.onChangeChips, onSearch = _param.onSearch, onKeyDown = _param.onKeyDown, onFocus = _param.onFocus, onBlur = _param.onBlur, onPaste = _param.onPaste, // Пропсы для внутреннего использования, не отдается наружу.
         // @ts-ignore
         _onEnterDisabled = _param._onEnterDisabled, // @ts-ignore
@@ -240,6 +242,8 @@ var textFieldRoot = function(Root) {
             "value",
             "chips",
             "chipType",
+            "_chips",
+            "_onChipClick",
             "onChange",
             "onChangeChips",
             "onSearch",
@@ -271,7 +275,7 @@ var textFieldRoot = function(Root) {
         var helperTextId = (0, _utils.safeUseId)();
         var isDefaultView = view === 'default' || readOnly || disabled;
         var isChipEnumeration = enumerationType === 'chip';
-        var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
+        var isChipsVisible = isChipEnumeration && Boolean((chips === null || chips === void 0 ? void 0 : chips.length) || (_chips === null || _chips === void 0 ? void 0 : _chips.length));
         var withHasChips = isChipsVisible ? _TextFieldtokens.classes.hasChips : undefined;
         var hasLabelValue = Boolean(label);
         var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
@@ -526,7 +530,19 @@ var textFieldRoot = function(Root) {
             ref: contentRef,
             onKeyDown: handleContentKeyDown,
             className: withHasChips
-        }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledChips, {
+        }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledTextBefore, null, textBefore), Boolean(_chips === null || _chips === void 0 ? void 0 : _chips.length) && /*#__PURE__*/ _react.default.createElement(_ui.TextFieldChipNew, {
+            chips: _chips,
+            onChipClick: _onChipClick,
+            getRef: getRef,
+            handleChipKeyDown: handleChipKeyDown,
+            onChipClear: onChipClear,
+            view: chipView || view,
+            readOnly: readOnly,
+            chipType: chipType,
+            // TODO: #1547
+            // @ts-ignore
+            _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+        }), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledChips, {
             className: _TextFieldtokens.classes.chipsWrapper
         }, chips === null || chips === void 0 ? void 0 : chips.map(function(param, index) {
             var chipId = param.id, text = param.text;

package/styled-components/cjs/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TextFieldChipNew", {
+    enumerable: true,
+    get: function() {
+        return TextFieldChipNew;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _TextFieldChipstyles = require("../TextFieldChip/TextFieldChip.styles");
+var _TextFieldstyles = require("../../TextField.styles");
+var _TextFieldtokens = require("../../TextField.tokens");
+var _TextFieldChipNewstyles = require("./TextFieldChipNew.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var TextFieldChipNew = function(param) {
+    var chips = param.chips, onChipClick = param.onChipClick, getRef = param.getRef, handleChipKeyDown = param.handleChipKeyDown, onChipClear = param.onChipClear, readOnly = param.readOnly, chipType = param.chipType, view = param.view, _forceChipManipulationWithReadonly = param._forceChipManipulationWithReadonly;
+    return /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledChips, {
+        className: _TextFieldtokens.classes.chipsWrapper
+    }, chips.map(function(param, index) {
+        var value = param.value, label = param.label, disabled = param.disabled;
+        var chipId = "".concat(index, "_").concat(value);
+        var onKeyDownHandle = function(event) {
+            if (handleChipKeyDown) {
+                handleChipKeyDown(event, chipId, index);
+            }
+            if (event.key === 'Enter' || event.key === 'Backspace') {
+                if (onChipClick) {
+                    onChipClick({
+                        value: value,
+                        label: label,
+                        disabled: disabled
+                    });
+                }
+            }
+        };
+        var handleClick = function(event) {
+            event.stopPropagation();
+            if (onChipClick) {
+                onChipClick({
+                    value: value,
+                    label: label,
+                    disabled: disabled
+                });
+            }
+            if (onChipClear) {
+                onChipClear(chipId, index);
+            }
+        };
+        return chipType === 'default' ? /*#__PURE__*/ _react.default.createElement(_TextFieldChipNewstyles.StyledChip, {
+            key: chipId,
+            ref: function(element) {
+                return getRef(element, index);
+            },
+            tabIndex: -1,
+            disabled: disabled,
+            hasClear: !disabled,
+            readOnly: readOnly,
+            onClick: handleClick,
+            onKeyDown: onKeyDownHandle,
+            text: label,
+            view: view,
+            // TODO: #1547
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+        }) : /*#__PURE__*/ _react.default.createElement(_TextFieldChipstyles.TextChip, {
+            tabIndex: -1,
+            onClick: handleClick,
+            onKeyDown: onKeyDownHandle
+        }, label);
+    }));
+};

package/styled-components/cjs/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.styles.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get StyledChip () {
+        return StyledChip;
+    },
+    get TextChip () {
+        return TextChip;
+    }
+});
+var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _engines = require("../../../../engines");
+var _mixins = require("../../../../mixins");
+var _Chip = require("../../../Chip");
+var _TextFieldtokens = require("../../TextField.tokens");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// issue #823
+var mergedConfig = (0, _engines.mergeConfig)(_Chip.chipConfig);
+var Chip = (0, _engines.component)(mergedConfig);
+var StyledChip = (0, _styledcomponents.default)(Chip).withConfig({
+    displayName: "TextFieldChipNew.styles__StyledChip",
+    componentId: "sc-ffa02158-0"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":0.4;",
+    " &[readonly]{opacity:var(",
+    ");}"
+], _Chip.chipTokens.color, _TextFieldtokens.tokens.chipColor, _Chip.chipTokens.background, _TextFieldtokens.tokens.chipBackground, _Chip.chipTokens.colorHover, _TextFieldtokens.tokens.chipColorHover, _Chip.chipTokens.backgroundHover, _TextFieldtokens.tokens.chipBackgroundHover, _Chip.chipTokens.colorActive, _TextFieldtokens.tokens.chipColorActive, _Chip.chipTokens.backgroundActive, _TextFieldtokens.tokens.chipBackgroundActive, _Chip.chipTokens.backgroundReadOnly, _TextFieldtokens.tokens.chipBackgroundReadOnly, _Chip.chipTokens.colorReadOnly, _TextFieldtokens.tokens.chipColorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _TextFieldtokens.tokens.chipBackgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover, _TextFieldtokens.tokens.chipColorReadOnlyHover, _Chip.chipTokens.borderRadius, _TextFieldtokens.tokens.chipBorderRadius, _Chip.chipTokens.width, _TextFieldtokens.tokens.chipWidth, _Chip.chipTokens.height, _TextFieldtokens.tokens.chipHeight, _Chip.chipTokens.padding, _TextFieldtokens.tokens.chipPadding, _Chip.chipTokens.fontFamily, _TextFieldtokens.tokens.chipFontFamily, _Chip.chipTokens.fontSize, _TextFieldtokens.tokens.chipFontSize, _Chip.chipTokens.fontStyle, _TextFieldtokens.tokens.chipFontStyle, _Chip.chipTokens.fontWeight, _TextFieldtokens.tokens.chipFontWeight, _Chip.chipTokens.letterSpacing, _TextFieldtokens.tokens.chipLetterSpacing, _Chip.chipTokens.lineHeight, _TextFieldtokens.tokens.chipLineHeight, _Chip.chipTokens.clearContentMarginLeft, _TextFieldtokens.tokens.chipClearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _TextFieldtokens.tokens.chipClearContentMarginRight, _Chip.chipTokens.closeIconSize, _TextFieldtokens.tokens.chipCloseIconSize, _Chip.chipTokens.closeIconColor, _TextFieldtokens.tokens.chipCloseIconColor, _Chip.chipTokens.focusColor, _TextFieldtokens.tokens.focusColor, _Chip.chipTokens.disabledOpacity, (0, _mixins.addFocus)({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "calc(var(".concat(_TextFieldtokens.tokens.chipBorderRadius, ") - 0.1rem)"),
+    outlineColor: "var(".concat(_TextFieldtokens.tokens.focusColor, ")")
+}), _TextFieldtokens.tokens.chipOpacityReadonly);
+var TextChip = _styledcomponents.default.button.withConfig({
+    displayName: "TextFieldChipNew.styles__TextChip",
+    componentId: "sc-ffa02158-1"
+})([
+    "display:block;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(",
+    ");font-size:var(",
+    ");font-style:var(",
+    ");font-weight:var(",
+    ");letter-spacing:var(",
+    ");line-height:var(",
+    ");color:var(",
+    ");",
+    " &:after{content:',';}&:last-child{&:after{content:'';}}"
+], _TextFieldtokens.tokens.fontFamily, _TextFieldtokens.tokens.fontSize, _TextFieldtokens.tokens.fontStyle, _TextFieldtokens.tokens.fontWeight, _TextFieldtokens.tokens.letterSpacing, _TextFieldtokens.tokens.lineHeight, _TextFieldtokens.tokens.color, (0, _mixins.addFocus)({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "calc(var(".concat(_TextFieldtokens.tokens.chipBorderRadius, ") - 0.1rem)"),
+    outlineColor: "var(".concat(_TextFieldtokens.tokens.focusColor, ")")
+}));

package/styled-components/cjs/components/TextField/ui/index.js

@@ -2,10 +2,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TextFieldChip", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TextFieldChip () {
         return _TextFieldChip.TextFieldChip;
+    },
+    get TextFieldChipNew () {
+        return _TextFieldChipNew.TextFieldChipNew;
     }
 });
 var _TextFieldChip = require("./TextFieldChip/TextFieldChip");
+var _TextFieldChipNew = require("./TextFieldChipNew/TextFieldChipNew");

package/styled-components/cjs/examples/components/Range/Range.config.js

@@ -46,6 +46,52 @@ var config = {
             ], _Range.rangeTokens.background, _Range.rangeTokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _Range.rangeTokens.dividerColor, _Range.rangeTokens.labelColor, _Range.rangeTokens.leftHelperColor, _Range.rangeTokens.leftHelperColorError, _Range.rangeTokens.leftHelperColorSuccess, _Range.rangeTokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorHover, _Range.rangeTokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorHover, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorHover, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _Range.rangeTokens.indicatorColor, _Range.rangeTokens.focusColor, _Range.rangeTokens.textFieldPlaceholderColorFocus)
         },
         size: {
+            xl: (0, _styledcomponents.css)([
+                "",
+                ":1rem;",
+                ":0 0.375rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":0 0 0 1.125rem;",
+                ":0;",
+                ":0.75rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":4rem;",
+                ":1rem;",
+                ":1.3125rem 1.125rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":0.25rem 0 0 0;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":-0.0625rem 0.5rem -0.0625rem 0;",
+                ":-0.0625rem 0 -0.0625rem 0.75rem;",
+                ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
+                ":0.5rem;",
+                ":0.375rem;",
+                ":0 0 0 0;",
+                ":0.5rem auto auto -0.75rem;",
+                ":0 0 auto auto;",
+                ":0.25rem -0.625rem auto auto;"
+            ], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin, _Range.rangeTokens.indicatorSize, _Range.rangeTokens.indicatorSizeOuter, _Range.rangeTokens.indicatorPlacement, _Range.rangeTokens.indicatorOuterPlacement, _Range.rangeTokens.indicatorPlacementRight, _Range.rangeTokens.indicatorOuterPlacementRight),
             l: (0, _styledcomponents.css)([
                 "",
                 ":0.875rem;",

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

@@ -111,19 +111,20 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import React, { forwardRef, Fragment, useCallback, useRef, useState } from "react";
+import React, { forwardRef, Fragment, useCallback, useEffect, useRef, useState } from "react";
 import cls from "classnames";
 import { useDidMountEffect } from "../../hooks";
 import { getSizeValueFromProp } from "../../utils";
 import { useCodeHook } from "../../hooks";
 import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
-import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
+import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError, isWebOTPSupported } from "./utils";
 import { classes } from "./CodeField.tokens";
-import { base, CaptionWrapper, CodeGroup, CodeWrapper, ItemInput, Separator } from "./CodeField.styles";
+import { base, CaptionWrapper, CodeGroup, CodeWrapper, HiddenInput, ItemInput, Separator } from "./CodeField.styles";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as shapeCSS } from "./variations/_shape/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
+import { useWebOTP } from "./hooks/useWebOTP";
 export var codeFieldRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var className = _param.className, outerValue = _param.value, placeholder = _param.placeholder, autoFocus = _param.autoFocus, _param_codeLength = _param.codeLength, codeLength = _param_codeLength === void 0 ? 6 : _param_codeLength, caption = _param.caption, _param_captionAlign = _param.captionAlign, captionAlign = _param_captionAlign === void 0 ? 'left' : _param_captionAlign, width = _param.width, _param_shape = _param.shape, shape = _param_shape === void 0 ? 'default' : _param_shape, view = _param.view, size = _param.size, disabled = _param.disabled, isError = _param.isError, _param_allowedSymbols = _param.allowedSymbols, allowedSymbols = _param_allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _param_allowedSymbols, _param_itemErrorBehavior = _param.itemErrorBehavior, itemErrorBehavior = _param_itemErrorBehavior === void 0 ? 'remove-symbol' : _param_itemErrorBehavior, _param_codeErrorBehavior = _param.codeErrorBehavior, codeErrorBehavior = _param_codeErrorBehavior === void 0 ? 'remove-code' : _param_codeErrorBehavior, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? 'one-time-code' : _param_autoComplete, setIsError = _param.setIsError, onChange = _param.onChange, onFullCodeEnter = _param.onFullCodeEnter, rest = _object_without_properties(_param, [
@@ -148,15 +149,19 @@ export var codeFieldRoot = function(Root) {
             "onChange",
             "onFullCodeEnter"
         ]);
-        var _useState = _sliced_to_array(useState(getCodeValue(codeLength, outerValue || '')), 2), code = _useState[0], setCode = _useState[1];
+        var _autocompleteRef_current;
+        var _useState = _sliced_to_array(useState(getCodeValue(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+        var code = typeof outerValue === 'string' ? getCodeValue(codeLength, outerValue) : innerValue;
         var _useState1 = _sliced_to_array(useState(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
         var inputRefs = useRef([]);
         var inputContainerRef = useRef(null);
         var captionRef = useRef(null);
+        var autocompleteRef = useRef(null);
         var fieldPattern = getFieldPattern(allowedSymbols);
         var placeholderValue = getPlaceholderValue(codeLength, placeholder);
         var parts = codeLength === 6 ? 2 : 1;
         var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
+        var isWebOTPEnabled = autoComplete === 'one-time-code' && !disabled && isWebOTPSupported();
         var getLastActiveIndex = function() {
             if (code.length && code.length < codeLength) {
                 return code.length;
@@ -166,6 +171,22 @@ export var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
+        var codeSetter = function(newCode) {
+            var originalCode = newCode.join('');
+            setInnerValue(getCodeValue(codeLength, originalCode));
+            setOriginalValue(originalCode);
+            if (onChange) {
+                onChange(originalCode);
+            }
+        };
+        useWebOTP({
+            codeString: originalValue,
+            enableSMSAutoRead: autoComplete === 'one-time-code',
+            disabled: Boolean(disabled),
+            codeLength: codeLength,
+            codeSetter: codeSetter,
+            onFullCodeEnter: onFullCodeEnter
+        });
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -185,19 +206,24 @@ export var codeFieldRoot = function(Root) {
                 return;
             }
             if (key === 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(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) {
@@ -218,6 +244,9 @@ export var codeFieldRoot = function(Root) {
                     setIsError(false);
                 }
             }
+            if (!symbol) {
+                return;
+            }
             if (!fieldPattern) {
                 newCode[index] = symbol;
                 codeSetter(newCode);
@@ -227,11 +256,6 @@ export 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);
@@ -247,8 +271,9 @@ export var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setCode: setCode,
-                    codeSetter: codeSetter
+                    setInnerValue: setInnerValue,
+                    codeSetter: codeSetter,
+                    onChange: onChange
                 });
             }
         };
@@ -294,14 +319,24 @@ export var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setCode: setCode,
+                    setInnerValue: setInnerValue,
                     codeSetter: codeSetter
                 });
             }
         }, [
             isError
         ]);
-        return /*#__PURE__*/ React.createElement(Root, _object_spread({
+        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.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
@@ -309,7 +344,7 @@ export var codeFieldRoot = function(Root) {
             disabled: disabled,
             onClick: handleClick,
             className: cls(className, _define_property({}, classes.captionAlignLeft, captionAlign === 'left'))
-        }, rest), /*#__PURE__*/ React.createElement(CodeWrapper, {
+        }, !isWebOTPEnabled && _object_spread({}, rest)), /*#__PURE__*/ React.createElement(CodeWrapper, {
             ref: inputContainerRef
         }, _to_consumable_array(Array(parts)).map(function(_, partIndex) {
             return /*#__PURE__*/ React.createElement(Fragment, {
@@ -326,7 +361,6 @@ export var codeFieldRoot = function(Root) {
                     },
                     className: cls((_obj = {}, _define_property(_obj, classes.segmented, shape === 'segmented'), _define_property(_obj, classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length), _obj)),
                     value: code[inputCorrectIndex] || '',
-                    autoComplete: autoComplete,
                     onChange: function(e) {
                         handleChange(e, inputCorrectIndex);
                     },
@@ -343,7 +377,11 @@ export var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption));
+        }, caption), isWebOTPEnabled && /*#__PURE__*/ React.createElement(HiddenInput, _object_spread({
+            ref: autocompleteRef,
+            autoComplete: autoComplete,
+            tabIndex: -1
+        }, rest))));
     });
 };
 export var codeFieldConfig = {

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

@@ -7,32 +7,32 @@ export var base = css([
 ], classes.captionAlignLeft);
 export var CodeWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CodeWrapper",
-    componentId: "sc-88b863b6-0"
+    componentId: "sc-ff3d9c22-0"
 })([
     "display:flex;align-items:center;"
 ]);
 export var CodeGroup = styled.div.withConfig({
     displayName: "CodeField.styles__CodeGroup",
-    componentId: "sc-88b863b6-1"
+    componentId: "sc-ff3d9c22-1"
 })([
     "display:flex;align-items:center;"
 ]);
 export var Separator = styled.div.withConfig({
     displayName: "CodeField.styles__Separator",
-    componentId: "sc-88b863b6-2"
+    componentId: "sc-ff3d9c22-2"
 })([
     "width:var(",
     ");"
 ], tokens.separatorWidth);
 export var ItemInput = styled.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;"
 ]);
 export var CaptionWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CaptionWrapper",
-    componentId: "sc-88b863b6-4"
+    componentId: "sc-ff3d9c22-4"
 })([
     "text-align:",
     ";align-self:",
@@ -48,3 +48,9 @@ export var CaptionWrapper = styled.div.withConfig({
     var widthValue = param.widthValue;
     return widthValue || 'auto';
 });
+export var HiddenInput = styled.input.withConfig({
+    displayName: "CodeField.styles__HiddenInput",
+    componentId: "sc-ff3d9c22-5"
+})([
+    "display:none;"
+]);