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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/css/cjs/components/CodeField/CodeField.css +1 -1
  2. package/dist/css/cjs/components/CodeField/CodeField.js +39 -15
  3. package/dist/css/cjs/components/CodeField/utils/handleCodeError.js +10 -2
  4. package/dist/css/cjs/components/CodeField/utils/handleItemError.js +7 -13
  5. package/dist/css/cjs/components/CodeField/variations/_view/base.js +1 -1
  6. package/dist/css/cjs/components/CodeField/variations/_view/{base_1irs5gi.css → base_1x8fxav.css} +1 -1
  7. package/dist/css/cjs/index.css +1 -1
  8. package/dist/css/es/components/CodeField/CodeField.css +1 -1
  9. package/dist/css/es/components/CodeField/CodeField.js +39 -15
  10. package/dist/css/es/components/CodeField/utils/handleCodeError.js +10 -2
  11. package/dist/css/es/components/CodeField/utils/handleItemError.js +7 -13
  12. package/dist/css/es/components/CodeField/variations/_view/base.js +1 -1
  13. package/dist/css/es/components/CodeField/variations/_view/{base_1irs5gi.css → base_1x8fxav.css} +1 -1
  14. package/dist/css/es/index.css +1 -1
  15. package/dist/emotion/cjs/components/CodeField/CodeField.js +35 -15
  16. package/dist/emotion/cjs/components/CodeField/utils/handleCodeError.js +8 -2
  17. package/dist/emotion/cjs/components/CodeField/utils/handleItemError.js +5 -9
  18. package/dist/emotion/cjs/components/CodeField/variations/_view/base.js +1 -1
  19. package/dist/emotion/es/components/CodeField/CodeField.js +35 -15
  20. package/dist/emotion/es/components/CodeField/utils/handleCodeError.js +8 -2
  21. package/dist/emotion/es/components/CodeField/utils/handleItemError.js +5 -9
  22. package/dist/emotion/es/components/CodeField/variations/_view/base.js +1 -1
  23. package/dist/styled-components/cjs/components/CodeField/CodeField.js +35 -15
  24. package/dist/styled-components/cjs/components/CodeField/utils/handleCodeError.js +8 -2
  25. package/dist/styled-components/cjs/components/CodeField/utils/handleItemError.js +5 -9
  26. package/dist/styled-components/cjs/components/CodeField/variations/_view/base.js +2 -2
  27. package/dist/styled-components/es/components/CodeField/CodeField.js +35 -15
  28. package/dist/styled-components/es/components/CodeField/utils/handleCodeError.js +8 -2
  29. package/dist/styled-components/es/components/CodeField/utils/handleItemError.js +5 -9
  30. package/dist/styled-components/es/components/CodeField/variations/_view/base.js +2 -2
  31. package/package.json +5 -5
  32. package/types/components/CodeField/CodeField.d.ts.map +1 -1
  33. package/types/components/CodeField/utils/handleCodeError.d.ts +3 -1
  34. package/types/components/CodeField/utils/handleCodeError.d.ts.map +1 -1
  35. package/types/components/CodeField/utils/handleItemError.d.ts +3 -2
  36. package/types/components/CodeField/utils/handleItemError.d.ts.map +1 -1
package/dist/css/cjs/components/CodeField/CodeField.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .CodeField_styles_8a3r1d_n1cshk1v__9f41d96d{position:absolute;z-index:1;inset:0;box-sizing:border-box;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:1;color:transparent;caret-color:transparent;background:transparent;border:0;outline:0;padding:0;line-height:1;-webkit-letter-spacing:-0.5em;-moz-letter-spacing:-0.5em;-ms-letter-spacing:-0.5em;letter-spacing:-0.5em;cursor:text;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d::selection{color:transparent;background:transparent;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:autofill,.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:-webkit-autofill{color:transparent !important;-webkit-text-fill-color:transparent !important;background:transparent !important;box-shadow:none !important;-webkit-box-shadow:none !important;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:disabled{cursor:not-allowed;}
10
10
  .CodeField_styles_8a3r1d_c1gkm6yt__9f41d96d{text-align:var(--c1gkm6yt-0);-webkit-align-self:var(--c1gkm6yt-0);-ms-flex-item-align:var(--c1gkm6yt-0);align-self:var(--c1gkm6yt-0);width:var(--c1gkm6yt-1);white-space:pre-line;}
11
11
 
12
- .base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_c1gkm6yt__edad8572{color:var(--plasma-codefield-caption-color);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_c1gkm6yt__edad8572.base_1irs5gi_codefieldCaptionError__edad8572{color:var(--plasma-codefield-caption-color-error);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_i1i4mfds__edad8572{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_i101ux2r__edad8572.base_1irs5gi_codefieldItemSelected__edad8572{color:HighlightText;background-color:Highlight;}.base_1irs5gi_bk7ap5v__edad8572:hover .base_1irs5gi_codefieldItemHoverEnabled__edad8572{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_1irs5gi_bk7ap5v__edad8572:focus-within .base_1irs5gi_codefieldItemFocused__edad8572:not(.base_1irs5gi_codefieldItemError__edad8572){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeErrorAnimation__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572 .base_1irs5gi_i1i4mfds__edad8572{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572:focus-within .base_1irs5gi_i1i4mfds__edad8572{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572.base_1irs5gi_codefieldCodeErrorFade__edad8572 .base_1irs5gi_i1i4mfds__edad8572{-webkit-animation:base_1irs5gi_fadeErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_fadeErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemErrorAnimation__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572,.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572.base_1irs5gi_codefieldCodeErrorFade__edad8572,.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572:focus-within.base_1irs5gi_codefieldCodeErrorFade__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards :local(fadeError-bk7ap5v) 0.3s :local(forwards);animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards :local(fadeError-bk7ap5v) 0.3s :local(forwards);}@-webkit-keyframes base_1irs5gi_shakingErrorBk7ap5v__edad8572{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_1irs5gi_shakingErrorBk7ap5v__edad8572{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_1irs5gi_fadeErrorBk7ap5v__edad8572{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_1irs5gi_fadeErrorBk7ap5v__edad8572{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
12
+ .base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_c1gkm6yt__facda146{color:var(--plasma-codefield-caption-color);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_c1gkm6yt__facda146.base_1x8fxav_codefieldCaptionError__facda146{color:var(--plasma-codefield-caption-color-error);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_i1i4mfds__facda146{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_i101ux2r__facda146.base_1x8fxav_codefieldItemSelected__facda146{color:HighlightText;background-color:Highlight;}.base_1x8fxav_bk7ap5v__facda146:hover .base_1x8fxav_codefieldItemHoverEnabled__facda146{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_1x8fxav_bk7ap5v__facda146:focus-within .base_1x8fxav_codefieldItemFocused__facda146:not(.base_1x8fxav_codefieldItemError__facda146){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeErrorAnimation__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146 .base_1x8fxav_i1i4mfds__facda146{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146:focus-within .base_1x8fxav_i1i4mfds__facda146{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146.base_1x8fxav_codefieldCodeErrorFade__facda146 .base_1x8fxav_i1i4mfds__facda146{-webkit-animation:base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemErrorAnimation__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146,.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146.base_1x8fxav_codefieldItemErrorFade__facda146,.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146:focus-within.base_1x8fxav_codefieldItemErrorFade__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards,base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards,base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;}@-webkit-keyframes base_1x8fxav_shakingErrorBk7ap5v__facda146{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_1x8fxav_shakingErrorBk7ap5v__facda146{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_1x8fxav_fadeErrorBk7ap5v__facda146{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_1x8fxav_fadeErrorBk7ap5v__facda146{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
13
13
 
14
14
  .base_1y2zhxc_byco6g2__ea65e94f{gap:var(--plasma-codefield-caption-gap);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c22lnt4__ea65e94f,.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c1if332c__ea65e94f{gap:var(--plasma-codefield-code-item-gap);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_i1i4mfds__ea65e94f{width:var(--plasma-codefield-item-width);height:var(--plasma-codefield-item-height);font-family:var(--plasma-codefield-font-family);font-size:var(--plasma-codefield-font-size);font-style:var(--plasma-codefield-font-style);font-weight:var(--plasma-codefield-font-weight);-webkit-letter-spacing:var(--plasma-codefield-letter-spacing);-moz-letter-spacing:var(--plasma-codefield-letter-spacing);-ms-letter-spacing:var(--plasma-codefield-letter-spacing);letter-spacing:var(--plasma-codefield-letter-spacing);line-height:var(--plasma-codefield-line-height);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_ilojy86__ea65e94f{height:var(--plasma-codefield-font-size);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_n1cshk1v__ea65e94f{font-size:var(--plasma-codefield-item-height);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c1gkm6yt__ea65e94f{font-family:var(--plasma-codefield-caption-font-family);font-size:var(--plasma-codefield-caption-font-style);font-style:var(--plasma-codefield-caption-font-size);font-weight:var(--plasma-codefield-caption-font-weight);-webkit-letter-spacing:var(--plasma-codefield-caption-letter-spacing);-moz-letter-spacing:var(--plasma-codefield-caption-letter-spacing);-ms-letter-spacing:var(--plasma-codefield-caption-letter-spacing);letter-spacing:var(--plasma-codefield-caption-letter-spacing);line-height:var(--plasma-codefield-caption-line-height);}
15
15
 
package/dist/css/cjs/components/CodeField/CodeField.js CHANGED
@@ -89,11 +89,19 @@ var codeFieldRoot = function codeFieldRoot(Root) {
89
89
  _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
90
90
  selectedIndex = _useState8[0],
91
91
  setSelectedIndex = _useState8[1];
92
- var itemRefs = React.useRef([]);
92
+ var _useState9 = React.useState(null),
93
+ _useState0 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
94
+ animatedItemErrorIndex = _useState0[0],
95
+ setAnimatedItemErrorIndex = _useState0[1];
96
+ var _useState1 = React.useState(0),
97
+ _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState1, 2),
98
+ activeErrorAnimations = _useState10[0],
99
+ setActiveErrorAnimations = _useState10[1];
93
100
  var nativeInputRef = React.useRef(null);
94
101
  var inputContainerRef = React.useRef(null);
95
102
  var captionRef = React.useRef(null);
96
103
  var onFullCodeEnterRef = React.useRef(onFullCodeEnter);
104
+ var activeErrorAnimationsRef = React.useRef(0);
97
105
  var inputForkRef = useForkRef.useForkRef(nativeInputRef, ref);
98
106
 
99
107
  /**
@@ -108,6 +116,15 @@ var codeFieldRoot = function codeFieldRoot(Root) {
108
116
  var parts = codeLength === 6 ? 2 : 1;
109
117
  var codeValue = code.join('');
110
118
  var widthValue = width ? getSizeValueFromProp.getSizeValueFromProp(width, 'rem') : undefined;
119
+ var isErrorAnimationPlaying = activeErrorAnimations > 0;
120
+ var startErrorAnimation = function startErrorAnimation() {
121
+ activeErrorAnimationsRef.current += 1;
122
+ setActiveErrorAnimations(activeErrorAnimationsRef.current);
123
+ };
124
+ var finishErrorAnimation = function finishErrorAnimation() {
125
+ activeErrorAnimationsRef.current = Math.max(0, activeErrorAnimationsRef.current - 1);
126
+ setActiveErrorAnimations(activeErrorAnimationsRef.current);
127
+ };
111
128
  var codeSetter = function codeSetter(newCode) {
112
129
  var originalCode = newCode.join('').slice(0, codeLength);
113
130
  setInnerValue(initialValuesHelper.getCodeValue(codeLength, originalCode));
@@ -134,9 +151,6 @@ var codeFieldRoot = function codeFieldRoot(Root) {
134
151
  var originalValue = typeof outerValue === 'string' ? controlledOriginalValue : innerOriginalValue;
135
152
  var clearErrorState = function clearErrorState() {
136
153
  var _captionRef$current, _inputContainerRef$cu;
137
- itemRefs.current.forEach(function (item) {
138
- item === null || item === void 0 || item.classList.remove(CodeField_tokens.classes.itemError, CodeField_tokens.classes.itemErrorFade, CodeField_tokens.classes.itemErrorAnimation);
139
- });
140
154
  if (!isError) {
141
155
  return;
142
156
  }
@@ -181,7 +195,7 @@ var codeFieldRoot = function codeFieldRoot(Root) {
181
195
  };
182
196
  var handleChange = function handleChange(event) {
183
197
  var _event$currentTarget$;
184
- if (disabled) {
198
+ if (disabled || activeErrorAnimationsRef.current > 0) {
185
199
  return;
186
200
  }
187
201
  var rawValue = event.currentTarget.value.slice(0, codeLength);
@@ -201,17 +215,24 @@ var codeFieldRoot = function codeFieldRoot(Root) {
201
215
  itemErrorBehavior: itemErrorBehavior,
202
216
  index: invalidIndex,
203
217
  newCode: newCode,
204
- itemRefs: itemRefs,
205
218
  inputRef: nativeInputRef,
206
219
  setInnerValue: setInnerValue,
207
220
  setActiveIndex: setActiveIndex,
208
221
  setSelectedIndex: setSelectedIndex,
209
222
  codeSetter: codeSetter,
210
- onChange: onChange
223
+ onChange: onChange,
224
+ onAnimationStart: function onAnimationStart(index) {
225
+ startErrorAnimation();
226
+ setAnimatedItemErrorIndex(index);
227
+ },
228
+ onAnimationEnd: function onAnimationEnd() {
229
+ finishErrorAnimation();
230
+ setAnimatedItemErrorIndex(null);
231
+ }
211
232
  });
212
233
  };
213
234
  var handleKeyDown = function handleKeyDown(event) {
214
- if (!disabled && constants.FORBIDDEN_KEYS.includes(event.key)) {
235
+ if (activeErrorAnimationsRef.current > 0 || !disabled && constants.FORBIDDEN_KEYS.includes(event.key)) {
215
236
  event.preventDefault();
216
237
  }
217
238
  if (onKeyDown) {
@@ -224,6 +245,9 @@ var codeFieldRoot = function codeFieldRoot(Root) {
224
245
  return;
225
246
  }
226
247
  event.preventDefault();
248
+ if (activeErrorAnimationsRef.current > 0) {
249
+ return;
250
+ }
227
251
  var rawData = event.clipboardData.getData('text/plain');
228
252
  var pastedData = rawData.split('').filter(isSymbolAllowed).slice(0, codeLength);
229
253
  var selectionStart = (_event$currentTarget$2 = event.currentTarget.selectionStart) !== null && _event$currentTarget$2 !== void 0 ? _event$currentTarget$2 : 0;
@@ -242,10 +266,9 @@ var codeFieldRoot = function codeFieldRoot(Root) {
242
266
  };
243
267
 
244
268
  /**
245
- * Нормализуем внутреннее значение и refs, если количество ячеек динамически изменилось.
269
+ * Нормализуем внутреннее значение, если количество ячеек динамически изменилось.
246
270
  */
247
271
  React.useEffect(function () {
248
- itemRefs.current = itemRefs.current.slice(0, codeLength);
249
272
  setInnerValue(function (currentCode) {
250
273
  return initialValuesHelper.getCodeValue(codeLength, currentCode.join(''));
251
274
  });
@@ -291,7 +314,9 @@ var codeFieldRoot = function codeFieldRoot(Root) {
291
314
  setInnerValue: setInnerValue,
292
315
  setActiveIndex: setActiveIndex,
293
316
  setSelectedIndex: setSelectedIndex,
294
- codeSetter: codeSetter
317
+ codeSetter: codeSetter,
318
+ onAnimationStart: startErrorAnimation,
319
+ onAnimationEnd: finishErrorAnimation
295
320
  });
296
321
  }
297
322
  }, [isError]);
@@ -313,12 +338,10 @@ var codeFieldRoot = function codeFieldRoot(Root) {
313
338
  }, _rollupPluginBabelHelpers.toConsumableArray(Array(codeLength / parts)).map(function (_item, i) {
314
339
  var inputCorrectIndex = i + codeLength / parts * partIndex;
315
340
  var itemValue = code[inputCorrectIndex] || '';
341
+ var isAnimatedItemError = animatedItemErrorIndex === inputCorrectIndex;
316
342
  return /*#__PURE__*/React__default.default.createElement(CodeField_styles.ItemInput, {
317
343
  key: inputCorrectIndex,
318
- ref: function ref(element) {
319
- itemRefs.current[inputCorrectIndex] = element;
320
- },
321
- className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, CodeField_tokens.classes.segmented, shape === 'segmented'), CodeField_tokens.classes.itemFocused, activeIndex === inputCorrectIndex), CodeField_tokens.classes.itemError, itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue)), CodeField_tokens.classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length)),
344
+ className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, CodeField_tokens.classes.segmented, shape === 'segmented'), CodeField_tokens.classes.itemFocused, activeIndex === inputCorrectIndex), CodeField_tokens.classes.itemError, isAnimatedItemError || itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue)), CodeField_tokens.classes.itemErrorAnimation, isAnimatedItemError), CodeField_tokens.classes.itemErrorFade, isAnimatedItemError && itemErrorBehavior === 'remove-symbol'), CodeField_tokens.classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length)),
322
345
  "data-code-field-item": ""
323
346
  }, itemValue ? /*#__PURE__*/React__default.default.createElement(CodeField_styles.ItemValue, {
324
347
  className: cls__default.default(_rollupPluginBabelHelpers.defineProperty({}, CodeField_tokens.classes.itemSelected, selectedIndex === inputCorrectIndex)),
@@ -349,6 +372,7 @@ var codeFieldRoot = function codeFieldRoot(Root) {
349
372
  form: form,
350
373
  required: required,
351
374
  disabled: disabled,
375
+ readOnly: isErrorAnimationPlaying,
352
376
  "aria-label": ariaLabel,
353
377
  "aria-describedby": ariaDescribedBy,
354
378
  "aria-labelledby": ariaLabelledBy,
package/dist/css/cjs/components/CodeField/utils/handleCodeError.js CHANGED
@@ -18,7 +18,9 @@ var handleCodeError = function handleCodeError(_ref) {
18
18
  setInnerValue = _ref.setInnerValue,
19
19
  setActiveIndex = _ref.setActiveIndex,
20
20
  setSelectedIndex = _ref.setSelectedIndex,
21
- codeSetter = _ref.codeSetter;
21
+ codeSetter = _ref.codeSetter,
22
+ onAnimationStart = _ref.onAnimationStart,
23
+ onAnimationEnd = _ref.onAnimationEnd;
22
24
  if (!inputContainerRef.current) {
23
25
  return;
24
26
  }
@@ -34,6 +36,7 @@ var handleCodeError = function handleCodeError(_ref) {
34
36
  };
35
37
  switch (codeErrorBehavior) {
36
38
  case 'keep':
39
+ onAnimationStart();
37
40
  inputContainerRef.current.classList.add(CodeField_tokens.classes.codeError, CodeField_tokens.classes.codeErrorAnimation);
38
41
  (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.add(CodeField_tokens.classes.captionError);
39
42
  setTimeout(function () {
@@ -43,6 +46,7 @@ var handleCodeError = function handleCodeError(_ref) {
43
46
  codeSetter(newCode);
44
47
  setInnerValue(currentCode);
45
48
  (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 || _inputContainerRef$cu.classList.remove(CodeField_tokens.classes.codeErrorAnimation);
49
+ onAnimationEnd();
46
50
  setTimeout(function () {
47
51
  selectItem(codeLength - 1, codeLength);
48
52
  }, 0);
@@ -50,13 +54,17 @@ var handleCodeError = function handleCodeError(_ref) {
50
54
  break;
51
55
  case 'remove-code':
52
56
  default:
57
+ onAnimationStart();
53
58
  inputContainerRef.current.classList.add(CodeField_tokens.classes.codeError, CodeField_tokens.classes.codeErrorAnimation, CodeField_tokens.classes.codeErrorFade);
54
59
  (_captionRef$current2 = captionRef.current) === null || _captionRef$current2 === void 0 || _captionRef$current2.classList.add(CodeField_tokens.classes.captionError);
55
60
  setTimeout(function () {
56
61
  var _inputContainerRef$cu2;
57
62
  codeSetter(initialValuesHelper.getCodeValue(codeLength, ''));
58
- selectItem(0, 0);
59
63
  (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 || _inputContainerRef$cu2.classList.remove(CodeField_tokens.classes.codeError, CodeField_tokens.classes.codeErrorAnimation, CodeField_tokens.classes.codeErrorFade);
64
+ onAnimationEnd();
65
+ setTimeout(function () {
66
+ selectItem(0, 0);
67
+ }, 0);
60
68
  }, constants.ANIMATION_TIMEOUT);
61
69
  }
62
70
  };
package/dist/css/cjs/components/CodeField/utils/handleItemError.js CHANGED
@@ -3,24 +3,20 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
6
- var CodeField_tokens = require('../CodeField.tokens.js');
7
6
  var constants = require('./constants.js');
8
7
 
9
8
  var handleItemError = function handleItemError(_ref) {
10
- var _itemRefs$current$ind, _itemRefs$current$ind3;
11
9
  var itemErrorBehavior = _ref.itemErrorBehavior,
12
10
  index = _ref.index,
13
11
  newCode = _ref.newCode,
14
- itemRefs = _ref.itemRefs,
15
12
  inputRef = _ref.inputRef,
16
13
  setInnerValue = _ref.setInnerValue,
17
14
  setActiveIndex = _ref.setActiveIndex,
18
15
  setSelectedIndex = _ref.setSelectedIndex,
19
16
  codeSetter = _ref.codeSetter,
20
- onChange = _ref.onChange;
21
- if (!itemRefs.current[index]) {
22
- return;
23
- }
17
+ onChange = _ref.onChange,
18
+ onAnimationStart = _ref.onAnimationStart,
19
+ onAnimationEnd = _ref.onAnimationEnd;
24
20
  var selectItem = function selectItem(selectionEnd) {
25
21
  var input = inputRef.current;
26
22
  if (!input) {
@@ -33,14 +29,13 @@ var handleItemError = function handleItemError(_ref) {
33
29
  };
34
30
  switch (itemErrorBehavior) {
35
31
  case 'keep':
32
+ onAnimationStart(index);
36
33
  setInnerValue(newCode);
37
34
  if (onChange) {
38
35
  onChange(newCode.join(''));
39
36
  }
40
- (_itemRefs$current$ind = itemRefs.current[index]) === null || _itemRefs$current$ind === void 0 || _itemRefs$current$ind.classList.add(CodeField_tokens.classes.itemError, CodeField_tokens.classes.itemErrorAnimation);
41
37
  setTimeout(function () {
42
- var _itemRefs$current$ind2;
43
- (_itemRefs$current$ind2 = itemRefs.current[index]) === null || _itemRefs$current$ind2 === void 0 || _itemRefs$current$ind2.classList.remove(CodeField_tokens.classes.itemErrorAnimation);
38
+ onAnimationEnd();
44
39
  setTimeout(function () {
45
40
  return selectItem(index + 1);
46
41
  }, 0);
@@ -55,17 +50,16 @@ var handleItemError = function handleItemError(_ref) {
55
50
  break;
56
51
  case 'remove-symbol':
57
52
  default:
53
+ onAnimationStart(index);
58
54
  setInnerValue(newCode);
59
55
  if (onChange) {
60
56
  onChange(newCode.join(''));
61
57
  }
62
- (_itemRefs$current$ind3 = itemRefs.current[index]) === null || _itemRefs$current$ind3 === void 0 || _itemRefs$current$ind3.classList.add(CodeField_tokens.classes.itemError, CodeField_tokens.classes.itemErrorFade, CodeField_tokens.classes.itemErrorAnimation);
63
58
  setTimeout(function () {
64
- var _itemRefs$current$ind4;
65
59
  var updatedCode = _rollupPluginBabelHelpers.toConsumableArray(newCode);
66
60
  updatedCode.splice(index, 1);
67
61
  codeSetter(updatedCode);
68
- (_itemRefs$current$ind4 = itemRefs.current[index]) === null || _itemRefs$current$ind4 === void 0 || _itemRefs$current$ind4.classList.remove(CodeField_tokens.classes.itemError, CodeField_tokens.classes.itemErrorFade, CodeField_tokens.classes.itemErrorAnimation);
62
+ onAnimationEnd();
69
63
  setTimeout(function () {
70
64
  return selectItem(index);
71
65
  }, 0);
package/dist/css/cjs/components/CodeField/variations/_view/base.js CHANGED
@@ -1,4 +1,4 @@
1
- require('./base_1irs5gi.css');
1
+ require('./base_1x8fxav.css');
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
package/dist/css/cjs/components/CodeField/variations/_view/{base_1irs5gi.css → base_1x8fxav.css} RENAMED
@@ -1 +1 @@
1
- .bk7ap5v .c1gkm6yt{color:var(--plasma-codefield-caption-color);}.bk7ap5v .c1gkm6yt.codefield-caption-error{color:var(--plasma-codefield-caption-color-error);}.bk7ap5v .i1i4mfds{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.bk7ap5v .i101ux2r.codefield-item-selected{color:HighlightText;background-color:Highlight;}.bk7ap5v:hover .codefield-item-hover-enabled{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.bk7ap5v:focus-within .codefield-item-focused:not(.codefield-item-error){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.bk7ap5v.bk7ap5v .codefield-code-error-animation{-webkit-animation:shakingError-bk7ap5v 0.3s forwards;animation:shakingError-bk7ap5v 0.3s forwards;}.bk7ap5v.bk7ap5v .codefield-code-error .i1i4mfds{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.bk7ap5v.bk7ap5v .codefield-code-error:focus-within .i1i4mfds{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.bk7ap5v.bk7ap5v .codefield-code-error.codefield-code-error-fade .i1i4mfds{-webkit-animation:fadeError-bk7ap5v 0.3s forwards;animation:fadeError-bk7ap5v 0.3s forwards;}.bk7ap5v.bk7ap5v .codefield-item-error-animation{-webkit-animation:shakingError-bk7ap5v 0.3s forwards;animation:shakingError-bk7ap5v 0.3s forwards;}.bk7ap5v.bk7ap5v .codefield-item-error,.bk7ap5v.bk7ap5v .codefield-item-error:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.bk7ap5v.bk7ap5v .codefield-item-error.codefield-code-error-fade,.bk7ap5v.bk7ap5v .codefield-item-error:focus-within.codefield-code-error-fade{-webkit-animation:shakingError-bk7ap5v 0.3s forwards fadeError-bk7ap5v 0.3s forwards;animation:shakingError-bk7ap5v 0.3s forwards fadeError-bk7ap5v 0.3s forwards;}@-webkit-keyframes shakingError-bk7ap5v{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes shakingError-bk7ap5v{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes fadeError-bk7ap5v{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes fadeError-bk7ap5v{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
1
+ .bk7ap5v .c1gkm6yt{color:var(--plasma-codefield-caption-color);}.bk7ap5v .c1gkm6yt.codefield-caption-error{color:var(--plasma-codefield-caption-color-error);}.bk7ap5v .i1i4mfds{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.bk7ap5v .i101ux2r.codefield-item-selected{color:HighlightText;background-color:Highlight;}.bk7ap5v:hover .codefield-item-hover-enabled{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.bk7ap5v:focus-within .codefield-item-focused:not(.codefield-item-error){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.bk7ap5v.bk7ap5v .codefield-code-error-animation{-webkit-animation:shakingError-bk7ap5v 0.3s forwards;animation:shakingError-bk7ap5v 0.3s forwards;}.bk7ap5v.bk7ap5v .codefield-code-error .i1i4mfds{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.bk7ap5v.bk7ap5v .codefield-code-error:focus-within .i1i4mfds{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.bk7ap5v.bk7ap5v .codefield-code-error.codefield-code-error-fade .i1i4mfds{-webkit-animation:fadeError-bk7ap5v 0.3s forwards;animation:fadeError-bk7ap5v 0.3s forwards;}.bk7ap5v.bk7ap5v .codefield-item-error-animation{-webkit-animation:shakingError-bk7ap5v 0.3s forwards;animation:shakingError-bk7ap5v 0.3s forwards;}.bk7ap5v.bk7ap5v .codefield-item-error,.bk7ap5v.bk7ap5v .codefield-item-error:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.bk7ap5v.bk7ap5v .codefield-item-error.codefield-item-error-fade,.bk7ap5v.bk7ap5v .codefield-item-error:focus-within.codefield-item-error-fade{-webkit-animation:shakingError-bk7ap5v 0.3s forwards,fadeError-bk7ap5v 0.3s forwards;animation:shakingError-bk7ap5v 0.3s forwards,fadeError-bk7ap5v 0.3s forwards;}@-webkit-keyframes shakingError-bk7ap5v{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes shakingError-bk7ap5v{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes fadeError-bk7ap5v{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes fadeError-bk7ap5v{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
package/dist/css/cjs/index.css CHANGED
@@ -1115,7 +1115,7 @@
1115
1115
  .CodeField_styles_8a3r1d_n1cshk1v__9f41d96d{position:absolute;z-index:1;inset:0;box-sizing:border-box;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:1;color:transparent;caret-color:transparent;background:transparent;border:0;outline:0;padding:0;line-height:1;-webkit-letter-spacing:-0.5em;-moz-letter-spacing:-0.5em;-ms-letter-spacing:-0.5em;letter-spacing:-0.5em;cursor:text;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d::selection{color:transparent;background:transparent;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:autofill,.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:-webkit-autofill{color:transparent !important;-webkit-text-fill-color:transparent !important;background:transparent !important;box-shadow:none !important;-webkit-box-shadow:none !important;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:disabled{cursor:not-allowed;}
1116
1116
  .CodeField_styles_8a3r1d_c1gkm6yt__9f41d96d{text-align:var(--c1gkm6yt-0);-webkit-align-self:var(--c1gkm6yt-0);-ms-flex-item-align:var(--c1gkm6yt-0);align-self:var(--c1gkm6yt-0);width:var(--c1gkm6yt-1);white-space:pre-line;}
1117
1117
 
1118
- .base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_c1gkm6yt__edad8572{color:var(--plasma-codefield-caption-color);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_c1gkm6yt__edad8572.base_1irs5gi_codefieldCaptionError__edad8572{color:var(--plasma-codefield-caption-color-error);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_i1i4mfds__edad8572{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_i101ux2r__edad8572.base_1irs5gi_codefieldItemSelected__edad8572{color:HighlightText;background-color:Highlight;}.base_1irs5gi_bk7ap5v__edad8572:hover .base_1irs5gi_codefieldItemHoverEnabled__edad8572{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_1irs5gi_bk7ap5v__edad8572:focus-within .base_1irs5gi_codefieldItemFocused__edad8572:not(.base_1irs5gi_codefieldItemError__edad8572){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeErrorAnimation__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572 .base_1irs5gi_i1i4mfds__edad8572{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572:focus-within .base_1irs5gi_i1i4mfds__edad8572{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572.base_1irs5gi_codefieldCodeErrorFade__edad8572 .base_1irs5gi_i1i4mfds__edad8572{-webkit-animation:base_1irs5gi_fadeErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_fadeErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemErrorAnimation__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572,.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572.base_1irs5gi_codefieldCodeErrorFade__edad8572,.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572:focus-within.base_1irs5gi_codefieldCodeErrorFade__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards :local(fadeError-bk7ap5v) 0.3s :local(forwards);animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards :local(fadeError-bk7ap5v) 0.3s :local(forwards);}@-webkit-keyframes base_1irs5gi_shakingErrorBk7ap5v__edad8572{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_1irs5gi_shakingErrorBk7ap5v__edad8572{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_1irs5gi_fadeErrorBk7ap5v__edad8572{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_1irs5gi_fadeErrorBk7ap5v__edad8572{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
1118
+ .base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_c1gkm6yt__facda146{color:var(--plasma-codefield-caption-color);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_c1gkm6yt__facda146.base_1x8fxav_codefieldCaptionError__facda146{color:var(--plasma-codefield-caption-color-error);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_i1i4mfds__facda146{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_i101ux2r__facda146.base_1x8fxav_codefieldItemSelected__facda146{color:HighlightText;background-color:Highlight;}.base_1x8fxav_bk7ap5v__facda146:hover .base_1x8fxav_codefieldItemHoverEnabled__facda146{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_1x8fxav_bk7ap5v__facda146:focus-within .base_1x8fxav_codefieldItemFocused__facda146:not(.base_1x8fxav_codefieldItemError__facda146){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeErrorAnimation__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146 .base_1x8fxav_i1i4mfds__facda146{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146:focus-within .base_1x8fxav_i1i4mfds__facda146{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146.base_1x8fxav_codefieldCodeErrorFade__facda146 .base_1x8fxav_i1i4mfds__facda146{-webkit-animation:base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemErrorAnimation__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146,.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146.base_1x8fxav_codefieldItemErrorFade__facda146,.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146:focus-within.base_1x8fxav_codefieldItemErrorFade__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards,base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards,base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;}@-webkit-keyframes base_1x8fxav_shakingErrorBk7ap5v__facda146{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_1x8fxav_shakingErrorBk7ap5v__facda146{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_1x8fxav_fadeErrorBk7ap5v__facda146{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_1x8fxav_fadeErrorBk7ap5v__facda146{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
1119
1119
 
1120
1120
  .base_1y2zhxc_byco6g2__ea65e94f{gap:var(--plasma-codefield-caption-gap);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c22lnt4__ea65e94f,.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c1if332c__ea65e94f{gap:var(--plasma-codefield-code-item-gap);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_i1i4mfds__ea65e94f{width:var(--plasma-codefield-item-width);height:var(--plasma-codefield-item-height);font-family:var(--plasma-codefield-font-family);font-size:var(--plasma-codefield-font-size);font-style:var(--plasma-codefield-font-style);font-weight:var(--plasma-codefield-font-weight);-webkit-letter-spacing:var(--plasma-codefield-letter-spacing);-moz-letter-spacing:var(--plasma-codefield-letter-spacing);-ms-letter-spacing:var(--plasma-codefield-letter-spacing);letter-spacing:var(--plasma-codefield-letter-spacing);line-height:var(--plasma-codefield-line-height);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_ilojy86__ea65e94f{height:var(--plasma-codefield-font-size);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_n1cshk1v__ea65e94f{font-size:var(--plasma-codefield-item-height);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c1gkm6yt__ea65e94f{font-family:var(--plasma-codefield-caption-font-family);font-size:var(--plasma-codefield-caption-font-style);font-style:var(--plasma-codefield-caption-font-size);font-weight:var(--plasma-codefield-caption-font-weight);-webkit-letter-spacing:var(--plasma-codefield-caption-letter-spacing);-moz-letter-spacing:var(--plasma-codefield-caption-letter-spacing);-ms-letter-spacing:var(--plasma-codefield-caption-letter-spacing);letter-spacing:var(--plasma-codefield-caption-letter-spacing);line-height:var(--plasma-codefield-caption-line-height);}
1121
1121
 
package/dist/css/es/components/CodeField/CodeField.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .CodeField_styles_8a3r1d_n1cshk1v__9f41d96d{position:absolute;z-index:1;inset:0;box-sizing:border-box;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:1;color:transparent;caret-color:transparent;background:transparent;border:0;outline:0;padding:0;line-height:1;-webkit-letter-spacing:-0.5em;-moz-letter-spacing:-0.5em;-ms-letter-spacing:-0.5em;letter-spacing:-0.5em;cursor:text;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d::selection{color:transparent;background:transparent;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:autofill,.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:-webkit-autofill{color:transparent !important;-webkit-text-fill-color:transparent !important;background:transparent !important;box-shadow:none !important;-webkit-box-shadow:none !important;}.CodeField_styles_8a3r1d_n1cshk1v__9f41d96d:disabled{cursor:not-allowed;}
10
10
  .CodeField_styles_8a3r1d_c1gkm6yt__9f41d96d{text-align:var(--c1gkm6yt-0);-webkit-align-self:var(--c1gkm6yt-0);-ms-flex-item-align:var(--c1gkm6yt-0);align-self:var(--c1gkm6yt-0);width:var(--c1gkm6yt-1);white-space:pre-line;}
11
11
 
12
- .base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_c1gkm6yt__edad8572{color:var(--plasma-codefield-caption-color);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_c1gkm6yt__edad8572.base_1irs5gi_codefieldCaptionError__edad8572{color:var(--plasma-codefield-caption-color-error);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_i1i4mfds__edad8572{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_i101ux2r__edad8572.base_1irs5gi_codefieldItemSelected__edad8572{color:HighlightText;background-color:Highlight;}.base_1irs5gi_bk7ap5v__edad8572:hover .base_1irs5gi_codefieldItemHoverEnabled__edad8572{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_1irs5gi_bk7ap5v__edad8572:focus-within .base_1irs5gi_codefieldItemFocused__edad8572:not(.base_1irs5gi_codefieldItemError__edad8572){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeErrorAnimation__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572 .base_1irs5gi_i1i4mfds__edad8572{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572:focus-within .base_1irs5gi_i1i4mfds__edad8572{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldCodeError__edad8572.base_1irs5gi_codefieldCodeErrorFade__edad8572 .base_1irs5gi_i1i4mfds__edad8572{-webkit-animation:base_1irs5gi_fadeErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_fadeErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemErrorAnimation__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards;}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572,.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572.base_1irs5gi_codefieldCodeErrorFade__edad8572,.base_1irs5gi_bk7ap5v__edad8572.base_1irs5gi_bk7ap5v__edad8572 .base_1irs5gi_codefieldItemError__edad8572:focus-within.base_1irs5gi_codefieldCodeErrorFade__edad8572{-webkit-animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards :local(fadeError-bk7ap5v) 0.3s :local(forwards);animation:base_1irs5gi_shakingErrorBk7ap5v__edad8572 0.3s forwards :local(fadeError-bk7ap5v) 0.3s :local(forwards);}@-webkit-keyframes base_1irs5gi_shakingErrorBk7ap5v__edad8572{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_1irs5gi_shakingErrorBk7ap5v__edad8572{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_1irs5gi_fadeErrorBk7ap5v__edad8572{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_1irs5gi_fadeErrorBk7ap5v__edad8572{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
12
+ .base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_c1gkm6yt__facda146{color:var(--plasma-codefield-caption-color);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_c1gkm6yt__facda146.base_1x8fxav_codefieldCaptionError__facda146{color:var(--plasma-codefield-caption-color-error);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_i1i4mfds__facda146{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_i101ux2r__facda146.base_1x8fxav_codefieldItemSelected__facda146{color:HighlightText;background-color:Highlight;}.base_1x8fxav_bk7ap5v__facda146:hover .base_1x8fxav_codefieldItemHoverEnabled__facda146{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_1x8fxav_bk7ap5v__facda146:focus-within .base_1x8fxav_codefieldItemFocused__facda146:not(.base_1x8fxav_codefieldItemError__facda146){background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeErrorAnimation__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146 .base_1x8fxav_i1i4mfds__facda146{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146:focus-within .base_1x8fxav_i1i4mfds__facda146{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldCodeError__facda146.base_1x8fxav_codefieldCodeErrorFade__facda146 .base_1x8fxav_i1i4mfds__facda146{-webkit-animation:base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemErrorAnimation__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards;}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146,.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146.base_1x8fxav_codefieldItemErrorFade__facda146,.base_1x8fxav_bk7ap5v__facda146.base_1x8fxav_bk7ap5v__facda146 .base_1x8fxav_codefieldItemError__facda146:focus-within.base_1x8fxav_codefieldItemErrorFade__facda146{-webkit-animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards,base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;animation:base_1x8fxav_shakingErrorBk7ap5v__facda146 0.3s forwards,base_1x8fxav_fadeErrorBk7ap5v__facda146 0.3s forwards;}@-webkit-keyframes base_1x8fxav_shakingErrorBk7ap5v__facda146{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_1x8fxav_shakingErrorBk7ap5v__facda146{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_1x8fxav_fadeErrorBk7ap5v__facda146{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_1x8fxav_fadeErrorBk7ap5v__facda146{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
13
13
 
14
14
  .base_1y2zhxc_byco6g2__ea65e94f{gap:var(--plasma-codefield-caption-gap);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c22lnt4__ea65e94f,.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c1if332c__ea65e94f{gap:var(--plasma-codefield-code-item-gap);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_i1i4mfds__ea65e94f{width:var(--plasma-codefield-item-width);height:var(--plasma-codefield-item-height);font-family:var(--plasma-codefield-font-family);font-size:var(--plasma-codefield-font-size);font-style:var(--plasma-codefield-font-style);font-weight:var(--plasma-codefield-font-weight);-webkit-letter-spacing:var(--plasma-codefield-letter-spacing);-moz-letter-spacing:var(--plasma-codefield-letter-spacing);-ms-letter-spacing:var(--plasma-codefield-letter-spacing);letter-spacing:var(--plasma-codefield-letter-spacing);line-height:var(--plasma-codefield-line-height);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_ilojy86__ea65e94f{height:var(--plasma-codefield-font-size);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_n1cshk1v__ea65e94f{font-size:var(--plasma-codefield-item-height);}.base_1y2zhxc_byco6g2__ea65e94f .base_1y2zhxc_c1gkm6yt__ea65e94f{font-family:var(--plasma-codefield-caption-font-family);font-size:var(--plasma-codefield-caption-font-style);font-style:var(--plasma-codefield-caption-font-size);font-weight:var(--plasma-codefield-caption-font-weight);-webkit-letter-spacing:var(--plasma-codefield-caption-letter-spacing);-moz-letter-spacing:var(--plasma-codefield-caption-letter-spacing);-ms-letter-spacing:var(--plasma-codefield-caption-letter-spacing);letter-spacing:var(--plasma-codefield-caption-letter-spacing);line-height:var(--plasma-codefield-caption-line-height);}
15
15
 
package/dist/css/es/components/CodeField/CodeField.js CHANGED
@@ -80,11 +80,19 @@ var codeFieldRoot = function codeFieldRoot(Root) {
80
80
  _useState8 = _slicedToArray(_useState7, 2),
81
81
  selectedIndex = _useState8[0],
82
82
  setSelectedIndex = _useState8[1];
83
- var itemRefs = useRef([]);
83
+ var _useState9 = useState(null),
84
+ _useState0 = _slicedToArray(_useState9, 2),
85
+ animatedItemErrorIndex = _useState0[0],
86
+ setAnimatedItemErrorIndex = _useState0[1];
87
+ var _useState1 = useState(0),
88
+ _useState10 = _slicedToArray(_useState1, 2),
89
+ activeErrorAnimations = _useState10[0],
90
+ setActiveErrorAnimations = _useState10[1];
84
91
  var nativeInputRef = useRef(null);
85
92
  var inputContainerRef = useRef(null);
86
93
  var captionRef = useRef(null);
87
94
  var onFullCodeEnterRef = useRef(onFullCodeEnter);
95
+ var activeErrorAnimationsRef = useRef(0);
88
96
  var inputForkRef = useForkRef(nativeInputRef, ref);
89
97
 
90
98
  /**
@@ -99,6 +107,15 @@ var codeFieldRoot = function codeFieldRoot(Root) {
99
107
  var parts = codeLength === 6 ? 2 : 1;
100
108
  var codeValue = code.join('');
101
109
  var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
110
+ var isErrorAnimationPlaying = activeErrorAnimations > 0;
111
+ var startErrorAnimation = function startErrorAnimation() {
112
+ activeErrorAnimationsRef.current += 1;
113
+ setActiveErrorAnimations(activeErrorAnimationsRef.current);
114
+ };
115
+ var finishErrorAnimation = function finishErrorAnimation() {
116
+ activeErrorAnimationsRef.current = Math.max(0, activeErrorAnimationsRef.current - 1);
117
+ setActiveErrorAnimations(activeErrorAnimationsRef.current);
118
+ };
102
119
  var codeSetter = function codeSetter(newCode) {
103
120
  var originalCode = newCode.join('').slice(0, codeLength);
104
121
  setInnerValue(getCodeValue(codeLength, originalCode));
@@ -125,9 +142,6 @@ var codeFieldRoot = function codeFieldRoot(Root) {
125
142
  var originalValue = typeof outerValue === 'string' ? controlledOriginalValue : innerOriginalValue;
126
143
  var clearErrorState = function clearErrorState() {
127
144
  var _captionRef$current, _inputContainerRef$cu;
128
- itemRefs.current.forEach(function (item) {
129
- item === null || item === void 0 || item.classList.remove(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
130
- });
131
145
  if (!isError) {
132
146
  return;
133
147
  }
@@ -172,7 +186,7 @@ var codeFieldRoot = function codeFieldRoot(Root) {
172
186
  };
173
187
  var handleChange = function handleChange(event) {
174
188
  var _event$currentTarget$;
175
- if (disabled) {
189
+ if (disabled || activeErrorAnimationsRef.current > 0) {
176
190
  return;
177
191
  }
178
192
  var rawValue = event.currentTarget.value.slice(0, codeLength);
@@ -192,17 +206,24 @@ var codeFieldRoot = function codeFieldRoot(Root) {
192
206
  itemErrorBehavior: itemErrorBehavior,
193
207
  index: invalidIndex,
194
208
  newCode: newCode,
195
- itemRefs: itemRefs,
196
209
  inputRef: nativeInputRef,
197
210
  setInnerValue: setInnerValue,
198
211
  setActiveIndex: setActiveIndex,
199
212
  setSelectedIndex: setSelectedIndex,
200
213
  codeSetter: codeSetter,
201
- onChange: onChange
214
+ onChange: onChange,
215
+ onAnimationStart: function onAnimationStart(index) {
216
+ startErrorAnimation();
217
+ setAnimatedItemErrorIndex(index);
218
+ },
219
+ onAnimationEnd: function onAnimationEnd() {
220
+ finishErrorAnimation();
221
+ setAnimatedItemErrorIndex(null);
222
+ }
202
223
  });
203
224
  };
204
225
  var handleKeyDown = function handleKeyDown(event) {
205
- if (!disabled && FORBIDDEN_KEYS.includes(event.key)) {
226
+ if (activeErrorAnimationsRef.current > 0 || !disabled && FORBIDDEN_KEYS.includes(event.key)) {
206
227
  event.preventDefault();
207
228
  }
208
229
  if (onKeyDown) {
@@ -215,6 +236,9 @@ var codeFieldRoot = function codeFieldRoot(Root) {
215
236
  return;
216
237
  }
217
238
  event.preventDefault();
239
+ if (activeErrorAnimationsRef.current > 0) {
240
+ return;
241
+ }
218
242
  var rawData = event.clipboardData.getData('text/plain');
219
243
  var pastedData = rawData.split('').filter(isSymbolAllowed).slice(0, codeLength);
220
244
  var selectionStart = (_event$currentTarget$2 = event.currentTarget.selectionStart) !== null && _event$currentTarget$2 !== void 0 ? _event$currentTarget$2 : 0;
@@ -233,10 +257,9 @@ var codeFieldRoot = function codeFieldRoot(Root) {
233
257
  };
234
258
 
235
259
  /**
236
- * Нормализуем внутреннее значение и refs, если количество ячеек динамически изменилось.
260
+ * Нормализуем внутреннее значение, если количество ячеек динамически изменилось.
237
261
  */
238
262
  useEffect(function () {
239
- itemRefs.current = itemRefs.current.slice(0, codeLength);
240
263
  setInnerValue(function (currentCode) {
241
264
  return getCodeValue(codeLength, currentCode.join(''));
242
265
  });
@@ -282,7 +305,9 @@ var codeFieldRoot = function codeFieldRoot(Root) {
282
305
  setInnerValue: setInnerValue,
283
306
  setActiveIndex: setActiveIndex,
284
307
  setSelectedIndex: setSelectedIndex,
285
- codeSetter: codeSetter
308
+ codeSetter: codeSetter,
309
+ onAnimationStart: startErrorAnimation,
310
+ onAnimationEnd: finishErrorAnimation
286
311
  });
287
312
  }
288
313
  }, [isError]);
@@ -304,12 +329,10 @@ var codeFieldRoot = function codeFieldRoot(Root) {
304
329
  }, _toConsumableArray(Array(codeLength / parts)).map(function (_item, i) {
305
330
  var inputCorrectIndex = i + codeLength / parts * partIndex;
306
331
  var itemValue = code[inputCorrectIndex] || '';
332
+ var isAnimatedItemError = animatedItemErrorIndex === inputCorrectIndex;
307
333
  return /*#__PURE__*/React__default.createElement(ItemInput, {
308
334
  key: inputCorrectIndex,
309
- ref: function ref(element) {
310
- itemRefs.current[inputCorrectIndex] = element;
311
- },
312
- className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.segmented, shape === 'segmented'), classes.itemFocused, activeIndex === inputCorrectIndex), classes.itemError, itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue)), classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length)),
335
+ className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.segmented, shape === 'segmented'), classes.itemFocused, activeIndex === inputCorrectIndex), classes.itemError, isAnimatedItemError || itemErrorBehavior === 'keep' && Boolean(itemValue) && !isSymbolAllowed(itemValue)), classes.itemErrorAnimation, isAnimatedItemError), classes.itemErrorFade, isAnimatedItemError && itemErrorBehavior === 'remove-symbol'), classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length)),
313
336
  "data-code-field-item": ""
314
337
  }, itemValue ? /*#__PURE__*/React__default.createElement(ItemValue, {
315
338
  className: cls(_defineProperty({}, classes.itemSelected, selectedIndex === inputCorrectIndex)),
@@ -340,6 +363,7 @@ var codeFieldRoot = function codeFieldRoot(Root) {
340
363
  form: form,
341
364
  required: required,
342
365
  disabled: disabled,
366
+ readOnly: isErrorAnimationPlaying,
343
367
  "aria-label": ariaLabel,
344
368
  "aria-describedby": ariaDescribedBy,
345
369
  "aria-labelledby": ariaLabelledBy,
package/dist/css/es/components/CodeField/utils/handleCodeError.js CHANGED
@@ -14,7 +14,9 @@ var handleCodeError = function handleCodeError(_ref) {
14
14
  setInnerValue = _ref.setInnerValue,
15
15
  setActiveIndex = _ref.setActiveIndex,
16
16
  setSelectedIndex = _ref.setSelectedIndex,
17
- codeSetter = _ref.codeSetter;
17
+ codeSetter = _ref.codeSetter,
18
+ onAnimationStart = _ref.onAnimationStart,
19
+ onAnimationEnd = _ref.onAnimationEnd;
18
20
  if (!inputContainerRef.current) {
19
21
  return;
20
22
  }
@@ -30,6 +32,7 @@ var handleCodeError = function handleCodeError(_ref) {
30
32
  };
31
33
  switch (codeErrorBehavior) {
32
34
  case 'keep':
35
+ onAnimationStart();
33
36
  inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation);
34
37
  (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.add(classes.captionError);
35
38
  setTimeout(function () {
@@ -39,6 +42,7 @@ var handleCodeError = function handleCodeError(_ref) {
39
42
  codeSetter(newCode);
40
43
  setInnerValue(currentCode);
41
44
  (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 || _inputContainerRef$cu.classList.remove(classes.codeErrorAnimation);
45
+ onAnimationEnd();
42
46
  setTimeout(function () {
43
47
  selectItem(codeLength - 1, codeLength);
44
48
  }, 0);
@@ -46,13 +50,17 @@ var handleCodeError = function handleCodeError(_ref) {
46
50
  break;
47
51
  case 'remove-code':
48
52
  default:
53
+ onAnimationStart();
49
54
  inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
50
55
  (_captionRef$current2 = captionRef.current) === null || _captionRef$current2 === void 0 || _captionRef$current2.classList.add(classes.captionError);
51
56
  setTimeout(function () {
52
57
  var _inputContainerRef$cu2;
53
58
  codeSetter(getCodeValue(codeLength, ''));
54
- selectItem(0, 0);
55
59
  (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 || _inputContainerRef$cu2.classList.remove(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
60
+ onAnimationEnd();
61
+ setTimeout(function () {
62
+ selectItem(0, 0);
63
+ }, 0);
56
64
  }, ANIMATION_TIMEOUT);
57
65
  }
58
66
  };