@salutejs/plasma-new-hope 0.374.0-dev.0 → 0.374.0

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

@@ -81,11 +81,13 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
         const [innerOriginalValue, setInnerOriginalValue] = (0, _react.useState)(code.join(''));
         const [activeIndex, setActiveIndex] = (0, _react.useState)(null);
         const [selectedIndex, setSelectedIndex] = (0, _react.useState)(null);
-        const itemRefs = (0, _react.useRef)([]);
+        const [animatedItemErrorIndex, setAnimatedItemErrorIndex] = (0, _react.useState)(null);
+        const [activeErrorAnimations, setActiveErrorAnimations] = (0, _react.useState)(0);
         const nativeInputRef = (0, _react.useRef)(null);
         const inputContainerRef = (0, _react.useRef)(null);
         const captionRef = (0, _react.useRef)(null);
         const onFullCodeEnterRef = (0, _react.useRef)(onFullCodeEnter);
+        const activeErrorAnimationsRef = (0, _react.useRef)(0);
         const inputForkRef = (0, _hooks.useForkRef)(nativeInputRef, ref);
         /**
              * Храним актуальный пользовательский колбэк в ref, чтобы изменение ссылки на него
@@ -98,6 +100,15 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
         const parts = codeLength === 6 ? 2 : 1;
         const codeValue = code.join('');
         const widthValue = width ? (0, _utils.getSizeValueFromProp)(width, 'rem') : undefined;
+        const isErrorAnimationPlaying = activeErrorAnimations > 0;
+        const startErrorAnimation = ()=>{
+            activeErrorAnimationsRef.current += 1;
+            setActiveErrorAnimations(activeErrorAnimationsRef.current);
+        };
+        const finishErrorAnimation = ()=>{
+            activeErrorAnimationsRef.current = Math.max(0, activeErrorAnimationsRef.current - 1);
+            setActiveErrorAnimations(activeErrorAnimationsRef.current);
+        };
         const codeSetter = (newCode)=>{
             const originalCode = newCode.join('').slice(0, codeLength);
             setInnerValue((0, _utils1.getCodeValue)(codeLength, originalCode));
@@ -121,9 +132,6 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
         const controlledOriginalValue = codeValue.split('').every(isSymbolAllowed) ? codeValue : '';
         const originalValue = typeof outerValue === 'string' ? controlledOriginalValue : innerOriginalValue;
         const clearErrorState = ()=>{
-            itemRefs.current.forEach((item)=>{
-                item?.classList.remove(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorFade, _CodeFieldtokens.classes.itemErrorAnimation);
-            });
             if (!isError) {
                 return;
             }
@@ -166,7 +174,7 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             selectLastActiveItem();
         };
         const handleChange = (event)=>{
-            if (disabled) {
+            if (disabled || activeErrorAnimationsRef.current > 0) {
                 return;
             }
             const rawValue = event.currentTarget.value.slice(0, codeLength);
@@ -184,17 +192,24 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
                 itemErrorBehavior,
                 index: invalidIndex,
                 newCode,
-                itemRefs,
                 inputRef: nativeInputRef,
                 setInnerValue,
                 setActiveIndex,
                 setSelectedIndex,
                 codeSetter,
-                onChange
+                onChange,
+                onAnimationStart: (index)=>{
+                    startErrorAnimation();
+                    setAnimatedItemErrorIndex(index);
+                },
+                onAnimationEnd: ()=>{
+                    finishErrorAnimation();
+                    setAnimatedItemErrorIndex(null);
+                }
             });
         };
         const handleKeyDown = (event)=>{
-            if (!disabled && _constants.FORBIDDEN_KEYS.includes(event.key)) {
+            if (activeErrorAnimationsRef.current > 0 || !disabled && _constants.FORBIDDEN_KEYS.includes(event.key)) {
                 event.preventDefault();
             }
             if (onKeyDown) {
@@ -206,6 +221,9 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
                 return;
             }
             event.preventDefault();
+            if (activeErrorAnimationsRef.current > 0) {
+                return;
+            }
             const rawData = event.clipboardData.getData('text/plain');
             const pastedData = rawData.split('').filter(isSymbolAllowed).slice(0, codeLength);
             const selectionStart = event.currentTarget.selectionStart ?? 0;
@@ -222,9 +240,8 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             }, 0);
         };
         /**
-             * Нормализуем внутреннее значение и refs, если количество ячеек динамически изменилось.
+             * Нормализуем внутреннее значение, если количество ячеек динамически изменилось.
              */ (0, _react.useEffect)(()=>{
-            itemRefs.current = itemRefs.current.slice(0, codeLength);
             setInnerValue((currentCode)=>(0, _utils1.getCodeValue)(codeLength, currentCode.join('')));
             setInnerOriginalValue((currentCode)=>currentCode.slice(0, codeLength));
         }, [
@@ -267,7 +284,9 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
                     setInnerValue,
                     setActiveIndex,
                     setSelectedIndex,
-                    codeSetter
+                    codeSetter,
+                    onAnimationStart: startErrorAnimation,
+                    onAnimationEnd: finishErrorAnimation
                 });
             }
         }, [
@@ -299,15 +318,15 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             ].map((_item, i)=>{
                 const inputCorrectIndex = i + codeLength / parts * partIndex;
                 const itemValue = code[inputCorrectIndex] || '';
+                const isAnimatedItemError = animatedItemErrorIndex === inputCorrectIndex;
                 return /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.ItemInput, {
                     key: inputCorrectIndex,
-                    ref: (element)=>{
-                        itemRefs.current[inputCorrectIndex] = element;
-                    },
                     className: (0, _classnames.default)({
                         [_CodeFieldtokens.classes.segmented]: shape === 'segmented',
                         [_CodeFieldtokens.classes.itemFocused]: activeIndex === inputCorrectIndex,
-                        [_CodeFieldtokens.classes.itemError]: itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue),
+                        [_CodeFieldtokens.classes.itemError]: isAnimatedItemError || itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue),
+                        [_CodeFieldtokens.classes.itemErrorAnimation]: isAnimatedItemError,
+                        [_CodeFieldtokens.classes.itemErrorFade]: isAnimatedItemError && itemErrorBehavior === 'remove-symbol',
                         [_CodeFieldtokens.classes.hoverEnabled]: !disabled && inputCorrectIndex >= originalValue.length
                     }),
                     "data-code-field-item": ""
@@ -341,6 +360,7 @@ const codeFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             form: form,
             required: required,
             disabled: disabled,
+            readOnly: isErrorAnimationPlaying,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy,

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "handleCodeError", {
 const _CodeFieldtokens = require("../CodeField.tokens");
 const _constants = require("./constants");
 const _initialValuesHelper = require("./initialValuesHelper");
-const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef, inputContainerRef, captionRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter })=>{
+const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef, inputContainerRef, captionRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onAnimationStart, onAnimationEnd })=>{
     if (!inputContainerRef.current) {
         return;
     }
@@ -27,6 +27,7 @@ const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef,
     };
     switch(codeErrorBehavior){
         case 'keep':
+            onAnimationStart();
             inputContainerRef.current.classList.add(_CodeFieldtokens.classes.codeError, _CodeFieldtokens.classes.codeErrorAnimation);
             captionRef.current?.classList.add(_CodeFieldtokens.classes.captionError);
             setTimeout(()=>{
@@ -37,6 +38,7 @@ const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef,
                 codeSetter(newCode);
                 setInnerValue(currentCode);
                 inputContainerRef.current?.classList.remove(_CodeFieldtokens.classes.codeErrorAnimation);
+                onAnimationEnd();
                 setTimeout(()=>{
                     selectItem(codeLength - 1, codeLength);
                 }, 0);
@@ -44,12 +46,16 @@ const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef,
             break;
         case 'remove-code':
         default:
+            onAnimationStart();
             inputContainerRef.current.classList.add(_CodeFieldtokens.classes.codeError, _CodeFieldtokens.classes.codeErrorAnimation, _CodeFieldtokens.classes.codeErrorFade);
             captionRef.current?.classList.add(_CodeFieldtokens.classes.captionError);
             setTimeout(()=>{
                 codeSetter((0, _initialValuesHelper.getCodeValue)(codeLength, ''));
-                selectItem(0, 0);
                 inputContainerRef.current?.classList.remove(_CodeFieldtokens.classes.codeError, _CodeFieldtokens.classes.codeErrorAnimation, _CodeFieldtokens.classes.codeErrorFade);
+                onAnimationEnd();
+                setTimeout(()=>{
+                    selectItem(0, 0);
+                }, 0);
             }, _constants.ANIMATION_TIMEOUT);
     }
 };

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

@@ -8,12 +8,8 @@ Object.defineProperty(exports, "handleItemError", {
         return handleItemError;
     }
 });
-const _CodeFieldtokens = require("../CodeField.tokens");
 const _constants = require("./constants");
-const handleItemError = ({ itemErrorBehavior, index, newCode, itemRefs, inputRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onChange })=>{
-    if (!itemRefs.current[index]) {
-        return;
-    }
+const handleItemError = ({ itemErrorBehavior, index, newCode, inputRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onChange, onAnimationStart, onAnimationEnd })=>{
     const selectItem = (selectionEnd)=>{
         const input = inputRef.current;
         if (!input) {
@@ -26,13 +22,13 @@ const handleItemError = ({ itemErrorBehavior, index, newCode, itemRefs, inputRef
     };
     switch(itemErrorBehavior){
         case 'keep':
+            onAnimationStart(index);
             setInnerValue(newCode);
             if (onChange) {
                 onChange(newCode.join(''));
             }
-            itemRefs.current[index]?.classList.add(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorAnimation);
             setTimeout(()=>{
-                itemRefs.current[index]?.classList.remove(_CodeFieldtokens.classes.itemErrorAnimation);
+                onAnimationEnd();
                 setTimeout(()=>selectItem(index + 1), 0);
             }, _constants.ANIMATION_TIMEOUT);
             break;
@@ -43,18 +39,18 @@ const handleItemError = ({ itemErrorBehavior, index, newCode, itemRefs, inputRef
             break;
         case 'remove-symbol':
         default:
+            onAnimationStart(index);
             setInnerValue(newCode);
             if (onChange) {
                 onChange(newCode.join(''));
             }
-            itemRefs.current[index]?.classList.add(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorFade, _CodeFieldtokens.classes.itemErrorAnimation);
             setTimeout(()=>{
                 const updatedCode = [
                     ...newCode
                 ];
                 updatedCode.splice(index, 1);
                 codeSetter(updatedCode);
-                itemRefs.current[index]?.classList.remove(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorFade, _CodeFieldtokens.classes.itemErrorAnimation);
+                onAnimationEnd();
                 setTimeout(()=>selectItem(index), 0);
             }, _constants.ANIMATION_TIMEOUT);
     }

package/dist/styled-components/cjs/components/CodeField/variations/_view/base.js

@@ -54,6 +54,6 @@ const base = (0, _styledcomponents.css)([
     `);box-shadow:inset 0 0 0 var(`,
     `) var(`,
     `);&.`,
-    `{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(`,
+    `{animation:shakingError 0.3s forwards,fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(`,
     `);}100%{color:transparent;}}`
-], _CodeFieldstyles.CaptionWrapper, _CodeFieldtokens.tokens.captionColor, _CodeFieldtokens.classes.captionError, _CodeFieldtokens.tokens.captionColorError, _CodeFieldstyles.ItemInput, _CodeFieldtokens.tokens.codeColor, _CodeFieldtokens.tokens.caretColor, _CodeFieldtokens.tokens.backgroundColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderColor, _CodeFieldstyles.ItemValue, _CodeFieldtokens.classes.itemSelected, _CodeFieldtokens.classes.hoverEnabled, _CodeFieldtokens.tokens.backgroundColorHover, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderColorHover, _CodeFieldtokens.classes.itemFocused, _CodeFieldtokens.classes.itemError, _CodeFieldtokens.tokens.backgroundColorFocus, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderColorFocus, _CodeFieldtokens.classes.codeErrorAnimation, _CodeFieldtokens.classes.codeError, _CodeFieldstyles.ItemInput, _CodeFieldtokens.tokens.codeColorError, _CodeFieldtokens.tokens.backgroundErrorColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderErrorColor, _CodeFieldstyles.ItemInput, _CodeFieldtokens.tokens.backgroundErrorColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderErrorColor, _CodeFieldtokens.classes.codeErrorFade, _CodeFieldstyles.ItemInput, _CodeFieldtokens.classes.itemErrorAnimation, _CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemError, _CodeFieldtokens.tokens.codeColorError, _CodeFieldtokens.tokens.backgroundErrorColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderErrorColor, _CodeFieldtokens.classes.codeErrorFade, _CodeFieldtokens.tokens.codeColorError);
+], _CodeFieldstyles.CaptionWrapper, _CodeFieldtokens.tokens.captionColor, _CodeFieldtokens.classes.captionError, _CodeFieldtokens.tokens.captionColorError, _CodeFieldstyles.ItemInput, _CodeFieldtokens.tokens.codeColor, _CodeFieldtokens.tokens.caretColor, _CodeFieldtokens.tokens.backgroundColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderColor, _CodeFieldstyles.ItemValue, _CodeFieldtokens.classes.itemSelected, _CodeFieldtokens.classes.hoverEnabled, _CodeFieldtokens.tokens.backgroundColorHover, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderColorHover, _CodeFieldtokens.classes.itemFocused, _CodeFieldtokens.classes.itemError, _CodeFieldtokens.tokens.backgroundColorFocus, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderColorFocus, _CodeFieldtokens.classes.codeErrorAnimation, _CodeFieldtokens.classes.codeError, _CodeFieldstyles.ItemInput, _CodeFieldtokens.tokens.codeColorError, _CodeFieldtokens.tokens.backgroundErrorColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderErrorColor, _CodeFieldstyles.ItemInput, _CodeFieldtokens.tokens.backgroundErrorColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderErrorColor, _CodeFieldtokens.classes.codeErrorFade, _CodeFieldstyles.ItemInput, _CodeFieldtokens.classes.itemErrorAnimation, _CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemError, _CodeFieldtokens.tokens.codeColorError, _CodeFieldtokens.tokens.backgroundErrorColor, _CodeFieldtokens.tokens.borderWidth, _CodeFieldtokens.tokens.borderErrorColor, _CodeFieldtokens.classes.itemErrorFade, _CodeFieldtokens.tokens.codeColorError);

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

@@ -17,11 +17,13 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
         const [innerOriginalValue, setInnerOriginalValue] = useState(code.join(''));
         const [activeIndex, setActiveIndex] = useState(null);
         const [selectedIndex, setSelectedIndex] = useState(null);
-        const itemRefs = useRef([]);
+        const [animatedItemErrorIndex, setAnimatedItemErrorIndex] = useState(null);
+        const [activeErrorAnimations, setActiveErrorAnimations] = useState(0);
         const nativeInputRef = useRef(null);
         const inputContainerRef = useRef(null);
         const captionRef = useRef(null);
         const onFullCodeEnterRef = useRef(onFullCodeEnter);
+        const activeErrorAnimationsRef = useRef(0);
         const inputForkRef = useForkRef(nativeInputRef, ref);
         /**
              * Храним актуальный пользовательский колбэк в ref, чтобы изменение ссылки на него
@@ -34,6 +36,15 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
         const parts = codeLength === 6 ? 2 : 1;
         const codeValue = code.join('');
         const widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
+        const isErrorAnimationPlaying = activeErrorAnimations > 0;
+        const startErrorAnimation = ()=>{
+            activeErrorAnimationsRef.current += 1;
+            setActiveErrorAnimations(activeErrorAnimationsRef.current);
+        };
+        const finishErrorAnimation = ()=>{
+            activeErrorAnimationsRef.current = Math.max(0, activeErrorAnimationsRef.current - 1);
+            setActiveErrorAnimations(activeErrorAnimationsRef.current);
+        };
         const codeSetter = (newCode)=>{
             const originalCode = newCode.join('').slice(0, codeLength);
             setInnerValue(getCodeValue(codeLength, originalCode));
@@ -57,9 +68,6 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
         const controlledOriginalValue = codeValue.split('').every(isSymbolAllowed) ? codeValue : '';
         const originalValue = typeof outerValue === 'string' ? controlledOriginalValue : innerOriginalValue;
         const clearErrorState = ()=>{
-            itemRefs.current.forEach((item)=>{
-                item?.classList.remove(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
-            });
             if (!isError) {
                 return;
             }
@@ -102,7 +110,7 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             selectLastActiveItem();
         };
         const handleChange = (event)=>{
-            if (disabled) {
+            if (disabled || activeErrorAnimationsRef.current > 0) {
                 return;
             }
             const rawValue = event.currentTarget.value.slice(0, codeLength);
@@ -120,17 +128,24 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
                 itemErrorBehavior,
                 index: invalidIndex,
                 newCode,
-                itemRefs,
                 inputRef: nativeInputRef,
                 setInnerValue,
                 setActiveIndex,
                 setSelectedIndex,
                 codeSetter,
-                onChange
+                onChange,
+                onAnimationStart: (index)=>{
+                    startErrorAnimation();
+                    setAnimatedItemErrorIndex(index);
+                },
+                onAnimationEnd: ()=>{
+                    finishErrorAnimation();
+                    setAnimatedItemErrorIndex(null);
+                }
             });
         };
         const handleKeyDown = (event)=>{
-            if (!disabled && FORBIDDEN_KEYS.includes(event.key)) {
+            if (activeErrorAnimationsRef.current > 0 || !disabled && FORBIDDEN_KEYS.includes(event.key)) {
                 event.preventDefault();
             }
             if (onKeyDown) {
@@ -142,6 +157,9 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
                 return;
             }
             event.preventDefault();
+            if (activeErrorAnimationsRef.current > 0) {
+                return;
+            }
             const rawData = event.clipboardData.getData('text/plain');
             const pastedData = rawData.split('').filter(isSymbolAllowed).slice(0, codeLength);
             const selectionStart = event.currentTarget.selectionStart ?? 0;
@@ -158,9 +176,8 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             }, 0);
         };
         /**
-             * Нормализуем внутреннее значение и refs, если количество ячеек динамически изменилось.
+             * Нормализуем внутреннее значение, если количество ячеек динамически изменилось.
              */ useEffect(()=>{
-            itemRefs.current = itemRefs.current.slice(0, codeLength);
             setInnerValue((currentCode)=>getCodeValue(codeLength, currentCode.join('')));
             setInnerOriginalValue((currentCode)=>currentCode.slice(0, codeLength));
         }, [
@@ -203,7 +220,9 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
                     setInnerValue,
                     setActiveIndex,
                     setSelectedIndex,
-                    codeSetter
+                    codeSetter,
+                    onAnimationStart: startErrorAnimation,
+                    onAnimationEnd: finishErrorAnimation
                 });
             }
         }, [
@@ -235,15 +254,15 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             ].map((_item, i)=>{
                 const inputCorrectIndex = i + codeLength / parts * partIndex;
                 const itemValue = code[inputCorrectIndex] || '';
+                const isAnimatedItemError = animatedItemErrorIndex === inputCorrectIndex;
                 return /*#__PURE__*/ React.createElement(ItemInput, {
                     key: inputCorrectIndex,
-                    ref: (element)=>{
-                        itemRefs.current[inputCorrectIndex] = element;
-                    },
                     className: cls({
                         [classes.segmented]: shape === 'segmented',
                         [classes.itemFocused]: activeIndex === inputCorrectIndex,
-                        [classes.itemError]: itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue),
+                        [classes.itemError]: isAnimatedItemError || itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue),
+                        [classes.itemErrorAnimation]: isAnimatedItemError,
+                        [classes.itemErrorFade]: isAnimatedItemError && itemErrorBehavior === 'remove-symbol',
                         [classes.hoverEnabled]: !disabled && inputCorrectIndex >= originalValue.length
                     }),
                     "data-code-field-item": ""
@@ -277,6 +296,7 @@ export const codeFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             form: form,
             required: required,
             disabled: disabled,
+            readOnly: isErrorAnimationPlaying,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy,

package/dist/styled-components/es/components/CodeField/utils/handleCodeError.js

@@ -1,7 +1,7 @@
 import { classes } from "../CodeField.tokens";
 import { ANIMATION_TIMEOUT } from "./constants";
 import { getCodeValue } from "./initialValuesHelper";
-export const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef, inputContainerRef, captionRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter })=>{
+export const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, inputRef, inputContainerRef, captionRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onAnimationStart, onAnimationEnd })=>{
     if (!inputContainerRef.current) {
         return;
     }
@@ -17,6 +17,7 @@ export const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, in
     };
     switch(codeErrorBehavior){
         case 'keep':
+            onAnimationStart();
             inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation);
             captionRef.current?.classList.add(classes.captionError);
             setTimeout(()=>{
@@ -27,6 +28,7 @@ export const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, in
                 codeSetter(newCode);
                 setInnerValue(currentCode);
                 inputContainerRef.current?.classList.remove(classes.codeErrorAnimation);
+                onAnimationEnd();
                 setTimeout(()=>{
                     selectItem(codeLength - 1, codeLength);
                 }, 0);
@@ -34,12 +36,16 @@ export const handleCodeError = ({ codeLength, codeErrorBehavior, currentCode, in
             break;
         case 'remove-code':
         default:
+            onAnimationStart();
             inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
             captionRef.current?.classList.add(classes.captionError);
             setTimeout(()=>{
                 codeSetter(getCodeValue(codeLength, ''));
-                selectItem(0, 0);
                 inputContainerRef.current?.classList.remove(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
+                onAnimationEnd();
+                setTimeout(()=>{
+                    selectItem(0, 0);
+                }, 0);
             }, ANIMATION_TIMEOUT);
     }
 };

package/dist/styled-components/es/components/CodeField/utils/handleItemError.js

@@ -1,9 +1,5 @@
-import { classes } from "../CodeField.tokens";
 import { ANIMATION_TIMEOUT } from "./constants";
-export const handleItemError = ({ itemErrorBehavior, index, newCode, itemRefs, inputRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onChange })=>{
-    if (!itemRefs.current[index]) {
-        return;
-    }
+export const handleItemError = ({ itemErrorBehavior, index, newCode, inputRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onChange, onAnimationStart, onAnimationEnd })=>{
     const selectItem = (selectionEnd)=>{
         const input = inputRef.current;
         if (!input) {
@@ -16,13 +12,13 @@ export const handleItemError = ({ itemErrorBehavior, index, newCode, itemRefs, i
     };
     switch(itemErrorBehavior){
         case 'keep':
+            onAnimationStart(index);
             setInnerValue(newCode);
             if (onChange) {
                 onChange(newCode.join(''));
             }
-            itemRefs.current[index]?.classList.add(classes.itemError, classes.itemErrorAnimation);
             setTimeout(()=>{
-                itemRefs.current[index]?.classList.remove(classes.itemErrorAnimation);
+                onAnimationEnd();
                 setTimeout(()=>selectItem(index + 1), 0);
             }, ANIMATION_TIMEOUT);
             break;
@@ -33,18 +29,18 @@ export const handleItemError = ({ itemErrorBehavior, index, newCode, itemRefs, i
             break;
         case 'remove-symbol':
         default:
+            onAnimationStart(index);
             setInnerValue(newCode);
             if (onChange) {
                 onChange(newCode.join(''));
             }
-            itemRefs.current[index]?.classList.add(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
             setTimeout(()=>{
                 const updatedCode = [
                     ...newCode
                 ];
                 updatedCode.splice(index, 1);
                 codeSetter(updatedCode);
-                itemRefs.current[index]?.classList.remove(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
+                onAnimationEnd();
                 setTimeout(()=>selectItem(index), 0);
             }, ANIMATION_TIMEOUT);
     }

package/dist/styled-components/es/components/CodeField/variations/_view/base.js

@@ -44,6 +44,6 @@ export const base = css([
     `);box-shadow:inset 0 0 0 var(`,
     `) var(`,
     `);&.`,
-    `{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(`,
+    `{animation:shakingError 0.3s forwards,fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(`,
     `);}100%{color:transparent;}}`
-], CaptionWrapper, tokens.captionColor, classes.captionError, tokens.captionColorError, ItemInput, tokens.codeColor, tokens.caretColor, tokens.backgroundColor, tokens.borderWidth, tokens.borderColor, ItemValue, classes.itemSelected, classes.hoverEnabled, tokens.backgroundColorHover, tokens.borderWidth, tokens.borderColorHover, classes.itemFocused, classes.itemError, tokens.backgroundColorFocus, tokens.borderWidth, tokens.borderColorFocus, classes.codeErrorAnimation, classes.codeError, ItemInput, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, ItemInput, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, ItemInput, classes.itemErrorAnimation, classes.itemError, classes.itemError, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, tokens.codeColorError);
+], CaptionWrapper, tokens.captionColor, classes.captionError, tokens.captionColorError, ItemInput, tokens.codeColor, tokens.caretColor, tokens.backgroundColor, tokens.borderWidth, tokens.borderColor, ItemValue, classes.itemSelected, classes.hoverEnabled, tokens.backgroundColorHover, tokens.borderWidth, tokens.borderColorHover, classes.itemFocused, classes.itemError, tokens.backgroundColorFocus, tokens.borderWidth, tokens.borderColorFocus, classes.codeErrorAnimation, classes.codeError, ItemInput, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, ItemInput, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, ItemInput, classes.itemErrorAnimation, classes.itemError, classes.itemError, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.itemErrorFade, tokens.codeColorError);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.374.0-dev.0",
+  "version": "0.374.0",
   "description": "Salute Design System blueprint",
   "exports": {
     ".": {
@@ -90,9 +90,9 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-cy-utils": "0.167.0-dev.0",
-    "@salutejs/plasma-sb-utils": "0.238.0-dev.0",
-    "@salutejs/plasma-themes": "0.59.0-dev.0",
+    "@salutejs/plasma-cy-utils": "0.167.0",
+    "@salutejs/plasma-sb-utils": "0.238.0",
+    "@salutejs/plasma-themes": "0.59.0",
     "@types/lodash": "^4.14.191",
     "@types/lodash.chunk": "4.2.9",
     "@types/lodash.throttle": "4.1.6",
@@ -145,5 +145,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "52b569a1060e4f09b2d4011cfbdc597e41ecdd6f"
+  "gitHead": "7232ffe7284cf605a4c4d39f14dda710efcc33e2"
 }

package/types/components/CodeField/CodeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../src/components/CodeField/CodeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkF,MAAM,OAAO,CAAC;AAGvG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsBxD,eAAO,MAAM,aAAa,SAAU,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;yIAiZxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBAnZQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4a5E,CAAC"}
+{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../src/components/CodeField/CodeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkF,MAAM,OAAO,CAAC;AAGvG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsBxD,eAAO,MAAM,aAAa,SAAU,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;yIAyaxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBA3aQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoc5E,CAAC"}

package/types/components/CodeField/utils/handleCodeError.d.ts

@@ -11,7 +11,9 @@ type ValidateSymbolsArgs = {
     setActiveIndex: Dispatch<SetStateAction<number | null>>;
     setSelectedIndex: Dispatch<SetStateAction<number | null>>;
     codeSetter: (newCode: Array<string>) => void;
+    onAnimationStart: () => void;
+    onAnimationEnd: () => void;
 };
-export declare const handleCodeError: ({ codeLength, codeErrorBehavior, currentCode, inputRef, inputContainerRef, captionRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, }: ValidateSymbolsArgs) => void;
+export declare const handleCodeError: ({ codeLength, codeErrorBehavior, currentCode, inputRef, inputContainerRef, captionRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onAnimationStart, onAnimationEnd, }: ValidateSymbolsArgs) => void;
 export {};
 //# sourceMappingURL=handleCodeError.d.ts.map

package/types/components/CodeField/utils/handleCodeError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handleCodeError.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeField/utils/handleCodeError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAM5D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,QAAQ,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACxD,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,eAAe,0JAWzB,mBAAmB,SA0DrB,CAAC"}
+{"version":3,"file":"handleCodeError.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeField/utils/handleCodeError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAM5D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,QAAQ,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACxD,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,4LAazB,mBAAmB,SAiErB,CAAC"}

package/types/components/CodeField/utils/handleItemError.d.ts

@@ -4,14 +4,15 @@ type ValidateSymbolsArgs = {
     itemErrorBehavior: ItemErrorBehavior;
     index: number;
     newCode: Array<string>;
-    itemRefs: MutableRefObject<Array<HTMLDivElement | null>>;
     inputRef: MutableRefObject<HTMLInputElement | null>;
     setInnerValue: Dispatch<SetStateAction<Array<string>>>;
     setActiveIndex: Dispatch<SetStateAction<number | null>>;
     setSelectedIndex: Dispatch<SetStateAction<number | null>>;
     codeSetter: (newCode: Array<string>) => void;
     onChange?: (value: string) => void;
+    onAnimationStart: (index: number) => void;
+    onAnimationEnd: () => void;
 };
-export declare const handleItemError: ({ itemErrorBehavior, index, newCode, itemRefs, inputRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onChange, }: ValidateSymbolsArgs) => void;
+export declare const handleItemError: ({ itemErrorBehavior, index, newCode, inputRef, setInnerValue, setActiveIndex, setSelectedIndex, codeSetter, onChange, onAnimationStart, onAnimationEnd, }: ValidateSymbolsArgs) => void;
 export {};
 //# sourceMappingURL=handleItemError.d.ts.map

package/types/components/CodeField/utils/handleItemError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handleItemError.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeField/utils/handleItemError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAK5D,KAAK,mBAAmB,GAAG;IACvB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACxD,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,eAAe,sIAWzB,mBAAmB,SAkErB,CAAC"}
+{"version":3,"file":"handleItemError.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeField/utils/handleItemError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAI5D,KAAK,mBAAmB,GAAG;IACvB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACxD,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,8JAYzB,mBAAmB,SAmDrB,CAAC"}